Página 2 de 4«1234»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Fundamentos de HTML
Fundamentos de HTML
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 16 | 6:13 PM
Campos fieldset, legend, label y optgroup


El conjunto de etiquetas permitidas en XHTML es bastante amplio y es habitual que mucha gente únicamente conozca las que utiliza de forma habitual, o las que generan de forma automática las diferentes herramientas visuales de edición html. Es poca la gente a proporción que se lee la referencia del W3C, o la estupenda información más explicada y con ejemplos de W3Schools.

Esto produce que haya etiquetas con mucha utilidad pero que por ser menos utilizadas, acaban siendo desconocidas por gran parte de los diseñadores. En este pequeño artículo vamos a dar un repaso a algunas de estas etiquetas desconocidas para muchos, en concreto vamos a centrarnos en 4 etiquetas de bastante utilidad en la generación de formularios. Estas etiquetas son fieldset[/b[ para realizar agrupaciones de campos, [b]legend para dar un título a una agrupación de campos, label para identificar el texto asociado a un campo, y optgroup para realizar agrupaciones en listas de selección.

Estas etiquetas están definidas en la recomendación del W3C referida a HTML 4.0, pero son aplicables a XHTML, teniendo en cuenta las modificaciones que realiza éste sobre HTML 4.0, como que las etiquetas deben ir en minúsculas, por ejemplo. En la página de W3Schools se dispone para cada etiqueta de las características que las diferencian entre HTML y XHTML, y puede verse que para estos casos no existen. Puede extraerse más información sobre los atributos permitidos aparte de la referencia del W3C del DTD asociado al DOCTYPE que utilicemos en la página XTHML, strict, transitional o frameset.

Fieldset y Legend
Tal como indica la recomendación del W3C la etiqueta fieldset permite agrupar controles y etiquetas que estén relacionados, haciendo que el formulario sea más comprensible para los usuarios desde un punto de vista visual y conceptual, a la vez que incrementa la usabilidad y la accesibilidad, ya que estos campos podrían ser utilizados al realizar saltos entre campos con la tecla tab o interpretados por navegadores que incorporen funciones de generación de voz.

Por su parte la etiqueta legend permite asignar un título a un fieldset, aumentando los valores de usabilidad y accesibilidad.

Quote
<fieldset>
<legend>Fecha de nacimiento:</legend>
Año <input size="3">
Mes <input size="3">
Día <input size="3">
</fieldset>


En el ejemplo anterior se aprecia como hemos construido un grupo de controles para agrupar el año, mes y día de una fecha de nacimiento. A la agrupación de controles le hemos añadido una legenda con el título Fecha de nacimiento. A partir de aquí podríamos mejorar el aspecto visual de los formularios en los que utilicemos estas etiquetas mediante la alineación de los elementos con CSS, la utilización de colores y fuentes con CSS, o mediante la utilización de JavaScript, por ejemplo para mostrar o no conjuntos de campos en función de lo que se haya introducido en otros.

Label
La etiqueta label sirve para representar el texto asociado a controles que no tienen implícitamente un valor de texto. En el caso de los botones por ejemplo su texto se saca a partir de su atributo value, que es su label implícito.

Los controles que no tienen labels implícitos, como los campos de texto, radios o checkboxes por ejemplo, pueden utilizar etiquetas label para indicar el texto que les corresponde.

Cada etiqueta label puede estar asociada únicamente a un control de formulario. Esta asociación se realiza mediante el atributo por, indicando el id del control de formulario al que queremos asociar el label. Es posible asociar un label con un control sin utilizar el atributo for, para ello es suficiente con que el control esté dentro de la etiqueta label.

Uno de los beneficios que obtendremos utilizando etiquetas label será en el manejo de listas de radiobuttons o checkboxes. Mediante la asociación de un label, el usuario no tendrá por obligación que pinchar en el control para marcarlo o desmarcarlo, podrá hacerlo también pulsando sobre el texto del label.

Quote
<form name="input" action="">
<input type="radio" name="equipo" id="realmadrid" /><label for="realmadrid">Real Madrid</label>
<br />
<input type="radio" name="equipo" id="barcelona" /><label for="barcelona">Barcelona</label>
</form>

Optgroup
Esta última etiqueta se utiliza para crear grupos dentro de cajas de selección. Por ejemplo imaginemos que queremos que un usuario nos indique la versión de su sistema operativo. Si quisiéramos obtener este dato podríamos poner una lista con todos los sistemas operativos disponibles listados, pero esto podría quedar poco usable. Lo ideal sería que pudiésemos crear un grupo por cada sistema operativo, y dentro de cada grupo poner las diferentes versiones.

Quote
<select name="so">
<option selected value="none">Ninguno</option>
<optgroup label="Windows">
<option value="W95">95</option>
<option value="W98">98</option>
<option value="WNT">NT</option>
<option value="W2000">2000</option>
<option value="WXP">XP</option>
</optgroup>
<optgroup label="Linux">
<option value="LRH">RedHat</option>
<option value="LDeb">Debian</option>
<option value="LSuSe">SuSe</option>
<option value="LMDK">Mandrake</option>
</optgroup>
</select>



Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 17 | 2:09 PM
HTML, XHTML: diferencias notables y cómo crearlos

Existe un mundo de diferencias entre HTML y XHTML, pero actualmente es complicado explicarlas todas. Para empezar una gran diferencia es la necesidad de usar minúsculas en todas las etiquetas con XHTML. La siguiente diferencia es la desaparición de algunas etiquetas y el reajuste de otras

HTML

Quote
<p>Cursos:
<ul>
<li>punto 1
<li>punto 2
</ul>

XHTML

Quote
<p>Cursos:</p>
<ul>
<li>punto 1<lli>
<li>punto 2</li>
</ul>

Como queda comprobado, el código es mucho más limpio y legible, por lo que aparte de que el W3C, aprueba el XHTML y da por extinguido el HTML, será mucho más fácil la programación de una pagina.

A continuación muestro como crear una página de XHTML, y explico en que consiste este código.

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Por fin me entero que es todo este royo</title>
</head>

<body>

• Mi nombre es Ignacio Santos

</body>
</html>

Explicación del código:

DOCTYPE: es la manera en que el W3C indica, deben comenzar todos los documentos XHTML, sirve para que tanto el servidor como el explorador que usemos, sepan que clase de documento es.
Html PUBLIC: Este documento es publico
W3C: Es quién gestiona el documento, quien lo aprueba (digamos que es el patrocinador)
DTD XHTML 1.0 Transitional: Viene a decirnos que versión y tecnología utilizamos.
EN: Idioma (English), inglés.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd: Documento que explica diferencias y mejoras con el HTML 4.0, que era la versión utilizada hasta ahora.
<html xmlns="http://www.w3.org/1999/xhtml">: Forma de comienzo de una página XHTML, el enlace lleva a la explicación del W3C, de en que consiste una página XHTML.
<head>: Encabezado ya lo dice la palabra, dentro del encabezado encontramos los “meta”, que se explicaran mas adelante. También encontramos la etiqueta <title>, sirve para ponerle un titulo a la página como veis el titulo de la página que estamos estudiando es: “Por fin me entero que es todo este royo”
</head>: fin del encabezado
<body>: Cuerpo de la página, en esta zona irá todo el contenido de la página, como veis en esta página aparece “Mi nombre es Ignacio Santos”.
</body>: Fin del cuerpo de la página. A partir de aquí no se mostrará nada de lo que pongamos en la pagina.
</html>: Fin del documento, es el cierre (Viene a decir hemos terminado).

Todo esto es una página Web, con lo que todo el mundo puede hacerse una propia, una pagina estática en XHTML, no tiene porque ser algo que venda, puede ser un diario (blogs), un sitio donde colgar fotografías de tus amigos y tuyas, un libro de cocina, etc…

Tiene un gran abanico de posibilidades que quedan en la mente de cada diseñador / programador.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 18 | 12:42 PM
¿Qué es el XHTML Doctype?

Hace ya tiempo que la mayoría de páginas webs incluyen a su comienzo una misteriosa etiqueta <!DOCTYPE, y sin embargo hay mucha gente que ignora cuál es su significado o para qué sirve, por lo que simplemente se limita a copiarla, haciéndolo además muchas veces de forma incorrecta. En las siguientes líneas trataremos de explicar para qué sirve y cómo ha de utilizarse.

La declaración de tipo de documento DOCTYPE, que así es como se llama, es una parte fundamental de todas aquellas páginas que quieran cumplir los estándares, tanto HTML como XHTML. Esta declaración indica que versión de (X)HTML se usa en la página, de forma que los navegadores pueden saber qué sintaxis y gramática se usa, y los validadores puedan comprobar su validez. Para ello la declaración indica un DTD contra el cual se puede realizar la validación.

Aparte de esto la declaración DOCTYPE se utiliza por los navegadores para activar su modo estándar o estricto, o su modo compatibilidad (quirk). La razón de esto y las diferencias existentes entre estos modos queda fuera del ámbito de esta explicación, pero es suficiente con darse cuenta de que la no utilización de un DOCTYPE o su incorrecto uso, puede hacer que los navegadores rendericen la página de forma completamente diferente a lo que teníamos previsto. Todas las páginas nuevas que se hagan deberían contener esta declaración y hacerlo de forma correcta, con el fin de cumplir los estándares por un lado y garantizar resultados de renderizado homogéneos por otro.

Una declaración DOCTYPE suele tener una estructura similar a la siguiente:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En este ejemplo se indica que la página debe validarse como XHTML Transitional utilizando el DTD existente en la url http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. Es habitual que estas líneas las creen los propios editores pero no siempre lo hacen de forma correcta, además a veces se copia de alguna otra página en la que por ejemplo la ruta del DTD es local, por lo que seguramente generaría un fallo en la validación en nuestro web.

Existen tres tipos de documentos XHTML: Strict, Transitional y Frameset. A continuación se muestra la declaración de cada una de ellas con la referencias válidad a cada DTD, y un poco más abajo sus diferencias para saber cuándo usar cada una.

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Strict: este tipo de documento está principalmente ideado para su utilización con CSS, separando completamente el contenido y la presentación. Para ello no permite la utilización de etiquetas y atributos ya en desuso orientados a la presentación, como font, center y otros. Escribiendo páginas en XHTML 1.0 Strict se consiguen páginas bien estructuradas y fácilmente adaptables mediante CSS, pero tiene la desventaja de crear incompatibilidades con ciertos navegadores.
Transitional: incluye todas las características de XHTML 1.0 Strict, pero añade características orientadas a la presentación ya en desuso.
Frameset: es una variante del Transitional para las páginas que utilizan frames

Por último hay que tener en cuenta que no es necesario que las páginas XHTML contengan una instrucción prolog similar a <?xml version=”1.0″ encoding=”utf-8″ ?> salvo en los modos estrictos. En realidad esta instrucción es únicamente necesaria cuando el contenido de la página se sirve como text/xml y además su utilización hace que Explorer 6 pase a modo Quirk por lo que no se recomienda su uso. Si necesitamos indicar el encoding de la página se recomienda utilizar la etiqueta meta correspondiente.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 19 | 1:26 PM
Pasar de HTML a XHTML

Siguiendo este tema les propongo a que lean el siguiente post. Actualmente asociamos Internet con las computadores y navegadores que se ejecutan en ellas, pero en el futuro cercano Internet estará en todos lados: los teléfonos celulares, la TV y el refrigerador: podremos revisar los precios y ofertas de cada producto de la despensa y solicitar una cotización entre diferentes supermercados, además podremos pedir una pizza o un boleto para el cine sin usar el teléfono.

Hacer esto es imposible con HTML, pues los costos por crear una página para cada tipo de dispositivo serían prohibitivos. La solución ideal radica en crear un sólo documento que sea limpio, estricto y estandarizado y que a partir de él se estructure de manera diferente para cada caso particular. Hacer esto es muy difícil, quizás imposible, con HTML, un lenguaje de marcación donde la exigencia en la codificación es de escaso nivel, además en él la mala estructuración y la redundancia son frecuentes. Usted dirá que este aumento en la exigencia implica un aumento en las horas de trabajo pero la verdad es que no es así, si usted crea un sitio XHTML+CSS logrará una agilidad en el diseño sorprendente: en 50 minutos de tocar los estilos CSS su sitio obtendrá un nuevo, mejor e irreconocible diseño. Del modo tradicional tendría que dedicarle a esta tarea quizás un par de días. Además, los sitios hechos con XHTML son más rápidos y poseen un despliegue más elegante.

Una (gran) motivación para pasar nuestro sitio a XHTML radica en que HTML (actualmente en la versión 4.0) no se desarrollará más. Existe un acuerdo para abandonarlo paulatinamente en beneficio de XHTML (Extensible Hyper Text Markup Language).

La diferencia principal entre HTML y XHTML es que el código de este último se sujeta a un tipo de reglas que se especifican en el DOCTYPE (tipo de documento) con el que inicia todo documento XHTML. Veamos una página elemental de XHTML:

Quote
<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="es" lang="es">

<head>

<title> ::EL titulo </title>

</head>

<body>

<p>Este es mi primer XHTML !!</p>

<br />

</body>

</html>

La primera línea (xml version=”1.0″…) no es obligatoria, algunos navegadores como el IE 4.5 para Mac y el Netscape 4.0 no despliegan bien el código con esta línea, pero realmente hay muy pocos navegadores de este tipo hoy día. Colocar esta línea o no, es su elección. Sin embargo, está línea le indica al navegador la codificación de la página, en este caso el iso-8859-1 señala que la página actual será desplegada usando los carácteres de Europa Occidental (que incluyen al español). ¡Puede teclear los acentos y las eñes sin necesidad de aacute;, eacute; ntilde; y demás etcéteras!

El documento xhtml1-transitional.dtd contiene los lineamientos que los tags deben seguir para que la página sea un documento válido. Esto es interesante pues XHTML nos permite crear nuestros propios tags para estructurar nuestra información según nuestras necesidades. Al iniciarnos con XHTML usaremos el Document Type Declaration o DTD transitional, pues es un poco menos exigente en la marcación de los tags, sin embargo, cuando usted sienta que ya domina satisfactoriamente el XHTML, deberá pasarse al DTD strict.

La línea <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”> indica el elemento root (raíz) de la página. Si usted ha usado Linux sabe que del root (/) parten los elementos del sistema. Los documentos XHTML también deben tener un lugar de donde partir. Además del elemento root, esta línea señala que todo lo que se desprenda de él, estará en español (es).

Escribiendo XHTML
Veamos las diferencias principales en la codificación de XHTML con respecto a HTML.

1.- Todos los tags en minúsculas. tanto los tags como sus atributos deben ir en minúsculas. En HTML podemos tener:

Quote
<P><B> Este es un parrafo </B></P>

<FORM ACTION=EDIT.PHP METHOD=POST>

Pero en XHTML debe ser:

Quote
<p><b> Este es un parrafo </b></p>

<form action="edit.php" method="post">

2.- Correcta anidación de los tags. En XHTML no podemos intercalar desordenadamente los tags. En HTML podemos tener:

Quote
<p><i><b>Código mal anidado<i></b></p>

Pero en XHTML debe ser:

Quote
<p><b><i>Código bien anidado<i></b></p>

3.- Todos los atributos llevan comillas dobles. En HTML podemos tener:

Quote
<table align=center width=90% border=0>

Pero en XHTML debe ser:

Quote
<table align="center" width="90%" border="0">

4.- Todo tag abierto se cierra. incluso los tag img, type (de los formularios) y br deben cerrarse. En HTML podemos tener:

Quote
<input type="hidden" value="9" name="pass">

<br>

<img src="imagen.jpg" alt="Imagen" title="Imagen" >

Pero en XHTML debe ser:

Quote
<input type="hidden" value="9" name="pass" />

<br />

<img src="imagen.jpg" alt="Imagen" title="Imagen" />

Además de cerrarse, el tag img debe tener el atributo alt y title, alt es “alternative text” (para los navegadores Web textuales como lynx o Links). Mientras, title es el tooltip que se despliega cuando colocamos el cursor del ratón sobre la imagen.

5.- JavaScript dentro de tag CDATA. Los javascripts que van dentro del cuerpo de la página (no en el header) deben estar dentro del tag CDATA. En HTML podemos tener:

Quote
<script language="JavaScript" type="text/javascript">

<!--

document.write("Hello World!");

-->

</script>

Pero en XHTML debe ser:

Quote
<script type="text/javascript">

<![CDATA[

document.write("Hello World!");

]]>

</script>

6.- Las anclas son IDs. Las anclas (anchor) que nos permiten navegar dentro una página grande, ya no son referenciadas por el tag a sino por el ID del elemento hacia el cual deseamos ir. En HTML podemos tener:

Quote
<a name=top> <img src=imagen.png> </a>

<a href="#top"> Ir arriba </a>

Pero en XHTML debe ser:

Quote
<img src="imagen.png" id="top"

title="Imagen" alt="Imagen" /></a><a href="#top">Ir arriba</a>

7.- Los atributos deben ser explícitos. Los atributos deben tener un nombre y un valor sin reducirlos. En HTML podemos tener:

Quote
<input type="radio" value="2" checked>

<td nowrap> Texto </td>

<option value="m" selected>

Pero en XHTML debe ser:

Quote
<input type="radio" value="2" checked="checked">

<td nowrap="nowrap"> Texto </td>

<option value="m" selected="selected">


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 20 | 12:56 PM
HTML y Flash, una visión actualizada

Mucho se ha discutido sobre la conveniencia de la utilización de elementos de una tecnología propietaria como es flash dentro de HTML. Hace tiempo que existen agrios debates entre los defensores y detractores de Flash, avivados desde el ya célebre artículo de Jakob Nielsen Flash: 99% Bad, del año 2000. Pero desde el año 2002 y la versión MX, esta tecnología ha introducido mejoras en varios aspectos conflictivos que en su momento se le criticaron. Por eso me hago la pregunta, ¿con la tecnología actual, es conveniente utilizar el formato flash en nuestras webs?, ¿Todos cambios introducidos han sido suficientes?, ¿Cómo se utiliza actualmente flash?

En este artículo veremos los avances de esta tecnología en varios puntos escabrosos y un pequeño estudio sobre su uso en las webs españolas más importantes:

Puntos problemáticos y avances de flash para el desarrollo web:
Accesibilidad: Con la introducción de la paleta de accesibilidad en la versión MX 2004, se mejoró notablemente la accesibilidad en los archivos flash. Ahora es posible que algunos lectores de pantallas puedan detectar ciertos elementos de una película swf, pero aún así la tecnología flash todavía no es completamente accesible para personas con discapacidad.
Posicionamiento: También se han hecho avances en este sentido. Ahora los buscadores son capaces de procesar los archivos swf y leer las cadenas de texto que contienen. El problema radica en que si todo el sitio está desarrollado en un único flash, el peso de nuestras keywords se diluye, ya que los robots no reconocen que el flash se divide en diferentes secciones. Existen varias soluciones parciales a este problema, pero ninguna es mejor en cuanto a posicionamiento como disponer de un web realizada únicamente en HTML.
Actualización: Una de las mayores criticas de Jakob Nielsen a las páginas desarrolladas en Flash, era que resultaba difícil mantenerlas actualizadas. Es necesario editar directamente el archivo fuente para realizar los cambios. Volcar contenido en XML, o la integración de Flash con fuentes de datos dinámicos usando Flash Remoting y Web Services también ha solucionado parcialmente este problema.
Carga de contenidos: A pesar de varias optimizaciones que podremos someter a nuestras bibliotecas y archivos flash, estos se cargarán más lentamente que los contenidos creados en HTML. Además, hay que tener en cuenta que la velocidad de fotogramas asignada a una película, casi nunca se cumple. Esto dependerá de factores como la cantidad de código a ejecutar, la complejidad de éste, la potencia del ordenador, los recursos del sistema operativo, etc.
Estadísticas. Utilizando Flash Remoting podremos realizar estadísticas de visitas. El problema viene si desarrollamos toda la web en un único archivo. De esta manera sólo podremos saber cuántas personas visitaron la portada de la web, no sus secciones.

¿Actualmente como se utiliza Flash mayoritariamente?
Por otro lado, podemos leer en wezstudio un informe del año pasado sobre la utilización de flash en las 20 páginas españolas más importantes. Estos son los resultados más relevantes que arroja dicho estudio:

• Aproximadamente el 50% de los sitios analizados contienen algún elemento Flash
• Ninguna web esta totalmente desarrollada en Flash mientras que un 45% son completamente HTML.
• En las página analizadas solo se utiliza Flash como herramienta de publicidad o bien para mostrar vídeos.
• Solo el 10% de la superficie total de la home utiliza elementos Flash
• Sin embargo flash ocupa entorno al 60-80% del total de la publicidad

Conclusiones del informe
Analizando estos datos podemos decir que actualmente Flash es una tecnología ampliamente extendida y utilizada como complemento del HTML. Parece ser que su utilización para el desarrollo íntegro de una web está decayendo.

Según este estudio, flash es utilizado principalmente para mostrar vídeos y publicidad. Si bien su utilización es muy común para el montaje de galerías y pases de diapositivas, podemos adivinar que el desarrollo y la utilización de frameworks para JavasScript, está haciendo que también decaiga su utilización para estas tareas.

Entonces, si como indica este estudio flash se utiliza mayoritariamente para mostrar video, ¿Qué pasará con la tecnología Flash cuando tarde o temprano se normalice el uso de HTML 5 y su etiqueta video?


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 21 | 1:16 PM
Drag and Drop con HTML5, paso a paso

Drag and Drop (”Arrastrar y soltar”) es una de las más fundamentales interacciones logradas por las interfaces gráficas de usuario. Siempre se consideró ideal que los navegadores ofrecieran soporte para esta funcionalidad.

Este deseo fue cumplido actualmente por las especificaciones que HTML 5 y Firefox 3.5 poseen acerca de eventos drag and drop. En esta nota contamos cuáles son y en qué consisten.

Sin más rodeos, aquí están los nuevos eventos drag and drop:

dragstart
Un arrastrado ha sido iniciado, con el elemento arrastrado como el objetivo del evento.

drag
El mouse ha sido movido, con el elemento arrastrado como el objetivo del evento.

dragenter
El elemento arrastrado ha sido movido dentro de un receptor de soltado, con el elemento receptor del soltado como el objetivo del evento.

dragover
El elemento arrastrado ha sido movido sobre un receptor de soltado, con el elemento receptor del soltado como el objetivo del evento. Dado que el comportamiento por defecto es cancelar soltados, devolver false o llamar a preventDefault() en el manejador de eventos indica que un soltado es permitido aquí.

dragleave
El elemento arrastrado ha sido movido fuera de un receptor de soltado, con el elemento receptor del soltado como el objetivo del evento.

drop
El elemento arrastrado ha sido volcado de forma exitosa en un receptor de soltado, con el elemento receptor del soltado como el objetivo del evento.

dragend
Un arrastrado ha sido finalizado, de forma exitosa o no, con el elemento arrastrado como el objetivo del evento.

Como los eventos de mouse de antaño, los receptores pueden ser adjuntados directamente a los elementos usando addEventListener() o por medio de tu librería JS favorita.

Consideren el siguiente ejemplo utilizando jQuery:

Quote
<div id=”newschool”>
<div class=”dragme”>Drag me!</div>
<div class=”drophere”>Drop here!</div>
</div>
<script type=”text/javascript”>
$(document).ready(function() { $(’#newschool .dragme’)
.attr(’draggable’, ‘true’)
.bind(’dragstart’, function(ev) {
var dt = ev.originalEvent.dataTransfer;
dt.setData(”Text”, “Dropped in zone!”);
return true; })
.bind(’dragend’, function(ev) { return false; });
$(’#newschool .drophere’)
.bind(’dragenter’, function(ev) { $(ev.target).addClass(’dragover’);
return false; })
.bind(’dragleave’, function(ev) {
$(ev.target).removeClass(’dragover’);
return false; })
.bind(’dragover’, function(ev) {
return false; })
.bind(’drop’, function(ev) {
var dt = ev.originalEvent.dataTransfer; alert(dt.getData(’Text’));
return false; }); });
</script>

Gracias a los nuevos eventos y jQuery, este ejemplo es tanto corto como simple, pero contiene una gran cantidad de funcionalidades.

Antes de seguir, existen por lo menos tres cosas del código anterior que vale la pena mencionar:

Los objetivos de soltado (drop) están permitidos por virtud de tener receptores para eventos de soltado. Pero, por las especificaciones HTML 5, los elementos arrastrables necesitan un atributo de draggable=”true”, programado ya sea en el código o en JavaScript, de esta manera:

Quote
$(’#newschool .dragme’).attr(’draggable’, ‘true’)

El evento DOM original (en oposición al envoltorio de evento jQuery) ofrece una propiedad llamada dataTransfer. Más allá de la simple manipulación de elementos, el nuevo evento drag and drop acomoda la transmisión de información definida por el usuario durante el curso de la interacción.

Miren este demo, y el código Javascript asociado para ver más acerca de estos eventos y delegación de eventos.

Usando dataTransfer
Como mencionamos en la sección anterior, los nuevos eventos drag and drop nos permiten enviar información junto con el elemento arrastrado. Pero es todavía mejor: Tus objetivos de soltado pueden recibir información transferida por objetos de contenido arrastrados en la ventana desde otras ventanas de navegador, e incluso otras aplicaciones.

Miren este demo, y el código Javascript asociado para obtener una idea de todo lo que es posible con dataTransfer.

Resumiendo, las estrellas de este show son los métodos setData() y getData() de la propiedad dataTransfer expuesta por el objeto evento.

El método setData() es llamado típicamente en el receptor dragstart, cargando dataTransfer con una o más cadenas de contenido con tipos de contenido recomendado asociado.

Aquí hay un rápido snippet del código de ejemplo:

Quote
var dt = ev.originalEvent.dataTransfer;
dt.setData(’text/plain’, $(’#logo’).parent().text());
dt.setData(’text/html’, $(’#logo’).parent().html());
dt.setData(’text/uri-list’, $(’#logo’)[0].src);

Por otra parte, getData() te permite consultar por tipo (ej: text/html seguido por text/plain). Esto, a la vez, te permite decidir sobre los tipos de contenido aceptables a la hora del evento de soltado e incluso durante dragover para ofrecer un feedback de los tipos que no son aceptables durante el arrastre.

Aquí hay otro ejemplo del código:

Quote
var dt = ev.originalEvent.dataTransfer;
$(’.content_url .content’).text(dt.getData(’text/uri-list’));
$(’.content_text .content’).text(dt.getData(’text/plain’));
$(’.content_html .content’).html(dt.getData(’text/html’));

En lo que dataTransfer realmente se destaca, es que te permite volcar objetivos para recibir contenido de fuentes exteriores a tus elementos arrastrables definidos e incluso desde afuera del navegador.Firefox acepta tales arrastres, e intenta poblar dataTransfer con tipos de contenido apropiado extraídos del objeto externo.

Así, podrías seleccionar algún texto en un procesador de textos y volcarlo en uno de tus elementos, y por lo menos esperar encontrarlo disponible como contenido text/plain.

Incluso puedes seleccionar contenido en la ventana de otro navegador, y esperar ver text/html aparecer en tus eventos. Mira este demo para ver qué sucede cuando tratas de arrastrar varios elementos (ej. Imágenes, tablas, y listas) y resaltar contenido de otras ventanas dentro de los ítems que están ahí.

Utilizando imágenes Feedback Drag
Un aspecto importante de la interacción drag and drop es la representación del objeto que está siendo arrastrado. Por defecto en Firefox, esto es una imagen “fantasma” del propio elemento arrastrado. Pero la propiedad dataTransfer del objeto de evento original expone el método setDragImage() para utilizar en personalización esta representación.

Pueden ver el demo de esto, como así también el código JS asociado. La esencia se puede ver delimitada en estos snippets de código:

Quote
var dt = ev.originalEvent.dataTransfer;
dt.setDragImage( $(’#feedback_image h2′)[0], 0, 0);
dt.setDragImage( $(’#logo’)[0], 32, 32);
var canvas = document.createElement(”canvas”);
canvas.width = canvas.height = 50;
var ctx = canvas.getContext(”2d”);
ctx.lineWidth = 8; ctx.moveTo(25,0);
ctx.lineTo(50, 50); ctx.lineTo(0, 50);
ctx.lineTo(25, 0); ctx.stroke();
dt.setDragImage(canvas, 25, 25);

Puedes proveer un nodo DOM como primer parámetro a setDragImage(), el cual incluye todo, desde texto hasta imágenes e incluso elementos canvas. Los segundos dos parámetros indican lo que debería aparecer a la izquierda y en la parte superior mientras se arrastra.

Por ejemplo, dado que la imagen #logo es de 64×64, los parámetros en el segundo método setDragImage() colocan el mouse justo en el medio de la imagen. Por otro lado, la primera llamada posiciona la imagen de feedback de tal forma que el mouse descansa en la esquina superior izquierda.

Utilizando efectos Drop
Como mencionamos al comienzo del post, la interacción drag and drop ha sido utilizada para soportar acciones tales como copiado, movimiento y enlazado. De acuerdo a esto, la especificación HTML 5 acomoda estas operaciones en la forma de las propiedades effectAllowed y dropEffect expuestas por el objeto Event.

Para una vista rápida miren el demo de esta propiedad, como así también el código Javascript asociado.

La idea básica es que el evento receptor dragstart puede programar un valor para effectAllowed como éste:

Quote
var dt = ev.originalEvent.dataTransfer;
switch (ev.target.id) { case ‘effectdrag0′: dt.effectAllowed = ‘copy’;
break; case ‘effectdrag1′: dt.effectAllowed = ‘move’;
break; case ‘effectdrag2′: dt.effectAllowed = ‘link’; break; case ‘effectdrag3′: dt.effectAllowed = ‘all’; break;
case ‘effectdrag4′: dt.effectAllowed = ‘none’; break; }

Las elecciones disponibles para esta propiedad incluyen:
none: No se permite ninguna operación.
copy: Sólo copia.
move: Sólo mover.
link: Sólo link.
copyMove: Sólo copiar o mover.
copyLink: Sólo link o copiar.
linkMove: Sólo mover o link.
all: Copiar, mover, o link.

Por otra parte, el evento dragover puede programar el valor de la propiedad dropEffect para indicar el efecto esperado invocado en un soltado exitoso. Si el valor no coincide con effectAllowed, el soltado será considerado como cancelado en la consulta.

En el demo, podrán ver que sólo los elementos con efectos que coinciden pueden ser soltados en las zonas de soltado apropiadas. Esto se logra con código como el siguiente:

Quote
var dt = ev.originalEvent.dataTransfer;
switch (ev.target.id) { case ‘effectdrop0′: dt.dropEffect = ‘copy’;
break;
case ‘effectdrop1′: dt.dropEffect = ‘move’; break;
case ‘effectdrop2′: dt.dropEffect = ‘link’; break;
case ‘effectdrop3′: dt.dropEffect = ‘all’; break;
case ‘effectdrop4′: dt.dropEffect = ‘none’; break;

A pesar de que el sistema operativo puede proveer algo de feedback, también puedes utilizar estas propiedades para actualizar tu propio feedback visible, ambos en el elemento arrastrado y en la zona de soltado propiamente dicha.

Conclusión
En HTML5 y Firefox lograron soportar esta forma de interacción de usuario, logrando que sea sencilla y a su vez concisa y poderosa en el navegador. Pero más allá de la nueva simplicidad de estos eventos, la posibilidad de transferir contenido entre aplicaciones abre un nuevo conjunto de posibilidades para las aplicaciones basadas en la web y la colaboración con software de escritorio en general.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 22 | 2:10 PM
Doctype HTML

Qué es el Doctype en los documentos HTML y XHTML.
Vemos distintos tipos de Doctype disponibles.

Podemos decir que el DOCTYPE es una declaración del DTD usado al construir un documento HTML o XHTML.

Sin embargo, para ser un poco más estrictos, debemos aclarar que el Doctype es propio de documentos XML y SGML, y por tanto los lenguajes HTML o XHTML son unos simples herederos de algo que ya se venía utilizando.

Habría que aclarar también que DTD significa Definition Type Document y es una declaración en un metalenguaje para definir otro lenguaje. Dicho de otra manera, el DTD marca las reglas para la definición de lenguajes como el HTML.

Así, volviendo atrás, podríamos decir que los documentos HTML o XHTML están escritos en un lenguaje y con el Doctype especificamos este lenguaje y la versión del mismo. Los navegadores leerán esta declaración de doctype e interpretarán la página atendiendo a las reglas definidas en ese lenguaje.

Nota: Para los navegadores es importante conocer el doctype de la página web, porque de ese modo pueden mostrar la página web con la versión exacta del lenguaje HTML o XHTML con la que fue construida. Si no tienen una declaración de doctype, interpretarán la página en lo que se llama "quirks mode", un modo que procura maximizar la compatibilidad de la página con versiones anteriores del lenguaje HTML.

De modo que la utilización de la etiqueta es necesaria si deseamos cumplir un estándar de HTML o XHTML, para especificar qué versión o lenguaje utilizamos y que el browser renderice la página conforme a dicho estándar.

El DOCTYPE tiene una forma como sigue:

Quote
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

El doctype debe incluirse en la primera línea del código HTML de la página.

Por explicar de alguna manera esta etiqueta, que suena un poco a chino, dice que es un DOCTYPE de un documento HTML y nos da dos datos adicionales. Con el texto "-//W3C//DTD XHTML 1.0 Transitional//EN" indicamos que este documento se tiene que validar con la especificación de XHTML 1.0 y que el tipo de documento es Transitional. Por otra parte, http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd es la URL del DTD que sirve para validar el código HTML de la página.

El tipo de documento, que habíamos señalado como Transitional en el doctype expresado antes, quiere decir el documento utiliza un abanico más amplio de etiquetas HTML y atributos, incluso algunos que puedan haberse quedado obsoletos. Hay otros dos tipos de documentos. Por un lado tenemos strict, que indica que el código es HTML o XHTML estricto, sin incluir atributos y etiquetas en desuso. El otro tipo de documento que falta es el frameset, que se utiliza cuando estamos realizando una declaración de frames o frameset.

Así que, dependiendo de nuestra página y el código que utilicemos, tendremos que declarar uno u otro doctype. Existen diversos Doctype que abarcan una gran gama de posibilidades, configurando distintas versiones de HTML o XHTML y distintos tipos de documento, strict, transitional o frameset. Aquí se completa ahora con una lista de algunos de estos doctype más utilizados en la actualidad:

Doctype XHTML 1.0 strict

Quote
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype XHTML 1.0 transitional

Quote
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype XHTML 1.0 frameset

Quote
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Doctype HTML 4.01 strict

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Doctype HTML 4.01 transitional

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype HTML 4.01 frameset

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 23 | 1:20 PM
Trabajando con color de relleno y de trazado en canvas

Análisis de dos atributos esenciales para asignar color a los elementos que se dibujan en el elemento canvas. Atributos fillStyle para el color de relleno y strokeStyle para el color de trazado.

Estamos aprendiendo acerca del elemento Canvas del HTML 5 y vamos a presentar un artículo que nos servirá para darle un toque personal a nuestros diseños utilizando un poco de color. Ahora vamos a estudiar cuáles son las posibilidades para darles color.

Para trabajar con color en los elementos canvas tenemos varias posibilidades, pero de momento vamos a aprender a modificar el color con el que se rellena o se dibuja trazados. Podemos elegir entre dibujar sólo su contorno o dibujarlos rellenos de color. Ahora veremos que existen dos atributos del contexto del canvas que sirven para definir el color de relleno y el color de trazado a la hora de dibujar rectángulos u otros caminos.

Cambiar el color de relleno con fillStyle
Existe un atributo del contexto del canvas que almacena el color que se utilizará al rellenar elementos. Cambiar el color de relleno es tan sencillo como asignarle valores distintos, de colores en RGB, con lo que conseguiremos que la próxima vez que se rellene de color se haga con ese nuevo valor asignado.

Quote

ctx.fillStyle = '#990000';

Suponiendo que tenemos el objeto contexto de un canvas en la variable ctx, con la anterior línea estamos solicitando al elemento canvas que la próxima vez que se rellene el color se haga en rojo oscuro.

Cambiar el color de trazado con strokeStyle
Ahora bien, cuando dibujamos podemos elegir hacer sólo un trazado del rectángulo, u otro tipo de camino y para ello se utilizará otro color que podemos definir con strokeStyle. El atributo strokeStyle funciona de la misma manera que fillStyle, pero con la salvedad que servirá para indicar el color del trazado.

Quote
ctx.strokeStyle = '#000099';

Con esa línea estamos marcando que el color de trazado sea azul oscuro. Por lo cual, la próxima vez que se haga un trazado la línea será de ese color.

Otras notaciones para definir colores en canvas
Ahora podemos aprender cómo especificar colores en los elementos canvas. La verdad es que los que conozcan CSS no tendrán problema alguno para ello, ya que los formatos son exactamente los mismos. Por ejemplo, podremos utilizar estas notaciones.

• Color con nombre: "blue"
• Color con RGB hexadecimal, como se define en HTML: "#ff6600"
• Color con RGB en base decimal: "rgb(100, 25, 206)"
• Color RGBA (canal alpha o transparencia, como en CSS3): "rgba(255, 125, 0, 0.5)"
• Con RGB y porcentaje: "rgb(100%, 20%, 0)"

Nosotros podremos elegir la que más nos convenga según nuestro caso.

Ejemplo para cambiar el color de relleno
Veamos ahora un ejercicio que nos sirve de ejemplo para mostrar cómo cambiar el color de relleno. En concreto vamos a rellenar el canvas con muchos cuadraditos de colores aleatorios y además haremos que cada pocos instantes se vuelva a dibujar el canvas con nuevos cuadraditos aleatorios, con lo que generaremos nuestra primera y pequeña animación.

Si lo deseas, antes de continuar la lectura, puede ser interesante.

Veamos antes que nada un par de funciones para conseguir un color aleatorio en Javascript. La primera nos ofrece un número aleatorio y la segunda, que se apoya en la primera, nos sirve para generar una cadena que especifica un color.

Quote
function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}
function colorAleatorio(){
return "rgb(" + aleatorio(0,255) + "," + aleatorio(0,255) + "," + aleatorio(0,255) + ")";
}

Ahora vamos a mostrar otra función para dibujar el lienzo de un canvas, rellenando de cuadraditos con colores aleatorios:

Quote
function cuadradosAleatorios(){
for(i=0; i<300; i+=10){
for(j=0; j<250; j+=10){
contexto.fillStyle = colorAleatorio();
contexto.fillRect(i,j,10,10)
}
}
}

Como se puede ver, tenemos un bucle anidado, que realiza la tarea. En cada iteración se obtiene un color aleatorio y luego se pinta un rectángulo con ese color. La función utiliza una variable global llamada "contexto", que es el contexto del canvas sobre el que estamos dibujando.

Ahora para acabar vamos a ver la función que se encargará de inicializar el contexto del canvas y definir la ejecución periódica de la función cuadradosAleatorios() para generar la animación.

Quote
//variable global contexto sin inicializar
var contexto;

window.onload = function(){
//Recibimos el elemento canvas
contexto = cargaContextoCanvas('micanvas');
if(contexto){
//Si tengo el contexto, defino la función periódica
setInterval("cuadradosAleatorios(contexto)", 200);
}
}

Todo esto junto hace que consigamos una animación en el canvas, pues se invoca a la función cuadradosAleatorios() cada 200 milisegundos, lo que genera dibujos aleatorios distintos cada poco tiempo.

Ahora podemos ver el ejemplo en marcha en una página aparte.

Ejemplo para cambiar el color del trazado
Hemos hecho el ejemplo anterior con una ligera modificación. En este segundo caso, en lugar de rellenar los rectángulos de color, vamos a dibujar sólo el trazado. Por supuesto, en cada paso del bucle se cambiará el color de trazado, en lugar del color de relleno. Además, los rectángulos cuyo trazado estamos dibujando serán un poco menor.

La única función que tiene cambios con respecto al ejemplo anterior es cuadradosAleatorios():

Quote
function cuadradosAleatorios(){
for(i=0; i<300; i+=10){
for(j=0; j<250; j+=10){
contexto.strokeStyle = colorAleatorio();
contexto.strokeRect(i,j,5,5)
}
}
}

El ejemplo cambiando esta función se puede ver en una página aparte.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 24 | 2:28 PM
HTML5: Dibuja utilizando el tag Canvas y Javascript

Entre la serie de ventajas que incluyen las especificaciones HTML5 se encuentra Canvas, que es una forma de dibujar de manera programada mediante Javascript.

En esta nota exploraremos las cosas buenas y malas de Canvas, demostrando lo que es posible lograr gracias a este recurso mediante ejemplos y links.

¿Por qué necesitas Canvas?
Canvas puede ser utilizado para representar algo visualmente en tu navegador. Por ejemplo:

• Diagramas simples
• Interfaces de usuario elegantes
• Animaciones
• Gráficos y tablas
• Aplicaciones de dibujo embebidas
• Trabajar sobre las limitaciones del CSS

En términos básicos es un API de dibujo basada en pixeles, pero utilizada de la forma correcta puede volverse el bloque constructor de cosas muy interesantes.

¿Qué herramientas pone a tu disposición?
Herramientas de dibujo
• Rectángulos
• Arcos
• Rutas y líneas de dibujo
• Curvas Bezier y cuadráticas

Efectos
• Rellenos y trazos
• Sombras
• Gradientes lineales y radiales
• Transparencia Alpha
• Composición

Transformaciones
• Escalamiento
• Rotación
• Traducción
• Matriz de transformación

Extrayendo e incorporando información

• Carga externa de imágenes mediante URL, otros canvas o información URL
• Recuperación de una representación de PNG del canvas actual como un conjunto de datos URL

Comenzando
Para usar Canvas, necesitarás dos cosas:
1. Una etiqueta Canvas en el HTML para colocar el canvas dibujante
2. JavaScript para realizar los dibujos

La etiqueta Canvas es básicamente una etiqueta img sin ningún tipo de datos. Puedes especificar una anchura y una altura para el área de dibujo. En lugar de un atributo "alt", puedes incluir HTML en la etiqueta Canvas propia para contenido alternativo.

Ejemplo de una etiqueta Canvas:

Quote
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>

Con un elemento Canvas en el HTML, añadiremos el JavaScript. Necesitamos referencias el elemento Canvas, por lo que debes asegurarte que el navegador sea compatible con Canvas. Luego, crea un contexto de dibujo:

Quote
var drawingCanvas = document.getElementById('myDrawing');

// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext('2d');

//Canvas commands go here

}

Controlando el método getContext() en un objeto DOM canvas es la forma estándar de determinar la compatibilidad canvas.

La variable del contexto ahora referencia a un contexto canvas sobre el cual se puede dibujar.

Dibujo Básico
Por lo tanto, vamos a empezar con un ejemplo para demostrar los conceptos básicos. Vamos a dibujar una cara sonriente.

Si pensamos en la cara como un conjunto de formas básicas, tenemos:

1. Un círculo, con un trazo negro y relleno amarillo para cubrir la cara.
2. 2 círculos con un trazo negro y relleno blanco y con un círculo interno lleno de verde para los ojos.
3. Una curva para la sonrisa.
4. Un diamante para la nariz.

Comencemos por la creación de la cara redonda:

Quote
// Create the yellow face
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

Se puede ver de lo anterior que empezamos por definir algunos colores para el contorno y relleno, luego se crea un círculo (un arco con un radio de 50 y se gira a través de los ángulos de 0 a 2 * pi radianes). Por último, se aplica el contorno y relleno que se ha definido previamente.

Este proceso de creación de estilos, llegando a las coordenadas y las dimensiones y, finalmente, la aplicación de un relleno o el trazo se encuentra en el corazón del dibujo Canvas. Cuando se suman los otros elementos de la cara, tenemos:


Descarga el código fuente completo del ejemplo de la "carita feliz"

Efectos y Transformaciones
Veamos cómo podemos manipular una imagen Canvas existente. Podemos cargar imágenes externas utilizando el método drawImage():

Quote
context.drawImage(imgObj, XPos, YPos, Width, Height);

Esta es la imagen con la que vamos a jugar:

Le vamos a dar a la imagen un marco rojo. Para esto usaremos un rectángulo y lo rellenaremos con una gradiente radial para darle un poco de textura.

Quote
//Create a radial gradient.
var gradient = context.createRadialGradient(90,63,30,90,63,90);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#660000');

//Create radial gradient box for picture frame;
context.fillStyle = gradient;
context.fillRect(15,0,160,140);

//Load the image object in JS, then apply to canvas onload
var myImage = new Image();
myImage.onload = function() {
context.drawImage(myImage, 30, 15, 130, 110);
}
myImage.src = "cocktail.jpg";

Para hacer lucir a nuestro portarretrato como que está colgado en una pared, añadiremos drop shadow y rotaremos la imagen levemente para que tenga un pequeño ángulo.

Un drop shadow deberá ser aplicado al marco:

Quote
//Create a drop shadow
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "black";

Para rotar el canvas, utilizamos el método rotate() el cual toma un valor en radianes para hacer que el canvas se rote. Esto sólo aplica la rotación para los dibujos subsiguientes del canvas, así que asegúrate de ponerlo en el lugar correcto del código.

Quote
//Rotate picture
context.rotate(0.05);

Así es cómo luce el marco terminado:


Descarga el código fuente completo del ejemplo del portarretrato

Animación y Física
Los dibujos Canvas pueden ser animados mediante la re-dibujación repetida del canvas con diferentes dimensiones, posiciones y otros valores. Con el uso de la lógica Javascript, también puedes aplicar la física a tus objetos canvas.

Ejemplos de implementaciones:
* Pelotas rebotantes por Efeion »
* js-fireworks por Kenneth Kufluk »
* Utilizando canvas en conjunto con el elemento de audio HTML 5 y Twitter »

Mostrando Fuentes Elegantes
Canvas puede ser utilizado como una forma de mostrar fuentes no-estándar en una página web como una alternativa a tecnologías como sIFR. El proyecto Cufon es una aplicación de este tipo. Los reemplazos de fuentes basados en Canvas como Cufon tienen ventajas sobre sIFR, en que hay menos gastos de recursos y no es necesario ningún plug-in, sin embargo hay algunas desventajas:

• Se genera un montón de código
• Las fuentes son incorporadas, por lo que rompe los términos de licencia de muchas fuentes
• El texto no puede ser seleccionado

Las fuentes necesitan ser convertidas para su uso en Cufon utilizando las herramientas de la página principal de Cufon.

Dejando que tus usuarios hagan los dibujos
JavaScript puede interactuar con eventos de mouse y teclado, por lo que puedes crear aplicaciones de inserción de dibujos con canvas, como demuestran los ejemplos a continuación:

* Esquemas de poco peso con Tiny Doodle por Andrew Mason
* Un clon de MS paint en canvas por Christopher Clay

Compensando las deficiencias CSS del navegador
¿No puedes esperar el soporte CSS3 y deseas añadir esquinas redondeadas, degradados o la opacidad, sin crear una gran cantidad de imágenes?
Proyectos como el de jqcanvas añaden etiquetas canvas detrás de los elementos estándar de HTML para agregar diseño en tu página web.

Soporte del navegador
Las últimas versiones de Firefox, Safari, Chrome y Opera todas disfrutan de un soporte razonable para Canvas.

¿Qué pasa con Internet Explorer?
IE no soporta Canvas de forma nativa (como así tampoco IE8), sin embargo se han dado algunas compatibilidades gracias al proyecto ExplorerCanvas. Simplemente es necesario incluir un archivo Javascript extra antes de cualquier código canvas en tu página. Lo puedes esconder de otros navegadores de la forma estándar, utilizando comentarios condicionales.

Quote
<!--[if IE]><script src="excanvas.js"></script><![endif]-->

ExplorerCanvas incluso extiende el soporte canvas a IE6, sin embargo no es perfecto por lo que no esperes que tenga un rendimiento tan bueno como en los navegadores modernos que soportan canvas de forma natural.

Accesibilidad
Lienzo no es actualmente considerada como accesible ya que no hay código generado o una API para que el contenido textual sea leído. El Fallback HTML se puede agregar manualmente dentro de la etiqueta canvas, pero esto nunca será suficiente para representar al canvas de una manera accesible.

En Resumen
A pesar de que Canvas añade características a la página, no creo que haya sido bien pensado del todo. En mucha cosas se siente como un paso atrás y representa una forma bastante "a la antigua" de dibujo que es inferior al estándar moderno SVG basado en XML. Está basado en pixeles, en oposición a los lindos vectores de SVG y dibujar con él implica escribir una gran cantidad de Javascript inmanejable. La falta de accesibilidad es también un gran problema.
Sin embargo, lo que Canvas tiene a su favor, que SVG no, es que puede integrarse con nuestras páginas web existentes de forma muy sencilla. También podemos trabajar con canvas de una forma casi igual a la que trabajamos con nuestras páginas web.

Al ver los ejemplos de este artículo, podemos obtener una idea bastante buena de la gran cantidad de situaciones en la que Canvas puede ser implementado. Aunque la sintaxis puede ser frustrante, Canvas nos brinda una tecnología de dibujo que podemos utilizar de inmediato para mejorar nuestras páginas.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 25 | 12:27 PM
¿Ansioso por HTML 5?

Con la aparente decisión de que el nuevo estándar a ser adoptado por la comunidad desarrolladora web será HTML 5, existen ansias de disfrutar luego todas su bondades, aunque siento aún lejano su total uso dado lo lento que suele ser por parte de los usuarios la actualización de sus navegadores a uno más moderno y que soporte estas nuevas especificaciones, que ya han ido apareciendo. Pero eso no quita que desde ya comencemos a jugar un poco con él.

En este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y sus nuevas posibilidades. Es interesante saber que podemos utilizar elementos de HTML 5 en estos momentos aunque la mayoría de los browsers aún no lo soporten; esto se debe a que CSS puede dar estilo a cualquier etiqueta, aunque ésta prácticamente no exista (aún). Por ejemplo, si me da la gana puedo inventar una etiqueta propia y darle estilos:

Quote
HTML

<jorge></jorge>

Quote
CSS

jorge {
display: block;
width: 300px;
height: 100px;
border: 1px solid #666
}

Aunque semánticamente no va a tener valor alguno para los buscadores (y menos para los usuarios). Pero en este artículo comencemos a armar una estructura completamente en HTML 5:

Quote
<header>
<p>Header</p>
</header>
<nav>
<p>Menu</p>
</nav>
<section>
<p>Section</p>
<article>Article</article>
<article>Article</article>
</section>
<footer>
<p>Footer</p>
</footer>

Por defecto CSS asume que un elemento es inline. Para elementos definidos en HTML 4 como <div> ó <fieldset>, los estilos predeterminados por el browser para estas etiquetas los sobreponen y los hacen bloques, pero por esta vez lo haremos manualmente para las nuevas etiquetas HTML 5 que vayamos a utilizar:

Quote
header, nav, section, article, footer {
display: block;
}

Luego podremos definir los estilos para crear la estructura que nos convenga:

Quote
header {
width: 90%;
overflow: hidden;
}
nav {
width:20%;
float: left;
margin-right: 1%;
}
section {
width:67%;
float: left;
}
article {
background: #999;
}
footer {
width:90%;
overflow: hidden;
clear:both;
}

Ver ejemplo 1

Los browsers modernos no tendrán problemas hasta ahora; sin embargo los hechos en Redmond se rehusarán a mostrar los estilos CSS hasta que tengamos que enseñarles a comportarse como se debe. Por suerte con una pequeña ayuda de Javascript crearemos estos elementos para que IE sepa qué hacer con ellos y los estilos ya definidos:

Quote
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("footer");

Ver ejemplo 2 (En IE)

Ahora un ejemplo utilizando la nueva etiqueta <video />, la que (por estos momentos) utiliza el codec Ogg Theora para comprimir los videos (necesitarás Quicktime ó similar para poder exportarla en este formato). Con un poco de JS podremos manejar los botones de comando y la línea de tiempo de las películas sin mayores complicaciones, como en el siguiente ejemplo:

Quote
function Play(str) {
var video = document.getElementById(str)
video.play();
}

Ver ejemplo 3 (en Safari 4, Opera 10+, Firefox 3.5+, Chrome 2+)


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 26 | 1:56 PM
El olvidado rel

¿Por qué gastarme el tiempo de escribir un artículo sobre un atributo HTML tan antiguo, y por qué ustedes gastarían el suyo en leerlo? Que buenas preguntas para comenzar a redactar un tema donde es necesario aclarar sus usos y recalcar sus funciones, principalmente cuando las escuelas actuales aún son incipientes en enseñar la teoría por detrás de los fundamentos de los web standards. Comencemos con la parte aburrida:
El atributo rel describe la relación del presente documento al link (href) o ancla (name) especificado en el atributo href="". El valor de este atributo puede ser más de uno y al igual que las clases, separados por espacio.


Tiempo de una pausa para un pequeño detalle.

Este atributo dentro de un link <a></a> no es utilizado ni reconocido por ningún browser actualmente (por eso seguramente ha sido menospreciado y olvidado por tanto tiempo).

Entonces, ¿para qué seguir gastando nuestro tiempo? Pues rel="" sí es considerado por los buscadores para obtener más información sobre los enlaces, y es muy difundido mediante microformatos.

Los valores de este atributo para HTML 4.01 son (o eran, como quieras verlo):

  • alternate
    una versión alternativa del documento (por ej. una traducción, página para impresión, etc).

  • stylesheet
    este es familiar; es una hoja de estilos linkeada externamente.

  • start
    el primer documento de un conjunto de documentos. Este valor le indica a los buscadores que la página es considerada el punto de inicio de la colección.

  • prev, next
    documento anterior y siguiente de una misma colección de documentos; podría utilizarse para pre-cargar los documentos siguientes.

  • contents
    una tabla de contenidos para el conjunto de documentos.

  • index
    una página que ofrece un índice para los documentos.

  • glossary
    una página con un glosario de términos para el conjunto de documentos.

  • copyright
    textos legales para todo el documento.

  • chapter
    pagina que abre un capítulo.

  • section
    pagina que abre una sección.

  • subsection
    pagina que abre una sub-sección.

  • appendix
    el apéndice.

  • help
    una página de ayuda (más información, otras fuentes de información, instrucciones, etc).

  • bookmark
    pagina con enlaces a contenido dentro del mismo conjunto de documentos.

    Para HTML 5 y a través de los microformatos (prácticamente XFN), se ha privilegiado la relación de enlaces a personas más que a documentos o partes de él. Los siguientes son los – hasta ahora – aprobados para HTML 5:

  • acquaintance
    la persona linkeada ofrece conocimiento anexo al documento actual.

  • child
    la persona referenciada es hija de la persona autora del documento.

  • co-resident
    la persona referenciada vive en la misma casa del autor.

  • co-worker
    la persona referenciada trabaja con el autor.

  • colleague
    la persona referenciada es colega del autor.

  • contact
    el autor considera a la persona referenciada como un contacto.

  • crush
    la persona referenciada atrae al autor.

  • date
    el autor está saliendo con la persona referenciada.

  • kin
    la persona referenciada es parte de la gran familia del autor.

  • me
    la persona referenciada y el autor son la misma persona.

  • met
    el autor conoce a la persona referenciada.

  • muse
    la persona referenciada inspira al autor.

  • neighbor
    la persona referenciada vive cerca o es vecino del autor.

  • parent
    la persona referenciada es padre del autor.

  • sibling
    la persona referenciada es hermano(a) del autor.

  • spouse
    la persona referenciada es cónyugue del autor.

  • sweetheart
    el autor considera al(a) referenciado(a) como su cariño.

    A partir de necesidades específicas de fabricantes de browsers y de tecnologías, se han creado algunos valores que son específicos, como:

  • nofollow
    es utilizado por Google para especificar que el spider de indexación no debe seguir ese link.

  • shortcut icon
    reconocido por los browsers modernos para enlazar un archivo favicon.ico.

  • apple-touch-icon
    utilizado por Apple para especificar un archivo ícono para un sitio web.

    Pues como leen, este malhogrado atributo está resucitando y nos permite vincular objetos y documentos con una semántica nunca antes vista. Queda en nosotros utilizarla correctamente y sacarle provecho en nuestros proyectos.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 27 | 4:53 PM
    Html crear thumbnail de imágenes

    Un thumbnail en Html es una imagen que se muestra miniaturizada para que se carga en la página web sea más rápida. También se puede utilizar para mostrar galerías de fotos con lo que no mostramos el tamaño real de la imagen y así podemos mostrar un mayor número en menos dimensiones.

    Para crear un thumbnail lo podemos hacer mediante código Css y también con el propio Html.

    Codigo Html

    • Es la forma más sencilla de realizar ya que se puede hacer con una sola línea de código.

    Quote
    HTML:

    <img src="img/imagen.jpg" width="125" height="125">

    Codigo Css

    • En Css también es sencillo de utilizar

    Quote
    HTML:

    <style type="text/css">
    .thumbnail {width:25%;height:25%;margin:5px;}
    </style>
    <IMG src="img/imagen.jpg" CLASS="thumbnail"/>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 28 | 1:44 PM
    Pop up con HTML


    En este post aprenderás como hacer un pop up partiendo de un HTML en nuestro ejemplo seleccionamos el icono de Google voice para hacerlo. Esperamos sea de tu utilidad.

    Aquí puedes ver un demo online de lo que haremos aquí.

    PASO 1
    Creamos una carpeta nueva llamada popup y dentro de ella creamos una nueva carpeta llamada imágenes dentro de la cual vamos a colocar las imágenes que vamos a utilizar.

    PASO 2
    Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

    PASO 3
    Con el comando Ctrl + S guardamos nuestro documento dentro de nuestra carpeta popup con el nombre “pop up im.html”

    PASO 4
    Ahora vamos a copiar el siguiente código dentro de nuestro HTML debajo de las etiquetas.

    Quote
    <script>
    function abrir(url) {
    open(url,'','top=0,left=0,width=515,height=515') ;
    }
    </script>
    <style type="text/css">
    <!--
    blockquote{
    }
    img{
    border:none;
    }
    hr{
    display:none;
    }
    -->
    </style>

    PASO 5
    Dentro de las etiquetas vamos a copiar el siguiente código.

    Quote
    <div align="center"><a href="javascript:abrir('popup.html')"> <img src="imagenes/boton.jpg" alt="Pop Up en HTML" width="500" height="500" /></a></div>

    Como se observa en el código al darle click a la imagen llama a un archivo llamado popup.html el cual vamos a crear a continuación.

    PASO 6
    Con el comando Ctrl + S vamos a crear un nuevo documento HTML en blanco.

    PASO 7
    Desde la carpeta imágenes vamos a arrastrar la imagen que queremos que salga en el Pop Up.



    PASO 8
    Ahora con el comando Ctrl + S vamos a guardar nuestro HTML con el nombre popup.html dentro de la carpeta popup que creamos al principio.



    PASO 9
    Listo ya tenemos nuestro efecto terminado.

    Descarga el editable de pop un con HTML


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 29 | 12:38 PM
    Extremos de las líneas en canvas

    En las líneas que se dibujan en los elementos canvas del HTML 5 se pueden configurar distintos tipos de extremos, cuadrados, redondeados, etc

    El elemento canvas del HTML 5 permite dibujar líneas que pasan por caminos a las que podemos asignar diferentes configuraciones. Ahora vamos a ver una de las configuraciones posibles para líneas, que tiene que ver con la forma de sus puntas o extremos.

    Para aprender a configurar el borde de una manera práctica, veremos además un par de ejemplos de dibujo en los elementos de canvas. Pero antes podemos comenzar por explicar qué tipos de extremos distintos podemos asignar a las líneas que dibujamos en un canvas.

    Tipos de extremos y propiedad lineCap
    La propiedad lineCap, que pertenece al contexto de un canvas, nos sirve para asignar los tipos de extremos que queremos en las líneas. Admite tres valores distintos:

    • butt
    • round
    • square

    Vamos a explicar a continuación esos tres valores, pero para que sea más sencillo, veamos antes la siguiente imagen, con tres líneas en color verde que tienen configuradas cada uno de los posibles extremos que tenemos disponibles en el elemento canvas.

    Nota: aparte de las tres líneas horizontales para expresar los tres valores de extremos distintos, se puede ver una línea vertical de color rojizo que sirve para indicar el comienzo y fin de las líneas horizontales que se han dibujado.

    La primera línea verde corresponde con el valor "butt", que es el predeterminado. En este caso la línea comienza justamente en el lugar donde comienza el camino definido antes de dibujar la línea (ver la línea roja para entender este punto).

    La segunda línea horizontal tiene el valor de lineCap "round" y hace que los extremos de la línea estén redondeados. Cuanto más gruesa la línea, más notaremos que los extremos están redondeados, por eso hemos dibujado líneas con una espesura considerable (22 píxeles).

    La tercera línea verde tiene el valor de lineCap "square", que es muy parecido al valor "butt", pero vemos que en este caso la línea sobrepasa un poco los extremos del camino. Esto es porque en vez de empezar en el lugar donde comienza el camino, empieza un poco más allá, atendiendo a su grosura. Por ejemplo, si la línea tenía como en este caso 22 píxeles de anchura, el extremo traspasará el límite del camino en un 50% de esa anchura. Es algo parecido a lo que ocurre con el extremo redondeado, pero sin redondear la punta de la línea.

    Ejemplo de caminos y líneas con diferentes extremos
    La imagen anterior, con las diferentes líneas con distintos extremos, lo hemos creado a partir de un código fuente con el propio elemento canvas. Utilizaríamos un código como el que sigue.

    Quote
    var ctx = cargaContextoCanvas('micanvas');
    if(ctx){
    //líneas verticales rojas
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#900';
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,180);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(480,20);
    ctx.lineTo(480,180);
    ctx.stroke();

    //líneas horizontales verdes con diferentes configuraciones de extremos
    ctx.beginPath();
    ctx.lineWidth = 22;
    ctx.lineCap = "butt";
    ctx.strokeStyle = '#090';
    ctx.moveTo(20,60);
    ctx.lineTo(480,60);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.moveTo(20,100);
    ctx.lineTo(480,100);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap = "square";
    ctx.moveTo(20,140);
    ctx.lineTo(480,140);
    ctx.stroke();

    }

    Este ejemplo lo podemos ver en una página aparte.

    Ahora veamos un segundo ejemplo, para mostrar que los grosores de línea y los extremos se pueden aplicar a otros tipos de camino, no necesariamente líneas rectas creadas con el método lineTo().

    En este segundo ejemplo dibujamos un smile sonriente, al que le hemos aplicado extremos de las líneas redondeados para suavizar la figura.

    Si lo deseas, puedes comenzar por ver el ejemplo en una página aparte.

    Esto se consigue haciendo varios caminos de tipo arco con configuraciones de línea con lineCap="round" y grosores distintos.

    Quote
    var ctx = cargaContextoCanvas('micanvas');
    if(ctx){

    //Camino para la sonrisa
    ctx.beginPath();
    ctx.lineWidth = 20;
    ctx.lineCap = "round";
    ctx.strokeStyle = '#009';
    ctx.arc(75,75,60,Math.PI,0,true);
    ctx.stroke();

    //ojo izquierdo
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.arc(35,25,10,0,Math.PI,true);
    ctx.stroke();

    //ojo derecho
    ctx.beginPath();
    ctx.arc(110,25,10,0,Math.PI,true);
    ctx.stroke();

    //círculo relleno para la nariz
    ctx.beginPath();
    ctx.arc(73,50,10,0,Math.PI*2,true);
    ctx.fillStyle = '#009';
    ctx.fill();

    }

    El ejemplo no reviste ninguna complicación, si se habían entendido los caminos con arcos en canvas.

    Para que quede clara la construcción del ejemplo, vamos a mostrar el código HTML completo de este segundo ejemplo para el dibujo del smile.

    Quote
    <html>
    <head>
    <title>Canvas caminos arco extremo redondeado</title>
    <script>
    //Recibe un identificador del elemento canvas y carga el canvas
    //Devueve el contexto del canvas o FALSE si no ha podido conseguise
    function cargaContextoCanvas(idCanvas){
    var elemento = document.getElementById(idCanvas);
    if(elemento && elemento.getContext){
    var contexto = elemento.getContext('2d');
    if(contexto){
    return contexto;
    }
    }
    return FALSE;
    }

    window.onload = function(){
    //Recibimos el elemento canvas
    var ctx = cargaContextoCanvas('micanvas');
    if(ctx){

    //Camino para la sonrisa
    ctx.beginPath();
    ctx.lineWidth = 20;
    ctx.lineCap = "round";
    ctx.strokeStyle = '#009';
    ctx.arc(75,75,60,Math.PI,0,true);
    ctx.stroke();

    //ojo izquierdo
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.arc(35,25,10,0,Math.PI,true);
    ctx.stroke();

    //ojo derecho
    ctx.beginPath();
    ctx.arc(110,25,10,0,Math.PI,true);
    ctx.stroke();

    //círculo relleno para la nariz
    ctx.beginPath();
    ctx.arc(73,50,10,0,Math.PI*2,true);
    ctx.fillStyle = '#009';
    ctx.fill();

    }
    }

    </script>

    </head>

    <body>

    <canvas id="micanvas" width="150" height="150">
    Recicla tu navegador!!
    </canvas>

    </body>
    </html>

    Eso es todo! Si lo deseamos, podemos ver esta carita sonriente en una página aparte.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 30 | 6:48 PM
    Introducción a HTML5

    HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

    La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery, jQuery UI, Sproutcore, entre otros.

    Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.
    Nuevas etiquetas de HTML5

    HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:

    Quote
    <!DOCTYPE html>

    Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar.

    Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un simple div o span.

  • <header>
    Hacer cosas como <div id="header"> es un poco estúpido cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.

  • <hgroup>
    Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.

    En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

  • <nav>
    Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. Sólo puedes tener un <nav> por página.

  • <section>
    Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios.

  • <article>
    Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.

  • <aside>
    Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.

  • <footer>
    Este es obvio. Es el pie de página y todo lo que lo compone.

    Atención: div no está muerto:

    Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo usa las etiquetas semánticas de HTML5 donde sean necesarias.

    Ejemplo de blog hecho con HTML5

    Quote
    <header>
    <hgroup>
    <h1>El blog de Freddie</h1>
    <h2>Este es el blog de John Freddy Vega</h2>
    </hgroup>
    </header>
    <nav>
    Aquí va la botonera de navegación
    </nav>
    <section>
    <article>Aquí va un post, con su titulo en h2</article>
    <article>Aquí va un post, con su titulo en h2</article>
    <article>Aquí va un post, con su titulo en h2</article>
    </section>
    <aside>
    Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.
    </aside>
    <footer>
    Pie de pagina, amenazas de copyright, etc.
    </footer>

    Las etiquetas nuevas "importantes" de HTML5

    Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son:

  • <video>
    Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs.

  • <audio>
    Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también depende del navegador.

  • <input *>
    Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la capacidad de insertar cajas tipo "email" que se autovalidan, calendarios tipo "date", sliders, números, entre otras.

  • <canvas>
    Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

  • <svg>
    Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

    La segunda revolución de la web y el soporte de HTML5 en navegadores viejos

    HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener. Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio de Internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el objeto XmlHttpRequest, más conocido como AJAX.

    Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador responsable de detener la innovación en los estándares web también es el creador de la innovación más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían sido inviables.

    Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE. Gracias a los grandes hackers del mundo:

    HTML5 Enabling Script: Permite usar las etiquetas semánticas dentro de IE6, 7 y 8 como si fueran divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible agregarles diseño a ellas o cualquier elemento dentro de ellas.
    IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. Es magia negra, les digo!
    Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o alternativa.

    Gracias a estos scripts y a los valientes hackers del mundo que los escribieron, podemos ser desarrolladores felices.

    Nuevas capacidades de Javascript

    Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha recibido muchas habilidades nuevas. Esta es una lista de las más importantes.

    Web Storage
    Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor. Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que subir los KB que pesan todas las cookies que le hemos dado.

    Las cookies apestan.

    Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, con soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier tipo de datos cabe en un Storage.

    Web Workers
    ¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso. Web Workers permite tener múltiples .js corriendo en paralelo en una misma página. Haciendo tareas complejas más veloces gracias al multithreading.

    Web Sockets
    Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible usar implementaciones multiuser en Javascript como PubSubHubBub.

    Arrastrar y soltar
    Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5. Puedes traer trozos de datos o archivos enteros.

    Geolocalización
    Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona en cualquier PC, no sólo en teléfonos ¿No me crees? Prueba este demo y dime en los comentarios qué tan cerca de ti te encontró.

    Bonus: Si tienes wifi prendido, tiene mejores posibilidades de encontrarte.

    Nuevas capacidades de CSS3

    Diseñar en CSS ha sido una mezcla entre risas de victoria y gritos de ira. No sólo por la falta de compatibilidad con IE, sino porque cosas como bordes redondeados en tamaños dinámicos requiere múltiples divs, estilos y cuatro PNGs diferentes en el mejor de los casos. Ya no más, CSS3 es hermoso y trae para ti opciones que hacen el diseño estúpidamente fácil.

    @font-face, @fucking-font-face
    Es la capacidad de usar CUALQUIER FUENTE EN HTML. Sin necesidad de Flash, Cufon, SiFR u otras cosas de hippies. ¿Saben qué otra cosa? Esto funciona perfecto desde Internet Explorer 6 para arriba ¿Y saben qué más? NADIE LO USA.

    Fucking @font-face, how does it work?

    Selectores CSS
    ¿Te ha tocado hacer un diseño donde una lista o tabla tiene algunos elementos en blanco y los otros en gris? Como una cebra. Antes, la única forma era hacerlo a mano o con un script del lado del server. Ahora, con CSS3, sólo tienes que especificar un color para "odd" y otro para "even" y listo.

    Igualmente, puedes crear estilos para el primer elemento y otro para el último. O estilos para etiquetas iguales con ciertos atributos diferentes en HTML. Y esto es muy compatible desde IE8.

    Columnas de texto

    ¿Sabes cómo se hacía antes que varios párrafos de texto se dividiera en columnas con HTML? No se podía. Ahora sólo requieres un atributo CSS para lograrlo. Y puedes controlar la cantidad de columnas, el espacio entre ellas, lineas de separación, etc.

    Opacidad, transparencia, canales alpha, contraste, saturación y brillo
    Autodescriptivo. Vuelve lo que quieras transparente u opaco con una instrucción. Imágenes, textos, sombras, bordes, lo que sea. O si quieres convertir una foto en blanco y negro o sepia, lo puedes hacer con sólo CSS.

    Animaciones de transición y transformación
    Las animaciones que antes lograbas con jQuery o Javascript ahora pueden ser logrados sólo con CSS. Con una ventaja adicional, al hacerlo con CSS, las animaciones vendrán aceleradas por hardware. Mucho más veloces, sobre todo en dispositivos móviles.

    Bordes redondeados
    Sí. Con una instrucción puedes hacer que cualquier caja tenga bordes redondeados como quieras. Olvidate de crear múltiples divs, cortar pngs y otros temas arcaicos.

    Reflecciones, gradientes y sombras
    Si no has superado la web 2.0, puedes poner reflecciones a cualquier elemento HTML. Pero lo interesante es crear gradientes para fondos y sombras para cajas o texto, todo en una sola linea de código y con el mismo nivel de complejidad que logras con una sombra en Photoshop o Fireworks.

    Sitios de uso general que ya están usando HTML5
    Esta es una lista corta de sitios que ahora mismo, en producción, usan HTML5. Si conoces más, por favor compartelos en los comentarios y los voy agregando a la lista, con tus créditos.

    Twitter y m.twitter.com

    Casi todo el diseño de las versiones desktop y móvil de Twitter usan intensivamente CSS3. En especial por los bordes redondeados. En la versión móvil de Twitter se usa geolocalización sumado a Google Geolocation Services para geolocalizar los tweets.

    Vimeo/m/ y m.youtube.com

    Las versiones móviles de Vimeo y Youtube para teléfonos, así como sus versiones para tablets (iPad, Samsung Galaxy Tab, Playbook, etc) están hechas sólo con HTML5. CSS3 para los diseños y obviamente la etiqueta <video> para servir los videos, sin necesidad de Flash.

    Gmail.com

    Gmail usa Web Storage para guardar en el disco del usuario los más recientes correos. Así puedes acceder a ellos temporalmente si se cae la conexión. También usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para diseño.

    Scribd.com

    Scribd es un servicio que convierte cualquier PDF, PPT o PSD en HTML plano, con texto seleccionable y rendereado en el navegador, gracias en especial a @font-face y SVG.

    Facebook

    Las versiones móviles y desktop de Facebook hacen un uso intensivo de CSS3 para diseño y animaciones, así como de Web Sockets (o Pubsubhubbub) para las notificaciones de actividad y el chat. Muchas apps de Facebook usan otras capacidades.

    TiaXime.com

    El diseño de Tia Xime sería infernal de implementar si no fuera por CSS3. Que se joda la gente que usa IE6.

    ¿Pero esto en serio lo puedo usar ahora mismo?

    El mejor sitio que puede responderte eso es CanIUSe.com. Donde encontrarás una lista de todas las capacidades de HTML5, CSS3 y el nuevo Javascript, junto a una tabla de compatibilidad. Sin embargo, no te asustes demasiado si ves muchos cuadros rojos. Recuerda los scripts que mencioné arriba como IE-CSS3 o HTML5 Enabling Script. Gracias a ellos, muchos de esos rojos se convierten en verdes.

    Aun así, muchos dirán que IE6 sigue siendo la razón por la que no usan HTML5. Bueno, quiero mostrarles las estadísticas de una semana de un sitio – una web de audiencia genérica, gente normal que usa la web. El público más general posible:

    ¿Parece que IE tiene mucho mercado, a pesar de estar cediendo, verdad? Bueno, miremos más de cerca a IE a ver quién usa realmente IE6:

    Sólo el 14% usa IE6. Y si el total de usuarios de IE es del 49%, eso significa que los usuarios de IE6, en total, son solamente el 6.8% de las visitas. En síntesis:

    FUCK IE6!!

    No tienen por qué sufrir. Soportar IE6 es más caro que las visitas que aporta. Manden al carajo IE6 y vivan el feliz mundo de HTML5.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Fundamentos de HTML
    Página 2 de 4«1234»
    Búscar: