Comenzamos con el desarrollo web, en el capítulo 27 vamos a ver como comenzar un desarrollo web con HTML5. Este capítulo está dentro de la serie de capítulos donde pretendemos hacer un proyecto del Internet de las Cosas con Arduino. Hemos creado una campaña en Twitter, #SacaLaPlacaDeLaCaja, nos gustaría que nos enviaras tus fotos y comentarios de proyectos con Arduino.

Ya sabéis, para contactar con nosotros lo podéis hacer a través del formulario de contacto y si queréis estar al día podéis suscribiros a la lista de distribución. También nos podéis seguir en Twitter.

En este capítulo hacemos una introducción al HTML (HiperText Makage Language) Lenguaje de Marcas de Hipertexto. Ya tuvimos un capítulo dedicado en donde hablamos del cliente y el servidor web. Si queremos saber qué es HTML lo primero que tenemos que hacer es ir a un navegador ya sea Google Chrome, Firefox y el menos recomendado Internet Explorer y sobre la página web que queremos ver el código y encima del fondo, pulsar botón derecho y habrá alguna opción donde ponga mostrar el código. En Chrome, el navegador recomendado desde Programarfacil, está la opción de Ver código fuente de la página.

ver-codigo-fuente-html

Con esto podremos ver el código fuente de cualquier página. Recordar que el único código que podemos ver a través de nuestro navegador es HTML, CSS y JavaScript. Cualquier otro código del Backend será interpretado por el servidor y traducido a estos lenguajes del Frontend. Una página básica de HTML sería la siguiente.




Título de la página, aparece en la pestaña del navegador.



Esto es un título

Esto es un párrafo. Aquí escribimos información.
Esto es un enlace a nuestra web.




Si copias el código anterior, lo pegas en el Notepad de Windows y lo guardas con extensión .html o .htm podrás abrirlo en cualquier navegador y verás como interpreta el código.

En Chrome tenemos una segunda opción para ver el código fuente y además lo podemos modificar en el momento. Solo tenemos que ponernos encima de un elemento como un botón, una imagen o un enlace y pulsar el botón derecho de nuestro ratón. Dentro de las opciones seleccionamos Inspeccionar elemento.

inspeccionar-elemento-html

Una vez pulsada esta opción se nos abre una pantalla donde podemos ver el código HTML y el CSS asociado. Como ya se ha comentado podemos cambiar el código y probar como quedaría. Podéis hacer la prueba por ejemplo con Google, nosotros lo hemos hecho, hemos puesto nuestro logo en la página inicial de su buscador y éste es el resultado.



Dentro del HTML tenemos muchas etiquetas. Ya hemos visto algunas en la página web simple que os hemos mostrado, pero existen infinidad de ellas para usos diversos. Las más importantes son:


Informa del tipo de documento, en este caso HTML.

Engloba todo el código de nuestra página. Es la etiqueta principal.

Indica que esto es la cabecera. Dentro de estas etiquetas se meterá información no visual salvo el título de la página. Aquí irían todos los enlaces a nuestros archivos CSS y Javascript aunque es recomendable cargar estos archivos al final de nuestro archivo HTML. Esto es debido a la optimización de la carga de nuestra web.

Título de la página. Es lo que aparece en la pestaña del navegador.

Quizás la etiqueta más importante que tiene HTML. Dentro de esta etiqueta vamos a meter todos los elementos visuales de nuestra web.
Con estas etiquetas y alguna más somos capaces de hacer un documento HTML perfectamente operativo. Pero no solo de etiquetas vive la web, cada etiqueta tiene asociado unos atributos o propiedades que dan funcionalidad a cada una de ellas por ejemplo href. Si queremos poner un enlace lo haríamos de la siguiente manera.

Esto es un enlace a nuestra web.
El href nos está indicando donde apunta el enlace, en este caso a programarfacil.com, pero existen multitud de propiedades para cada etiqueta con una funcionalidad distinta como por ejemplo Id, src, class, etc...

Además de las propiedades o atributos, algunas etiquetas tienen eventos. Los eventos permiten a JavaScript ejecutar una determinada acción cuando se lanza el evento. Supongamos que tenemos un botón () y queremos que cuando se pulse el botón se cambie el color de un párrafo. Para hacer esto tenemos que insertar algo de código de JavaScript que está fuera de este capítulo pero resulta interesante verlo para que veáis su funcionalidad.





Este texto cambia de color cuando se pulsa un botón.
Color rojo
Color verde
Color azul

function cambiaColortexto(color) {
document.getElementById("demo").style.color = color;
}




En el código anterior hemos hecho uso del atributo Id del elemento para asignar un identificador único en el documento. Luego hemos creado tres botones cada uno de ellos con el evento onclick que llama a una función JavaScript (cambiaColorTexto). Esta función JavaScript recibe un parámetro, color, que será el color que queremos asignar al texto de nuestro párrafo. Cada botón manda como parámetro un color red (rojo), green (verde) y blue (azul). Cada vez que pulsemos uno, cambiará el color del texto de nuestro párrafo dependiendo del botón que hayamos pulsado y el color que tenga asignado. Como podéis ver esto se puede complicar todo lo que queramos y todavía no hemos metido nada de código del Backend......

Existen frameworks de JavaScript que hacen el desarrollo de aplicaciones web con HTML y JavaScript algo muy sencillo. De todo esto hablaremos en los siguientes capítulos, después de ver las hojas de estilos CSS, pero para que los vayáis conociendo son jQuery y Angular.js.

Si queréis investigar más sobre etiquetas en HTML la mejor referencia que hay en Internet es w3schools, donde encontrarás todas las etiquetas de HTML y sus atributos con muchos ejemplos. Sin duda alguna una referencia básica para programar con HTML.

Hasta ahora os hemos enseñado como empezar con el HTML pero no hemos hablado del entorno de desarrollo (IDE). Para crear una página web solo nos hace falta un editor de textos como el Notepad. Simplemente con eso podemos crear nuestra página web, pero hay herramientas más potentes que son gratuítas y nos facilitan la programación en entorno web. Os dejamos a continuación tres herramientas que son muy interesantes.

Notepad++
Visual Studio Code
UltraEdit
Sublime Text
Antes de comenzar a ver las la última versión de HTML (HTML5) es importante conocer la organización o consorcio que se encarga de mantener el estándar. Por este motivo existe la W3C. Gracias a ellos se pueden ver las webs de igual manera en todos los navegadores o por lo menos se intenta. Hay que recordar que todos los navegadores que hay en el mercado deben, no están obligados, cumplir el estándar HTML que dicta esta organización. Algunos como Internet Explorer, hasta la versión 5 han hecho lo que les daba la gana y no solo no cumplían el estándar, si no que incluso se inventaban sus propias etiquetas. Es inviable para un programador desarrollar webs para cada navegador. Hace unos años esto ocurría con IE y Netscape. Existía una guerra entre estos dos gigantes para ver quien se llevaba el mercado de los navegadores y los mayores perjudicados fueron los usuarios. En la actualidad esto está más estandarizado y aunque existen todavía diferencias entre ellos, son las mínimas. Incluso IE empezó a cumplir dichos estándar con la versión 9. En W3C Validator puedes validar tu sitio web para comprobar si cumple con el estándar HTML5.

Con la llegada de HTML5 algunas de las etiquetas que se usaban en HTML4 fueron eliminadas del estándar. Esto no quiere decir que los navegadores han dejado de mostrarlas, las siguen mostrando sin ningún problema pero todas aquellas webs que no cumplan el estándar de HTML5 serán penalizadas de alguna manera. Se han eliminado etiquetas que sobre todo estaban en desuso como , y debido a que estos elementos ya pueden ser modificados por las hojas de estilos CSS. Lo más importante en este cambio ha sido la incorporación de multitud de etiquetas y atributos. Entre todas ellas vamos a destacar unas cuantas.


No confundir con la etiqueta que aún se mantiene en HTML5. Esta etiqueta tiene un contenido semántico y describe lo que significa tanto para los navegadores como para los desarrolladores.

Igual que la cabecera pero para los pies de página o de documento.

Define un conjunto de enlaces de navegación. Realmente no hay diferencia de poner nav o no ponerlo en un conjunto de enlaces a simple vista pero, es muy importante situar todos los enlaces importantes o principales de nuestro web entre estas etiquetas.

Nos permite renderizar elementos 2D como líneas o figuras y modelos en 3D a través de JavaScript.

Con esta etiqueta podemos incrustar dentro de nuestra web archivos de audio.

Al igual que el audio pero para vídeo.
A modo de ejemplo os vamos a enseñar como podemos utilizar la etiqueta dentro de una página web.











Como veis en el ejemplo hemos incrustado un vídeo de una manera muy sencilla. Como os hemos explicado antes si copias el ejemplo en el Notepad y lo guardas con extensión .html o .htm podrás ver el resultado en tu navegador abriendo el documento. Esta etiqueta es la utilizada en la actualidad por Youtube para mostrar sus videos, al igual que Vimeo. El uso de Adobe Flash ha caído debido a que es una tecnología poco amigable con los buscadores. El contenido Flash no se puede indexar por los motores de búsqueda.

W3C ha recogido todas las características de la web moderna y las han convertido en el estándar HTML5 para que los desarrolladores puedan trabajar de una manera más sencilla y los usuarios tengan una experiencia de usuario más óptima.

Recurso del día

Sublime Text