Diseño

Es habitual en SharePoint tener que realizar ajustes en la vista de edición cuando estamos aplicando branding y creando Page Layouts, Masterpage, etc. Lo normal en un maquetador es que aplique estilos según los nuevos elementos en pantalla pero, a veces resulta tedioso y provoca tener que escribir gran cantidad de estilos y selectores para cosas muy simples.

Solución

Conociendo un poco las “herramientas” que aporta SharePoint dentro de los controles que expone por defecto, podemos realizar esta tarea de una forma mucho más sencilla simplemente haciendo uso de EditModePanel que nos valdrá tanto para mostrar elementos en vista edición como para el modo vista.

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.

Migration note: the original event poster from the legacy blog was removed after a targeted retry confirmed the source files still return 404.

El próximo viernes 4 de diciembre, gracias a la iniciativa de Josué Yeray, se celebrará el primer Talks4Kids en las instalaciones de Microsoft Ibérica (Urbanización La Finca en Pozuelo de Alarcón, Madrid) y tendré el enorme placer de poder impartir una sesión con un título atópico “Por qué los espartanos molan y Gerges debe morir”, pero no os asustéis, que no va a haber lanceros, ni persas, ni espartanos… ¿o sí? jjjj