Explorando la Categoría: "CSS"
Si creias que lo habías visto todo en cuanto a cosas frikis, o mejor dicho, geeks, mirad que canción se ha currado este tío sobre el CSS3. Basada en la famosa canción “Say you, say me”, se nota que el tío está completamente enamorado de los estándares y la buena programación web :)
Vía Ajaxian
Hoy he descubierto Sprite me, una herramienta muy práctica que facilita enormemente la tarea de optimización de páginas web mediante la técnica CSS sprite. La herramienta detecta todas las imágenes de fondo asignadas con CSS mediante la propiedad background-image, y las muestra en una caja. Utiliza firebug lite para inspeccionar las imágenes y proporcionar más información al desarrollador.
Una vez seleccionadas las imágenes que queremos agrupar en una, solo tenemos que pulsar sobre “Make Sprite”, lo que generará una nueva imagen que compone a todas las imagenes anteriores. Después pulsando sobre “export CSS” podremos obtener el código CSS necesario para implementar en el sitio que estamos optimizando.
Spriteme puede ejecutarse en cualquier sitio web como un bookmarklet, añadiendo la URL de la aplicación a favoritos y pinchando sobre el marcador en el sitio que quieres optimizar.
Te recomiendo que sigas el pequeño tutorial que hay en el sitio web de SpriteMe para aprender el funcionamiento de la aplicación.
Haz click aquí para ejecutar Sprite Me, y guarda el enlace en favoritos si quieres ejecutarlo en cualquier sitio web.
Hace un tiempo descubrí en Cristalab una serie de videotutoriales donde se abordaba el proceso de maquetar un diseño, realizado con Photoshop en formato PSD, a XHTML/CSS. Esta es una tarea que todo buen maquetador debe dominar a la perfección si quiere que sus plantillas se visualicen correctamente en todos los navegadores.
En los vídeos se tratan algunos conceptos básicos de CSS, como el modelo de cajas (box model) de CSS, el proceso de “slice”, donde se cortan trocitos del diseño para maquetarlos más tarde. También se tratan temas como la inclusión de efectos con Javascript o fuentes personalizadas con Cufon. Si te interesa el tema no puedes perdértelos. Recientemente, la autora (Raymicha) ha finalizado la serie de videos y los ha colgado todos en Vimeo. Si te interesa el tema te recomiendo que le eches un vistazo por que puedes aprender bastante sobre el proceso de maquetación de un PSD.
Los vídeos aparecen al pinchar sobre “Seguir leyendo”.
Seguir leyendo para ver los vídeotutoriales de maquetación CSS
Editor visual de estilos CSS para texto: CSSTXT
Vía Genbeta encuentro CSSText, un editor visual de CSS para texto. Permite crear estilos de texto visualmente marcando y desmarcando opciones, al estilo de Form Style Generator.Por : David
1
Reconozco que el título es un poco sensacionalista, pero es que me ha hecho gracia lo que he visto. Matt Cutts, el jefe del equipo de cálidad en busquedas de Google, famoso por que es cara visible de Google y suele publicar muchos consejos en forma de videos sobre buenas prácticas en posicionamiento para Google, publicó hace poco un video en el que decía que no hay que usar técnicas de sustitución CSS en los logos para indicar el texto del logo, ya que esto podría ser interpretado como spam por Google. La buena práctica es incluir una etiqueta img con un atributo alt, que Google puede leer perfectamente. Aquí dejo el video para que veáis que no miento.
Básicamente dice que usar técnicas CSS para esconder el texto del logo es algo un poco turbio y que puede ser considerado como spam. Mucho mejor usar una etiqueta img. Hasta aquí todo claro y lógico.
Lo que no me parece tan lógico es que Google vaya predicando esto y luego en sus aplicaciones haga justamente lo que desaconseja. Y es que me lleve una sorpresa cuando nada más acabar de ver el video abro mi cuenta de FeedBuner y veo que justamente están usando la misma técnica que Matt Cutts desaconseja.
Lo que están haciendo es básicamente utilizar un text-indent de -5000 para esconder el texto del h1. Es una tontería y lógicamente no creo que Google se dedique a hacer “Black Hat SEO”, no creo que lo necesite, pero me ha parecido curioso que la todopoderosa Google se contradiga.
Espero que no me sancione Google por esto, jeje.
70 tutoriales de CSS3 y HTML5
Vía Facebook me encuentro con este fantástico recopilatorio de 70 tutoriales de HTML5 y CSS3 realizado por CSS3 Gallery.Por : David
El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien maquetado debería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores, es decir, mejor para SEO, y un tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página.
El otro día, vía Twitter me os hablé de un pequeño tutorial donde se enseñaban las bases del posicionamiento CSS en 10 lecciones prácticas. El tutorial me pareció muy bueno y creo que es básico para cualquier persona que quiera aprender a maquetar sitios web con CSS. Los pasos son realmente sencillos de seguir.
Seguir leyendo el tutorial para aprender posicionamiento CSS en 10 pasos
Colección de chuletas para HTML 5 y CSS3
Que no sea por chuletas. En WebResourcesDepot han hecho una recopilación de chuletas sobre HTML 5 y CSS3. Hay que estar al día, así que voy a echarles un vistazo que no quiero quedarme desfasao en estas nuevas tecnologías que se avecinan. Menos mal que Microsoft tardará en implementar los estándares en su navegador y nos dará tiempo, jejeje.Por : David
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página