Papá Digital con Academia Desafío Latam

¡Bienvenidos y Bienvenidas!

Les damos la bienvenida a una nueva actividad de la academia da talentos digitales Desafío Latam , en esta oportunidad vamos a celebrar el día de la persona más importante en nuestra vida, mi papá (Sólo por hoy no le digan que es su mamá).

Les deseamos un feliz día a todos los padres, en toda la diversidad que pueda existir (Abuelos, tíos, padrastros, apoderados, madres-padres)

El objetivo, es utilizar esta tarde, para compartir una nueva experiencia, divertirnos y aprender a hacer una página web.

Todos los pasos importantes que necesitas realizar se encuentran en esta guía, la revisaremos en conjunto y haremos las actividades. De esta forma aprenderemos en la práctica a construir una página web simple.

Si no tienes ningún conocimiento previo, no te preocupes, te guiaremos en el proceso.

Trataremos de ir explicando cada término utilizado para que tengas un contexto de lo que estamos haciendo, y a tu disposición estarán los mentores para ayudarte cuando lo necesites.

¿Qué se necesita para este taller?

Para el evento solo necesitas que tu computador tenga instalado, un navegador y un editor de texto y de tu parte muchas ganas de participar y aprender.

Como navegador puedes ocupar alguno de los siguiente:

• Firefox
• Safari
• Chrome
• Opera
• Edge

Como editor de texto te recomendamos:

• Atom.
• Sublime.

Con el editor de texto instalado pasemos a la siguiente sección

¿Qué es una página web?

Si buscamos en Google, posiblemente encontremos desde respuestas muy complejas a que la respuesta esta en nuestro corazón, así que definiremos de forma muy simple algunos términos.

WebPage (página web): Es un documento que puede ser visto en la pantalla a través de un navegador como Firefox, Google Chrome, Internet Explorer. Solo es un documento.

Website (sitio Web): Es una colección de páginas(documentos), agrupadas y conectadas, generalmente de un mismo tema o tópico.

Web Server (servidor Web): Es un computador que guarda los archivos de los sitios web.

CSS(Cascading Stylesheets): Significa hojas de estilo en cascada y es un lenguaje para definir estilos a las etiquetas HTML. CSS también puede definir como los elementos pueden ser mostrados.

JS (JavaScript): es un lenguaje de programación que permite modificar dinámicamente elementos de HTMLL y CSS y de esta forma agregar componentes y comportamientos nuevos a la página web así como agregar diversos tipos de animaciones e interactuar con información de otros sitios web.

Creando nuestra primera página web:

Vamos a crear un proyecto totalmente desde cero, sigue los pasos y si tienes dudas, acércate a algún mentor, guía de la actividad, o aquella persona que te llamo la atención, estamos acá para ayudarte.

Primer paso :

Vamos a crear una carpeta nueva en el Escritorio. Le puedes llamar como tu quieras, como ejemplo "proyecto web".

Segundo paso:

Luego abrimos la carpeta "proyecto web" en Atom (tú editor de texto).

• Puede ser arrastrando la carpeta hacia el editor de texto
• O abriéndola desde el editor de texto.

Tercer paso:

