Tutoriales de CSS avanzados - Trucos de CSS y HTML http://www.estilocss.com Tutoriales de CSS avanzados. Sat, 28 Nov 2009 20:48:05 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Nuevo sitio próximamente http://www.estilocss.com/varios/nuevo-sitio-proximamente/ http://www.estilocss.com/varios/nuevo-sitio-proximamente/#comments Sat, 28 Nov 2009 20:47:50 +0000 admin http://www.estilocss.com/?p=293 Se me ocurrió una idea para mejorar considerablemente el sitio y hacerlo mucho más intuitivo. Estoy trabajando en ello y por eso no he podido escribir ultimamente. ¡Pronto estrenaré sitio nuevo!

]]> http://www.estilocss.com/varios/nuevo-sitio-proximamente/feed/ 5 ¿Cómo usar Creative Commons? http://www.estilocss.com/tutoriales-de-xhtml/como-usar-creative-commons/ http://www.estilocss.com/tutoriales-de-xhtml/como-usar-creative-commons/#comments Thu, 12 Nov 2009 23:42:40 +0000 admin http://www.estilocss.com/?p=202 Si ya leíste mi artículo acerca del uso de imagenes sin derechos de autor en mi página web habrás notado que es sencillo encontrar y hacer uso de imagenes sin incumplir con las normas establecidas de los derechos de autor.

Mi método favorito es simplemente ir a la página de Creative Commons y allí en el banco de imagenes, buscar la que me sirva dependiendo claro está de la licencia Creative Commons que esta utilice.

¿Cómo darle el crédito al autor correctamente?

Como bien se sabe, todas las licencias Creative Commons requieren que uno le de el crédito apropiado al creador. ¿Pero cómo se puede hacer esto? – ¿Será suficiente con simplemente poner un “Creado por” al lado de la imagen? – En teoría sí, al hacer esto efectivamente le estás dando el crédito respectivo al autor. Sin embargo, el creador original no podrá nunca saber si tu estás usando su imagen a menos de que tú le escribas anunciando que harás uso de su trabajo.

Al poner un texto simple “Creado por” realmente lo que estamos haciendo es crear un sitio web desorganizado y poco semántico tan solo legible por seres humanos y no por aplicaciones y servicios web (máquinas). Por esta razón, se necesita con urgencia un modo de representar el uso de artes protegidas mediante Creative Commons de una manera semántica y correcta.

Creative Commons ofrece una solución para esto que funciona mediante el uso de RDF. Aun que esta tecnología no es muy práctica para esta labor, se puede usar una técnica conocida como RDFa la cual permite usar RDF directamente en el XHTML. De esta manera podremos darle el crédito al autor de una manera más semántica y poderosa que será legible tanto para las máquinas como para los seres humanos.

Digamos por ejemplo que yo necesito usar una fotografía muy linda de mi ciudad natal tomada por Tijs Zwinkels en mi página web (yo sé, estoy cometiendo el error que acabo de mencionar, pero les prometo que es con fines ilustrativos unicamente). Para darle a Tijs su crédito respectivo podemos empezar a crear la respectiva atribución de la siguiente manera:

Primero, necesitaremos una etiqueta que “contenga” la información de la imagen tal y como el gráfico en sí, el nombre del autor y la licencia que el autor ha implementado. Puede ser cualquier etiqueta que sea usada para contener otras etiquetas. (Ejemplos: <div>, <span>, <p>).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image">
          </p>
     </body>
</html>

Lo sé. Tengo una tonta manía de nombrar las clases en inglés. En fin, ahora sí podremos incluir nuestra imagen en dicho espacio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
          </p>
     </body>
</html>

Luego incluímos un hipervínculo hacia las pautas de la licencia que el autor nos pide que usemos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
               <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
          </p>
     </body>
</html>

Luego de esto las cosas se ponen interesantes de verdad. Ya que lamentablemente aún no hay ningún Microformato que nos permita fácilmente crear licencias a través de metadatos basándonos únicamente en XHTML, no queda otra alternativa que usar RDFa para lograr el objetivo. Es curioso que ya exista una queja acerca de las fallas de los actuales microformatos (rel-license y hCard) en este sentido:

Escrito por Evan en http://microformats.org/wiki/rel-license-issues:

Issue 1: It’s not clear how to associate a license with part of a page, such as an image or embedded object in the page, or a single news entry on a news page. A typical use-case would be a Flickr page, for which the image is licensed under a CC license but the page itself is not.

