Lección 1: Introducción
Toda página web, por bonita o viva que nos parezca, se estructura con 3 elementos esenciales: el lenguaje de marcado (HTML), hojas de estilos (CSS) y scripts (JavaScript). Desde la red social que visitas a diario, pasando por el webmail que utilizas para consultar los mensajes o por el portal donde compras los billetes de avión. Si quieres alcanzar el título de Diseñador Web debes dominar como un ninja cada lenguaje. ¿Te animas a introducirte en el maravilloso mundo del desarrollo Web? Si es así solo te puedo recibir con un: bienvenido.
El objetivo de este curso de Diseño Web adaptable orientado al multidispositivo no es enseñarte todos los rincones por muy oscuros que resulten, sino formarte para que maquetes sitios modernos compatibles con cualquier dispositivo (smartphones, tablets, portátiles y escritorio) usando las herramientas más profesionales de la industria. Siempre será más importante la calidad que la cantidad, la compatibilidad al futuro y el orden a la rapidez.
¿Qué ocurre cuando quiero entrar en una página web?
Veamos que pasa desde que escribimos la dirección del sitio, que queremos visitar, hasta vemos el resultado final. Sin que lo veas, hay una comunicación constante de peticiones y respuestas; una negociación casi instantánea.
Página web simple
Es un buen momento para ver por ti mismo que es realmente una página web.
Abre el bloc de notas y crea un archivo nuevo llamado hola.html
. A continuación copia el siguiente contenido.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Texto de la pestaña</title>
</head>
<body>
Mi primera web
</body>
</html>
Salva el archivo y cierra el bloc de notas.
Para terminar busca el archivo desde tu escritorio y pulsa doble clic sobre hola.html
. Automáticamente se abrirá tu navegador por defecto mostrando la siguiente apariencia.
¡Felicidades!, has creado tu primera página web.
Diferencia entre HTML, CSS y JavaScript
Antes de entrar en materia debe quedar muy claro para que se utiliza cada lenguaje.
Según la RAE, lenguaje puede ser definido como “Conjunto de signos y reglas que permite la comunicación con una computadora.”. No confundirse con lenguaje de programación: “Conjunto de instrucciones codificadas que una computadora interpreta y ejecuta directamente”. HTML es un lenguaje marcado que define una estructura pero no alberga ninguna lógica, mientras que CSS y JavaScript son lenguajes de programación. ¡Has leído bien! CSS es un lenguaje de programación con todas sus propiedades como variables, bucles y condicionales. Más adelante argumentaré esta afirmación con referencias.
HTML
Para que entiendas que es cada elemento usaré una metáfora cercana a tu rutina diaria: Imaginemos un Robot asesino que viene el futuro, el esqueleto es lo que mantiene cada parte unida y en orden. Eso mismo sería el HTML en una web.
Para acostumbrarte a su sintaxis puedes ver un pequeño código en HTML de ejemplo donde se puede apreciar etiquetas que envuelven a otras.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Texto de la pestaña</title>
</head>
<body>
Mi primera web
</body>
</html>
CSS
Las hojas de estilos, o el CSS, sería la parte visual del Robot: la piel, el color, pelo… Elementos decorativos para agradar al ojo humano.
Se indica la etiqueta que debe aplicarse y entre llaves ({}) las propiedades.
body {
background-color: red;
font-size: 2rem;
}
JavaScript
Este lenguaje de programación es quien le otorga vida. Sencillamente le explica como caminar, en que momento sacar la escopeta, cual es su objetivo… sin él sería una estatua muy cara con funcionalidad de pisapapeles.
document.querySelector('body').textContent = "bang!!!";
alert('bang!');
Que la sencillez del ejemplo no te confunda. Es un lenguaje complejo y en constante evolución. Incluso existe un profesional que se dedica en exclusiva a manipularlo y poseé nombre propio: frontend.
Como funciona internet
Antes de explicar los secretos del desarrollo web, debemos conocer el terreno que vamos a pisar. O al menos tener unos conocimientos mínimos para saber por donde buscar cuando encontremos problemas.
- Conexión a internet: Necesitas un puente entre tu equipo e internet. Las compañías de telefonía nos simplifican la tarea conectándonos a la red siendo ellas el primer punto de entrada. Por su parte conlleva un gasto humano en instalaciones, mantenimiento y constante evolución tecnológica; haciendo que paguemos una cuota mensual por usar sus servicios.
- TCP: Protocolo de Control de Transmisión (o Transmission Control Protocol), es el protocolo encargado de establecer una conexión entre 2 anfitriones y garantizando el envío de datos evitando su perdida y vigilando que sean recibidos en el mismo orden.
- IP: Protocolo de internet (Internet Protocol), es un número para identificar dispositivos en una red. Las máquinas no han sido bautizadas por nadie, pero se les regala un número aleatorio cada vez que se conectan como si fuera la matrícula de coche. Es necesario para comunicar equipos en la inmensa red que es internet. Como curiosidad te informo que IPv4 (por ejemplo 183.23.53.128) contiene 4.294.967.296 de posibilidades (256 elevado a 4), mientras que IPv6 (por ejemplo fd23:ea7e:3591:c608:fd3a:8e79:3b82:390b) aumenta a 340 sextillones (3 x 10 elevando a 40) de combinaciones.
- DNS: sistema de nombres de dominios (Domain Name System) es el encargado de traducir nombres a direcciones IP, haciendo que sea más humano navegar por la red. Por ejemplo, la página de Firefox tiene la dirección IP 63.245.208.212 (puedes visitarla escribiendo estos número en tu barra de navegación). ¿Te imaginas recordar siempre estos números para ir hasta la página? Por ello mismo se inventó unos alias, o atajos, los cuales son conocidos popularmente como Dominios. Ir a firefox.com es equivalente a teclear su IP. A lo largo del mundo se distribuyen diferentes servidores los cuales se sincronizan entre sí para que puedas recordar esas direcciones que tanto sueles visitar sin que apenas tengas que recordar nada.
- HTTP: Protocolo de transferencia de hipertexto (Hypertext Transferí Protocol) es el idioma que utilizan los diferentes dispositivos en internet para comunicarse. Como puede ser la conversación que puede existir entre tu navegador la web que visitas: códigos de respuesta (¿te suena el error 404?), métodos de petición (GET, POST…) y cabeceras.
Cuando tu navegador quiere ver la página de Firefox envía este texto.
GET / HTTP/1.1
Host: firefox.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: es,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
DNT: 1
Upgrade-Insecure-Requests: 1
Connection: keep-alive
Pragma: no-cache
Y el navegador recibe de respuesta otra información junto al código HTML.
HTTP/2.0 301 Moved Permanently
server: Apache/2.4.6 (CentOS)
x-backend-server: redirect1.webapp.mdc1.mozilla.com
cache-control: max-age=300
content-type: text/html; charset=iso-8859-1
date: Sat, 21 Sep 2019 08:34:08 GMT
location: https://www.mozilla.org/firefox/new/?redirect_source=firefox-com
accept-ranges: bytes
x-cache-info: caching
content-length: 272
X-Firefox-Spdy: h2
Aquí iría todo el código HTML del servidor
- Hosting: Si quieres que tu web sea visitada, objetivo final de cualquier sitio, vas a necesitar un equipo que siempre esté encendido esperado que un navegador le pida la web (por medio de HTTP). ¿La colocamos en casa? ¿Y si se va la luz? ¿Cual será la factura a final de mes? Por ello existen empresas que te ofrecen un alojamiento. Alquilamos una habitación, o una carpeta, para copiar nuestro código HTML. Ellos se encargan del mantenimiento, pagar la luz y siempre disponer de la mejor conexión a internet. Además nos complementan con otros servicios igual de útiles como cuenta de correo, certificados de seguidad (SSL) y autoinstalaciones de CMSs (como WordPress).
Donde nos encontramos
El Diseño Web ha vivido una constante evolución que aún en la actualidad continua imparable. Los cambios más agresivos han estado relacionados en las técnicas para maquetar los sitios ya que no han parado de nacer nuevos dispositivos y formatos. ¿Quién le iba a decir a Tim Berners-Lee, creador de HTML, que sus páginas debería adaptarse a un formato de bolsillo con nuestros Smartphones o que iban a reproducir vídeos?
He aquí los momentos históricos más importantes que debes conocer.
- 1991: Primera Web, en Blanco y negro con formato académico.
- 1993: Inserción de Tablas e imágenes. Empiezan las primeras maquetaciones.
- 1995: Nace JavaScript para evitar las limitaciones gracias a Netscape (actual Mozilla Fundation). Sale a la luz la primera versión de PHP, el inicio de los generadores de HTML por parte de una máquina (Inicios del Backend).
- 1996: Se establece el estándar CSS para dar estilos. Una pequeña empresa, FutureWare, desarrolla un formato de animación llamado Flash.
- 2004: Posibilidad de crear Grids simples (maquetación 2.0).
- 2011: Primera versión de Bootstrap Framework.
- 2012: Responsive Web Design.
- 2014: Flex, Grid moderno y multimedia (maquetación 3.0).
- 2019: Progressive Web App (PWA).
- 2022: Subgrid (maquetación 3.1).
Herramientas de trabajo
Para este curso necesitarás instalar en tu equipo una serie de herramientas. Todas serán Libres o gratuitas.
- Editor HTML: Una solución rápida puede ser Sublime Text, aunque si lo prefieres también puedes usar cualquier otro que esté preparado para trabajar con archivos HTML: Webstorm, VSCode, Emacs… Puedes consultar el siguiente artículo con los mejores editores para el diseño web.
- Navegador Web: Te recomiendo Firefox Developer Editor por lo completo de sus herramientas para el desarrollo web. Aunque te recomendaría probar tus sitios web en los 3 motores HTML más populares.
- Blink con un 75% de uso: Chrome, Edge o Chromium.
- Webkit con un 21% de uso: Safari, Otter o Epiphany.
- Quantum con un 4% de uso: Firefox.
- Marcadores: Ten a mano los siguientes enlaces:
- Todas las explicaciones y ejemplos de uso sobre todas las etiquetas HTML o estilos en CSS, lo puedes encontrar en la web de Mozilla Developer.
- Comprobar la compatibilidad de cada etiqueta con los diferentes navegadores, dispones de Can I Use.
- Leer una descripción de cada etiqueta puedes consultar HTML Living Starndard.
- Editor de imágenes: como puede ser Photoshop, Gimp, Affinity Photo… para optimizar las imágenes.
- Lápiz y papel: Vas a necesitar tomar muchos apuntes. También puedes usar un bolígrafo o pluma de ganso.
Si has llegado hasta aquí sin lagrimones que recorran tus mejillas a raíz de amplios bostezos, ¡te felicito! ¿Empezamos a maquetar? Pasa a la siguiente lección.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios