|

Favoritos del CSS Reboot

ByLuis

A pesar de apuntarse centenares de sitios, por segunda edición consecutiva el CSS Reboot sólo nos ha deparado apenas una veintena de diseños destacables. Entre hoy y mañana publicaremos en CSS Manía lo más destacable. Dicho esto, siempre son bienvenidas este tipo de iniciativas.

Nuestros favoritos sin ningún orden en particular:

Similar Posts

|

Futura estandarización de XMLHttpRequest

ByLuis

w3c.pngEl nuevo equipo Web API Working Group de la W3C se ha puesto a trabajar en el desarrollo de una especificación oficial para XMLHttpRequest.
Aunque la mayoría de los navegadores más populares admiten el objeto XMLHttpRequest, existen diferencias de uso, lo que dificulta una implementación que funcione en varios navegadores.
El documento que está realizando la gente de W3C pretende recoger las implementaciones que se encuentran en la mayoría de los navegadores e incluirlos en el estándar para así facilitar el desarrollo multi-navegador.
No recogerán implementaciones que solo lo ofrezca un navegador, pero si estará pensado para que surjan nuevas actualizaciones.
Vía / SitePoint

|

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

Script AJAX para crear pestañas

ByLuis

Aunque es más fácil hacer copy/paste de un script o simplemente usarlo, que ver cómo funciona por dentro, os recomiendo que le echéis un ojo a este script para crear pestañas mediante AJAX.
Si os fijáis, se trata de una lista ul que mediante estilos forma las pestañas. En cada uno de los elementos li hay un enlace a cada una de las páginas que queremos mostrar. También habrá un div que contendrá la página que queremos mostrar en su interior.
Lo más interesante para mí es que la idea que se suele tener de que AJAX tiene que apuntar a un script no es cierta, apunta a una url y obtiene el resultado, si es un script, el resultado que este devuelva, y si es una página HTML, el contenido de esta.
La segunda cosa que resaltaría es una forma de programar que me parece muy limpia, escribir el HTML sin Javascripts añadidos que son complicados de seguir (sobre todo eventos: onclick, onmouseover, …) y luego que el script general se encargue de modificar los elementos HTML como corresponda, en este caso coge los enlaces y les añade el evento onclick, el cual depende del contenido del atributo href y el atributo rel.
Ajax Tabs Content script
Vía / Digg

Uso excesivo de capas y estilos en CSS

ByLuis

Un buen artículo en el que nos comenta sobre el uso excesivo de capas y de clases. Sobre todo de DIVs, muchas veces se encierra en una capa unas etiquetas para darles formato cuando se puede evitar la capa contenedora por tener solamente un elemento hijo en su interior:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>

Se puede sustituir por:

<h1>My site name</h1>

con estos estilos

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

¿Por qué evitar estos usos incorrectos?

  • No es semántico: solo están puestos allí para maquetar.
  • No es bueno para SEO: los buscadores hacen uso de las etiquetas de cabecera para obtener datos significativos.
  • Sobran

El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:

<div id="menu">

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

</div>


CSS Diseases: Divitis & Classitis


Vía / CSS Globe
|

21 cuestiones sobre block, inline y floating en HTML

ByLuis

Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
Vía / Pixel Groovy

Formatear el código como en Sentido Web

ByLuis

Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:

El proceso que sigue es el siguiente:

  • Obtener todos los elementos pre.
  • Para cada pre leer el primer elemento code que tenga.
  • Obtenemos el texto que contiene.
  • Dividimos el texto en líneas.
  • Por cada línea comprobamos si hay algun tipo de comentario, si hay comentario lo separamos en dos partes para luego darle distintos estilos, diferenciando así el formato del comentario.
  • Nos creamos un elemento ol, y en cada li insertamos una línea obtenida anteriormente.
  • Sustituimos el elemento pre por el ol.

Read More “Formatear el código como en Sentido Web”

One Comment

Comments are closed.