Ir al contenido principal

Que es HTML 5?

Posiblemente han escuchado hablar de HTML 5 y del tremendo cambio que trae a la hora de diseñar paginas de Internet. Pero para poder entender de que se trata este nuevo formato, primero debemos entender que es HTML.

HTML significa HyperText Markup Language, y, como su nombre lo indica, se trata de un 'lenguaje' de programacion. Mas espeficamente es el lenguaje que hablan los 'navegadores de Internet', como Firefox, Google Chrome o el Internet Explorer.

En su forma mas simple, html, es un conjunto de instrucciones escritas en un archivo de texto, usando una serie de comandos que el navegador de internet interpretara para luego poder 'dibujar y presentar' la pagina de internet tal cual la ves cuando, por ejemplo, visitas la pagina 'google.com'.

Mi primera pagina web!

En este ejemplo, vamos a 'construir' una simple pagina de Internet usando HTML.


Abran el Notepad y copien y peguen las siguientes lineas de codigo HTML.

<html>
<body>

<h2>Mi Primera Pagina de Internet!</h2>
<img border="0" src="http://farm7.static.flickr.com/6135/5917128900_26a9d4319c_b.jpg" alt="Mi Primera Pagina de Internet" width="304" height="228" />

</body>
</html>

Luego guarden el archivo con el nombre que ustedes deseen, pero asegurense de ponerle .html al final!
Esto es muy importante, ya que esta extension le indica a Windows que el archivo tiene que ser abierto con un Navegador de Internet.


Analizando el lenguage html

En el ejemplo anterior, vemos una serie de palabras entre los simbolos < >. Estas palabras se llaman 'tags' y son los elementos básicos a la hora de crear una pagina web. Estos tags le indican a tu navegador de Internet COMO tiene que 'dibujar' la pagina en la pantalla de tu computadora.

Por ejemplo, <h2> indica el 'titulo' y tamaño de letra de la pagina. El tag <img> se usa para 'cargar' una foto. "Alt" le indica a tu navegador que debe mostrar el texto indicado al poner el puntero sobre la foto.
Todo lo que esta contenido entre los dos tags <html> le indica al navegador de Internet que se trata de un documento html y que debe ser tratado y leido como tal. Los dos tags <body> contienen el 'cuerpo' de la pagina, es decir 'enlaces, fotos, texto, listas, etc.

En el ejemplo anterior, puedes cambiar los valores de todo lo que esta en rojo, guardar el archivo nuevamente con otro nombre y abrirlo luego con un doble click para ver los cambios!

Los tags de HTML son muchos y el tema es bastante complicado. La pagina de Internet W3Schools es un excelente lugar para aprender el funcionamiento del lenguaje HTML. Esta llena de ejemplos que podemos usar y modificar para ver los resultados de inmediato.


Si quieres tener una idea mas completa de lo complejo que pueden llegar a ser el lenguaje HTML usado en cualquier pagina, haz lo siguiente:

  1.  Abre cualquier pagina que te guste.
  2. Si usas Firefox, ve a Tools/Herramientas, luego a Web Developer y por ultimo haz click en Page Source. Si usas el Internet Explorer, ve a View/Ver y luego haz click en Source/Fuente
  3. Lo que veras a continuacion es el documento escrito en HTML que tu navegador lee cada vez que abres la pagina!


 HTML 5


HTML 5 es basicamente la mas reciente 'version' del lenguaje HTML. Sin embargo, es considerado como uno de los avanzes mas importantes realizados en los ultimos años en relacion a lenguajes de Markup ya que incorpora una serie de 'tags' o elementos nuevos de HTML que potencian y simplifican el diseño de paginas web al permitir la incorporacion de contenido multimedia directamente en el codigo fuente de la pagina, sin necesidad de recurrir a 'addons' o complementos externos como el 'flash player'.
Algunos de los 'tags' mas importantes de la version 5 del HTML son <video>, <audio>


La muerte del Flash Player?

Antes del HTML 5, cada vez que queriamos poner un video en una pagina debiamos recurrir a plugins o addons como el Flash Player, Quicktime, Silverlight, etc para poder mostrar un video en nuestra pagina. HTML simplifica tremendamente las cosas al incorporar un tag que se encarga precisamente de manipular video.

Es por eso que mucha gente piensa que Flash tiene los dias contados y que, cuando HTML se vuelva mas popular, usar Flash Player para mostrar un video en una pagina, sera totalmente innecesario.


Mi primera pagina HTML 5!


Abre el notepad y copia y pega las siguientes lineas de codigo:


<!DOCTYPE HTML>
<html>
<body>
<h2> Mira mama, sin Flash! <h2>
<video controls="controls" autoplay="autoplay">
  <source src="movie.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

