27. Desarrollo web con HTML5

La entrada 27. Desarrollo web con HTML5 aparece primero en Programarfacil. 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. 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