Lección 1: Introducción

HTML

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 pasando 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é vamos a aprender en este curso?

  • HTML: Lenguaje de marcadores.
  • CSS: Hojas de estilos.
  • Maquetación (incluyendo Responsive Design): Estructuración de un sitio.
  • Framework CSS (Bootstrap): Herramienta para acelerar el desarrollo.
  • Preprocesador CSS (SASS): Aumentar las capacidades de las hojas de estilos.
  • Gestor CMS (WordPress): Crear sitios dinámicos sin necesidad de programar.
  • Gestionar un proyecto con Trello: Flujos de trabajo dentro del equipo.
  • Guardar tu código en Github: Versionar el código como copia de seguridad y trabajar con otros compañeros.
  • Crear un presupuesto: Técnicas para calcular el precio ecuánime de un posible trabajo.
  • Publicar una página web: Contratar un hosting o dominio para a continuación subir nuestro sitio web.

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.

Hola mundo

¡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.

Metáfora de HTML

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.

Metáfora de CSS

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.

Metáfora de Javascript

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: Front-End.

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?

Tim Berners-Lee

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.
  • 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.
  • 2011: Primera versión de Bootstrap Framework.
  • 2012: Responsive Web Design.
  • 2014: Flex, Grid moderno y multimedia.
  • 2019: Progressive Web App (PWA).

Herramientas de trabajo

Para este curso necesitarás instalar en tu equipo una serie de herramientas. Todas serán Libres o gratuitas.

  • VSCode como editor de texto enriquecido. Si lo prefieres también puedes usar cualquier otro de esta lista.
  • 2 navegadores: Chrome y Firefox.
  • Prepros para compilar SASS y autorefrescas nuestros sitios.
  • Una cuenta en Figma cuando nos sea necesario realizar Wireframes.
  • Una cuenta en Trello para organizar nuestro trabajo.
  • Una cuenta en Github para almacenar nuestro código.
  • Editor de imágenes, como puede ser Photoshop, Gimp, Affinity Photo… para optimizar las imágenes.
  • Cliente FTP, como por puede ser Cyberduck.
  • Lapiz y papel. Vas a necesitar tomar muchos apuntes.

Materiales de ayuda

Si quieres complementar la materia te será de ayuda la Chuleta HTML5 de José Román Hernández (Manz para los amigos) que además tiene un excelente curso de HTML, o el curso oficial de Introducción a HTML por parte de Mozilla. Si buscas un buen libro y no tienes miedo del inglés HTML & CSS: Design and Build Websites por Duckett Jon es la mejor opción.

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.