Ahora guarda el archivo, nuevamente, agregando la extension .html al final y abrelo!
Uno de los tags mas importantes de HTML 5 es <!DOCTYPE HTML> y es lo que le indica al browser que la pagina debe ser 'renderizada' (dibujada) usando HTML 5

Dame mejor calidad de video!

Junto con la llegada de HTML, un nuevo formato de video llamado 'WebM' ha comenzado a ganar popularidad. Basicamente se trata de un sistema de compresion de datos aplicado exclusivamente a audio y video, que nos permite crear videos de alta calidad y resolucion y con un tamaño bastante pequeño.


Videos de YouTube sin Flash Player?

Aunque no lo creas, es posible! YouTube tambien tiene, por supuesto, su version HTML 5. Para usar YouTube sin necesidad de usar el Flash Player para ver los videos ve aqui:


http://www.youtube.com/html5


Ve hasta abajo y haz click en 'Join the html 5 trial'. A partir de ahora, si un video esta disponible en formato WebM, este sera cargado en lugar de la habitual version Flash. Cabe aclarar que dicha preferencia de YouTube estara guardada en una cookie en tu computadora, asi es que si por algun motivo borras tus cookies, deberas activar el Html 5 Trial nuevamente si quieres continuar usandolo!
Para determinar si un video esta en formato Flash o WebM, haz click con el boton derecho del raton en el video y observa la informacion del menu de contexto.

Comentarios

Entradas más populares de este blog

Codigos ASCII

ASCII (aski) significa American Standard Code for Information Interchange y se trata, a grandes rasgos, de un sistema de codificacion de caracteres. Esto es un sistema que le asigna a cada letra, numero, simbolo, etc un valor, usualmente numerico. Dicho valor es el que le indica a la computadora que caracter generar cuando presionas por ejemplo la tecla A.

Para escribir decenas de otros simbolos no presentes visualmente en los teclados, podemos usar la tecla ALT y el teclado numerico. Por ejemplo, para escribir la letra ñ en teclados americanos, debemos mantener la tecla ALT presionada y a la vez escribir 164 en el teclado numerico (el cual debe ser activado previamente, generalmente presionando la tecla de NumLock).

La siguiente es una lista con los codigos ASCII mas populares. Para usarla, presiona ALT y escribe el numero indicado usando el teclado numerico...
 ☺Smiley Blanco  ☻ Smiley Negro ♥ corazón Negro ♦ Diamante ♣ clavo (Clover / Puppyfeet) ♠ Spade • Negro puntos ◘  ○ círculo blanco ◙ c…

Aprobaciones de inicio de sesion para Facebook

Al igual que el sistema de Verificacion de doble paso de Google, Facebook tambien ofrece un sistema para iniciar sesion que aumenta radicalmente la seguridad de tu cuenta de Facebook. Basicamente se trata de recibir un codigo numerico unico al celular asociado con tu cuenta de Facebook e ingresar ese codigo para poder iniciar sesion en un dispositivo desconocido. Aunque coloques la contraseña correcta, si el sistema de 'aprobaciones de inicio de sesion' esta activado, no podras ingresar a tu cuenta de Facebook al menos que ingreses el codigo unico que sera enviado inmediatamente a tu celular.

Dicho codigo unico genera una cookie que Facebook usara para poder 'reconocer' tu computadora (o navegador) la proxima vez que quieras iniciar sesion desde ese mismo dispositivo, lo cual evitara que tengas que escribir un codigo nuevo cada vez que quieras iniciar sesion en Facebook.

Para activar el sistema de Aprobacion de inicio de sesion debes ir aqui:

https://www.facebook.com/s…

Diferencia entre Modo Suspendido (Sleep Mode) e Hibernacion (Hibernation Mode)

A la hora de poner la computadora a 'dormir', disponemos de 2 opciones basicas:

Sleep Mode (Modo Suspendido)Hibernate Mode ( Mode de Hibernacion)


Ambas opciones ponen a la computadora en modo de bajo consumo electrico, algo muy util si quieres ahorrar algo de dinero a fin de mes en tu boleta de la luz o conservar carga en la bateria de tu laptop. Sin embargo existen algunas diferencias muy marcadas en la forma que uno u otro sistema funciona. En este articulo vamos a explicarlas brevemente.



Sleep Mode. Mode Suspendido

Este modo es el mas comun y recomendado si vas a dejar de usar la PC por cortos periodos de tiempo. Cuando la computadora entra en Modo Suspendido, ya sea si lo activas manualmente desde el Menu de Inicio o si dejas la PC inactiva ( sin tocar su teclado o raton ) por un cierto periodo de tiempo, todos los programas que estas usando, ya sea tu navegador de internet y sus paginas abiertas, o cualquier programa que hayas abierto en ese momento, como Word, Paint, etc …