Web design

React JS

React.JS | Cambiar el puerto 3000 que viene por defecto con la plantilla

Cuando creamos un proyecto de React.JS con la plantilla, por defecto se ejecutará en el puerto 3000, lo que hará que pueda darnos conflicto con otros proyectos que tengamos en ejecución si, como en mi caso, hacéis pruebas en proyectos paralelos mientras desarrolláis la aplicación principal. Entonces, ¿cómo lo cambiamos?

Continue reading…

SharePoint | Modificando el diseño en modo edición o vista

poster-wide

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.

Modo edición

Como ejemplo voy a aplicar una hoja de estilos adicional en el modo edición de un layout

<Publishing:EditModePanel runat="server" id="editmodestyles">
    <link rel="stylesheet" href="/_layouts/15/MyCompany/edit-mylayout.min.css" />
</Publishing:EditModePanel&gt;

Hay que tener en cuenta que es necesario que el espacio de nombres “Publishing” esté definido en la cabecera del Page Layout

<%@Register TagPrefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"/>

Con esto, en el Page Layout correspondiente se aplicarán las reglas de estilos contenidas en “edit-mylayout.min.css” sólo cuando la página se encuentre en modo edición.

Modo vista

En el caso del modo vista, sólo será necesario añadirle el atributo PageDisplayMode=»Display» al control EditModePanel y ya podremos tener estilos definidos sólo para el modo vista.

<Publishing:EditModePanel runat="server" id="editmodestyles" PageDisplayMode="Display">
    <link rel="stylesheet" href="/_layouts/15/MyCompany/view-mylayout.min.css" />
</Publishing:EditModePanel>

Nuevamente, recordar que el espacio de nombres Publishing debe estar definido.

Otros usos

Esto no sólo se limita a permitirnos añadir estilos cuando los necesitemos sino que, además, también podemos incluir otros controles como inputs, controles ASP.NET, controles de SharePoint, Web Parts, etc… a nuestro gusto siempre y cuando esté permitido dentro del page layout con lo que se convierte en algo muy potente.

Un ejemplo, mostrar sólo en modo vista el rating de una página.

 

Enjoy coding!!

SASS | ¿Conoces todas las funciones predefinidas?

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.

Funciones SASS

SASS dispone de una gran cantidad de funciones predefinidas que podemos usar para aumentar la potencia:

  • Funciones RGB
  • Funciones HSL
  • Funciones de opacidad
  • Más funciones de color
  • Funciones de string
  • Funciones numéricas
  • Funciones de listas
  • Funciones de maps
  • Funciones de selectores
  • Funciones introspectivas
  • Otras funciones

Además, también nos permite crear nuestras propias funciones lo que ampliará el abanico de lo que podremos hacer sobre CSS sin necesidad de usar CSS.

Un ejemplo del uso de estas funciones sería crear una gama de colores de nuestro sitio a partir de los colores principales haciendo uso de las funciones RGB, HSL y de opacidad, con lo que podremos variar saturación, opacidad, aclarar, descomponer y mezclar para obtener una paleta de colores rica para nuestro sitio web de una forma muy sencilla.

Si no las conocíais, espero que podáis sacar un gran beneficio de estas funciones y si ya las conocíais, podéis aportar casos de uso interesantes y así podremos ayudar a usar mejores prácticas a la hora de maquetar sitios web.

Enjoy coding!!

CSS | Es posible realizar cálculos entre píxels y porcentajes y mezclar peras con manzanas con calc()

poster-wide

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?

Bajando a la mina

Una posible solución es bajar a la mina y empezar a escribir CSS para controlar al milímetro el comportamiento. Esto, aunque es posible, es muy engorroso y nos quedarán ficheros de estilos que no desearía que mantuviesen ni mis peores enemigos.

En el caso de diseños responsivos o adaptativos, podríamos solucionarlo también poniendo puntos de control con mediaqueries en decenas de resoluciones lo que nuevamente se convierte en un trabajo tedioso y con un resultado feo e imposible de mantener.

Usar calc()

Es aquí donde hace su aparición la función “calc”. Para los más avezados no será algo nuevo, pero para los rezagados o novatos sí que será un descubrimiento que les salvará la vida (admito donaciones xD)

Como indicaba en la escenificación del problema, es muy probable que nos encontremos en la situación de tener que mezclar medidas relativas con porcentajes y medidas. Como ejemplo muy simple, supongamos tener tres columnas, una con 200px de ancho y las otras dos con el mismo ancho, es decir, al 50% del espacio restante de los 200px que sean adaptativas.

El DOM podría ser el siguiente:

        <div id="site-container">
            <div id="column-1" class="column-fixed"></div>
            <div id="column-2" class="column-relative"></div>
            <div id="column-3" class="column-relative"></div>
        </div>

Y los estilos:

            #site-container {
                font-size: 0;
            }
            
            #site-container > div {
                display: inline-block;
                padding: 5px;
                height: 300px;
                box-sizing: border-box;
            }

            #column-1 {
                background: lightblue;
            }

            #column-2 {
                background: blueviolet;
            }

            #column-3 {
                background: #363636;
            }

            .column-fixed {
                width: 200px;
            }

            .column-relative {
                width: calc((100% - 200px) / 2);
            }

