Contenido

557 herramientas para la Web semántica

17 sep

+ 5

Si te quieres preparar para la Web semántica, no lo dudes, echalé un vistazo a estas 557 herramientas que te permitirán acercarte más a la Web Semántica y cojerla por los …

¿Como enlazar código de la forma más semántica posible?

10 sep

+ 14

Escribiendo artículo anterior me ha asaltado una duda. ¿Como enlazar código de la forma más semántica posible? 

Opción 1)

<a href="http://es2.php.net/sprintf"><code>sprintf()</code></a>

¿Indicando que el término del enlace es código?.

Opción 2) 

<code><a href="http://es2.php.net/sprintf">sprintf() </a></code>

¿Indicando que el enlace nos lleva a código? 

Seguro que es una chorrada, pero leyendo el código no velo mismo en el caso 1 que en el caso 2. ¿Alguna idea? 

Técnicas CSS3 que estoy deseando que lleguen a mis manos

22 ago

+ 22

Si miramos al horizonte empieza a deslumbrar el futuro del CSS, con la salida de CSS3 la vida de los diseñadores web va a mejorar considerablemente y no es para menos, por que con las mejoras que se están acercando ¿quien no se aprovechará de ellas?

Echemosle un vistazo a las que parecen serán las más interesantes.

Multi-columnas

Sin duda, el tabular en columnas el texto de nuestras páginas es algo que hasta ahora era realmente complicado (por no decir imposible). Con la nueva especificación del CSS está tarea será coser y cantar debido a que una serie de atributos nos permitirán modificar nuestro contenido de una forma realmente interesante. 

En navegadores como Firefox 1.5 y superiores, estás mejoras ya están disponibles de forma exclusiva.

DIV {
  width: 400px;
  column-count: 4;
  column-width: 100px;
  column-gap: 10px
  column-rule: none;
}

Multi-background

Otra de las características con las que me quiero enfrascar es la del multi-background. La posibilidad de usar varios background para un elemento es algo hasta ahora impensable y motivo para destrozar la semántica del sitio con divs que simulen formar parte unos de los otros.

background: url('http://www.joostdevalk.nl/images/body-top.gif')
	top left no-repeat,
url('http://www.joostdevalk.nl/images/banner_fresco.jpg')
	top 11px no-repeat,
url('http://www.joostdevalk.nl/images/body-bottom.gif')
	bottom left no-repeat,
url('http://www.joostdevalk.nl/images/body-middle.gif')
	left repeat-y;

Esquinas redondeadas

Otra cruz de los diseñadores web son las tan usadas en la web 2.0 esquinas redondeadas, hasta ahora los sistemas más comunes nos obligaban a crear un entramados de elementos que nos recordaban los engendros aquellos originados en tablas… Ahora con una sola línea podremos hacer que nuestros elementos posean esas elegantes esquinas redondeadas.

<div style=" background-color: #ccc;
             border-radius: 5px;
             border: 1px solid #000;
             padding: 10px;" >...</div>

Tablas zebra

Una forma de mejorar el visionados de datos tabulados a los usuarios es usar tablas zebra, para diferencia entre líneas. De esta forma facilitamos, incluso a simple vista, la interpretación de los datos. Hasta ahora esto era necesario hacerlo desde un lenguaje de servidor o haciendo que el cliente de algúnas formas poco recomendada, pero completamente funcional, se encargara de montarlas…. CSS3 mejora considerablemente este punto gracias a la pseudo clase nth-child.

tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; } 

Opacidad 

El tema de la opacidad de elementos es algo que hasta ahora mediante hacks, javascript y muchos elementos no estandarizados, podíamos emular y conseguir salir de paso. Ahora está tarea quedará delegada al navegador que ya estará preparado para tratarla como esté estipulado.

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

Resize

Hasta ahora si queríamos hacer que nuestros elementos fuera personalizables por el usuario en cuanto a tamaño, teníamos que recurrir a scripts javascript que alteraban los atributos de nuestro elemento. Con CSS3, dejaremos que el navegador gestione todo este proceso simplemente indicandolo con la propiedad resize.

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

Media paramétrizados

Otra gran idea de los pensadores a la hora de decidir que poner y que no poner en la nueva especificación. CSS3 incorporará un sistema de parametrización de media con el que podremos hacer virguerías como estas:

@media all and (min-width: 640px) {
	div.example#min-width {
		background-color: #0f0;
	}
}	
@media screen and (max-width: 1100px) {
	div.example#max-width {
		background-color: #0f0;
	}
}

Ymuuchas cosillas más… 

Extra

Como extra y pendiente de leerlo detenidamente el nuevo sistema de posicionamiento de elementos, se acabaron problemas de elementos flotantes y elementos relativos. 

Enlaces relacionados

  1. CSS3.info
  2. CSS3 W3C
  3. CSS Advanced Layout 

Tablas que no son tablas, ¿quien necesita la semántica?

12 ago

+ 7

¿Alguna vez te has visto en la necesidad de convertir tus div’s en tablas? Usando la propiedad display de CSS, podrás tener las ventajas de las tablas sin perder las flexibilidad de los div’s. Evidentemente estamos perdiendo parte de esa semántica que tanto intetamos conseguir, pero en ocasiones hay que asumir males menores para conseguir resultamos mayores.

//CSS
.table { display: table; }
.table .row { display: table-row; }
.table row .cell { display: table-cell; }
//HTML
<div class="table">
      <div class="row header">
         <div class="cell">Header Column 1</div>
         <div class="cell">Header Column 2</div>
      </div>
      <div class="row body">
          <div class="cell">Body Column 1</div>
          <div class="cell">Body Column 2</div>
      </div>
  </div>

Evidentemente, no puede algo tan fácil, ya que navegadores como IE6 y 7 se pasan esta esta especificación por un lugar poco noble…Entonces, nos toca a nosotros cubrinos las espaldas ante esto.

Solución inline-block 

//CSS
.table { }
.table .row { }
.table .row .cell { display: inline-block; }
//HTML
<div class="table">
      <div class="row header">
         <span class="cell" style='width:50px;'>Header Column 1</span>
         <span class="cell" style='width:50px;'>Header Column 2</span>
      </div>
      <div class="row body">
          <span class="cell" style='width:50px;'>Body Column 1</span>
          <span class="cell" style='width:50px;'>Body Column 2</span>
      </div>
</div>

Esta solución, funcionará en la mayoría de navegadores, aunque rompe la regulación de la W3C ya que estamos haciendo que los <span /> sean elementos de bloque. 

Solución float

//CSS
.table { }
.table .row { clear: left; }
.table .row .cell{ float: left; }
//HTML
<div class="table">
      <div class="row header">
         <span class="cell" style='width:50px;'>Header Column 1</span>
         <span class="cell" style='width:50px;'>Header Column 2</span>
      </div>
      <div class="row body">
          <span class="cell" style='width:50px;'>Body Column 1</span>
          <span class="cell" style='width:50px;'>Body Column 2</span>
      </div>
<div style='clear:left;'></div>
</div>

Quizas, la solución compatible con los navegadores web, pero … los float, me dan un poco de yu-yu :D

El HTML de los futuros blogs (HTML5)

9 ago

+ 12

Hace unas semanas hablabamos de las diferencias entre HTML4 y HTML5, algo que poco a poco se irá integrando en la vida cotidiana, de forma completamente invisible para el usuario, pero todo lo contrario para los desarrolladores web que tendremos que migrar nuestro HTML para adaptarnos a las propiedades y mejoras que el nuevo HTML5 nos ofrece.

Así se verá el HTML de un blog cuando esté completamente en HTML5.

<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>

        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>

          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='chrome://xinhahere/content/xinha_editor.html/blog/2007/04/'>April 2007</a></li>
          <li><a href='chrome://xinhahere/content/xinha_editor.html/blog/2007/03/'>March 2007</a></li>
          <li><a href='chrome://xinhahere/content/xinha_editor.html/blog/2007/02/'>February 2007</a></li>
          <li><a href='chrome://xinhahere/content/xinha_editor.html/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>

</body>
</html>

Hasta leyendo el código, podemos entender de que sección se está tratando en cada momento del código. La semántica dictará la nueva etapa de internet.

Sandbox: Clases dinámicas para pulir el CSS

8 ago

+ 9

Hace unos días comentabamos que Sandbox era el theme semántico por excelencia, pero…

¿por que es tan semántico?

Sandbox, usa el atributo class de los elementos para informar una cantidad de datos referentes a una página y/o entrada concreta. Esto nos da lugar a elementos HTML similares a este.

<body class="wordpress y2007 m08 d06 h06 home">

Como podemos ver, todas esta información está cargando una cantidad de información semántica no visible al usuario bastante importante, pero…

¿Como podemos hacer que el usuario la vea?

Evidentemente podemos aprovecharnos de nuestros CSS para hacer que cada elementos concreto se vea de una forma determinada, para ello usaremos definiciones de todas las clases. Que como es obvio, deberemos conocer :D

¿Como se generan las clases?

Dependiendo del lugar que mostramos, las clases se generan mediante una función u otra determinada. Estas funciones definen una serie de nombres de clases basadas en algunas estáticas y otras dinámicas que van cambiando dependiendo de la fecha, el autor, la categoría,…

Actualmente son 3 las que se encargan de esta misión:

sandbox_body_class() | Clases del elemento <body>

Esta clase nos devuelve una serie de clases dependiendo de la página que estamos mostrando, todas las clases están relacionadas con la página y la fecha actual. 

<body class="<?php sandbox_body_class() ?>"> 
wordpress Está clase indica la aplicación
home Indica que estamos en la home
search Indica que estamos en busqueda
four04 Indica que estamos en una página “404 no encontrado”.
loggedin Cuando el usuario está logueado
y[current year] El año actual
m00–12 El mes actual (00-12)
d01–31 El día actual (01-31)
h00–24 La hora actual (00-24)
page Indica que estamos en una página
page-author-[name] Indica que estamos en la página de autor [name]
page-paged-[n] Indica que se trata de una entrada paginada y estamos en la página [n]
archive Indica que estamos en una página de archivo (categorias, archives,…)
date Indica que estamos filtrando por date
date-paged-[n] Indica que se trata de una entrada paginada basada en fechas, estamos en la página [n]
author Indica que estamos en la página autor
author-[name] Indica que estamos en la página del autor [name] determinado
author-paged-[n] Indica que estamos en la página del autor paginada
category Indica que estamos en una categoría
category-[name] Para una categoría determinada
category-paged-[n] Paginación de categorias
single Se trata de una entrada single
s-author-[name] Una entrada simple de un autor determinado
s-category-[name] Una entrada simple de una cateogoría determinada
s-y[current year] Una entrada simple de un año determinad
s-m00–12 Una entrada simple de un mes determinado
s-d01–31 Una entrada simple de un día determinado
s-h00–24 Una entrada simple de una hora determinada
paged Está paginada
paged-[n] Mostramos la página [n]
pageid-[n] Mostramos la página con ID [n]
postid-[n] Mostramos el post con ID[n]

sandbox_post_class() | Clases del elemento <div /> de Posts

Esta función nos carga todas las clases referentes al post en concreto, las fechas hacen referencia las de publicación, al igual que las categorías y autor.

 <div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>">
hentry Para la especificación hAtom 0.1, se aplica a cada post.
page Clase general, se aplica a cada página
post Clase general, se aplica a cada post
private Para un post en estado privado
protected Para un post en estado protegido
publish Para un post en estado publicado
draft Para un post en estado borrador
y[post year] Para un post publicado en un año concreto
m00–12 Para un post publicado en un mes concreto
d01–31 Para un post publicado en día concreto
h00–24 Para un post publicado en una concreta
author-[name] El nombre del autor
category-[name] La categoría del post
alt Para los posts impares (posibilita hacer efecto zebra)
p[n] Numero de post relativo a la página

sandbox_comment_class() | Clases para los comentarios <li />

Esta función nos mostrará todas las clases referentes al comentario concreto, las fechas estarán condicionadas a la de publicación, al igual que el autor.

<li id="comment-<?php comment_ID() ?>" class="<?php sandbox_comment_class() ?>">
comment Clase general, indica que es un comentario
trackback Clase general, indica que es un track/pingback
byuser Para cada comentario de un usuario registrado
bypostauthor Comentario del autor del post
comment-author-[name] Para un comentario concreto de un usuario registrado
alt Para los comentarios impares (posibilita hacer efecto zebra)
c-y2007 Para un comentario en año concreto
c-m00–12 Para un comentario en un mes concreto
c-d01–31 Para un comentario en  un día concreto
c-h00–24 Para un comentario en una hora concreta
c[n] Numero de comentario relativo a la página
t[n] Numero de track/pingback, relativo a la página

Sandbox, el theme más personalizable del mundo

6 ago

+ 15

Hace ya tiempo que Sandbox apareció en el panorama WordPress, y desde entonces se ha hablado de él constantemente. Eduo, me comentó sobre él hace unas semanas y la verdad es que al principio tenía mis reservas sobre el theme, ya que hace un uso intenso de clases dentro del atributo class y podría llegar a ser complicado de mantener, pero tras pensar un poco sobre el tema te das cuenta de las ventajas que ofrece este tipo de personalización.

<div id="post-31" class="hentry p1 post publish author-admin category-features y2006 m08 d08 h06 alt">

Este tipo de práctica se encarga de dar mucha más información semántica que cualquier otro theme, y además nos permite personalizar cada post en individual o una colección de posts agrupados por fecha, mes, año, categoría,….

Además nos acerca los microformatos más comunes a nuestro WordPress, implementado un sistema de hAtom y hCard que se complementa con XFN de WordPress. 

Instalación

La instalación es similar a cualquier theme para wordpress.

  1. Descargar el theme
  2. Descomprimir y subir al directorio wp-content/themes/ de nuestro WordPress.
  3. Activamos desde el panel de administrador
  4. Lo disfrutamos.

Personalización

Debido a su alta personalización, Sandbox, se convierte en un metatheme, que nos permite usarlo como base estructural de nuestro WordPress, delegando todo el diseño a nuestro CSS. Este sistema de personalización hace un tiempo dió lugar a una competición en la que el ganador podría embolsarse hasta 500$.

Podemos ver un live-preview de los diseños presentados al concurso. O podemos verlos y descargarlos directamente desde la web del concurso.

Tal es la repercusión que SandBox está teniendo que themes como K2, pasó a integrar algunas de las funcionalidades que ofrece. Y mañana veremos el resultado de las deliberaciones, dando como resultado el diseño ganador de la competición.

Conclusión

Sin duda, WordPress necesitaba un sistema similar a este pare entrar en la era de la semántica con buen pie. Ahora solo falta que las masas nos concienciemos en que esta sería una buena forma de contribuir con el futuro. 

Consecuencias de la Web 2.0 y la llegada de la Web 3.0

3 ago

+ 17

La web 2.0 por definición es la capacidad de hacer que el usuario interactue con una web anteriormente estática y sin vida. Ahora las aplicaciones emergentes enganchan a miles de usuarios gracias a la posibilidad de hacerles partícipes en el proyecto.

Esa interacción social, está dando lugar a contenidos como Wikipedia, que es a mi juicio es la aplicación 2.0 por excelencia, la congregación de gente aportando conocimientos en una sola aplicación de forma desinterisada es muy estimulante. Y como desarrollador web envidias la capacidad e idea que han tenido para hacer posible una herramienta que miles de personas contribuyen y millones usan…. se me pone la piel de gallina.

Por otro lado la web 2.0 trae unas consecuencias que, a mi parecer, son necesarias para el siguiente punto en la evolución de Internet.

Estructuración de datos

El contenido de las páginas crece de forma exponencial debido a la participación de la gente, lo que hace más dificil restructurar esta información y dificulta su indexación para futuros usos. El uso de una web semántica, microformatos, metadatos y ontologías, nos ayuda a capear este problema pemitiendo que futuras herramientas sean capaces de comprender el contenido estrucuturado por los usuarios de una forma consecuente.

¿Hasta cuando los usuarios generán contenidos?

Con el concepto de Web 2.0, los usuarios han asumido el papel de “generadores” de contenido. Y esto puede acarrear problemas ya que en cierta manera están trabajado de forma indirecta para el creador de la aplicación que se está lucrando con el contenido generado por ellos. ¿Llegaremos a ver contratos de colaboración?

Colectividad emegente

Por encima de la sociedad (física) está naciendo y cada vez crece más una capa social compuesta por los conectados a la red, que mediante estas herramientas 2.0 interactuan y comparten experiencias. Esto está provocando una separación entre los usuarios de internet y no usuarios. El término friki se está usando demasiado a la ligera.

Cambios en las plataformas

El increible ritmo de aparición de herramientas de escritorio extrapoladas a la red, da lugar a pensar que el futuro de los sistemas operativos, tal y como los conocemos, está llegando a su fin. Dejando en su lugar sistemas operativos online y centralizados en los que se encontrará toda la información de nuestro usuario, a modo que podamos disponer de todos nuestros datos en cualquier lugar del mundo.

Y llegamos a la web 3.0

La web 3.0, o Web Semántica, no es más que añadir significado a la web. Osea, convertir una web estática y lineal en una guía interactiva e inteligente con interacción entre las diferentes fuentes de contenidos. En cierta manera la web 3.0 será como hablar con un amigo/a por nuestro cliente de mensajería instantánea. Le pediremos cosas y este nos contestará a nuestra consulta de una forma personalizada, exacta y contrastada.

Sin duda llegar a una web 3.0 consistente y funcional requieres que nosotros mismos seamos usuarios aportando contenido a la propia web. Por ello al igual que las aplicaciones web 2.0 recopilan información detallada siguiendo un patrón de estructura interna, los desarrolladores debemos seguir un patrón definido (en nuestro caso la W3C) para ser usuarios “colaborando” con esta nueva tendencia.

Más información

WMD, un nuevo WYSIWYM para tus páginas web

16 jun

+ 3

WMD, es un editor de texto en formato WYSIWYM compatible con todos los navegadores modernos.

La diferencia con el típico WYSIWYG es que este se encarga de generar una estructura que mediante CSS, o templates, podrá modificar su aspecto, manteniendo la estructura durante todo el proceso. Al igual que las páginas web han separado estructura de diseño, en los editaros de texto tambien se está dando esta separación.

Por este motivo las necesidades del mismo son bastante menores y por lo tanto las opciones que nos encontramos en el menú de opciones son las justas y necesarias para nuestra misión.

imagen-2.jpg

[Demo]

Usar carácteres unicode como class CSS

14 jun

+ 3

Jonathan Snook, ha estado jugando con los carácteres unicodes en los nombres de las clases de nuestros elementos y en los CSS.


//HTML
<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>
//CSS
.□ { /* container styles */ }
.┌ { /* top-left styles */ }
.┐ { /* top-right styles */ }
.└ { /* bottom-left styles */ }
.┘ { /* bottom-right styles */ }

Lo mejor de todo es que esto funciona y que los navegadores lo interpretan correctamente. Yo personalmente considero que esto es fantástico ya que nos dá lugar a cosas como estas.


//HTML
<div class="株式会社セガ"></div>
//CSS
株式会社セガ { width:100px;height:100px;background-color:red;}

Que evidentemente es igual de válida que llamar al class de <div /> “manolo” y usar ese nombre de class para todo nuestro diseño.

Este sistema tendría problemas con la web semántica, pero … “manolo” tambien.