Lo que haremos entonces es lo siguiente; ya que para crear un documento RDF por lo general es requerido usar espacios de nombres (Namespaces en inglés), necesitaremos crear uno para el prefijo que le pondremos a nuestra imagen así como su respectivo URI, el cual puede ser cualquier cadena de texto. Si no entiendes nada de lo que digo acá, te recomiendo le heches un vistazo a los excelentes tutoriales de XML ya disponibles en Internet. Para mi ejemplo, utilizaré como prefijo la cadena ‘bog’ y como URI utilizaré la cadena ‘http://www.estilocss.com/XGW1DXA23/’. Dichos valores los asignaré a mi <p>. Veamos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
               <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
          </p>
     </body>
</html>

Buen trabajo. Ahora, para cumplir con los requerimientos que nos sugiere Creative Commons, debemos incluir un atributo llamado ‘about’ justo en la etiqueta en la que creamos nuestro espacio de nombres donde anotaremos la dirección URL donde se encuentra el documento que queremos utilizar. En este caso, la fotografía de Bogotá se encuentra en esta dirección: http://www.flickr.com/photos/tijszwinkels/3854247170/. Siguiendo esta recomendación, tenemos lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
               <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
          </p>
     </body>
</html>

Por último y para terminar la pieza final del rompecabezas, Creative Commons nos pide que creemos un Nombre (name) dentro de nuestro espacio de nombres (Namespace) llamado attributionURL al cual le asignaremos una cadena de texto conteniendo la dirección URL que el autor de la imagen requiere que usemos con el propósito de atribución. Lo interesante acá es que gracias a RDFa, cumpliremos dicha tarea usando simplemente nuestro viejo amigo <a> y su famoso atributo rel.

Según la licencia de la fotografía de Bogotá, el autor (o más bien Flickr®) nos pide que agreguemos un hipervínculo a ‘http://www.flickr.com/photos/tijszwinkels/’ que es la URL del perfil de Tijs en Flickr®. Por esta razón, lo haré de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
               <a rel="bog:attributionURL" href="http://www.flickr.com/photos/tijszwinkels/">Tijs Zwinkels</a>
               <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
          </p>
     </body>
</html>

Nota que creé un nombre llamado ‘attributionURL’ dentro de mi espacio de nombres con prefijo ‘bog’ escribiendo bog:attributionURL. También nota que al contenido de mi <a> le asigné el nombre del autor, es decir ‘Tijs Zwinkels’ aunque prácticamente se le puede asignar lo que queramos ya que no es requerimiento.

¡En hora buena!. Hemos atribuido correctamente el crédito a Tijs Zwinkels por su trabajo. Nuestro código está más legible por máquinas aun que aún falta retocarlo un poco para que sea fácil de leer para seres humanos también. Simplemente le agregaré un poco de texto de la siguiente forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
               Fotografía creada por <a rel="bog:attributionURL" href="http://www.flickr.com/photos/tijszwinkels/">Tijs Zwinkels</a> usada bajo una licencia
               <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>.
          </p>
     </body>
</html>

¡Listo!. El resultado es una imagen atribuída correctamente a través de RDFa que es legible por seres humanos y máquinas a la vez. Puedes ver el resultado final acá.

Creative Commons ofrece un servicio de validación para lo que acabamos de hacer. Algo parecido al validador HTML de la W3C. Mira los resultados de dicho servicio al validar nuestro trabajo haciendo clic aquí.

Hacer esto genera un código XHTML que no es válido. ¿Se puede hacer algo para arreglarlo?

Al usar el atributo ‘about’ dentro de nuestra etiqueta contenedora habremos creado un código XHTML no válido desafortunadamente por la simple razón de que ese atributo no existe en las especificaciones del XHTML.

Es posible sin embargo, en vez de validar nuestro documento con ‘XHTML 1.0 Strict’ ó con ‘XHTML 1.1′, que podamos hacer dicha tarea usando el tipo de documento (o DOCTYPE) ‘XHTML+RDFa’. Al hacerlo, nuestro código XHTML será válido ante los ojos del validador de la W3C. He aquí el código final:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <meta name="author" content="Iván Bustos" />
          <meta name="robots" content="noindex" />
          <title>Ejemplo de uso Creative Commons</title>
     </head>
     <body>
          <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
               <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
               Fotografía creada por <a rel="bog:attributionURL" href="http://www.flickr.com/photos/tijszwinkels/">Tijs Zwinkels</a> usada bajo una licencia
               <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>.
          </p>
     </body>
</html>

