Podcast: Descargar (24.6MB)
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.
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.
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.
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.
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.
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 <frame>, <font> y <center> 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.
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.
Si quieres profundizar más puedes ver el artículo que tenemos publicado en nuestra web.
Recurso del día
Sublime Text es un excepcional editor de código. Dispone de muchas funcionalidades para poder trabajar de una manera eficiente y rápida. Se pueden añadir plugins de soporte para diferentes lenguajes como PHP, C#, Java, HTML, XML, CSS, etc… que se adaptan a la sintaxis de cada uno de ellos. Tiene un Package Manager o repositorio en el propio programa y a través de una consola podemos instalar los paquetes que nos interesen. Sirve también como editor de textos del tipo Notepad de Windows ya que tiene muchas funcionalidades para seleccionar, marcar y buscar textos así como la edición. Sin duda alguna es una buena opción para desarrollar con HTML ya que es una herramienta gratuíta.
Pues hasta aquí el programa de hoy ya sabéis si os gusta el contenido y los mensajeros no dudéis en valorarnos en las diferentes plataformas de podcast iVoox, iTunes y Spreaker.
