Una web del grupo Infosur
HTML5
Entradas relacionadas con el nuevo estándar de HTML
HTML5: Creando estilos con CSS3 (6)
28 mar
CSS3 es la versión más reciente del lenguaje CSS (Cascading Style Sheets) con la que aplicamos estilos a las páginas webs y que está adaptado para el nuevo estándar de HTML, permitiéndonos un mayor control sobre la apariencia de los elementos que mostramos en ellas, y todo ello sin tener que recurrir a imágenes previamente editadas o a trucos diversos que a veces complicaban el código fuente o dificultaban la compatibilidad con los distintos navegadores.
Con CSS3 ahora ya es posible aplicar diferentes efectos a los elementos, como degradados (radial-gradient), sombras (box-shadow), biselados (border-radius). También tenemos la posibilidad de establecer el nivel de transparencia de las imágenes mediante la propiedad opacity. Y a la hora de definir los colores contamos con más modelos de color, como RGBA, HSL, HSLA y CMYK. Además, ahora podemos poner varias imágenes en nuestro fondo de pantalla como si contara con varias capas con background-image.
HTML5: Haciendo formularios (5)
10 mar
Ahora con HTML5, los formularios adquieren una mayor variedad en cuanto a tipos de datos se refiere. Entre las etiquetas <form> y su cierre </form>, se sigue utilizando el elemento input para la introducción y recogida de datos, pero con el atributo type podemos pedir:
- Un número de teléfono: <input type=”tel”>
- Una contraseña: <input type=”password”>
- Una dirección de Internet: <input type=”url”>
- Una dirección de correo electrónico: <input type=”email”>
- O una fecha: <input type=”date”>, entre otras cosas.
HTML5: Dibujando con CANVAS (4)
7 mar
Ahora es posible con el nuevo estándar de HTML dibujar sin necesidad de ningún plugin, utilizando la etiqueta <CANVAS>, con el que conseguimos dibujos dinámicos y renderizados de imágenes. Con esta etiqueta generamos un lienzo al que le especificamos las dimensiones que queramos y con ayuda de funciones escritas en JavaScript dibujar y crear imágenes tanto en 2D como en 3D. El script hay que colocarlo entre las etiquetas <head> y </head> y una vez que lo tengamos, para poder ver el resultado, entre <body> y su cierre, situamos la etiqueta <canvas>, en la que definimos el tamaño del lienzo y el id del elemento, y dentro de la etiqueta <body> el atributo onload que nos cargará la función donde hemos definido los elementos a dibujar. Un ejemplo de utilización de la etiqueta canvas sería el siguiente:
HMTL5: Video y audio (3)
20 feb
El nuevo estándar de HMTL incorpora dos nuevas etiquetas para incrustar video y audio de forma nativa, es decir, sin necesidad de instalar plug-ins para poder reproducirlos, pero hay que tener en cuenta qué tipo de archivos soporta cada navegador. Ambas etiquetas comparten los mismos atributos:
- boolean: on/off.
- autobuffer y autoplay: para cargar y reproducir automáticamente un archivo.
- loop: para reiniciar la reproducción.
- preload: none/auto/metadata: para precargar el archivo en segundo plano en el navegador.
- type: con este atributo especificamos que tipo de archivo vamos a reproducir (mp3, ogg, mp4, etc).
- src: dirección del archivo que queremos que se cargue en nuestra página.
- height y width: altura y anchura del reproductor.
- controls: con el que mostraremos los elementos de la reproducción (volumen, play y pausa).
HTML 5: Organizando el espacio (2)
20 feb
Anteriormente hemos visto la estructura básica de un documento basado en HTML5; ahora vamos a enriquecer con algunos elementos más nuestra página web. Con HTML5 aparecen nuevas etiquetas con las que ir organizando nuestros contenidos. Entre estas nuevas etiquetas podemos destacar las siguientes:
- <header>: que nos servirá para poner una cabecera con, por ejemplo, nuestro logo.
- <nav>: para los menús de navegación, facilitando la accesibilidad de nuestra web.
- <article> y <section>: con las que podremos organizar nuestros contenidos. La primera nos puede servir para una cada una de las entradas de una sección de noticias creando un bloque independiente de contenido; la segunda para asociar esas noticias como un grupo de contenidos de la misma temática.
- <aside>: con esta etiqueta podemos colocar en los laterales de nuestra página comentarios, espacios publicitarios, etc.
- <footer>: en ella pondremos información relativa a la fecha, el creador de la web, la política de privacidad,… al pie de la página.
Todas estas etiqueta irían dentro del <body> de nuestro código. Más >