Como se puede observar, hay 3 columnas “inline-block” (nótese que el contenedor tiene font-size: 0; para evitar los márgenes que aplican los navegadores). La primera columna tiene un ancho de 200px y las restantes un valor calculado mediante calc((100% – 200px) / 2), lo que resultará en el 50% del espacio resultante de restar los 200px al ancho total.

El resultado sería el siguiente y nos permitiría mantener las columnas de ancho calculado con un valor dinámico en función del ancho disponible resultando en un diseño “adaptativo”.

image

Como veis, ha sido un tip sencillo que nos puede sacar de muchos apuros.

Enjoy coding!!

JavaScript tips & tricks | Imprimir un elemento específico del DOM

poster-wide

En determinadas ocasiones, puede ser necesario imprimir el contenido de un determinado bloque de un sitio web, por ejemplo, en caso de un código que necesite ser guardado, los datos de una reserva, etc. En esos casos, podemos hacer uso de JavaScript y, con un sencillo código que os muestro a continuación.

function printDOM(elementId) {
var contentToPrint = document.getElementById(elementId).innerHTML;
var page = document.body.innerHTML;
document.body.innerHTML = contentToPrint;
window.print();
document.body.innerHTML = page;
}

Como podéis observar, el truco consiste en guardar en una variable el contenido que queremos imprimir y en otra variable el contenido original de la página. Seguidamente, reemplazamos el contenido de la página por el que queremos imprimir y ejecutamos la impresión mediante window.print(). Finalmente, volvemos a establecer el contenido de la página por el original.

Espero que os sirva de ayuda este pequeño truco que amplía el uso habitual que os explicaba en este otro artículo.

Actualización 03 enero 2017 (by Eduard Tomás)

Tal y como expone maese Eduard en los comentarios, es más eficiente crear un objeto windows para imprimir el contenido que deseamos imprimir (copio y pego el código de Eduard)

// data es el HTML a imprimir (el contenido del elemento)
var pw = window.open('', 'my div', 'height=400,width=600');
pw.document.write('<head></head><body>');
pw.document.write(data);
pw.document.write('</body>');
pw.print();
pw.close();

Enjoy coding!!

Tips & Tricks | Dibujar triángulos con CSS

poster-wide

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.

Para ello, he encontrado y recopilado diversos enlaces (por orden de gusto) que nos pueden ayudar a generar nuestros triángulos según las necesidades que tengamos:

Tips & Tricks | Usar JavaScript para extraer fácilmente la extensión de un fichero

poster-wide

En este artículo escribiré un truco sencillo para leer la extensión de un fichero mediante JavaScript pensando, no sólo en conocer dicha extensión, sino además en guardarla en una variable para poder realizar acciones como agregar un icono, emparejarlo con una clase de CSS, etc.

Continue reading…

SharePoint | Ejecutándo código después de la carga de los Display Templates

poster-wide

Cuando desarrollamos Display Templates para dar un look&feel diferente a los elementos resultantes de las búsquedas en SharePoint, muchas veces es necesario ejecutar código JavasScript tras la carga de los mismos ya sea para añadir funcionalidad extra o simplemente para establecer algunas propiedades visuales que requieran de conocer los resultados para mostrar una mejor distribución. Continue reading…

Codemotion 2015 | Resumen de mis sesiones sobre Branding y Universal Windows Platform Apps con Machine Learning

posterUn año más, Codemotion ha sido uno de los mayores eventos sobre tecnolgías de desarrollo de software de España y, este año, me ha tocado el privilegio de participar por partida doble con sesiones sobre Branding en SharePoint (Online y OnPremises) y sobre Aspectos útiles de Machine Learning en Universal Windows Platform Apps. Además, como siempre, Microsoft ha participado muy activamente arropando a los que íbamos a hablar sobre tecnologías .NET y relacionadas así como ofreciendo a todos los asistentes la posibilidad de pasarse por una amplia zona de entretenimiento y networking en la que se podía contactar con cualquiera de los miembros de DX e informarse de todas las ventajas que se ofrecen.

En la primera sesión sobre Branding en SharePoint hablé sobre cómo aplicar técnicas modernas de desarrollo web a la hora de aplicar Branding en los sitios de SharePoint Online u OnPremises.

2

 

En la segunda sesión, compartía cartel junto con el gran Adrián Díaz para hablar sobre “Aspectos útiles de Machine Learning en Universal Windows Platform Apps” con la sala llena a reventar, teniendo incluso gente de pie y más personas que entraron durante la sesión.

320151231053259WP_20151127_15_47_58_Pro

Ésta última sesión fue grabada y podéis ver el vídeo en Youtube

 

Las slides las podéis obtener de SlideShare

Modern Branding en SharePoint desde todos los ángulos

Aspectos útiles de Machine Learning en Universal Windows Platform Apps

 

Espero que os haya gustado el evento a los que estuvísteis y a los que no, el próximo año más 🙂

 

Enjoy coding!!!