Espero te haya sido útil mi tutorial. Espero comentarios y críticas. Te agradezco por leer y llegar hasta acá. Nuevamente pueden ver el resultado final de nuestro trabajo haciendo click aquí.

]]> http://www.estilocss.com/tutoriales-de-xhtml/como-usar-creative-commons/feed/ 1 Premios Colombia en Línea 2009 http://www.estilocss.com/varios/premios-colombia-en-linea-2009/ http://www.estilocss.com/varios/premios-colombia-en-linea-2009/#comments Mon, 02 Nov 2009 16:44:56 +0000 admin http://www.estilocss.com/?p=183 El pasado 14 de octubre se realizó en Bogotá la décimo primera edición de los Premios Colombia en Línea 2009. Me complace que este año hayan habido criterios más complejos para calificar las entregas de los participantes y no se puede negar la gran diferencia con respecto al año pasado. Me gustaría felicitar a los ganadores por su intento de cada día mejorar la experiencia en Internet de todos los Colombianos.

Personalmente, entre las ganadoras prefiero la página de El Espectador que demuestra ser un trabajo realmente impresionante. También me gustó mucho la página web de Colombia Travel y sobre todo su impresionante Lanzamiento. El diseño está muy bonito y tiene imágenes espectaculares. Mis felicitaciones a los chicos de Astrolabio.

Estoy muy contento por que a pesar de que casi ninguno de los sitios ganadores comprende un XHTML válido realmente se nota el esfuerzo con el que se elaboraron y por qué merecen dichos honores a diferencia de algunos que participaron (y ganaron) en la edición anterior.

Espero que para la próxima edición, la CCIT renueve su página web que mucha falta le hace y que también los directivos y jueces de la competencia tomen mas en cuenta el uso correcto de XHTML en los proyectos. También me gustaría que se le diera menos peso a los sitios elaborados con gestores de contenido tan comunes como lo son Joomla y Wordpress.

]]> http://www.estilocss.com/varios/premios-colombia-en-linea-2009/feed/ 0 Creando el logo de EstiloCSS.com (Parte 2) http://www.estilocss.com/tutoriales-de-css/logo-en-css/ http://www.estilocss.com/tutoriales-de-css/logo-en-css/#comments Fri, 23 Oct 2009 01:03:14 +0000 admin http://www.estilocss.com/?p=65 Bueno. Ya hemos creado apropiadamente el logo en HTML. Ahora lo que tenemos que hacer es darle forma y qué mejor manera de hacerlo que en CSS. Antes que nada sin embargo, crearé un documento XHTML completo a partir del que creamos en el tutorial anterior.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <title>Logotipo de EstiloCSS.com</title>
     </head>
     <body>
          <div class="logo vcard">
               <h1><a class="fn org url" href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h"><span class="mainWord">Estilo</span><span class="css1">CS</span><span class="css2">S</span><span class="slogan">Tutoriales de CSS</span></a><span class="email">contacto@estilocss.com</span></h1>
          </div>
     </body>
</html>

Perfecto. Ahora para agregarle el CSS al XHTML he creado el archivo ‘logo.css’ dentro de una carpeta llamada ‘CSS’ ubicada en el mismo lugar donde he creado mi archivo XHTML. Ahora es solo cuestión de agregar el vínculo apropiado por medio de la etiqueta <link> dentro de <head>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
          <link rel="stylesheet" type="text/css" media="screen" href="css/logo.css" />
          <title>Logotipo de EstiloCSS.com</title>
     </head>
     <body>
          <div class="logo vcard">
               <h1><a class="fn org url" href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h"><span class="mainWord">Estilo</span><span class="css1">CS</span><span class="css2">S</span><span class="slogan">Tutoriales de CSS</span></a><span class="email">contacto@estilocss.com</span></h1>
          </div>
     </body>
</html>

El XHTML ya está 100% finalizado. Ahora empieza la parte interesante. Debemos editar nuestro archivo ‘logo.css’. Sin embargo, antes que nada por favor descarga el archivo reset.css del cual hablé en mi artículo ‘Sobrescribir hojas de estilo por defecto‘ y colócalo dentro de la carpeta ‘CSS’.

Ahora debemos llamar el archivo ‘reset.css‘ desde ‘logo.css’, el cual está vinculado con nuestro archivo HTML. Para hacerlo simplemente agrega la siguiente línea justo al inicio del archivo ‘logo.css’:

@import url('reset.css');

¡Excelente!. En este momento debemos tener algo muy similiar a lo siguiente:

