Novedades en los formularios
HTML5 nos trae varias novedades para nuestros formularios que podemos implementar actualmente, porque a pesar de que HTML5 no estará completamente listo hasta el 2012, muchos navegadores empiezan a implementar algunas de sus características.
En el caso de que utilicemos estas características y el navegador no sea compatible con las misma, simplemente las ignorará sin causarnos mayores problemas. Incluso podremos condicionar nuestros scripts para que funcionen solo en navegadores sin soporte para las nuevas características de manejo de formularios, por ej si tenemos un script de selección de fechas podremos hacer que funcione solo en Internet Explorer pero que en Opera sea el mismo navegador el que se encargué de mostrarnos su selector de fechas.
Placeholder:
Si no disponemos de las características de los nuevos formularios HTML5, la forma común de hacer un placeholder sería con JavaScript jugando con los eventos de focos. Hoy en día, podemos con este atributo podremos agregar un texto que se verá en el input cuando este esté vacío y no tenga el foco.
<input type="text" placeholder="Search Bookmarks and History">
Actualmente solo es compatible con Chromium/Chrome y Safari 4, para verlo en funcionamiento entrá acá.
Autofocus:
Otra muy buena ventaja de los formularios en HTML5, este es otro claro ejemplo que permite el control del autofoco sin hacer uso de JavaScript, como se hubiera hecho antes. Como su nombre lo indica, con autofocus establecemos que un input tendrá el foco. No tiene mucha ciencia, simplemente agregamos “autofocus” en el elemento:
<input id="q" type="text" autofocus>
Si tenés un molesto script de autofoco en tu web, no te preocupes ya que seguirá funcionando sin importar que el navegador sea compatible o no con el atributo autofocus, pero si queres que el script se ejecute solo si no lo es podes agregar un if de esta forma:
<script>
window.onload = function() {
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
}
</script>
Nuevos tipos de INPUT
HTML5 nos trae varios nuevos tipos de INPUT, en los navegadores que no los soporten, serán tomados simplemente como type=”text”.
Uno de los nuevos tipos de input es el tipo “email” que nos servirá, justamente, para campos en los que se requiera ingresar una dirección de mail. Si tenés Opera y ves este demo vas a ver un pequeño icono junto a los campos de este tipo y en iPhone, el teclado virtual se transformará de esta forma:
Tambien tenemos el tipo URL que nos sirve para direcciones web
<input type="url">
Para numeros tenemos 2 nuevos tipos, el primero es “number”:
Otro punto al que se le prestó mucha atención es al tema fechas, para su manejo contamos con diferentes tipos de campo. Acá dejo algunas capturas de como se ven los diferentes campos para fechas en Opera (Único navegador que actualmente los soporta):
type=”date”
type=”mounth”
type=”week”
type”time”
type=”datetime”
Si queres implementar tu script de selección de fechas solo en los exploradores que no son compatibles con estos tipos de campos, podes implementar una comprobación de esta forma:
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// No soportado
}
</script>
Pero esto no termina aća, además tenemos un nuevo tipo de campo especialmente pensado para cajas de búsqueda llamado “search”.
Si usas este tipo de campo en cualquier explorador actual no vas a notar ninguna diferencia, a no ser que uses Safari sobre MacOS X en donde vas a ver el campo type=”search” con las esquinas redondeadas y al empezar a escribir aparecerá una pequeña cruz a la derecha que nos permite borrar el contenido del campo.
Por ultimo tenemos el tipo “color”, que actualmente no es soportado por ningún explorador, pero que en teoría serviría para colores en hexadecimal. Y seguramente será complementado con un selector de color.
Conclusión:
Estas nuevas implementaciones nos simplificaran mucho el trabajo ya que contaremos con soporte nativo para los tipos de datos que mas se manejan en los formularios (bueno, tal vez algunos sean mas inútiles que otros), lo que no hará mas fácil por ej la validación desde el lado del cliente, por cierto, me olvidaba del nuevo atributo required.
<form>
<p><label>Nombre: <input name="name" required></label></p>
<p><label>E-mail: <input name="email" type="email" required></label></p>
<p><label>URL: <input name="url" type="url"></label></p>
<p><label>Comentario: <textarea name="comment" required></textarea></label></p>
<p><input type="submit" value="Enviar"></p>
</form>
Tendremos que esperar unos años hasta que estas características sean totalmente compatibles con los diferentes navegadores, Opera es uno de los que mayor compatibilidad tiene, seguido por Chrome y Safari, pero Internet Explorer y Firefox todavia no soportan ninguna de estas características. Seguramente en los próximos meses empezaremos a ver novedades al respecto en Firefox, pero Microsoft creo que como siempre va a tardar algun tiempo mas.
HTML5 nos trae varias novedades para nuestros formularios que podemos implementar actualmente, porque a pesar de que HTML5 no estará completamente listo hasta el 2012, muchos navegadores empiezan a implementar algunas de sus características.
En el caso de que utilicemos estas características y el navegador no sea compatible con las misma, simplemente las ignorará sin causarnos mayores problemas. Incluso podremos condicionar nuestros scripts para que funcionen solo en navegadores sin soporte para las nuevas características de manejo de formularios, por ej si tenemos un script de selección de fechas podremos hacer que funcione solo en Internet Explorer pero que en Opera sea el mismo navegador el que se encargué de mostrarnos su selector de fechas.
Placeholder:
Si no disponemos de las características de los nuevos formularios HTML5, la forma común de hacer un placeholder sería con JavaScript jugando con los eventos de focos. Hoy en día, podemos con este atributo podremos agregar un texto que se verá en el input cuando este esté vacío y no tenga el foco.
<input type="text" placeholder="Search Bookmarks and History">
Actualmente solo es compatible con Chromium/Chrome y Safari 4, para verlo en funcionamiento entrá acá.
Autofocus:
Otra muy buena ventaja de los formularios en HTML5, este es otro claro ejemplo que permite el control del autofoco sin hacer uso de JavaScript, como se hubiera hecho antes. Como su nombre lo indica, con autofocus establecemos que un input tendrá el foco. No tiene mucha ciencia, simplemente agregamos “autofocus” en el elemento:
<input id="q" type="text" autofocus>
Si tenés un molesto script de autofoco en tu web, no te preocupes ya que seguirá funcionando sin importar que el navegador sea compatible o no con el atributo autofocus, pero si queres que el script se ejecute solo si no lo es podes agregar un if de esta forma:
<script>
window.onload = function() {
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
}
</script>
Nuevos tipos de INPUT
HTML5 nos trae varios nuevos tipos de INPUT, en los navegadores que no los soporten, serán tomados simplemente como type=”text”.
Uno de los nuevos tipos de input es el tipo “email” que nos servirá, justamente, para campos en los que se requiera ingresar una dirección de mail. Si tenés Opera y ves este demo vas a ver un pequeño icono junto a los campos de este tipo y en iPhone, el teclado virtual se transformará de esta forma:
Tambien tenemos el tipo URL que nos sirve para direcciones web
<input type="url">
Para numeros tenemos 2 nuevos tipos, el primero es “number”:
Otro punto al que se le prestó mucha atención es al tema fechas, para su manejo contamos con diferentes tipos de campo. Acá dejo algunas capturas de como se ven los diferentes campos para fechas en Opera (Único navegador que actualmente los soporta):
type=”date”
type=”mounth”
type=”week”
type”time”
type=”datetime”
Si queres implementar tu script de selección de fechas solo en los exploradores que no son compatibles con estos tipos de campos, podes implementar una comprobación de esta forma:
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// No soportado
}
</script>
Pero esto no termina aća, además tenemos un nuevo tipo de campo especialmente pensado para cajas de búsqueda llamado “search”.
Si usas este tipo de campo en cualquier explorador actual no vas a notar ninguna diferencia, a no ser que uses Safari sobre MacOS X en donde vas a ver el campo type=”search” con las esquinas redondeadas y al empezar a escribir aparecerá una pequeña cruz a la derecha que nos permite borrar el contenido del campo.
Por ultimo tenemos el tipo “color”, que actualmente no es soportado por ningún explorador, pero que en teoría serviría para colores en hexadecimal. Y seguramente será complementado con un selector de color.
Conclusión:
Estas nuevas implementaciones nos simplificaran mucho el trabajo ya que contaremos con soporte nativo para los tipos de datos que mas se manejan en los formularios (bueno, tal vez algunos sean mas inútiles que otros), lo que no hará mas fácil por ej la validación desde el lado del cliente, por cierto, me olvidaba del nuevo atributo required.
<form>
<p><label>Nombre: <input name="name" required></label></p>
<p><label>E-mail: <input name="email" type="email" required></label></p>
<p><label>URL: <input name="url" type="url"></label></p>
<p><label>Comentario: <textarea name="comment" required></textarea></label></p>
<p><input type="submit" value="Enviar"></p>
</form>
Tendremos que esperar unos años hasta que estas características sean totalmente compatibles con los diferentes navegadores, Opera es uno de los que mayor compatibilidad tiene, seguido por Chrome y Safari, pero Internet Explorer y Firefox todavia no soportan ninguna de estas características. Seguramente en los próximos meses empezaremos a ver novedades al respecto en Firefox, pero Microsoft creo que como siempre va a tardar algun tiempo mas.
Configura tu iPhone con un Aplicación en HTML5
Ahora existe una aplicación que te permite tener un acceso rápido a todo esto e incluso en linea de la mano de Jeff Broderick, @brdrck permite acceder a la configuración básica del iPhone desde el escritorio y sin necesidad de tener el Jailbreak. Todo gracias al manejo de los accesos directos hacia cada sección del iPhone.
Pasos para instalar:
- Abre Safari e introduce la siguiente URL: brdrck.me/settings.
- Una vez cargue la página podemos marcarla para que aparezca en nuestro escritorio o elegir qué widget queremos instalar en nuestro escritorio.
- Si queremos que toda la web aparezca en el escritorio, hacemos clic en cualquiera de los casos en “Añadir a Escritorio”.
- Le ponemos el nombre que queramos y pulsamos “Añadir”.
Es una manera sencilla de resolver algunos problemas o agregar mejoras que necesitamos y demostrar que HTML5 puede resolver pequeños problemas casi insignificantes.
Como arrancar con HTML5 en diez minutos
No se puede entender HTML5 como una sola tecnología, sino recordemos que es una estrategia de
marketing para promover una serie de tecnologías complementarias. Asimilar todas las posibilidades e
introducirte requiere tiempo, aunque por suerto existe un atajo.
http://es.html5boilerplate.com/
Uno de los proyectos más maravillosos que debe ser comprendido por cualquier entusiasta del HTML5
es Boilerplate. Es una colección de una plantilla en html, una hoja de estilos, algunas librerías .js y plan-
tillas de base .txt y un .htaccess. Básicamente la navaja suiza de hoy para empezar a realizar cualquier
sitio web cuidandose de la compatibilidad de navegadores.
El proyecto con 220 commits y más de 102 colaboradores, actualizado al 21 de marzo del 2011 es la
mejor colección existente y en múltiples idiomas que combina el uso correcto de los nuevos tags HTML5
con hacks CSS más relevantes de los últimos años, hasta las buenas prácticas a incluir para optimizar
para móviles, optimizar para motores de búsqueda y más importante, optimizar para seres humanos.
Si conoces de GIT, apunta tu terminal a esta dirección y haz un clon local:
http://github.com/paulirish/HTML5-boilerplate/zipball/v1.0
Como usar el nuevo campo Input con voz en HTML5
HTML5 siempre tiene sorpresas cada dia mas interesantes, ya se ha hablado de algunas nuevas capacidades de los campos input en el tip Como saber si el navegador soporta los nuevas etiquetas input y sus atributos y esta vez traemos otra interesante capacidad para estos tipos de campos.
Este nuevo campo permite capturar la voz del usuario y escribir directamente en el campo de texto lo que se hablo o tambien procesar directamente la voz, ya sean comandos u otras cosas, pero para explicar mejor esta nueva capacidad podemos poner el ejemplo de Google Translate, si son usuarios de Google Chrome en la version 11 varios de ustedes habrán notado un microfono en la parte esquina inferior derecha donde les permitia hablar lo que querían traducir, como en la siguiente imagen.
Uso basico del campo de voz en HTML5
Esto ahora es capas con este nuevo campo de HTML5, pero veamos como se puede utilizar:
O si lo prefieren pueden utilizar el XHTML
Es la etiqueta input text de siempre pero con un atributo seguido llamado x-webkit-speech que es el que nos agrega esa capacidad.
La sintaxis es muy simple como pueden ver, no requiere mucha escritura de codigo, pero como es algo bastante nuevo necesitamos saber que usuario tiene en su navegador esta capacidad y que usuarios no, para eso tenemos este sencillo ejemplo:
if (document.createElement("input").webkitSpeech == undefined) {alert("La entrada de voz no esta soportada en tu navegador.");
Bastante facil, solo creamos un campo input en memoria y preguntamos si el atributo existe en el, si no existe, le decimos al usuario que no tiene la capacidad en su navegador.
Esta capacidad es compatible con todos los tipos de caja de texto de HTML5 menos el Textarea, quiza por motivos de rendimiento o seguridad, tambien tiene poca compatibilidad con navegadores, son pocos los nuevos navegadores que ya lo implementan.
Un ejemplo de este campo lo tienen aqui
HTML5 Introducción
Qué es HTML5?
HTML5 será el nuevo estándar para el HTML, XHTML, HTML y el DOM.
La versión anterior de HTML se produjo en 1999. La web ha cambiado mucho desde entonces.
HTML5 es aún un trabajo en progreso. Sin embargo, la mayoría de los navegadores modernos tienen algún tipo de apoyo HTML5.
¿Cómo HTML5 empezar?
HTML5 es una colaboración entre el Consorcio de la World Wide Web (W3C) y Web de hipertexto Aplicación de la Tecnología del Grupo de Trabajo (WHATWG).
WHATWG estaba trabajando con los formularios web y aplicaciones, y el W3C está trabajando con XHTML 2.0. En 2006, decidieron cooperar y crear una nueva versión de HTML.
Algunas reglas para HTML5 se han establecido:
- Las nuevas características debe basarse en HTML, CSS, DOM y JavaScript
- Reducir la necesidad de plugins externos (como Flash)
- Mejor manejo de errores
- Más marcado para reemplazar secuencias de comandos
- HTML5 debe ser independiente del dispositivo
- El proceso de desarrollo debe ser visible para el público
Nuevas características
Algunas de las nuevas características más interesantes de HTML5:
- El elemento de lienzo para dibujar
- El vídeo y elementos de audio para la reproducción multimedia
- Mejor soporte para el almacenamiento fuera de línea locales
- Los nuevos elementos de contenido específico, como el artículo, pie de página, encabezado, navegación, sección
- Nuevos controles de formulario, como el calendario, fecha, hora, correo electrónico, URL, búsqueda
Soporte del navegador
HTML5 aún no es una norma oficial, y no los navegadores tienen soporte HTML5 completo.
Sin embargo, todos los principales navegadores (Safari, Chrome, Firefox, Opera, Internet Explorer) continúan agregando nuevas características HTML5 a sus últimas versiones.
HTML5 video
Muchos sitios web muestran videos modernos. HTML5 ofrece un estándar para mostrarlos.
Comprueba si tu navegador soporta HTML5
Videos en la Web
Hasta ahora, nunca ha sido un estándar para mostrar un video o una película en una página web.
Hoy en día, la mayoría de los videos se muestran a través de un plugin (como Flash). Sin embargo, los navegadores diferentes pueden tener diferentes plugins.
HTML5 define un nuevo elemento que especifica un método estándar para incluir el vídeo: el elemento <video>.
Formatos de vídeo
Actualmente, hay tres formatos de video soportados por el elemento de vídeo:
Formato | IE | Firefox | Ópera | Cromo | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5 + | 10.5 + | 5.0 + | No |
MPEG-4 | 9.0 + | No | No | 5.0 + | 3.0 + |
WebM | No | 4.0 + | 10.6 + | 6.0 + | No |
- = Ogg Theora Ogg archivos con códec de vídeo y audio codec Vorbis
- MPEG4 = MPEG 4 con H.264 codec de vídeo y audio AAC codec
- WebM WebM = archivos con códec de vídeo VP8 y audio codec Vorbis
¿Cómo funciona?
Para mostrar un video en HTML 5, esto es todo lo que necesita:
Ejemplo
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Compruébalo por ti mismo »
El atributo de control agrega los controles de vídeo, como reproducir, pausar, y el volumen.
También es una buena idea incluir siempre atributos de anchura y altura. Si la altura y el ancho se establece, el espacio requerido para el video es reservado cuando se carga la página. Sin embargo, sin estos atributos, el navegador no sabe el tamaño del video, y no se puede reservar el espacio adecuado para ello. El efecto será que el diseño de la página va a cambiar durante la carga (mientras que la carga de vídeo).
También debe insertar el contenido del texto entre los <video> y </ video> etiquetas para los navegadores que no soportan el elemento <video>.
El elemento <video> permite que varios elementos <source>. elementos <source> puede enlazar a archivos de vídeo diferentes. El navegador utiliza el formato reconocido por primera vez.
Hoy en día, Firefox, Opera y Chrome los archivos de soporte Ogg. Internet Explorer, Chrome, Safari y el apoyo archivos MPEG4.
Para cubrir todos los principales navegadores, el uso de dos elementos <source>: Una que apunta a un archivo MPEG4, y uno que apunta a un archivo Ogg.
Etiquetas de vídeo HTML 5
Etiqueta | Descripción |
---|---|
<video> | Define un vídeo o una película |
<source> | Define múltiples recursos de los medios de comunicación para los elementos de los medios de comunicación, como <video> y <audio> |
<track> | Define pistas de texto en MediaPlayers |
HTML5 canvas
El elemento canvas se utiliza para dibujar gráficos en una página web.
¿Qué es el lienzo?
El elemento canvas HTML5 utiliza JavaScript para dibujar gráficos en una página web.
Un lienzo es una superficie rectangular, y controlar cada pixel de la misma.
El elemento canvas tiene varios métodos para las rutas de dibujo, cuadros, círculos, caracteres y agregar imágenes.
Crear un elemento Canvas
Añadir un elemento de tela a la página de HTML5.
Especifique el id, ancho y alto del elemento:
<canvas id="myCanvas" width="200" height="100"></canvas>
Dibujar con JavaScript
El elemento Canvas no tiene habilidades de dibujo de sí mismo. Todos los dibujos deben realizarse dentro de un JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
Compruébalo por ti mismo »
JavaScript se utiliza el ID para encontrar el elemento canvas:
var c=document.getElementById("myCanvas");
A continuación, cree un objeto de contexto:
var cxt=c.getContext("2d");
El getContext ("2D") es un objeto. Objeto integrado de HTML5, con muchos métodos para dibujar trazados, cuadros, círculos, personajes, imágenes y mucho más
Las dos líneas siguientes se dibuja un rectángulo rojo:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
cxt.fillRect(0,0,150,75);
El método fillStyle poniéndose de color rojo, y el método fillRect especifica la forma, posición y tamaño.
Coordina la comprensión
El método anterior había fillRect los parámetros (0,0,150,75).
Esto significa: Dibuja un rectángulo en el lienzo 150x75, comenzando en la esquina superior izquierda (0,0).
Las coordenadas del lienzo 'X e Y se utilizan para colocar los dibujos en el lienzo.
Pase el ratón sobre el rectángulo de abajo para ver las coordenadas:
X
Y
Más ejemplos de lona
A continuación se presentan más ejemplos de dibujo sobre el elemento canvas:
Ejemplo - Line
Dibuja una línea especificando dónde empezar y dónde parar a:
Compruébalo por ti mismo »Ejemplo - Círculo
Dibuja un círculo especificando el tamaño, color y posición:
Compruébalo por ti mismo »Ejemplo - Gradient
Dibuja un gradiente de fondo con los colores que especifique:
Compruébalo por ti mismo »HTML5 etiquetas <canvas>
Etiqueta | Descripción |
---|---|
<canvas> | Define gráficos |
HTML5 Audio
HTML5 ofrece un estándar para la reproducción de audio.
Audio en la Web
Hasta ahora, nunca ha sido un estándar para la reproducción de audio en una página web.Hoy en día, la mayoría de audio se reproducen a través de un plugin (como Flash). Sin embargo, no todos los navegadores tienen la misma plugins.
HTML5 especifica un método estándar para incluir audio, con el elemento de audio.
El elemento de audio puede reproducir archivos de sonido, o una secuencia de audio.
Formatos de audio
Actualmente, existen tres formatos principales para el elemento de audio:Formato | IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
---|---|---|---|---|---|
Ogg Vorbis | No | Sí | Sí | Sí | No |
MP3 | Sí | No | No | Sí | Sí |
Wav | No | Sí | Sí | Sí | Sí |
¿Cómo funciona?
Para reproducir un archivo de audio en HTML 5, esto es todo lo que necesita:
<audio src="song.ogg" controls="controls">
</audio>
</audio>
Insertar contenido entre el <audio> y </ audio> etiquetas para los navegadores que no soportan el elemento de audio:
Ejemplo
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
Your browser does not support the audio element.
</audio>
Compruébalo por ti mismo »
Para que funcione el audio en Internet Explorer y Safari, agregar un archivo de audio del tipo MP3.
El elemento de audio permite que los elementos de múltiples fuentes. Elementos de origen se puede vincular a diferentes archivos de audio. El navegador utiliza el formato reconocido por primera vez:
Ejemplo
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Compruébalo por ti mismo »
HTML5 audio Tags
Etiqueta | Descripción |
---|---|
<audio> | Define el contenido de sonido |
<source> | Define múltiples recursos de los medios de comunicación para los elementos de los medios de comunicación, como <video> y <audio> |
Videotutorial de HTML - Parte 1, documento básico y formato de texto
En este videotutorial de HTML veremos los aspectos más elementales del lenguaje de etiquetas. Aprenderemos el documento básico y formatear párrafos y textos.
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Estamos creando una serie de vídeos para apoyar el Manual de HTML de DesarrolloWeb.com, en los que vamos a explicar visualmente este lenguaje de etiquetado, base de la construcción de páginas web. En este caso presentamos la primera parte del manual de HTML, en la que vamos a introducirnos en el lenguaje desde cero.En esta primera entrega de los vídeos de HTML veremos al mismo tiempo los contenidos de varios de los artículos del mencionado manual de HTML, que nos servirán de introducción al lenguaje: qué es una etiqueta y cómo crearlas, el documento HTML básico, el formato de párrafos y unas primeras nociones sobre formateo de texto.
En el vídeo, a la vez que damos las pertinentes explicaciones sobre el lenguaje, iremos creando varios ejemplos para ilustrar lo que os vamos contando.
Creo que es bueno comentar que en el propio texto del manual hay muchas cosas que no se cuentan en el vídeo, como consejos a la hora de trabajar o posibles problemas que os podréis encontrar al aprender HTML. Así que estos vídeos tienen que servir como apoyo al texto, para que los conocimientos que os vamos a pasar sean más completos.
Sin más, os dejamos con el vídeo de la primera parte del Manual de HTML.
En este videotutorial de HTML veremos los aspectos más elementales del lenguaje de etiquetas. Aprenderemos el documento básico y formatear párrafos y textos. Entrar2.- Vídeotutorial de HTML - Fuentes, colores y estilos de BODY
Segunda entrega del videotutorial de HTML, donde veremos los colores HTML, estilos de tipográfía y los estilos generales del cuerpo, como fondos y colores de texto y enlaces. Entrar
3.- Videotutorial: Listas HTML
Presentamos un vídeo en el que hablamos de las listas HTML y además adelantamos alguna cosa sobre editores de HTML, que empezaremos a usar para facilitar las cosas en estos vídeos.Entrar
4.- Videotutorial HTML: enlaces y caracteres especiales
Videotutorial sobre los enlaces en HTML, explicando todos sus tipos, y los caracteres especiales del HTML. Entrar
5.- Videotutorial HTML: imágenes
Vídeo en el que mostraremos cómo trabajar con imágenes en HTML y cómo editar y optimizar las imágenes para la web. Entrar
6.- Vídeo: Formatos gráficos para páginas web
Videotutorial con un repaso general a los formatos gráficos que se pueden utilizar una página web, gif - jpg y png, sus características, técnicas de uso y consejos para sacarles el mejor partido. Entrar
7.- Vídeo: Tablas en HTML
Videotutorial sobre tablas en HTML: Todo lo que tienes que saber para crear tablas en el lenguaje HTML. Entrar
8.- Videotutorial: Formularios HTML
Vídeo tutorial sobre los formularios en HTML. Mostramos por la práctica, a través de varios ejemplos cómo construir formularios con todos los tipos de elementos posibles. Entrar
9.- Videotutorial de Frames en HTML
Vídeo tutorial acerca de los frames en el lenguaje HTML, no sólo sobre su creación, sino sobre todo lo que debemos saber, como enlaces entre frames, edición de los marcos y barras de desplazamiento, frames flotantes, ventajas e inconvenientes, etc.Entrar
10.- Videotutorial HTML: Crear una web de primera generación
Vídeo tutorial sobre la creación de una web de primera generación, es decir, una web sencilla, únicamente utilizando un HTML elemental, al alcance de personas con poca experiencia en el lenguaje y el diseño web. Entrar
11.- Videotutorial: creación de una web de segunda generación
Creamos en vídeo una web de segunda generación, con la técnica de maquetación por tablas, que está desfasada pero nos permite practicar nuestro HTML. Entrar
Videotutorial con un repaso general a los formatos gráficos que se pueden utilizar una página web, gif - jpg y png, sus características, técnicas de uso y consejos para sacarles el mejor partido. Entrar
7.- Vídeo: Tablas en HTML
Videotutorial sobre tablas en HTML: Todo lo que tienes que saber para crear tablas en el lenguaje HTML. Entrar
8.- Videotutorial: Formularios HTML
Vídeo tutorial sobre los formularios en HTML. Mostramos por la práctica, a través de varios ejemplos cómo construir formularios con todos los tipos de elementos posibles. Entrar
9.- Videotutorial de Frames en HTML
Vídeo tutorial acerca de los frames en el lenguaje HTML, no sólo sobre su creación, sino sobre todo lo que debemos saber, como enlaces entre frames, edición de los marcos y barras de desplazamiento, frames flotantes, ventajas e inconvenientes, etc.Entrar
10.- Videotutorial HTML: Crear una web de primera generación
Vídeo tutorial sobre la creación de una web de primera generación, es decir, una web sencilla, únicamente utilizando un HTML elemental, al alcance de personas con poca experiencia en el lenguaje y el diseño web. Entrar
11.- Videotutorial: creación de una web de segunda generación
Creamos en vídeo una web de segunda generación, con la técnica de maquetación por tablas, que está desfasada pero nos permite practicar nuestro HTML. Entrar
No hay comentarios:
Publicar un comentario