IronicNet Programación, Infórmatica y mas de esas cosas que nos gustan a los geeks…

Gracias a @elijahmanor me llega el siguiente articulo:

7 Principios del CSS Limpio y Optimizado

1. Use Shorthand
   Utiliza el modo abreviado de cada propiedad para escribir menos codigo
2. Axe the Hacks
   Evita y elimina los hacks. Usalos solamente para dar soporte a navegadores viejos, no nuevos.
3. Use whitespace wisely
   Utiliza los espacios en blanco sabiamente. No es bueno dejar demasiados espacios o no dejar ninguno.
4. Prune frameworks and resets
   Limpia los frameworks y resets. Por lo gral suelen poner propiedades que no necesitamos. Sé consciente de lo que hacen.
5. Future-proof your CSS
   Asegura tu estilo, separando el formato del diseño de la pagina.
6. Document your work
   Documenta tu trabajo. Es útil para el trabajo en equipo asi como para tener una vision global.
7. Make use of compression
   Haz uso de la compresión. Muchas aplicaciones permiten bajar el tamaño y errores del codigo css.

He aqui el link al articulo:

7 Principles Of Clean And Optimized CSS Code | CSS | Smashing Magazine.

Muy buen conjunto de articulos sobre css!

15 Must Read Articles for CSS Beginners.

He aqui la lista:

• Resetting Your Styles with CSS Reset
• Learn CSS Positioning in Ten Steps
• Internet Explorer and the CSS box model
• Specifics on CSS Specificity
• Faux Columns
• Sexy Ordered Lists with CSS
• Divitis: What it is and How to Avoid it
• Using background-image to replace text
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• How to Create a CSS Menu Using Image Sprites
• 10 Examples of Beautiful CSS Typography and how they did it…
• CSS Shorthand Guide
• Push Your Web Design Into The Future With CSS3
• How to use headings in HTML
• 10 HTML Tag Crimes You Really Shouldn’t Commit

Por medio de un twitt me encuentro con esto:

Llevar el diseño al proximo nivel con CSS3

Muy buen articulo donde enumera los nuevos atributos y nos da recomendaciones acerca de como implementarlo.

Contenidos:

• 1. Selectors
• 2. RGBA And Opacity
• 3. Multi-Column Layout
• 4. Multiple Backgrounds
• 5. Word Wrap
• 6. Text Shadow
• 7. @font-face-Attribute
• 8. Border Radius
• 9. Border Image
• 10. Box Shadow
• 11. Box Sizing
• 12. Media Queries
• 13. Speech
• Conclusion
• Further Reading And References

Sin duda un Must-Read!

Bueno, hoy compile mucho, lo cual significa que tuve tiempo de leer bastante.

Estuve navegando la seccion de interfaces de usuario de AListApart.com.

Never Use a Warning When you Mean Undo

Nos explica el porque hay que evitar dar mensajes de error del tipo “Haga click para continuar”, “Esta seguro que…”, y de ese tipo. La solución: implementar la funcionalidad de “deshacer” (Undo). Hace una comparacion con gmail.

Muy interesante.

Where Am I?

Este articulo, habla sobre la navegacion del usuario en un sitio web, y comenta que 3 pasos debemos dar.
Sinteticamente, indicarle el usuario donde esta, donde puede llegar a estar y donde ha estado.

Home Page Goals

Este articulo basicamente consiste en destacar la importancia de una pagina de inicio.
Como debe estar construida y que debe mostrar, incluso dependiendo del tipo de usuario.

In Search of the Holy Grail

Para aquellos que no son conocedores, el Holy Grail es conocido en el mundo del CSS. Como el layout de  3 columnas.
En el cual el contenido va en el centro, y al costado la navegacion u otro contenido.
Interesante como muestran paso a paso la construccion del mismo.

Lo unico que me queda, es releerlo, poner el culo en la silla y empezar a aplicar estas cosas en mi web

Bueno, paso mucho tiempo desde mi ultimo post y mas aún desde el ultimo mantenimiento al blog…

Hoy lo revise un poco y volvi a hacerlo standard segun las reglas de W3C
Al momento de utilizar el validador que utilizan, descubri que tenia 69 errores.

Todos estos errores, eran basicamente causado por 2 plugins…

El primero es el utilisimo: Viper’s Video Quicktags (permite incluir videos facilmente).
El segundo es la extension para Firefox Performancing o el ex-ScribeFire.

Ambos insertaban un tag <p> para introducir el contenido…
El primero, insertaba algo como: “<div id=”lalala”><p>…</p></div>”
El segundo, insertaba:”<p class=”performancing”>Powered by …</p>”

Lo que sucedia es que WP, cada parrafo lo introduce dentro de un tag <p>. Por lo que se anidaban los <p> y producia un error en la validacion del XHtml.

La solucíon.

La manera que encontre, para el primer caso de los videos, fue modificar el plugin…
Donde decia: “<div id=”lalala”><p>…</p></div>” lo reemplace por “<span id=”lalala”>…</span>” y funciono correctamente y se visualiza correctamente y es valido!

Para el segundo caso, del Scribefire, por ahora lo solucione manualmente… reemplazando el “<p class=”performancing”>Powered by …</p>” por “<span class=”performancing”>Powered by …</p>”

Orgulloso muestro:

En esta pagina nos brindan 26 diferentes opciones para crear pestañas.

26 Best ways to implement AJAX, CSS and Javascript based Tabs
Powered by ScribeFire.

Por medio de Sentido Web me entero de http://csseasy.com/

Una compilacion pequeña pero util de layouts en css.

Este tipo de cosas me encantan, que ya te den todo armado =P.
Powered by ScribeFire.