Progreso de nuestro logo.

Bien. Para empezar lo que tenemos que hacer es asignarle al documento una fuente. En mi caso, seleccioné la famosa ‘Trebuchet MS’. También es necesario asignarle al mismo documento un tamaño de fuente base. Escogí 16px ya que por convención popular la gente prefiere que ese sea el número de pixeles asignado a un valor em (es decir 1em = 16px). Recuerda que un em equivale técnicamente a la distancia exacta que ocupa una letra ‘m’ en el tipo y tamaño de fuente actual. Hacer el logo con valores em permitirá que este se expanda o se contraiga proporcionalmente en caso de que el tamaño de la fuente cambie o que el usuario haga uso de las funciones de amplificación del explorador. Inserta el siguiente código en logo.css justo después de la línea anterior.

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}

Lo siguiente es definir el tamaño que tendrá nuestro logo. Para ello simplemente le daremos dimensiones a la caja <div> que contiene el <h1>. Temporalmente y únicamente con el fin de ver la caja mientras trabajamos en el logo, le daremos un color de fondo no tan oscuro para poder trabajar fácilmente. Deseo que mi caja tenga el tamaño de 120px de ancho por 305px de alto en mi monitor pero como quiero que mi logo sea fácilmente modificable dependiendo del tamaño de fuente base convertiré todos los valores en pixeles a su correspondiente en ems por medio de la gran utilidad http://pxtoem.com/. Nota también que le he asignado a dicha caja una posición relativa lo que me permitirá ubicar objetos internos apropiadamente mediante posiciones absolutas.

Por último, también le he asignado a mi logo (mi <a>) un tamaño de fuente base de 100px por que se veía bien en mi monitor. Al convertirlo a em, la fuente base equivale a 6.25em.

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}
div.logo
{
     height: 7.5em;
     width: 19.063em;
     position: relative;
     background-color: #EEE;
}
div.logo h1 a
{
     font-size: 6.25em;
}

Ahora lo que quiero hacer, es eliminar visualmente el correo electrónico que hace parte de el Microformato hCard.

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}
div.logo
{
     height: 7.5em;
     width: 19.063em;
     position: relative;
     background-color: #EEE;
}
div.logo h1 a
{
     font-size: 6.25em;
}
div.logo span.email
{
     display: none;
}

Progreso de nuestro logo.

Una vez hayamos hecho eso, podemos proseguir a darle color y ajustar el tamaño de la letra a cada una de las secciones de mi logo, es decir a span.mainWord, span.css1, span.css2 y span.slogan.

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}
div.logo
{
     height: 7.5em;
     width: 19.063em;
     position: relative;
     background-color: #EEE;
}
div.logo h1 a
{
     font-size: 6.25em;
}
div.logo span.email
{
     display: none;
}
div.logo a span.mainWord
{
     color: #c2d0d1;
}
div.logo a span.css1, div.logo a span.css2
{
     color: #7BA1A8;
}
div.logo a span.css1
{
     font-size: 0.49em;
}
div.logo a span.css2
{
     font-size: 1.6em;
}
div.logo a span.slogan
{
     background-color: #7BA1A8;
     color: #FFFFFF;
     font-size: 0.2em;
}

Creo que es importante aclarar algo con respecto al tamaño de las letras y la relatividad de las medidas em. Para lograr que span.css2 tenga una letra mucho más grande que cualquier zona del logo decidí asignarle un valor de 160px al tamaño de su fuente por que creí que se veía bien en mi monitor. Para lograr convertir ese valor a su cifra correspondiente en em, me di cuenta de que span.css2 está dentro (o pertenece a) de un <a> que lo contiene. También me di cuenta de que le había asignado una tamaño de letra de 6.25em a ese mismo <a> lo que generaba un <a> 6.25 veces discutiblemente más grande que mi fuente base de 16px lo que equivaldría a 100px en mi monitor. Al hacer esto, hemos agregado un nuevo punto de referencia ó una nueva fuente base por decirlo así de la cual todos los elementos que estén dentro ó que pertenezcan a este nuevo <a> modificado tendrán que acogerse.

Para lograr que span.css2 logre un tamaño de 160px con respecto a los 100px que tiene el elemento que lo contiene (el <a>) simplemente es cuestión de una simple regla de tres. ¿Si 100px es equivalente a 1em (por que mi <a> es el nuevo punto de referencia) entonces cuantos ems equivale 160px (el valor em que deseo obtener)?.

convertir px a em

