Talented minds - Mentes talentosas
Abril 30, 2015 - Yésica Ramirez

Aquí les comparto como es que aprendí HTML5, se sabe que HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript. Dichos lenguajes dependen uno del otro y se presenta como uno solo en la especificación de HTML5.

HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. para esto primeramente me era necesario y obligatorio aprender los lenguajes de programación HTML, CSS y JavaScript que son imprescindibles para entender y aprender HTML5.

En un principio pensé que sería difícil aprender HTML5 , aún así me atreví y lo primero que hice fue repasar HTML luego CSS y finalmente JavaScript claro que me tomó un tiempo para ello pero la verdad diría que no fue en vano, me sirvió de mucho porque ahora entiendo mejor cada uno de los mencionados lenguajes desde sus elementos hasta sus funcionalidades, aparte de eso me atrevo a decir que gracias al repaso logré entender y aprender HTML5.

Ahora les comparto una breve definición de los tres lenguajes HTML, CSS y JavaScript lo que hasta ahora aprendí de cada uno de ellos:

Tabla de Contenidos

  • Acerca de HTML
  • Acerca de CSS
  • Acerca de JavaScript
  • ¿Qué es HTML5?
  • HTML en HTML5
  • CSS en HTML5
  • JavaScript en HTML5
    • Nuevos selectores y eventos de JavaScript
    • APIs de javaScript
  • Lo que se puede hacer con HTML5
    • ¿Es difícil aprender HTML5?

Acerca de HTML

HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas.
HTML se encarga específicamente de la estructura de un documento, la misma que provee los elementos necesarios para ubicar contenido estático o dinámico a la vez es una plataforma básica para aplicaciones web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.

Acerca de CSS

CSS es un lenguaje de hojas de estilos que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc. Muy aparte de ello CSS es el encargado de controlar el aspecto y/o la presentación de los documentos de HTML.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML o HTML5 para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, título, texto destacado, tablas, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

Acerca de JavaScript

Javascript es un lenguaje de programación interpretado usado para múltiples propósitos, especialmente para crear páginas web dinámicas, JavaScript funciona especialmente del lado del cliente por lo cual no requiere de compilación.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

Ahora que ya dimos una breve definición de los tres lenguajes que están sumamente involucrados en HTML5, daré a conocer lo que entiendo de HTML5.

¿Qué es HTML5?

HTML5 es la quinta versión del lenguaje de marcado de etiquetas el cual fue desarrollado con la intención de simplificar, especificar y organizar el código. Para lograr este propósito, nuevas etiquetas y atributos fueron agregados y HTML fue completamente integrado a CSS y Javascript. Estas incorporaciones y mejoras de versiones previas están relacionadas no sólo con nuevos elementos sino también con cómo usamos los ya existentes.
Por tal razón HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas: HTML, CSS y Javascript.
HTML es el encargado de estructurar el contenido, CSS presenta esa estructura y su contenido en la pantalla y Javascript permite que el usuario interactúe respondiendo a eventos de forma dinámica.
Más allá de esta integración, la estructura sigue siendo parte esencial de un documento. La misma provee los elementos necesarios para ubicar contenido estático o dinámico, y es también una plataforma básica para aplicaciones. Con la variedad de dispositivos para acceder a Internet y la diversidad de interfaces disponibles para interactuar con la web, un aspecto básico como la estructura se vuelve parte vital del documento. Ahora la estructura debe proveer forma, organización y flexibilidad, y debe ser tan fuerte como los fundamentos de un edificio.

HTML en HTML5

En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito. La especificación también incluye algunos elementos con la única tarea de proveer estilos.
Esta es una lista de los que consideramos más relevantes: <header>, <footer>, <nav>, <main>, <hgroup>, <aside>, <section>, y la etiqueta <article>. Cada una cumple una función en específica como por ejemplo la etiqueta <header> que tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…

Estructura de una página en HTML5
Estructura de una página en HTML5. Fuente: Global2

CSS en HTML5

