¿Cuántas formas hay para crear una página web?
Hola viajero web, quizá te has preguntado y has buscado ¿Cómo puedes hacer una página web? Y te has encontrado con tutoriales que te han dado vueltas y vueltas y no ves el final, no quiero ser uno mas del montón, para ello, a lo largo de este post te dejaré una serie de vídeos y artículos relacionados con los cuales podrás hacer una página web profesional desde cero y, además, tanga un buen diseño.
- Todos los vídeos los estaré subiendo a mi canal de YouTube el cual te agradecería si te suscribes, si deseo suscribirme al canal de EWebik.
- Y en esta página complementaré cada vídeo con definiciones y teoría para que comprendas al cien por ciento como diseñar un sitio web.
Espero que todos los cursos y post de mi página sean de tu agrado.
Tabla de contenido
- 1 ¿Cuántas formas hay para crear una página web?
- 2 Mi primera página web en HTML
- 3 Vídeo de Mi primera página web responsiva con Bootstrap
- 4 ¿Qué necesito para crear mi página web?
- 5 📌 1. Creando el HTML de nuestra página
- 6 📌 3. Creando el diseño de nuestra pagina web con CSS
- 7 Teoría y conceptos para diseñar una página web
- 8 ¿Qué es una página web?
- 9 ¿Qué es un sitio web?
- 10 Diferencia entre página web y sitio web
- 11 Tipos de páginas web
- 12 ¿Qué es una página web estática?
- 13 Ventajas de una página estática
- 14 ¿Qué es una página web dinámica?
- 15 Ventajas de una página web dinámica
- 16 Arquitectura de un sitio web
- 17 Dominio
- 18 Hosting
- 19 ¿Cómo levantar un servidor para una página web?
- 20 ¿Cómo instalar XAMPP local?
- 21 ¿Qué es Front end?
- 22 ¿Qué es HTML?
- 23 Estructura básica de un archivo HTML
- 24 Cómo funciona el CSS en una página web
- 25 ¿Qué significa que una página sea responsiva?
- 26 ¿Qué es Bootstrap?
- 27 Porque utilizar Bootstrap en una página web
- 28 Como agregar Bootstrap a una página web
- 29 Puedes utilizar gestores de Paquetes como NPM o YARN
- 30 Desventajas de utilizar Bootstrap
- 31 ¿Qué es Back end?
- 32 Crear Mi primera Página web con NodeJs
Mi primera página web en HTML
En este tutorial intentare explicarte cómo puedes crear una página web con HTML estática atractiva y con un diseño profesional, sin invertir en Plugin o plantillas de pago, además la desarrollaremos con un editor de código gratuito el cual es muy buena opción si comienzas en el arte de la programación.
Vídeo de Mi primera página web responsiva con Bootstrap
Aquí tienes el vídeo que resume todo este artículo y que tiene todos los pasos para poder crear tu primera página web, te aconsejo que leas el texto para comprender aun mejor el vídeo. ¿Qué aprenderás en este vídeo? Aquí te dejo los puntos más importantes:
- Un ejemplo de como estructurar tus proyectos
- Aprenderás a maquetar en HTML
- Dar un estilo profesional a tu página a través de hojas de estilos (Style Sheets)
- Creación de Banner animado que sirva de cabecera en tu página
- Como agregar las referencias CSS y JS a tu proyecto
- Descubrirás que agregar Bootstrap y JQuery a tu página es sumamente sencillo para hacer que tu página sea responsiva y se visualice en todos los dispositivos
- Modificar los estilos de Bootstrap para adecuarlo correctamente a tu página
- Podrás insertar un vídeo de YouTube en tu página de una manera simple
- Además, aprenderás como animar los elementos de tú página a través del scroll (Animate On Scroll Library)
Como puedes observar en esta clase aprenderás muchas cosas totalmente gratis así que no olvides suscribirte al canal de YouTube EWebik y activa la campanita para que no te pierdas nuestras próximas clases.
¿Qué necesito para crear mi página web?
Voy a crear una lista de lo que necesitaremos para crear nuestra página web y las URLs donde los puedes descargar.
- Bootstrap
- Visual Studio Code
- Instalar XAMPP no es del todo necesario pero para otros tutoriales lo necesitarás
- Repositorio
Y listo, con estos cuatro puntos vas a crear tu primera página web, ¿Estas sorprendido? Pues te voy a desilusionar, si tú eres un desarrollador esto te vendrá como anillo al dedo para comenzar tu viaje en el desarrollo web, sin embargo, si eres un emprendedor y te gustaría ahorrarte unos dólares desarrollando tu página tú mismo, tengo que decirte que ¡puede ser! Siempre y cuando inicies con una página estática y sigas cada paso en este tutorial.
📌 1. Creando el HTML de nuestra página
Aquí te dejo el código completo del archivo index.html que creamos en el vídeo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Diseño de páginas Web</title>
<link rel="stylesheet" href="ext/aos.css">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link rel="stylesheet" href="img/iconos/css/fontello.css">
<link rel="stylesheet" href="ext/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/keyframes.css">
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="ewk_navbar navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="https://ewebik.com.mx/">EWebik</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://ewebik.com.mx/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://ewebik.com.mx/">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://ewebik.com.mx/" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://ewebik.com.mx/">Action</a>
<a class="dropdown-item" href="https://ewebik.com.mx/">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://ewebik.com.mx/">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="https://ewebik.com.mx/" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<div class="ewk_cont_banner">
<div class="ewk_sobra">
<h1>EWebik</h1>
<p>Diseños elegantes y contemporaneos</p>
<hr />
<div class="ewk_cont_banner_link">
<a class="ewk_banner_link" href="">Proyectos</a>
<a class="ewk_banner_link_1" href="">Licitaciones</a>
<a class="ewk_banner_link_2" href="">Cotización</a>
</div>
</div>
</div>
</section>
<section>
<dvi class="container">
<div class="row ewk_cont_sec_1">
<div class="col-md-9">
<h2><b>EWebik</b></h2>
<p><i>La mejor opción para aprender diseño web</i></p>
<hr />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="ewk_cont_sec_1_link col-md-3 text-center">
<a data-aos="fade-up" href="#" class="btn btn-secondary btn-md">Visita nuestra página</a>
</div>
</div>
</dvi>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Presentación</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus deserunt, nobis quae eos
provident quidem. Quaerat expedita dignissimos perferendis, nihil quo distinctio eius
architecto reprehenderit maiores.</p>
<a href="#"><i class="icon-linkedin"></i></a>
<a href=""><i class="icon-twitter"></i></a>
<a target="_blank" href="https://www.youtube.com/channel/UCGLKAojrhnU3Xtoj6azpUsg"><i class="icon-youtube-play"></i></a>
<a href=""><i class="icon-facebook-squared"></i></a>
</div>
<div class="col-md-6">
<iframe data-aos="fade-down" width="100%" height="315" src="https://www.youtube.com/embed/JEGzNzkpzIU" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<section>
<div class="ewk_cont_banner_sec_3">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Título de la seccion</h2>
<p>Similique excepturi voluptates placeat ducimus delectus magnam tempore dolore dolorem
quisquam porro modi voluptatum eum saepe dolorum ratione officia sint eos minus</p>
<a class="btn btn-secondary btn-md" href="https://ewebik.com.mx/">Portafolio</a>
</div>
<div class="col-md-8 ewk_cont_img text-center">
<img data-aos="fade-right" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<hr />
<h2>Servicios</h2>
<p>Todo lo encuentras en EWebik</p>
<hr />
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<a href="index.html">
<img data-aos="fade-left" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>Diseño Web</h3>
<p>React JS / Node JS</p>
</a>
</div>
<div class="col-md-4">
<img data-aos="fade-up-right" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>Aplicaciones Móviles</h3>
<p>Xamarin / Android</p>
</div>
<div class="col-md-4">
<img data-aos="fade-up-left" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>Posicionamiento Web</h3>
<p>SEO / Optimización de código</p>
</div>
</div>
</div>
</section>
<footer>
<div class="ewk_cont_footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>EWebik</h2>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>
<div class="col-md-3">
<h2>Categorías</h2>
<a href="#">Inicio</a>
<a href="#">Conocenos</a>
<a href="#">Proyectos</a>
<a href="#">Escribenos</a>
</div>
<div class="col-md-3">
<h2>Recomendado</h2>
<a href="#">
<p>Aprende Diseño web en el 2019, te aseguro no te arrepnteras</p>
<p>Enero 2019</p>
</a>
<hr />
<a href="#">
<p>Visita mi sitio web y siguenos en redes sociales y sobre todo da like a este video</p>
<p>Enero 2019</p>
</a>
</div>
<div class="col-md-3 ewk_cont_img_footer">
<img data-aos="fade-down-right" src="img/arq5_1.jpg" class="img-fluid" alt="diseño arquitectonico">
<h3>EWebik</h3>
<p>Electrónica y Diseño Web</p>
</div>
</div>
</div>
</div>
</footer>
<script src="ext/bootstrap/js/jquery.js"></script>
<script src="ext/bootstrap/js/bootstrap.min.js"></script>
<script src="ext/aos.js"> </script>
<script src="js/index.js"></script>
</body>
</html>
📌 2. Creando el archivo JavaScript index.js
Recuerda que utilizamos librerías externas como Animate On Scroll Library que agregamos como referencia en nuestro HTML
/*********
Autor: EWebik
web: https://ewebik.com.mx
**********/
(function () {
AOS.init();
}());
📌 3. Creando el diseño de nuestra pagina web con CSS
Archivo style.css
/******
Autor: EWebik
web: https://ewebik.com.mx
archivo: style.css
*******/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cormorant Garamond', serif;
}
.ewk_navbar {
background-color: rgba(255, 255, 255, 0.7) !important;
}
.ewk_navbar div, .ewk_navbar ul{
background-color: transparent !important;
}
.ewk_cont_sec_1{
padding: 10%;
}
.ewk_cont_sec_1_link{
padding: 5%;
}
.ewk_cont_sec_1_link a{
width: 200px;
}
.ewk_cont_sec_1 hr{
border-top: 1px solid rgba(1, 1,1, 0.3);
}
.ewk_cont_footer{
background-color: rgba(1, 1, 1, 0.7);
padding: 10%;
color: #fff;
margin-top: 100px;
}
.ewk_cont_footer a{
color: #fff;
text-decoration: none;
display: block;
}
.ewk_cont_img_footer{
padding: 5%;
}
Archivo keyframes.css
@keyframes ewk_keyframes_aparecer_de_arriba {
from {
opacity: 0;
top: -150px;
}
to {
opacity: 1;
top: 0;
}
}
@-webkit-keyframes ewk_keyframes_aparecer_de_arriba {
from {
opacity: 0;
top: -150px;
}
to {
opacity: 1;
top: 0;
}
}
Archivo banner.css
.ewk_cont_banner{
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../img/arq1.jpg");
}
.ewk_sobra{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
padding: 20px;
width: 80%;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
margin: auto;
}
.ewk_sobra hr{
border-top: 1px solid #fff;
}
.ewk_sobra h1{
font-size: 8vw;
margin-bottom: 10px;
}
.ewk_sobra p{
font-size: 4vw;
margin-bottom: 10px;
}
.ewk_cont_banner_link{
margin: 15px;
position: relative;
}
.ewk_cont_banner_link a{
position: relative;
display: inline-block;
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 1px;
margin-bottom: 5px;
width: 150px;
}
.ewk_cont_banner_link a:hover{
background-color: #fff;
color: #111;
}
.ewk_banner_link{
opacity: 0;
animation: ewk_keyframes_aparecer_de_arriba 1s;
-webkit-animation: ewk_keyframes_aparecer_de_arriba 1s;
animation-fill-mode: forwards;
}
.ewk_banner_link_1{
opacity: 0;
animation: ewk_keyframes_aparecer_de_arriba 1s;
-webkit-animation: ewk_keyframes_aparecer_de_arriba 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
.ewk_banner_link_2{
opacity: 0;
animation: ewk_keyframes_aparecer_de_arriba 1s;
-webkit-animation: ewk_keyframes_aparecer_de_arriba 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.ewk_cont_banner_sec_3{
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../img/arq2.jpg");
position: relative;
padding: 10%;
margin-top: 200px;
margin-bottom: 100px;
}
.ewk_cont_banner_sec_3 .row{
background-color: rgba(1, 1, 1, 0.7);
color: #fff;
padding: 2%;
}
.ewk_cont_img{
padding: 5%;
}
📌 NOTA: Recuerda que solo he puesto aquí los archivos que desarrollamos, los cuales son los mas importantes, los archivos externos como Bootstrap están en el repositorio y en el vídeo te muestro como agregarlos, espero te sean de gran ayuda.
Teoría y conceptos para diseñar una página web
En esta sección te dejo un excelente complemento para este primer vídeo, vamos a comprender muchos conceptos y teoría que te ayudará a comprender en que consiste el diseño de paginas web. Si ya tienes conocimientos básicos o eres un desarrollador avanzado, puedes saltarte esta introducción de conceptos y ver los vídeos únicamente, aunque no pierdes nada con repasar un poco la teoría. Para iniciar veremos:
- ¿Qué es un página web?
- ¿Qué es un sitio web?
- Entre muchos conceptos que te servirán en los próximos episodios.
¿Qué es una página web?
Podemos definir a una página web como un archivo o documento electrónico que puede contener texto o contenido multimedia como vídeo, sonido, imágenes, etc., y puedes acceder a ella a través de un navegador web.
A pesar de que existen muchas maneras de crear una página, en escancia todas están hecha sobre un lenguaje de marcado conocido como HTML o XHTML y, le damos un diseño atractivo a través de hojas de estilos conocidas como CSS. En lo personal me gusta mucho Bootstrap o Tailwind css y en esta primera entrega nos centraremos en Bootstrap.
Ahora pasemos a revisar otro concepto de suma importancia en la creación de páginas web, a continuación te dejo una definición de sitio web y cual es la diferencia que existe con una pagina web.
¿Qué es un sitio web?
Un sitio web es un conjunto de páginas web que están organizadas a través de URL's y que siguen una estructura que ayuda a los usuarios a navegar entre ellas.
Crea que la definición anterior ha sido muy clara, no obstante, para eliminar cualquier duda revisemos que diferencia hay entre página y sitio web.
Diferencia entre página web y sitio web
Quizá aun no te ha quedado claro la diferencia entre una página web y un sitio web, no es tan complicado como parece, se puede decir que una página web es donde estas en este momento, accediste a través de la url "https://ewebik.com/pagina-web", la cual forma parte del sitio web ewebik.com, si ahora tu vas al navegador y escribes en el buscador site:ewebik.com, el buscador te regresará todas las páginas web que conforman el sitio web. En resumen
Un sitio web es la agrupación de una o mas páginas web.
Excelente, vamos avanzando muy bien, ahora toca ver los tipos de páginas que podemos encontrar, esto es importante ya que al crear tu sitio debes determinar cual usar y con ello elegir con que tecnología la programarás.
Tipos de páginas web
Podemos clasificar a una página web por su funcionamiento ya que podemos encontrar páginas web estáticas y paginas web dinámicas, y ¿Qué significa esto?
¿Qué es una página web estática?
Una página web estática es aquella que solo muestra su contenido que por lo regular es texto y no cuenta con funcionalidades que le permita al usuario interactuar con ella
Por ejemplo, un blog que solo es informativo, al cargar solo te muestra texto, quizá algunas imágenes y listo, la única acción que podrás hacer es dar clic en algún enlace para cambiar de página, por lo tanto, en una página web estática para realizar un cambio en su contenido, se requiere volver a cargar la página en sus totalidad.
Ventajas de una página estática
- Suelen ser ligeras y pesan muy poco.
- Su tiempo de carga suele ser bastante bueno, lo cual es un punto importante al momento de querer posicionarla en los buscadores como Google.
- Brindar una buena experiencia a los usuario, al ser rápidas.
- No requieren hosting o servidores muy potentes.
¿Qué es una página web dinámica?
Una página web dinámica es aquella página que carga su contenido y además cuenta con opciones para que los usuarios puedan interactuar con su contenido e incluso permite solicitar nuevo contenido sin la necesidad de recargar toda la página.
Una página web dinámica permite modificar ciertas partes de su contenido sin volver a recargar toda la página, esto se hace mediante tecnologías como AJAX, sockets, etc. Dichas tecnologías permiten solicitar datos nuevos que los usuarios requieren al interactuar con la página y comunicándose con el servidor donde esta alojada dicha página para descargar el nuevo contenido.
Ventajas de una página web dinámica
- Podemos actualizar ciertas zonas de la página sin la necesidad de recargar la página completamente.
- Cuentan con grandes funcionalidades y crean una gran experiencia de usuario al ser interactivas.
- Existe una gran cantidad de tecnologías que nos permiten desarrollar este tipo de páginas.
Un claro ejemplo de una página dinámica es Facebook, donde puedes leer o mandar mensajes sin que la página recargue en su totalidad.
Arquitectura de un sitio web
Bien ya conoces lo conceptos básicos que definen a una página web, ahora pasemos a temas un poco más técnicos, y separemos a una página web en 6 secciones para comenzar:
- Dominio
- Hosting
- Servidor web
- Seguridad
- Front end
- Back end
Una página comúnmente se diseña, por un lado la parte estética y por otro lado la lógica y, se establecen los puntos de seguridad que debe cumplir, quizá ahora mismo que estas leyendo este artículo no veas un link o post que complemente cada uno de los 6 puntos anteriores, no te preocupes, por favor suscríbete a mi boletín o al canal de YouTube para que te avise de cualquier actualización y nuevo contenido.
Dominio
Uno de los puntos vitales al momento de crear tu página, como recomendación elige un nombre corto, sencillo y fácil de recordar, claro todo depende del giro de tu negocio o marca. Te dejo este post donde te revelo todo respecto a los dominios.
Dominios virtuales, ¿Dónde comprar el dominio para mi página web?
No solo aprenderás qué son los dominios virtuales, si no que, conocerás algunos registradores donde ...
Hosting
Un hosting es un servidor o computadora que puedes alquilar en alguna empresa como Azure, Amazon o Digital Oceans, en realidad hay muchos proveedores, pero en particular he trabajado muy bien con estas tres opciones, por ejemplo, para una página como ewebik.com, puede perfectamente estar alojada en un hosting de 1 CPU y 1GB de RAM e irlo creciendo cuando se necesite.
Te dejo un cupón en Digital Oceans para que pruebes el servicio, este cupón te da 100USD por 60 días y si al final no te convence elimina todos los Droplets y listo. Quiero mi cupón en Digital Oceans.
¿Cómo levantar un servidor para una página web?
Para desarrollar y desplegar un sitio web tendrás que rentar un espacio en Internet que se llama Hosting el cual tendrá instalado un servidor de aplicaciones web para que tu pagina pueda ser accedida a través de Internet. Te dejo estos post que son básicos y que te ayudarán a comprender mejor algunas definiciones.
Por el momento no tocare el tema de contratar un Hosting, dominio y mas, ya que empezaremos poco a poco y estamos en la etapa de aprender a desarrollar una página web, así que para comenzar te dejo el siguiente vídeo con el cual podrás levantar un servidor de aplicaciones web Apache en tu misma computadora y puedas practicar y realizar la mayoría de los ejemplos que estaremos viendo.
¿Cómo instalar XAMPP local?
Con XAMPP podrás crear un servidor web en tu propia computadora y probar tus página web completamente gratis como si estuvieran publicadas en un Hosting en Internet, por favor mira el vídeo ya que es la base de los siguientes tutoriales.
¿Cómo Instalar XAMPP en Windows? Levantando un servidor Apache.
《 Instala XAMPP localmente 》 en tu computadora o servidor para realizar tus desarrollos de una forma...
¿Qué es un servidor web y qué características tiene?
Que no te confundan, aprende 《 ¿Qué son los servidores WEB? 》 🌐 ¿Cuáles son sus características? Y ...
¿Qué es Front end?
El Front end es la sección de una página web que se ejecuta del lado del cliente, es decir, es código que se ejecuta directamente en el navegador de los usuarios que visitan tu página y comúnmente es:
- HTML
- CSS
- JavaScript
❌ NOTA: Todo lo que hagas en tu página y se ejecute del lado del usuario es información publica que todo el mundo podrá ver y analizar, por lo tanto, si tienes un proceso, tarea, información o datos sensibles de tu página, como la conexión a base de datos, jamás deberías agregarla del lado del Front end.
El primer gran concepto y lenguaje que debes aprender si deseas iniciar en el diseño de sitios web, es comprender que es HTML, así que te dejo una definición muy sencilla.
¿Qué es HTML?
HTML es un lenguaje de marcado que nos permite modelar la estructura de una página web
El lenguaje HTML aparece en 1980 gracias al físico Tim Berners-Lee quien propone este sistema de hipertexto para compartir documentos a traces de HTTP (¿Qué significa HTTP?). La palabra HTML en español significa lenguaje de marcas de hipertexto y se puede interpretar diciendo que todo el contenido como párrafos, títulos, imágenes, etc., deberán estar entre dos etiquetas o marcas que permiten su identificación para posteriormente ser presentados en pantalla. Para efectos de este tutorial aprenderemos a utilizar HTML5 que fue liberado en el 2014.
Etiquetas HTML
Las etiquetas o TAGS de HTML por ejemplo body tienen la siguiente estructura:
<nombre_etiqueta>Contenido etiqueta</nombre_etiqueta>
<!-- La mayoría de las etiquetas en HTML vienen en pares una para abrir e inicializar el
contenido <nombre_etiqueta> y la de cierre </nombre_etiqueta> -->
Estilos y atributos del lenguaje de marcado HTML
Prácticamente todas las etiquetas de HTML tienen atributos que hacen que se comporten de diferente manera, es decir, a través de los atributos de las etiquetas podemos definir como queremos que se comporte o se visualice el contenido de cada etiqueta de allí nacen los estilos.
Los estilos nos permiten por ejemplo establecer el tipo de letra, su color, el fondo que tendrá el contenido, la ruta de una imagen, etc., por lo que si queremos darle vista a nuestro HTML necesitamos usar estilo y agregarlos mediante el atributo “style”, por ejemplo:
<p id="idParrafo" style="color:red;">Esto es un párrafo</p>
<!—Esto hace que el color de la letra sea de color rojo -->
<!-- Existe la etiqueta <style> y la podemos agregar entre la etiqueta <head>
para establecer nuestros estilos. -->
Estructura básica de un archivo HTML
Un archivo HTML está compuesto en su forma básica por la siguiente estructura:
<!DOCTYPE html><!--Etiqueta que define al documento como HTML5
y ayuda a los navegadores a mostrar correctamente la página -->
<html>
<!--Etiqueta o elemento raíz del documento-->
<head>
<title>Título de la página</title>
<!--Título de la página-->
<style></style>
</head>
<body>
<!--Cuerpo, parte visible de la página-->
<p>Pagina de inicio</p>
<script></script>
</body>
</html>
Hoy en día el lenguaje HTML ha evolucionado y en nuestros días el código HTML debe ser escrito de una manera limpia, es decir, una buena práctica es que los estilos y código JavaScript (no te preocupes si no sabes que es JavaScript) vayan en archivos separados y sean invocados desde el archivo HTML, tal y como lo hicimos en el vídeo de esta clase.
Cómo funciona el CSS en una página web
Bien ya que conocemos la estructura básica del HTML ahora pasemos a ver que es CSS (Cascading Style Sheets)
CSS son hojas de estilos en cascada y es donde le damos diseño al código HTML modificando sus atributos, dimensiones, etc. y es aquí donde nos ayudara Bootstrap.
Pero antes de pasar con Bootstrap expliquemos un poco cómo funcionan los estilos, realmente es muy fácil, solo debemos agregar entre la etiqueta <head> la siguiente línea de código.
<link rel="stylesheet" type="text/css" href="stilos.css ">Con lo cual podrás invocar cada elemento del archivo stilos.css que afectara al HTML con las instrucciones que pongamos en él. Excelente, vamos avanzando muy bien, ahora pasemos haber un concepto muy importante que permitirá que tus páginas se visualicen correctamente en cualquier dispositivo.
¿Qué significa que una página sea responsiva?
Cuando hablamos de Front end, el responsive es un tema que hoy en día debes tener en cuenta si o si, y aun más si tu página esta orientada a posicionar en buscadores como Google.
Una página responsive o responsiva, significa que se visualice correctamente en todos los dispositivos, celulares, laptop, PC.
Hay muchas maneras de hacer una página resposiva, por ejemplo:
- Podemos hacerlo a través de media queries directamente en CSS.
- O utilizando alguna biblioteca o librería que haga este trabajo por nosotros.
Para fines de esta clase utilizaremos Bootstrap, el cual nos ayuda a crear páginas muy rapidamente.
¿Qué es Bootstrap?
Es una biblioteca multiplataforma desarrollada por Twitter y es un conjunto de código abierto que proporciona plantillas de diseño para mejorar el estilo y vista de usuario de un sitio web.
Porque utilizar Bootstrap en una página web
Bootstrap nos proporciona una serie de estilos que mejoran ciertos elementos de nuestra página web, lo que nos ahorra mucho tiempo en crear estilos para botones, etiquetas y otros elementos, esto es bueno porque nos podemos centrar en darle personalidad y autenticidad a nuestra página sin tener que estar tocando mucho código CSS.
Como agregar Bootstrap a una página web
Es muy fácil agregar los archivos de Bootstrap a nuestro proyecto, según la documentación que proporciona Bootstrap lo podemos hacer por varias formas, por ejemplo:
BootstrapCDN
Agrega los link CDN directamente en el head de tu html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
Puedes utilizar gestores de Paquetes como NPM o YARN
- npm install bootstrap
- yarn add bootstrap
También puedes utilizar gemas en Ruby
- gem 'bootstrap', '~> 4.3.1'
- etc.
Descargar los archivos de compilados
Solo dirígete al sitio oficial de Bootstrap y descarga los archivos de distribución agrégalos a la carpeta del proyecto. Para más información mira el vídeo de esta clase para ver un ejemplo practico de como agregar Bootstrap a un proyecto web.
Desventajas de utilizar Bootstrap
Sencillamente es que al ser un elemento creado por un tercero si no haces un respaldo del recurso su creador puede modificarlo o discontinuar la biblioteca, sin embargo, Bootstrap es una biblioteca utilizada por miles de desarrolladores lo que lo hace improbable al menos en un buen tiempo que esta librería quede obsoleta.
Creo que en tema de Front end te he dado información muy valiosa que te ayuda a comprender todo lo que hicimos en el vídeo, ahora toca hablar de los otros aspectos importantes de una página web, como es el Back end y te dejare los link para la segunda parte de este curso.
¿Qué es Back end?
El Back end es la sección de tu página que se ejecuta del lado del servidor y solo tu y tus desarrolladores tienen acceso.
Esto quiere decir que el back end es la lógica que hace funcionar tu página y que da soporte al Front end para que tus usuarios puedan interactuar y realizar acciones dentro de tu página web.
En el Back end es donde debes manipular los datos sensibles y donde debes desarrollar los algoritmos que desees que no sean publico para nadie, algunos ejemplos de lenguajes de programación para Backend son:
- NodeJS
- PHP
- C#
- Python
- JAVA
Y en el primer ejemplo que te dejo para crear una página web desde cero, utilizaremos Node JS para agregar esta lógica del lado del servidor y dar mas funcionalidades a nuestra página estática que desarrollamos anteriormente.
Crear Mi primera Página web con NodeJs
A lo largo de este post hemos creado una página web estática de una sola URL, y le hemos dado estilos y comportamiento responsive a través de Bootstrap, y ya que estamos hablando de Back end, quiero enseñarte como migrar tu página web estática a NodeJS para comenzar a transformarla a una página dinámica.
Si quieres dar el siguiente paso en tu estudio de diseño web, no te puedes perder este magnifico vídeo donde aprenderás a crear una página web con Node JS desde cero, aprende a instalar NodeJs y ejecutar comandos con el gestor de paquetes NPM, no lo pienses mas y ve el vídeo y comparte.
Crea tu primera Página Web con NodeJS desde cero
Hoy aprenderás de una manera práctica 😁 como desarrollar una página web en NodeJs desde cero, a tra...
PHP
Es otro lenguaje de Backend que te permite crear páginas dinámicas de una forma muy sencilla, por ejemplo en este curso que te dejo a continuación aprenderás todo sobre PHP y MySQL y al final podrás crear un dashboard con gráficas y todo te recomiendo que los veas.
[ewk-getPaginasPorCategoria="3"]
Excelente, hemos llegado al final de este post, por favor no te desesperes si no encontraste mas tutoriales o no he terminado el curso, ayúdame mejor a compartir y suscríbete al boletín y al canal de YouTube para que pueda subir mas tutoriales como estos.
Recuerda que esto lo hago para ayudarte a tener un curso gratuito y actualizado, nos vemos en el siguiente post.
Juan Carlos G
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como Node JS, PHP, C# y Bases de datos, si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.
📌 Suscríbete a EWebik 🤘