También podemos hacerlo a través de la utilidad http://pxtoem.com/. Las mismas reglas aplican para cada objeto al que le queramos modificar el tamaño de su letra.

Ya que todos nuestros textos tienen el tamaño indicado ya podemos iniciar el proceso de posicionamiento. Ya que cada <span> que compone el objeto <a> es un objeto lineal (o en inglés, un objeto in-line) en lugar de un objeto bloque, para poder moverlo tendremos que darle una independencia total del <a> que lo contiene.

Para poder también mover los dichos objetos <span> en relación con la capa que los contiene, es decir <div class="logo"> (la cual tiene asignada una posición relativa a través de nuestro CSS), tendremos que asignarles a cada objeto una posición absoluta. De esta manera, al mover cualquier objeto <span> siempre estaremos moviendolo tomando como referencia a nuestro objeto <div>. Creo que esto es importante así que debo escribirlo de nuevo:

Para mover cualquier objeto en relación al objeto que lo contiene (o al que le pertenece) es necesario que este último tenga asignada una posición relativa y que el objeto que deseamos mover tenga asignada una posición absoluta por medio de CSS.

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}
div.logo
{
     height: 7.5em;
     width: 19.063em;
     position: relative;
     background-color: #EEE;
}
div.logo h1 a
{
     font-size: 6.25em;
}
div.logo span.email
{
     display: none;
}
div.logo a span.mainWord
{
     color: #c2d0d1;
     display: block;
     position: absolute;
}
div.logo a span.css1, div.logo a span.css2
{
     color: #7BA1A8;
     display: block;
     position: absolute;
}
div.logo a span.css1
{
     font-size: 0.49em;
}
div.logo a span.css2
{
     font-size: 1.6em;
}
div.logo a span.slogan
{
     background-color: #7BA1A8;
     color: #FFFFFF;
     font-size: 0.2em;
     display: block;
     position: absolute;
}

Al hacerlo, deberíamos tener algo como lo siguiente:

Progreso de nuestro logo.

Ahora lo único que falta es darle la posición correcta (a través de prueba y error) a cada objeto. Se puede hacer primero en pixeles y luego cuando se termine, proceder a reemplazar los pixeles por valores em.

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}
div.logo
{
     height: 7.5em;
     width: 19.063em;
     position: relative;
     background-color: #EEE;
}
div.logo h1 a
{
     font-size: 6.25em;
}
div.logo span.email
{
     display: none;
}
div.logo a span.mainWord
{
     color: #c2d0d1;
     display: block;
     position: absolute;
     left: -0.07em;
     top: -0.12em;
}
div.logo a span.css1, div.logo a span.css2
{
     color: #7BA1A8;
     display: block;
     position: absolute;
}
div.logo a span.css1
{
     font-size: 0.49em;
     top: 1.55em;
     left: 3.8em;
}
div.logo a span.css2
{
     font-size: 1.6em;
     top: -0.125em;
     left: 1.45em;
}
div.logo a span.slogan
{
     background-color: #7BA1A8;
     color: #FFFFFF;
     font-size: 0.2em;
     display: block;
     position: absolute;
     top: 4.15em;
     left: 0;
}

Progreso de nuestro logo.

Hemos terminado. Lo único que falta es ajustar las dimensiones de span.slogan y estaremos listos. A continuación puedes ver el código CSS final e inmediatamente después la captura de pantalla del resultado final. 

@import url('reset.css');
body
{
     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
     font-size: 16px; /*TAMAÑO DE FUENTE BASE*/
}
div.logo
{
     height: 7.5em;
     width: 19.063em;
     position: relative;
     background-color: #EEE;
}
div.logo h1 a
{
     font-size: 6.25em;
}
div.logo span.email
{
     display: none;
}
div.logo a span.mainWord
{
     color: #c2d0d1;
     display: block;
     position: absolute;
     left: -0.07em;
     top: -0.12em;
}
div.logo a span.css1, div.logo a span.css2
{
     color: #7BA1A8;
     display: block;
     position: absolute;
}
div.logo a span.css1
{
     font-size: 0.49em;
     top: 1.55em;
     left: 3.8em;
}
div.logo a span.css2
{
     font-size: 1.6em;
     top: -0.125em;
     left: 1.45em;
}
div.logo a span.slogan
{
     background-color: #7BA1A8;
     color: #FFFFFF;
     font-size: 0.2em;
     display: block;
     position: absolute;
     top: 4.15em;
     left: 0;
     width: 9.05em;
     height: 1.45em;
     text-align: center;
     padding-top: 0.35em;
}

