XHTML

Introducción a RaphaelJS

Javascript / Deja un comentario / Por

RaphaelJS es una librería de javascript para desarrollar gráficos y animaciones vectoriales en SVG y VML. ¿Qué es SVG? ¿Por qué vamos a utilizar gráficos vectoriales? ¿Para qué utilizar una librería para trabajar con SVG? Todas estas preguntas son las que debemos comprender antes de empezar a trabajar.

Gráficos Vectoriales Escalables o abreviado del ingles SVG (Scalable Vector Graphics) es un estandar propuesto en el año 2001 por el W3C para estandarizar los gráficos vectoriales. Allá por el año 1998, se presentaron 2 propuestas de gráficos vectoriales, por un lado se presento PGML por parte de Adobe, IBM, Netscape (Mozilla y Firefox) y Sun (Java, ahora parte de Oracle). Por otra parte se presento VML que tuvo más éxito por parte de Autodesk (creadores de Autocad), Macromedia (creadores de flash y posteriormente comprado por Adobe) y Microsoft. Normalmente cuando se hacen varias propuestas de este estilo al W3C, se acaba decantando por una en particular, pero en este caso, se optó por el camino del medio y el W3C propuso SVG que no es mas que la mezcla de VML + PGML.

Con SVG se crea un documento XML que puede ser utilizado tanto en un archivo independiente con extension *.SVG como embebido dentro de una página web al ser un XML y puede ser manipulado con javascript. SVG tiene su propio árbol DOM similar al HTML por lo que fácilmente desde javascript podremos capturar eventos, cambiar sus caracteristicas, así como dar estilos desde CSS.

Una vez tenemos la base, podemos entender mejor el papel de RaphaelJS en todo esto. RaphaelJS es una librería que nos promueve de una gran cantidad de objetos y métodos para encapsular los documentos SVG. Esta necesidad vino dada en su dia por los navegadores antiguos que interpretaban VML y los mas modernos que fueron interpretando SVG. RaphaelJS genera los documentos dinámicamente en uno u otro lenguaje, dependiendo de lo que soporte el navegador, siempre dando prioridad al estandar SVG.

Si todos los navegadores actuales soportan SVG ¿Por qué utilizar una librería como RaphaelJS y no SVG nativo? Muy sencillo y es que cuando queremos generar unos gráficos en SVG dinámicamente, con animaciones y demás, necesitamos de un respaldo de utilidades que nos faciliten en todo lo posible el trabajo, ya que el objetivo es ser productivos. Por ejemplo, para quienes conozcan jQuery, todo el mundo sabe hacer un document.getElementById, pero siempre acabamos haciendo $(«#id») porque es más cómodo, ademas de ofrecernos herramientas muy útiles. Con RaphaelJS pasa lo mismo, si queremos generar una animación en SVG, nos ofrece funciones con calbacks para generar animaciones dinámicamente con varias funciones easing o podemos guardar los objetos de SVG según los vayamos creando para reutilizarlos mas adelante, ademas de ser un poco mas sencillo de utilizar que SVG a pelo.

Este contenido y mas ira apareciendo en el curso de Raphael JS – Gráficos vectoriales con javascript y mas en concreto en el primer capítuo: Introducción a RaphaelJS.

Diferentes formas de seleccionar etiquetas hijas en css

CSS / 2 comentarios / Por

Cuando estamos maquetando una web, muchas veces nos vemos en la necesidad o en la comodidad de aplicar estilos a etiquetas o clases hijas directamente pero a veces esto puede convertirse en un problema. Normalmente cuando se maqueta se suele seleccionar directamente todas las etiquetas hija de un tipo por ejemplo, todos los p que haya dentro de un div con una clase, pero que pasa si tenemos una estructura un tanto compleja y no queremos que todas se comporten de una misma manera, como por ejemplo usando listas y sublistas y queremos que las sublistas tengan un margen que la lista normal no queremos que tenga.

En CSS hay varias formas de seleccionar etiquetas hija, la mas común es la de seleccionar todos los hijos de un tipo, como seria el ejemplo:

.clase ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

Con esto decimos que todos los li contenidos dentro de un ul, tengan un estilo, pero ¿Y si queremos hacer un listado mas complejo, con sublistados? Lo que debemos de hacer es decirle que aunque los li dentro de ul se comporten de una forma concreta, los primeros li queremos que se comporten de otra forma. En el siguiente ejemplo se usa para formar un listado con li y ul donde queremos que los primeros li no tengan margen alguno, pero que el resto de li que haya tengan un margen a la izquierda para simular un sangrado automático:

.sidebarBox ul > li > ul {
    margin-left: 25px;
}

Y el html sería el siguiente:


  
    
    
  • lista1
    • 
    
  • 
      
      
        
    • lista2
      • 
      
    
    
    •

Con esto lista1 no tendra sangrado pero lista2 tendra un sangrado de 25px hacia la izquierda. Espero que os sirva de ayuda.

Centrar texto verticalmente con css

CSS, HTML, Programación, XHTML / Deja un comentario / Por

Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el «como centrar texto verticalmente sin valign». Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.

Os dejo un ejemplo de como se utilizaría:

Ejemplo del html:

Ejemplo del css:

#menu {
  height: 50px;
}

.menuOption {
  line-height: 50px;
  text-align: center;
}

Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.

Scroll al inicio