Archivo para la categoría "Desarollo Web"
Navegadores y Estándares.
Con la salida de IE 8, todos los que estamos dentro del desarrollo web pensamos rápidamente en el cumplimiento de estándares y si vamos a poder hacer las cosas sin usar hack de css y cosas por el estilo.
Para poder determinar el cumplimiento de los estándares, existe un test llamado The Acid3 Test.
Aquí están los datos que he obtenido al pasar el test con algunos navegadores:
- IE 7 obtiene un 12/100
- IE 8 obtiene un 20/100
- Firefox 3 obtiene un 71/100
- Opera 9.50 obtiene un 84/100
- Opera 9.64 obtiene un 85/100
Aunque IE 8 mejora en 8 puntos al actual navegador de Microsoft , la verdad es que esta lejos de navegadores como Opera o Firefox.
Mas información:
Drag & Drop html divs
Interesante post de Antonio Lupetti donde nos muestra como hacer mediante mootools , el efecto de coger y arrastrar “Drag & Drop” cajas “divs ” html, tipo Netvibes o igoogle.
Enlace: http://woork.blogspot.com
Reseteo de etiquetas CSS
Los que desarrollamos aplicaciones web, siempre tenemos que tener en cuenta el tema de los navegadores. Nuestra aplicación debe verse igual, o por lo menos sin cambios muy bruscos en todos ellos.
Para conseguir esto, una de las técnicas se basa en resetear ciertas etiquetas antes de definirlas en nuestro css.
El grupo de desarrolladores de yahoo nos proporciona una de estas hojas de estilo de reset: yui-reset
Elementos multi-class
Cuando se trabaja en CSS , normalmente, se crean propiedades específicas para definir las características de un objeto. Por ejemplo el color, tamaño y tipo de letra que va a tener tu página. Muchas veces se necesita aplicar una pequeña variación a esta clase y por lo tanto la duplicamos para ajustarla a las necesidades.
Un aspecto interesante en CSS es que se pueden definir Multi-Class.
El CSS:
.roja {color : #FF0000;}
.negrita {font-weight: bold;}
.cursiva {font-style:italic;}
.grande{font-size : 24px;}
.pequeña {font-size : 9px;}
El HTML:
<p class="negrita roja">Texto negrita Rojo</p> <p class="cursiva roja">Texto cursiva Rojo</p> <p class="negrita roja grande">Texto negrita Rojo Grande</p> <p class="negrita roja pequeña">Texto negrita Rojo Pequeño</p>
Resultado:
Para ver el resultado podéis crearos un html y pegar el código anterior o visitar Optimize CSS with multi-class elements donde se puede ver un ejemplo práctico de la utilización de elementos multi-class.