Progreso de nuestro logo.

El fin de este tutorial es simplemente la práctica de las medidas ems. Yo se que son algo intimidantes pero con práctica y a través de la utilidad pxtoem.com el proceso se hace mucho más fácil. Lo más interesante de todo esto es que como dije al principio del tutorial, el uso de medidas ems permiten hacer diseños que se pueden re-dimensionar muy fácilmente de manera proporcional. En este caso por ejemplo, noten cómo al cambiar mi tamaño de fuente base de 16px a 5px he generado automaticamente un logotipo mucho más pequeño manteniendo exactamente las proporciones de cada elemento que comprende mi logotipo.

Progreso de nuestro logo.

Espero que les haya gustado o servido mi tutorial. Cualquier comentario o pregunta será más que bienvenida.

]]> http://www.estilocss.com/tutoriales-de-css/logo-en-css/feed/ 0 Sobrescribir hojas de estilo por defecto http://www.estilocss.com/tutoriales-de-css/resetear-navegadores-css/ http://www.estilocss.com/tutoriales-de-css/resetear-navegadores-css/#comments Fri, 09 Oct 2009 22:21:49 +0000 admin http://www.estilocss.com/?p=41 Antes de culminar mi tutorial para la creación de mi logotipo en CSS, creo que es buena idea tocar este tema para aquellos que tal vez no estén al tanto aún. Como ya muchos saben, desarrollar y diseñar aplicaciones para distintos navegadores web puede resultar (por no decir nada más) una experiencia complicada.

Según la W3C, todos los navegadores deberían seguir una serie de reglas al momento de representar una documento HTML. Lamentablemente ningún navegador sigue estas indicaciones al pie de la letra. Algunos sin embargo, lo hacen mejor que otros.

Uno de los primeros arreglos más populares a esta problemática consistió en establecer a la márgen (margin) y la sangría (padding) un valor de cero a todo objeto HTML (Recuerda que el asterisco permite seleccionar todos los objetos en CSS). Esta técnica permitió lidiar más fácilmente con el curioso modelo de Caja de Internet Explorer y para facilitar el desarrollo en otros navegadores.

*
{
margin: 0;
padding: 0;
}

Esta fue la técnica que usé cuando empecé hasta que encontré una solución magnífica y mucho más completa creada por David Hellsing en el 2007 que no sólo arregla los problemas de margen y de sangría sino que también estandariza virtualtmente todos los demás aspectos de un documento HTML. Demostraré el poder de esa técnica ( y la compararé con la anterior ) con las siguientes capturas de pantalla:

Documento HTML sin ningún método de reinicialización.

HTML sin método de reinicialización.

Documento HTML usando el método clásico de margen y sangría.

HTML usando el método clásico de margen y sangría

Documento HTML usando el método de David Hellsing.

Documento HTML usando el método de David Hellsing.

Como puedes ver, usando el método de David Hellsing podemos sobreescribir cualquier propiedad que venga por defecto en cualquier navegador permitiéndonos fácilmente y sin inconvenientes crear diseños rápidos y atractivos en minutos que serán mucho más compatibles a través de los diversos navegadores web actualmente disponibles.

David Hellsing fue muy generoso en publicar su trabajo bajo una licencia GNU. Para usar este método en tus proyectos, descarga el archivo reset.css y colócalo en el directorio donde están tus archivos CSS en tu proyecto. Luego, abre tu archivo CSS principal y agrega las siguiente línea:

@import url('reset.css');

¡Genial! Ya estás listo para crear experiencias web de una manera más fácil y cómoda. Espero te haya sido útil esta entrada.

]]> http://www.estilocss.com/tutoriales-de-css/resetear-navegadores-css/feed/ 2 Cómo usar imagenes legales en tu sitio web http://www.estilocss.com/varios/poner-imagenes-en-html/ http://www.estilocss.com/varios/poner-imagenes-en-html/#comments Thu, 24 Sep 2009 22:28:25 +0000 admin http://www.estilocss.com/?p=28 Hace un tiempo se me presentó un problema “legal” por así decirlo. Utilicé una imagen ajena protegida por derechos de autor en uno de mis proyectos. El creador me contactó solicitando la inmediata eliminación de aquella imagen pero afortunadamente la situación nunca pasó a mayores. Sin embargo, ese día me asusté y decidí nunca volver a usar imagenes sin que yo tenga una licencia para hacerlo.

¿Dónde se pueden conseguir imagenes?

Es fácil conseguir imagenes legales. Hay muchos sitios donde se encuentra un gran repositorio de gráficos profesionales donde el interesado puede simplemente escoger el archivo que le guste y pagar la tarifa que advierte el sitio web. Entre esos sitios se pueden distinguir los siguientes:

En mi experiencia, creo que los sitios anteriormente mencionados mantienen la mayor colección de imágenes en alta calidad. Si deseas artes de alta calidad en tu sitio web, no dudes en hecharle un vistazo a dichos sitios (y tener la tarjeta de crédito lista para pagar por las imagenes que escojas).

¿Se pueden conseguir imagenes gratuitas?

Aunque en la mayoría de los casos las imagenes en demanda presentan una mayor calidad que las gratuitas, aún es posible conseguir gráficos de calidad sin costo alguno si se busca en los sitios indicados. Sin embargo, creo que es de suprema importancia darte el tip número uno que evitará que cometas el error más común del internet (después del uso de tablas HTML exagerado):

Tip: No usen jamás el sistema de imagenes de Google™ para conseguir imagenes gratuitas. ¡Este procedimiento es ILEGAL!

Debo aclarar que usar Google™ para encontrar imagenes no siempre es ilegal. Si usas "Búsqueda avanzada" podrás especificar imagenes con el tipo de licencia que deseas. Sin embargo no recomiendo usar imagenes que no tienen ninguna licencia asociada. El autor pudo simplemente olvidarse (o no supo cómo) de agregar una licencia a sus creación.

Hay muchos sitios donde actualmente se pueden encontrar varias imagenes gratuitas siendo una gran (y mejor) alternativa al sistema de imagenes de Google™. En mi humilde opinión, los siguientes son los mejores:

También es posible usar imagenes que hagan uso de las licencias de Creative Commons las cuales son por lo general extremadamente flexibles.

Creative Commons ha creado las siguientes licencias para proteger contenido digital en la web:

Licencia Reconocimiento
Es la licencia más abierta de todas donde el autor permite abiertamente el uso y la modificación de su contenido digital a segundos siempre y cuando le den el crédito correspondiente.
Licencia Reconocimiento-Compartir bajo la misma licencia
Esta licencia, tal y como la anterior, permite a segundos hacer uso del contenido digital en cuestión y modificarlo a su gusto siempre y cuando el nuevo contenido sea publicado bajo esta misma licencia y que se le de el crédito correspondiente al autor.
Licencia Reconocimiento-Sin obras derivadas
Esta licencia permite el uso del contenido siempre y cuando se use intacto (sin modificaciones). También es necesario darle el crédito al autor.
Licencia Reconocimiento-No comercial
Tal y como la licencia Reconocimiento con la diferencia de que el contenido no se puede usar en proyectos comerciales.
Licencia Reconocimiento-No comercial-Compartir bajo la misma licencia
En adición de las restriciones que tiene la licencia anterior, esta licencia exige que todo objeto creado de el contenido en cuestión debe además ser publicado bajo los términos de esta licencia.
Licencia Reconocimiento-No comercial-Sin obras derivadas
La licencia más tacaña de todas no solo exige la debida acreditación al autor, sino que también el interesado está obligado a no modificar el contenido en cuestión y a usarlo únicamente con motivos personales y nunca comerciales.

Una vez encuentres contenido protegido por Creative Commons recuerda siempre cumplir con los requisitos que la licencia del contenido en cuestión exige.

¿Donde puedo encontrar contenido protegido por Creative Commons?

El mejor sitio para encontrar contenido protegido por Creative Commons es por supuesto el sitio de búsqueda de contenido dentro del sitio oficial de la organización. En una próxima entrada enseñaré cómo incluir imágenes de Creative Commons de una manera correcta.

]]> http://www.estilocss.com/varios/poner-imagenes-en-html/feed/ 5 Creando el logo de EstiloCSS.com (Parte 1) http://www.estilocss.com/tutoriales-de-xhtml/logo-hecho-en-css/ http://www.estilocss.com/tutoriales-de-xhtml/logo-hecho-en-css/#comments Fri, 18 Sep 2009 21:44:14 +0000 admin http://www.estilocss.com/?p=14 Siempre me ha llamado la atención cómo los diseñadores de la llamada “Web 2.0” crean cosas realmente espectaculares con la simple combinación de XHTML y CSS. El CSS es tan potente que realmente uno puedo crear galerías, botones, menús y formularios entre otras miles de cosas sin la necesidad de programación. El poder del CSS realmente me dejó atónito.

Al crear mi blog de pronto se me ocurrió la idea de crear el logo para mi blog completamente en CSS. Después de varios bocetos, logré decidirme por el diseño que ustedes pueden apreciar en la esquina superior izquierda de esta página.

¿Cómo lo hice?

A decir verdad el proceso es muy simple y sólo requiere un poco de paciencia pues es solo cuestión de ajustar correctamente las medidas y posiciones de las palabras y de las letras.

Iniciamos con una div con clase logo donde pondremos nuestro código. En este caso, es un simple hipervínculo hacia la página principal de mi blog encerrado en un H1. Véamos:

<div class="logo">
<h1><a href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h">Estilo CSS Tutoriales de CSS</a></h1>
</div>

Una vez se tenga listo el boceto del logo ya se sabrá cómo estarán ordenadas las diferentes palabras y/o letras. En mi caso para lograr el efecto deseado de mi logo, tuve que dividir el texto en 4 partes. Noten que yo generalmente nombro las clases de mis objetos en inglés. Eso me ayuda a diferenciar visualmente lo que es el contenido del texto de las etiquetas XHTML.

<div class="logo">
<h1><a href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h"><span class="mainWord">Estilo</span><span class="css1">CS</span><span class="css2">S</span><span class="slogan">Tutoriales de CSS</span></a></h1>
</div>

El XHTML del logo ya está completamente listo. Sin embargo, yo quise ir un poco mas allá y decidí integrar una vCard al logotio a través del Microformato hCard:

<div class="logo vcard">
<h1><a class="fn org url" href="http://www.estilocss.com" title="Haga click aquí para ir a la página principal. Tecla de accesso:H" accesskey="h"><span class="mainWord">Estilo</span><span class="css1">CS</span><span class="css2">S</span><span class="slogan">Tutoriales de CSS</span></a>
<span class="email">contacto@estilocss.com</span></h1>
</div>

¡El logo está listo!. Ahora lo único que falta es darle vida con CSS, lo cual haré en una próxima entrada.

Recuerden que en ningún momento he dicho que esta es la manera correcta de crear logotipos. Mientras que el SVG ó una tecnología similar (que no sea Adobe® Flash™) no sea acogido por todos los exploradores de Internet, todo logotipo lamentablemente debe seguir siendo publicado como una imagen para mantener su consistencia en todos los navegadores. En resumen, yo decidí crear el logotipo de EstiloCSS.com en XHTML solo por diversión y no recomiendo crear logotipos de este modo.

]]> http://www.estilocss.com/tutoriales-de-xhtml/logo-hecho-en-css/feed/ 0 Tutoriales de CSS en español http://www.estilocss.com/varios/tutoriales-de-css-en-espanol/ http://www.estilocss.com/varios/tutoriales-de-css-en-espanol/#comments Wed, 16 Sep 2009 21:16:06 +0000 admin http://www.estilocss.com/?p=6 Mi nombre es Iván Bustos y les quiero dar la bienvenida a EstiloCSS.com, un blog donde eventualmente trataré de compartir mis descubrimientos en el excitante mundo del CSS así­ como revelar técnicas que uso actualmente para la maquetación y el desarrollo de sitios web. Quiero primero aclarar que este blog no está enfocado en cubrir aspectos básicos del XHTML, del CSS ó de otras tecnologí­as relacionadas al desarrollo de sitios web en absoluto. En cambio, este sitio web ha sido creado para proponer nuevas técnicas de desarrollo. Estoy seguro que muchos desarrolladores avanzados descubrirán en mis entradas una valiosa información que espero les ayude a ser más productivos y eficientes en sus proyectos mientras que al mismo tiempo contemplan zonas críticas del desarrollo web como lo son el buen diseño, la accesibilidad y la integración tecnológica con otros servicios.

Tal vez a muchos de ustedes les parezca aburrido (estéticamente hablando) mi blog y en parte debo admitir que no pueden tener más razón. Sin embargo, fue mi propósito crear un tema para Wordpress simple que fuera capaz de proyectar la seriedad con la que quiero tomar este nuevo proyecto y a mi parecer, creo que lo he logrado. Pueden estar seguros de que comentaré en el futuro un poco más acerca de este diseño ya que tiene muchas cositas interesantes.

Sin nada más por ahora, me despido de ustedes no sin antes agradecerles por haber visitado EstiloCSS.com.

]]> http://www.estilocss.com/varios/tutoriales-de-css-en-espanol/feed/ 3