CSS

Desde hace tiempo, CSS ha quedado “obsoleto” frente a soluciones como SASS y LESS que aportan grandes ventajas como, entre otras, el uso de variables, anidamiento de elementos, elementos reutilizables, compilación, y…funciones predefinidas.

SASS o LESS

Como esto va de gustos y a mi me gusta siempre aportar mi visión, desde el principio me decanté por el uso de SASS en vez de LESS dado que el segundo depende de JavaScript y suelo evitar en la medida de lo posible el abuso de este tipo de dependencias aunque no podemos olvidar que SASS está basado en Ruby. Si queréis conocer a groso modo las diferencias entre ambos y algunas comparaciones, este artículo de KeyCDN es bastante bueno.

Dado el elevado número de veces que me han preguntado algo parecido, voy a escribir este sencillo artículo sobre la función calc() de CSS que todo maquetador web debería conocer.

Escenario

Algo con lo que deberemos lidiar n-mil veces sobre todo cuando estamos maquetando sitios web adaptativos o responsivos, es que tendremos elementos con unas medidas específicas que tenemos que encajar con otros que tienen medidas relativas especificadas con porcentajes y… ahí viene la gran duda, ¿cómo lo solucionamos?

Algo habitual cuando diseñamos una página es tener que dibujar triángulos y siempre andamos rebanándonos los sesos hasta que, cansados, creamos una imagen con el triángulo deseado y así nos evitamos más quebraderos de cabeza, pero, ¿es óptimo?

Problema

Cuando usamos imágenes tenemos los siguientes problemas

• Mayor peso en KB de la página, con lo que, aunque el navegador las pueda cachear o usemos técnicas de precarga de las mismas, en definitiva se produce una mayor transferencia de datos en cada petición.
• No son adaptables en tamaño por mucho que podamos cambiar sus dimensiones y pensemos que no pierden calidad porque, aunque en algunos casos sea así, generalmente obtendremos visualizaciones difusas o pixeladas.
• No permiten el cambio de color a priori. Se podrían usar filtros mediante CSS pero no obtendremos un resultado óptimo, la implementación es compleja y finalmente, obligaremos al navegador a realizar mayor procesado de la interfaz, ralentizando y haciendo más pesada la página.

Solución

Con CSS podemos jugar con los bordes o con el efecto :after de los elementos para dibujar triángulos a nuestro antojo, reduciendo el procesado del navegador y permitiéndonos cambiarle la forma, el tamaño y el color según nos convenga con lo que se convierte en la solución más óptima.

Desde hace ya algunos años, una de las técnicas más usadas en las Hojas de Estilo en Cascada (CSS) para maquetar en sitios web que deban mostrar elementos de tipo bloque en línea es la de establecer su regla “display” con el valor “inline-block”. El uso de “display: inline-block;” nos permite realizar menús, muestras de elementos, etc, sin necesidad de recurrir a elementos flotantes con la regla “float” que ya se encuentra desaconsejada salvo necesidad expresa o la muy mala práctica de maquetación consistente en usar tablas para distribuir el contenido. Así pues, en este artículo os expongo el problema y varias soluciones en mayor o menos medida recomendadas puesto que algunas las considero malas prácticas y otras son algo “raras”, pero sin duda, al final del artículo encontraréis la que a mi parecer es la forma correcta de realizar este tipo de maquetado. Podéis descargaros el website de ejemplo para seguir el artículo desde este enlace.

El pasado, jueves 16 de octubre, volvimos a la acción desde TenerifeDev con dos sesiones creo que bastante interesantes para los desarrolladores y diseñadores web. En esta ocasión, las sesiones las dimos en las instalaciones de la FEULL (Fundación Empresa de la Universidad de La Laguna) que como siempre, colaboraron activamente con nosotros para poder compartir conocimientos con todos los asistentes, entre los que siempre destaca una alta presencia de estudiantes que se pueden enriquecer con la experiencia que podamos aportar sobre la vida laboral. Este es el resumen de las sesiones. Enjoy!

Hoy me gustaría compartir una reflexión con todos ustedes acerca de las buenas formas para crear una hoja de estilos en contra punto al uso de hacks e ideas estrambóticas que pueden hacer de una hoja de estilos algo ilegible y que te dan ganas de tirar a la basura.

Uso de hacks

Los hacks en CSS son “trucos” para que determinados navegadores interpreten las hojas de estilo de forma diferente y generalmente se usaban para corregir la mala interpretación que hacían a determinadas propiedades. Se popularizaron durante la etapa en la que la versión del navegador de Microsoft era Internet Explorer 6 (IE6) que, debido a su “errónea” “especial” interpretación del modelo de caja (ancho/alto, padding y margen), hacía del diseño de páginas web una tarea dura. No era extraño ver diseñadores web que renegaban del navegador más popular que debían instalarse programas que renderizaban sus webs en N navegadores diferentes para poder ver las diferencias y así poder ir ajustando la visualización de las mismas de forma menos lenta. Una prueba que dejaba en gran evidencia estos problemas era la nota que obtenían los diferentes navegadores en “Acid Test”.

Hola a todos.

En este artículo explicaré cómo fijar el pie de página en un sitio de publicación de SharePoint 2010 mediante el uso de jQuery cuando el contenido sea inferior al área de visualización del navegador.

Escenario

Supongamos que tenemos un sitio de publicación de SharePoint 2010, con un diseño que incluye un pie de página (atractivo o no) con opciones, texto, iconos,… y todo lo que se nos ocurra. En caso de que, en alguna de las páginas, el contenido no logre rellenar el área de visualización del navegador, ese pie, en el que tanto hemos trabajado para que se integre en el diseño, se verá inmediatamente después del contenido, dejando un espacio desaprovechado entre él y el pie del navegador.