Javascript – Gráficos de datos

Author: Adrià Cidre  |  Category: CSS, Diseño, Java Script

Hasta ahora cuando quería hacer un gráfico de datos simplemente utilizaba JPGraph con el que se pueden conseguir resultados sorprendentes.

Sin embargo en la actualidad a cada instante intento evitar un poco más el PHP para hacer todo lo que pueda en la máquina del cliente con Javascript. Por este motivo me ha sorprendido gratamente encontrar esta librería con la que podemos realizar gráficos de datos en Javascript.

A continuación podéis ver algunos ejemplos de que tipo de gráficos podemos hacer.

Imagen 2.png

Imagen 3.png

Imagen 4.png

Como podéis ver es una librería bastante completa. Espero poder probarla pronto para explicaos su funcionamiento con más detalle, hasta entonces podéis encontrar ejemplos en su página web o descargarla desde aquí.

Decir por último que ofrece una compatibilidad casi absoluta:

Windows
Firefox 1.5 +
Internet Explorer 7
Internet Explorer 6
Safari 3.1 +
Opera 9 +
y otros buscadores
Mac
Firefox 1.5+
iPhone 1+
Safari 2+

Javascript – Dock Menú CSS

Author: Adrià Cidre  |  Category: CSS, HTML, Java Script

Dock Menú en Javascript y CSS

Hacia tiempo que buscaba algo parecido a esto, pero hasta hoy no había encontrado uno Dock similar al Dock Menú de OS X que me convenciera.

css-dock-menu

Hay que felicitar el trabajo realizado por los chicos de N.DESIGN STUDIO, que han conseguido una librería sencilla, y con unos acabados fantásticos.

La librería está desarrollada bajo JQuery, y es bastante sencilla de utilizar.

Primero: Descargar los ficheros.
Descargar desde aquí.

Segundo: Insertar el código
Insertamos el código entre las etiquetas head de nuestra página.


        
	

Tercero: Configuración.
Tenemos que incluir el siguiente código en cualquier lugar de la etiqueta de nuestra página

	

Cuarto: Añadir o borrar elementos

Para añadir elementos :

	homeHome

Referencia de conversión CSS a Javascript

Author: Adrià Cidre  |  Category: CSS, Java Script

· background –> background
· background-attachment –> backgroundAttachment
· background-color –> backgroundColor
· background-image –> backgroundImage
· background-position –> backgroundPosition
· background-repeat –> backgroundRepeat
· border –> border
· border-bottom –> borderBottom
· border-bottom-color –> borderBottomColor
· border-bottom-style –> borderBottomStyle
· border-bottom-width –> borderBottomWidth
· border-color –> borderColor
· border-left –> borderLeft
· border-left-color –> borderLeftColor
· border-left-style –> borderLeftStyle
· border-left-width –> borderLeftWidth
· border-right –> borderRight
· border-right-color –> borderRightColor
· border-right-style –> borderRightStyle
· border-right-width –> borderRightWidth
· border-style –> borderStyle
· border-top –> borderTop
· border-top-color –> borderTopColor
· border-top-style –> borderTopStyle
· border-top-width –> borderTopWidth
· border-width –> borderWidth
· clear –> clear
· clip –> clip
· color –> color
· cursor –> cursor
· display –> display
· filter –> filter
· font –> font
· font-family –> fontFamily
· font-size –> fontSize
· font-variant –> fontVariant
· font-weight –> fontWeight
· height –> height
· left –> left
· letter-spacing –> letterSpacing
· line-height –> lineHeight
· list-style –> listStyle
· list-style-image –> listStyleImage
· list-style-position –> listStylePosition
· list-style-type –> listStyleType
· margin –> margin
· margin-bottom –> marginBottom
· margin-left –> marginLeft
· margin-right –> marginRight
· margin-top –> marginTop
· overflow –> overflow
· padding –> padding
· padding-bottom –> paddingBottom
· padding-left –> paddingLeft
· padding-right –> paddingRight
· padding-top –> paddingTop
· page-break-after –> pageBreakAfter
· page-break-before –> pageBreakBefore
· position –> position
· float –> styleFloat
· text-align –> textAlign
· text-decoration –> textDecoration
· text-decoration: blink –> textDecorationBlink
· text-decoration: line-through –> textDecorationLineThrough
· text-decoration: none –> textDecorationNone
· text-decoration: overline –> textDecorationOverline
· text-decoration: underline –> textDecorationUnderline
· text-indent –> textIndent
· text-transform –> textTransform
· top –> top
· vertical-align –> verticalAlign
· visibility –> visibility
· width –> width
· z-index –> zIndex