Ahora crearemos un archivo nuevo llamado index.html ( debemos presionar sobre la carpeta del proyecto el botón secundario y utilizar la opción "New File".

Luego:

Llamaremos a nuestro primer archivo

index.html

Presionamos enter y el archivo quedó guardado como index.html

Cuarto Paso:

Ahora escribiremos, en nuestro archivo:

¡Feliz Día Papá!

Luego guardamos el archivo, para hacerlo puedes ir a la opción File / save, pero te recomiendo que utilices el atajo del teclado.

Ctrl + s (Windows, Linux) o cmd + s (mac).

Quinto paso

Ahora podemos abrir este archivo con nuestro navegador, para lograrlo iremos a la carpeta donde está guardado y podemos arrastrarlo con el mouse dentro del navegador.

Al abrirlo en el navegador te debería aparecer algo como esto:

¡¡Felicidades!! Ya estás escribiendo tú primera página web

Recapitulemos

Fueron solo 5 pasos, mucho más fácil que hacer un desayuno rico para los padres en su día, ¿cierto?.

pd: Este comentario fue realizado sin el objetivo de generar presión en los participantes que tienen un padre que se esfuerza todo el año por ell@s y que lo único que espera es un buen desayuno en su día. wink

Respondamos algunas preguntas.

¿Por qué llamar al archivo de inicio como index?

Porque es una convención, se subentiende que es el archivo índice que inicia una página web.

¿Por qué la extensión del archivo es .html?

El que sea .html dice que es un archivo que se interpretará como HTML, es decir el navegador abrirá y leerá su contenido, En la siguiente sección aprenderemos más sobre HTML.

Ahora podemos crear una página web para honrar nuestros padres.

¿Qué es HTML?

HTML significa "HyperText Markup Language" - en español, Lenguaje de Marcas de HyperTexto.

HyperText significa que es un tipo de texto que soporta hipervínculos entre páginas.

Marcado significa que hemos tomado un documento y lo marca con código para decirte cómo interpretar la página (en este caso, un navegador).

HTML es un lenguaje de marcas, cada una comenzando con < y terminando con >. Estas etiquetas definen propiedades, la importancia y el significado semántico del contenido que envuelven.

Entonces una página web es un archivo que contiene un conjunto de marcas ó etiquetas y el navegador lee (interpreta) estas marcas y con esa información muestra las páginas web.

Trabajemos.

La idea es que este proyecto lo trabajen en conjunto con su padre. Vamos a construir un sitios con las fotos más vergonzosas mejores recuerdos de sus padres.

Aprovechemos de crear una oda a la persona que tenemos a nuestro lado, una página con su descripciones y gustos.

¿Qué es la Estructura HTML?

Un archivo HTML para poder ser interpretado correctamente deber tener una estructura. Esta estructura básica consiste en una cabeza (head) y un cuerpo (body), la cabeza contiene toda la información que es para el navegador, el cuerpo de la página contiene toda la información que es para el usuario. Dentro de las etiquetas HTML se encuentra todo el contenido de la página, y dentro de ellas están los dos bloques previamente mencionados. La estructura de una página en HTML es la siguiente:

<!DOCTYPE html><html>
  <head>
    <title></title>
  </head>
  <body>
    <!-- Aquí va el contenido de la página web -->
  </body>
</html>

El doctype (o tipo de documento) es la primera etiqueta que leeremos y le indica al navegador como debe interpretar el resto del documento. En el ejemplo veremos que el doctype especificado es de HTML5, el cuál es el estándar de actual.

La etiqueta <html> especifica que desde ese punto en adelante todo lo que venga deberá ser interpretado como HTML.

En HTML la etiqueta <head> Contendrá información variada, desde dónde encontrar las hojas de estilo o los iconos, hasta cuál es el título del sitio o sencillamente cómo debe manejar la página en el caso de que tenga que adaptarse a distintos tamaños de pantalla.

Creando nuestra página

Trabajaremos en la cabeza (Head)

Primero trabajaremos ingresando información que nuestra página tiene que indicarle al navegador para poder funcionar, trabajaremos en el head.

Estructura

Le asignaremos un estructura a nuestro index.html. 1- En nuestro archivo index.html, borra el mensaje que habíamos creado.

2- Escribe en la primera línea html y presiona enter.

Gracias a las cualidades de nuestro editor de texto, al presionar enter luego de escribirlo, nos autocompleta la estructura base del archivo.

Ahora ya tenemos la estructura de nuestra página.

¡No olvides guardar la página!, para ello utiliza, Ctrl + s(Windows, Linux) o cmd + s(Mac) , Atom borrará el punto azul en el nombre de nuestro archivo cuando esta guardado.

El título de la página

Ahora vamos a añadir un título a la página, para ello vamos a rellenar información en el head de nuestro archivo index.html.

Este título lo veremos en el navegador, posiblemente en la pestaña(tab) o barra superior.

Para hacerlo, escribe entre las marcas <title> y </title> el título que deseas ponerle a tu página.

Ponle título a tu página , ingresando el nombre de tú compañer@. Esto para que no lo olvides!!

En mi caso dejaré el título Mi primera página web

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>
  <body>

  </body>
</html>

Si guardamos, y recargamos el navegador, el resultado será el siguiente:

Cabe destacar que Los bookmarks ocupan el título de la página al guardarla, es decir al guardar la página en favoritos, tendrá este nombre.

El título tiene mucho valor en el SEO(search engine optimization) de un sitio web, esto quiere decir que los títulos son importantes para posicionar una página en un buscador.

Eliminando caracteres extraños

Como recuerdan, nuestro primer mensaje tenía carácteres extraños donde se deberían mostrar tildes o letras Ñ. Esto se arregla con la etiqueta <meta charset="utf-8">. Esta indica que la codificación de la página muestre estos carácteres.

También podemos ver que hay algo nuevo que no habíamos visto en otras etiquetas, en primer lugar la marca no se cierra, esto ocurre por una regla simple, si la etiqueta no tiene contenido, no se cierra, y para pasarle valores adicionales se ocupan atributos y valores, en este caso charset sería el atributo y utf-8 el valor.

Trabajando en el Body

Etiquetas Básicas:

Una etiqueta en HTML es un elemento que define como se comporta y muestra el contenido que alberga, vamos a utilizar algunas etiquetas básicas del lenguaje para darle sentido a nuestra página.

Todo lo que veremos desde ahora se debe escribir dentro de body (hasta que se indique lo contrario), por ende dentro de las etiquetas <body> </body>

Titulares y Subtitulares:

Una página web también tiene titulares y subtitulares, al igual que un periódico, la marca para los titulares es <h> más un número del 1 al 6. Siendo <h1> para el titular principal o con mayor importancia y <h6> para el subtítulo del subtítulo del subtítulo del subtítulo del subtítulo del título.

Por ejemplo escribamos en nuestro archivo index.html:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>
  <body>
    <h1>Titúlo 1</h1>
    <h2>Titúlo 2</h2>
    <h3>Titúlo 3</h3>
    <h6>Titúlo 6</h6>
  </body>
</html>

Guardemos los cambios, refrescamos el navegador y se debería ver algo como esto:

Se puede ver que el titular <h6> es muy pequeño, incluso menor que otros elementos que veremos a continuación. Ahora vamos a añadir el título de muestra página, así que eliminemos los titulares que ingresamos y escribamos lo siguiente.

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mi primera página web</title>
  </head>
  <body>
    <h1>M