|

Revisión sobre HTML5

ByLuis

Aunque ya en su momento hablamos de las etiquetas que traerá HTML5, no hemos llegado a hablar del resto de novedades que quieren introducir en HTML5.

Aunque en otros sitios ya se ha hablado de ello, al no haber encontrado un artículo que me pareciera sencillo y completo, sobre todo porque no solo comenta aspectos técnicos, sino un poco de base y explicación de por qué es necesaria esta nueva versión. En este caso se trata de un artículo que nos indica los cambios/novedades principales:

  • Nuevos elementos, los cuales ya hemos mencionado y que están divididos en las siguientes categorías: elementos metadata (title, base, link), elementos de sección para dividir las páginas en secciones (body, section, nav y article), elementos de bloque (blockquote, section, p y div), elementos inline (a, meter e img), elementos estructurados ol, blockquote y table), elementos interactivos entre el usuario y la página vía teclado o ratón (a, button y radio), control de formularios y otros.
  • Cambios de programación en el DOM, introduciendo la nueva versión del DOM.
  • Formularios web actualizados.
  • Eventos server-sent.
  • Capacidades para gráficos dinámicos.

An Overview of HTML 5

Vía / dzone

Similar Posts

|

Contactos: de la web a la agenda con microformatos y xslt

ByLuis

microformats_logo.pngLos microformatos están de moda. Cada vez se habla más sobre ellos y muchos los recomendamos, intentamos difundirlos y apostamos por su uso. Pero suele haber una pregunta recurrente cuando hablamos del tema ¿Qué utilidades tienen?.

Podemos contestar que constituyen una buena práctica, que aportan semántica a nuestra web, que facilitan el procesamiento de nuestro código por terceras partes… pero a veces es complejo poner ejemplos concretos.

Hace poco tiempo explicaba en tripix.net cómo la extensión de Firefox, Operator, trabaja con los microformatos, hoy vamos a ver otra interesante aplicación: cómo hacer que cuando la información de contacto en una web, microformateada con hcard, se exporte directamente a vCard, un formato de archivo estandarizado que para el intercambio de datos de contacto que entienden la práctica totalidad de las aplicaciones de agenda (Thunderbird, iCal, Outlook, etc.)

El microformato en nuestra página

Vamos a utilizar un ejemplo muy sencillo en el que mostramos mis datos de contacto. El código que utilizaríamos para poner esta información en nuestro código xHtml sería el siguiente.

<div class="vcard">
<a class="url fn" href="http://sentidoweb.com/">Xose Pita</a>
<br />
<div class="adr">
<span class="locality">Granada</span>, <span class="country-name">España</span>
</div>
<div class="org">Sentido Web</div>
</div>

Pasando de hCard a Vcard

Para esto utilizaremos una pequeña utilidad que ha desarrollado Brian Suda, uno de los grandes evangelistas de los microformatos, y que mediante PHP y XSLT (lenguaje que permite transformar cualquier documento XML a otra sintaxis) convierte la información de contacto microformateada que encuentre en una url a formato vCard.

Solamente es necesario enlazar con la dirección http://suda.co.uk/projects/X2V/get-vcard.php y pasarle por GET el parámetro "uri" con la url donde está la información de contacto. Por ejemplo: 


<a href="http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://sentidoweb.com/about/">Guardar tarjeta de contacto</a>

Útil y fácil, así que Descargar mi tarjeta de contacto.

Podéis ver un ejemplo práctico ya con CSS en mi perfil de Sentido Web.

Vía / Shape Shed

| |

Menú radial mediante XHTML

ByLuis

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}

Javascript Tutorial – Radial Menus Part 1

| |

Se vende StyleGala

ByLuis

stylegala_is_closing.jpg Las noticias en el mundo del CSS y Showcases durante la última semana no han sido muy buenas que digamos. Ayer nos enterábamos que Web Standards Awards cierra sus puertas después de casi 2 años y únicamente 100 screenshots seleccionados.
Hace apenas unas horas leemos que la archiconocidísima Stylegala también está en venta igual que CSS Vault en su día y Unmatched Style. Más bien en un cambio de dueño a través de una subasta que empieza a partir de 30.000$ en el que uno de los factores estrella es que gana en publicidad unos 2400 dólares al mes, aunque desde hace 6 meses tiene un ritmo de publicación de 1 página al mes.
Diseñorama también habla del asunto y se pregunta qué futuro tienen los CSS Showcases.
A esta pregunta no podemos ser objetivos, y sabemos y somos conscientes de la rentabilidad, además de que nos divertimos mucho no solo manteniéndola sino sabiendo que es muy útil para todos los profesionales y aficionados del sector disipando cualquier complejo que la comunidad hispana pudiera tener en cuanto al saber hacer.
Deseamos muchísima suerte a David en su subasta y que los próximos dueños vengan con las pilas cargadas porque nosotros seguiremos innovando.

|

WebSockets en HTML5

ByLuis

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); 
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data);  };
  ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
  // the browser doesn't support WebSocket.
  alert("Websocket is not supported in your browser");
}

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Vía / DZone

| |

CAPTCHA DHTML y CSS con PHP

ByLuis

Sí, demasiadas siglas para un título, pero se trata de eso, de generar un CAPTCHA mediante PHP, pero la característica de este CAPTCHA es que se realiza mediante CSS y HTML, para lo cual presentará una tabla con celdas y solo una de ellas con un color diferente que será la que hay que pulsar para poder pasar el CAPTCHA.
csscaptcha.png
La clase envía mediante AJAX una petición al servidor pasando las coordenadas de los clicks del usuario hasta que se envían un numero total de clicks a cajas coloreadas.
DHTML and CSS CAPTCHA