En HTML5 la responsabilidad por la presentación de la estructura en pantalla está más que nunca en manos de CSS.
Incorporaciones y mejoras se han hecho en la última versión de CSS para proveer mejores formas de organizar documentos y trabajar con sus elementos.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo
referencia a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas.
Con respecto al Selector de atributo, ahora podemos utilizar otros atributos además de id y class para encontrar elementos en el documento y asignar estilos. Con la construcción palabraclave[atributo=valor], podemos referenciar un elemento que tiene un atributo particular con un valor específico. Por ejemplo, p[name=”texto”] referenciará cada elemento <p> con un atributo llamado name y el valor ”texto”.

En CSS3 se tiene nuevas propiedades como:

  • border-radius, propiedad que genera esquinas redondeadas para la caja formada por el elemento.
  • box-shadow, ésta propiedad crea sombras para la caja formada por el elemento.
  • text-shadow, Esta propiedad es similar a box-shadow pero específica para textos @font-face, Esta regla nos permite cargar y usar cualquier fuente que necesitemos. Así como éstas existen muchas más propiedades de CSS3.

JavaScript en HTML5

Javascript fue innovando gracias a la adición de nuevas funciones y métodos nativos.
Una de las innovaciones que también ayudó a cambiar el modo en que vemos Javascript fue el desarrollo de nuevos motores de interpretación, creados para acelerar el procesamiento de código. La clave de los motores más exitosos fue transformar el código Javascript en código máquina para lograr velocidades de ejecución similares a aquellas encontradas en aplicaciones de escritorio.

Nuevos selectores y eventos de JavaScript

Me pareció interesante los de los nuevos métodos de selectores de javaScript:

  • getElementsByClassName, este selector nos permite encontrar elementos en el documento por medio del valor de su atributo class. Es una adición a los ya conocidos getElementsByTagName y getElementById.
  • querySelector(), este método usa selectores CSS para referenciar elementos en el documento, puede ser combinado con otros para construir referencias más específicas. Retorna solo el primer elemento encontrado.
  • querySelectorAll(), este método es similar a querySelector() pero retorna todos los elementos que concuerdan con los selectores especificados.
  • addEventListener(), este método es usado para agregar una escucha para un evento.
  • removeEventListener(), este método es usado para remover una escucha para un evento.

APIs de javaScript

HTML5 introduce varias APIs para proveer acceso a poderosas librerías desde simple código Javascript:
Canvas, API gráfica que provee una básica pero poderosa superficie de dibujo.La posibilidad de generar e imprimir gráficos en pantalla, crear animaciones o manipular imágenes y videos abre las puertas para lo que nos podamos imaginar.
Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como lo haríamos comúnmente en aplicaciones de escritorio. Ahora, con unas pocas líneas de código, podemos hacer que un elemento esté disponible para ser arrastrado y soltado dentro de otro elemento en la pantalla. Estos elementos pueden incluir no solo gráficos sino además textos, enlaces, archivos o datos en general.
También tenemos a Geolocation, Storage, Offline, file, entre muchas más.

Lo que se puede hacer con HTML5

Hay una serie de nuevas etiquetas en el lenguaje de marcas que se centran principalmente en el dibujo, la animación-multimedia para HTML5.
Lo que particularmente me llamó la atención de HTML5 es que se pueden hacer un montón de cosas desde la creación de reproductor de audio, video hasta la creación de videojuegos.
Por ejemplo en mi caso creé un reproductor de video muy simple la verdad es que quedé muy sorprendida ya que con la etiqueta <video> que tiene HTML5 pude hacerlo desde la creación de la caja, los botones, etc. con los estilos de CSS y la funcionalidad de JavaScript al final obtuve un sencillo reproductor de vídeo, la verdad no me pareció tan complicado.

Ahora con todo lo que aprendí, puedo responder a la duda que tuve a un principio cuando empecé a aprender HTML5.

¿Es difícil aprender HTML5?

La respuesta es no, porque la forma de trabajar es la misma que con las anteriores versiones, el uso de las etiquetas y atributos es similar, y muchas de las etiquetas se mantienen. Eso sí, hay que adaptarse. Para aprovechar al máximo HTML5, se debe manejar tanto HTML, CSS y JavaScript. Ya que si se controla bien estos lenguajes adaptarse a ellos resultará muy sencillo.

Referencias

Comments (1)

Cual es la base mas simple de marca que usa html5 para saber que es una página web y no un simple texo.

Añadir nuevo comentario