elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  HTML 5 para principiantes. Usalo ahora, es fácil!
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: HTML 5 para principiantes. Usalo ahora, es fácil!  (Leído 8,665 veces)
N4X

Desconectado Desconectado

Mensajes: 74



Ver Perfil WWW
HTML 5 para principiantes. Usalo ahora, es fácil!
« en: 25 Mayo 2010, 15:28 pm »

Traducción y adaptación de: HTML 5 for Beginners. Use it now, its easy!

 Hay un montón de artículos sobre HTML5, especialmente desde que llegó  Google Wave (porque es la primera app reconocida en ese lenguaje, pero  toda la información que necesitas para poder empezar a usarlo ahora  mismo es algo más complicado de encontrar. En este artículo  vamos a simplificar un poco las cosas.
  
 
 
  
    Estoy seguro de que ya lo sabeis, Internet Explorer no soporta HTML5.  Sorpresa, sorpresa!. Así que lo primero que aprenderemos a hacer será:  
 Hackear IE usando javascript

 
 
 Hay un buen sitio llamado HTML5Doctor que nos da la solución  perfecta. Se trata de un script en javascript que fuerza a IE a 'ver'  los siguientes tags de HTML5:


 
Código:
<article>, <aside>, <audio>, <bb>,  <canvas>, <datagrid>, <datalist>,
<details>,  <dialog>, <eventsource>, <figure>, <footer>,  <header>, <hgroup>,
<mark>, <menu>,  <meter>, <nav>, <output>, progress>,  <section>, <time>,
and last but not least <video>.
Se puede descargar desde aquí
 Obviamente usar javascript no es la mejor forma de fijar el problema,  ya que si lo desactivamos la página dejará de funcionar. Lo único que  podemos hacer es asegurarnos que con JS desactivado la página funcionará  correctamente.
 HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos  dos navegadores usan Gecko para renderizar las páginas. Este problema es  más difícil de parchear, pero afortunadamente esos dos navegadores  tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar  esas versiones, HTML5doctor explica como parchearlos.
 Ahora los navegadores más reconocidos del mercado reconocerán  nuestros códigos (IE, Safari, Chrome, Firefox, Opera)
 Empezando a usar HTML5

 
Uno de los principales beneficios de HTML5 es que podemos deshacernos  en gran parte del código duplicado. No hay que seguir definiendo todo  por una id o una clase porque los elementos por defecto ya están  construidos.
 Entre otros elementos, para tus cabeceras puedes usar <header>,  para la navegación <nav>, para el pié, adivina..., <foot>.  También, con el tag <section> puedes dividir tu contenido usando  <article>. Con esos tags podemos lograr que los navegadores capten  la relevancia del contenido de una forma más simple, eso nos ayudará  con el SEO y, por supuesto, significa menos tiempo codeando. De todas  formas podemos seguir usando <div id="header"> pero las nuevas  etiquetas tienen un mejor y más simple uso
 Hay otros dos grandes avances en HTML5 con el que se hará la vida más  fácil a los desarrolladores. La primera es:
 El tag <video>

 
 
 Para usar el tag <video> tenemos que hacerlo así:
 
Código:
<video src="/video.ogv" >
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>
La línea entre <video> y </video> es para aquellos  navegadores que no usen HTML5.
 Un problema con este tag es que Apple decidió no dar soporte al  formato abierto OGG en Safari. Así que para dar soporte a todos los  navegadores tendremos que poner 2 sources
 
Código:
<video width=320 height=240 controls>
<source src="/video.ogv" type="video/ogg">
<source src="/video.mp4"; type="video/mp4";>
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>
El segundo avance es:
 Validación de formularios

 
 
 Desafortunadamente la mayoría de navegadores aún no dan soporte. De  echo, estoy bastante seguro que Opera es el único que da soporte de  momento. De todas formas he decidido incluirlo porque creo que será una  característica brillante...
 Con HTML5 seremos capaces de validar la información de un input  simplemente indicandole que tipo de dato esperamos.
 
Código:
<input type="email" required>
<input type="date">
<input type="url">

 También podemos usar el autofocus, de esta forma:
 
Código:
<input type="email" required autofocus>

 Que simple es!


En línea

Kasi

Desconectado Desconectado

Mensajes: 76



Ver Perfil
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #1 en: 25 Mayo 2010, 16:37 pm »

Mmm la verdad es que no pinta nada mal, habrá que empezar a probar cosillas con HTML5 :D

Gracias por el aporte!


En línea

[D4N93R]
Wiki

Desconectado Desconectado

Mensajes: 1.646


My software never has bugs. Its just features!


Ver Perfil WWW
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #2 en: 25 Mayo 2010, 16:59 pm »

Otra cosa buena es que no hace falta, para valores verdaderos colocar el true, como en tu ejemplo:
Código:
<input type="email" required>
, esto hace que el código quede más legible.

Y bueno, ahora si todo sigue así, el estándar será mp4 :(

Esperamos ahora más sobre el tema!
En línea

Mr. Crowley


Desconectado Desconectado

Mensajes: 343


Costa Rica


Ver Perfil WWW
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #3 en: 5 Junio 2010, 00:49 am »

Interesante  ::)
En línea

Mi blog personal: www.calirojas.com
jdc


Desconectado Desconectado

Mensajes: 3.406


Ver Perfil WWW
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #4 en: 5 Junio 2010, 03:40 am »

si que hay inputs interesantes :D como type="range" muy bueno, aqui encontre una lista para aportar con el mini tuto

<input type="search"> para cajas de búsqueda.
<input type="number"> para adicionar o restar números mediante botones.
<input type="range"> para seleccionar un valor entre dos valores predeterminados.
<input type="color"> seleccionar un color.
<input type="tel"> números telefónicos.
<input type="url"> direcciones web.
<input type="email"> direcciones de email.
<input type="date"> para seleccionar un día en un calendario.
<input type="month"> para meses.
<input type="week"> para semanas.
<input type="time"> para fechas.
<input type="datetime"> para una fecha exacta, absoluta y tiempo.
<input type="datetime-local"> para fechas locales y frecuencia.

Saludos y gracias, muy bueno

EDITO: Encontre otro mas, placehover que hace la marca de agua similar a la de google

ejemplo:

<form>
  <input placeholder="Buscar en elhacker.net">
  <input type="submit" value="Buscar">
</form>

Lamentablemente lo probe con opera y no funciona, solo funciono con Chrome :¬¬

Aqui algo interesante que encontre tambien.

Cuando utilizan la etiqueta <article> hablan de un contenido especifico osea:

<article>
    Este es un post donde se habla de html5
</article>

Ahora si necesitamos poner contenido relacionado, podemos anidar "article" pòr ejemplo

<article>
    Este es un post donde se habla de html5
       <article>html5 aun no esta en funcionamiento</article>
       <article>Internet explorer aun no soporta html5</article>
</article>

Si se fijan todo tiene relacion con el articulo pero separamos lo mas importante de las observaciones (por decirlo de algun modo :xD)

« Última modificación: 5 Junio 2010, 04:03 am por j24 » En línea

raul338


Desconectado Desconectado

Mensajes: 2.633


La sonrisa es la mejor forma de afrontar las cosas


Ver Perfil WWW
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #5 en: 5 Junio 2010, 07:15 am »

Muy Buen tuto!!! :D

HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos  dos navegadores usan Gecko para renderizar las páginas. Este problema es  más difícil de parchear, pero afortunadamente esos dos navegadores  tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar  esas versiones, HTML5doctor explica como parchearlos.

WTF! Se sigue usando la version 2??? :| (el otro no digo nada porque no lo conozco jeje)
En línea

Cygog

Desconectado Desconectado

Mensajes: 44


"Pedes in terra ad sidera visus"


Ver Perfil
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #6 en: 5 Junio 2010, 09:58 am »

por lo visto html5 tiene una conexion en cuanto a las etiquetas en xml.. <xD> para crear cualquiera que se ocurra xD Luego em lo mirare de mas cerca.
En línea

Pazador

Desconectado Desconectado

Mensajes: 39



Ver Perfil
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #7 en: 5 Junio 2010, 22:24 pm »

Interesate las validaciones de los campos del form  :D
pero prefiero seguir usando js y php para validar el campo email, me eh vuelto casi perfeccionista al validar un mail pero el html5 da como valido el correo .@-.-  :xD
pense que seria facil de descargar un video en las etiquetas html5 pero youtube hace magia para que no se pueda lograr  :¬¬ http://www.youtube.com/html5
En línea

La vida es un juego
Mario Bross
Littl3

Desconectado Desconectado

Mensajes: 239


Tarde o temprano aparece el hombre


Ver Perfil
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #8 en: 6 Junio 2010, 23:30 pm »

Sin duda validar los forms desde html es una maravilla... también lo seria poder utilizar expresiones regulares.
En línea

jdc


Desconectado Desconectado

Mensajes: 3.406


Ver Perfil WWW
Re: HTML 5 para principiantes. Usalo ahora, es fácil!
« Respuesta #9 en: 7 Junio 2010, 03:20 am »

Sin duda validar los forms desde html es una maravilla... también lo seria poder utilizar expresiones regulares.

en teoria se puede, por ejemplo algo como esto:

<input id="form11" name="part" pattern="[0-9][A-Z]{3}" placeholder="Digit followed by three uppercase letters.">
<code>[0-9][A-Z]{3}</code>

fijate en [pattern="[0-9][A-Z]{3}"] lo malo es que seria tan seguro como proteger un formulario con javascript
En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Tor Browser 9.0 ya disponible: ahora es más fácil cambiar de identidad en la ...
Noticias
wolfbcn 0 967 Último mensaje 23 Octubre 2019, 21:42 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines