Web Commons Plus Nueva infraestructura front desarrollos web

Web. Commons Plus Nueva infraestructura “front” desarrollos web Andrés Viedma Peláez 1

Las webs de DIGIBÍS no sólo son feas. . . 2

También siguen las mismas pautas desde hace. . . ¡ 10 años! 3

El mundo ha cambiado. . . • Diseños “responsive” • Marcado semántico mejorado: HTML 5 • SEO • Webs más dinámicas – Navegadores cada vez más estándares – Librerías Java. Script potentes – Efectos CSS y JS. . . 4

Tenemos lecciones aprendidas con Digibib • CSS muy guarros • Plantillas HTML redefinidas demasiado • Velocity: problemas para hacer macros reutilizables • Demasiado código dentro de las plantillas 5

Y queremos ir más allá • SAAS – Webs en la nube – Una misma web, varios portales – ¿Diseños editables desde la propia web? • Sin tener que cambiar todo 6

¿Qué cambiar? • SÍ – Plantillas web – Una misma web, varios portales – JS, CSS, imágenes. . . – TODA la parte front (vista) 7 • NO – XML de comandos (controlador) – Código Java (modelo)

8

HTML 5 • Nuevas etiquetas semánticas • Mejoras en formularios (más elementos, validaciones) • Reproductores multimedia (audio, video, canvas) • Nuevas APIs Java. Script – Drag & drop – Offline – Comunicación bidireccional (websockets) – Geoposicionamiento – Concurrencia (webworkers) – BD local (storage) 9

HTML 5 • Versión “experimental” – Tablas de compatibilidad en navegadores – Aún no cerrada • Etiquetas semánticas con explicaciones “retorcidas” • No es XHTML – No se puede “validar”: HTML “lint” http: //lint. brihten. com/html/ – Nosotros lo usaremos como XHTML • Reproductores y APIs: más potencia en el cliente reemplazar Flash 10

HTML 5: Elementos estructurales • article: “unidad” completa de información • section: agrupación “temática” (<> div) • aside: contenido “relacionado” con el principal • header / footer: no necesariamente de la página • nav: Menú http: //www. anthonycalzadilla. com/2010/08/html 5 -section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/ http: //coding. smashingmagazine. com/2011/11/18/html 5 -semantics/ http: //blog. ikhuerta. com/maquetacion-seo-en-html 5 -div-article-section-o-aside 11

HTML 5: Elementos estructurales 12

HTML 5: Mejoras en formularios • Nuevos tipos de campos – – – números “sliders” fechas / horas colores direcciones email / web. . . • Campos requeridos • Validaciones declarativas • Autofocus sencillo • Autocompletar • Placeholders 13

HTML 5: Etiquetas http: //joshduck. com/periodic-table. html 14

LESS • Lenguaje sobre CSS • Mejora claridad y flexibilidad, permite reutilización http: //lesscss. org/ Variables: permiten hacer estilos configurables #header { color: black; @nice-blue: #5 B 83 AD; @light-blue: (@nice-blue + #111); . navigation { #header { color: @light-blue; } font-size: 12 px; } h 2 {color: darken(@color, 10%); }. logo { width: 300 px; Expresiones y &: hover { text-decoration: none } funciones } } 15 Código anidado: mucho más claro

LESS • Reutilización: mixins. rounded-corners (@radius: 5 px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; } @import "library. less"; . class { color: @imported. Color; } Se pueden hacer y utilizar Librerías Conjunto de reglas reutilizables #header {. rounded-corners; } #footer {. rounded-corners(10 px); } 16 Dos formas de compilar a CSS • Desarrollo: Java. Script • Producción: Maven

j. Query • Librería “base” Java. Script: acceso a DOM, Ajax. . . • Muy diferente a Prototype en diseño de la librería • Estándar de facto • Muchas librerías basadas en ella http: //jquery. com/ 17

j. Query var elems = $(“#contenido li. par”); elems. html(); Devuelve el contenido de todos los elementos elems. html (“<strong>[vacío]</strong>”); elems. attr (“href”, “xxxx”); elems. attr (“href”); 18 1 ó varios elementos por selector CSS Modifica el contenido de todos los elementos Misma función para obtener valores y modificarlos

Bootstrap • “Framework para que el desarrollo web sea más rápido y más fácil” • Basado en HTML 5, LESS, j. Query • Define: – Estilos globales por defecto – Componentes nuevos de interfaz: botones, pestañas, menús, elementos de navegación. . . – Sistema de grid responsive para definir layouts (diseños de página) de forma sencilla – Librería de iconos • Contiene una librería LESS bien diseñada, con variables y mixins • Acompañada con una librería Java. Script 19

Bootstrap: sistema de grid Class row = fila <div class="row"> <div class="col-lg-8">8</div> <div class="col-lg-4">4</div> <div class="row"> <div class="col-lg-4">4</div> <div class="row"> <div class="col-lg-6">6</div> <div class="row"> <div class="col-lg-1">1</div> (. . . ) <div class="col-lg-1">1</div> Crea espaciado por defecto 20 Columnas deben sumar 12 (calcula % para ancho) Dentro de una columna puede haber una nueva fila con otras 12 columnas Es responsive

Bootstrap: componentes Marcado HTML con class http: //twitter. github. io/bootstrap/components. html 21

Bootstrap: ¿semántico? • Todo funciona con class • Problema: NO es semántico • LESS al rescate: mixins de Bootstrap <div class="descripcion_busqueda"> <p> Búsqueda: hola </p> . descripcion_busqueda {. make-row(); p {. col; . make-column(9); <div class="btn-toolbar">. . . </div> HTML Sólo funciona bien en Bootstrap 3 Ver. actual 2. 3. 2 - versiones incompatibles https: //github. com/twitter/bootstrap/pull/6342 22 }. btn-toolbar {. col; . make-column(3); } } LESS

Bootstrap: herramientas • Muy popular, cada vez existen más herramientas sobre él • Temas: – Generador: http: //stylebootstrap. info/ – Temas gratuitos: http: //bootswatch. com/ – Temas de pago: https: //wrapbootstrap. com/ • Diseñadores: – https: //jetstrap. com/ – https: //www. easel. io/ – http: //www. divshot. com/ 23

Bootstrap: temas 24

Free. Marker • Sistema de plantillas (ftl) • http: //freemarker. sourceforge. net/docs/index. html • Tipado estático – Cadenas, números, booleanos, fechas – Secuencias: list, array. . . – Hash: map. . . objetos java (beans) • variable[clave] • variable. clave – Métodos • variable. metodo (params) • String, Date, etc. : no se puede llamar directamente a métodos 25

Free. Marker: elementos principales • Directives: son los “tags” FTL – Condicional: <#if persona. nombre == “Pepillo”>. . . </#if> – Bucle: <#lista as elemento>. . . </#list> – Subplantilla: <#include (ftl) /> • Interpolations: expresiones ${variable} – Sólo se pueden usar dentro de contenido o en cadenas – <#if a == “viva ${persona. nombre}”> – <p>Hola, ${persona. nombre}</p> 26

Free. Marker: Macros • Macros mucho más potentes que las de Velocity – Parámetros con nombre – Valores por defecto => ampliables sin tener que modificar todo – Pueden tener contenido – Se pueden crear librerías de tags con namespaces: <#import “/lib/digiweb. ftl” as dgb /> <#macro alert level="danger" closeable=true> <div class="alert-${level}"> <#if closeable> <button type="button" class="close" data-dismiss="alert">× </button> </#if> <#nested /> </div> Nested = procesar contenido <@dgb. alert level="danger"> </#macro> <p>Peligro, peligro!</p> </@dgb. alert> 27

Free. Marker: Modificación / creación variables • Variables tienen alcance (scope): – Global: el modelo que se genera desde Java – “Plain”: se pueden definir en la plantilla. Si estamos en una librería, sólo se podrán usar en su namespace – Locales: sólo se usan en una macro, y desaparecen al terminar – De bucle: se definen aposta en un loop • Tres tags distintos para asignar valores: assign (plain), global, local : <#assign var = (valor) /> • Cuando ponemos un nombre de variable, se busca en los tres alcances – Se puede acceder directamente a globales con variable especial. globals <#assign persona =. globals. persona /> 28

Free. Marker: Macros (2) • Macros son también una variable – Se pueden redefinir en una personalización – Incluso las que sean de librerías ! • Además de macros, se permite definir funciones <#function ellipsis text max. Length> <#return conversor. recortado (text, max. Length) /> </#function>. . . <#assign a = @dgb. ellipsis(cadena) /> • Mejora mucho la flexibilidad • Aumentan las posibilidades de personalización 29

Free. Marker: Errores • Es mucho más estricto que Velocity • Valores null – <#if persona. nombre == “Luis”> – Valores por defecto !: <#if (persona. nombre)!”[-]” == “Luis”> – Paréntesis importantes: error si persona null <#if persona. nombre!”[-]” == “Luis”> • Comparación o asignación distintos tipos – <#if persona. nombre == 3> • Errores se pueden desactivar en producción, pero es mejor tener cuidado 30

Free. Marker: Built-ins • Son expresiones de formateo y conversión de tipos • Se escriben todos con ? xxxx • Formateo: (persona. nombre)? upper_case (persona. num. Muertos)? c (persona. fecha. Nacimiento)? string(“dd/MM/yyyy”) • Acceso a colecciones: lista? first, lista? size, map? keys? last • has_content: Útil para comprobación “nulo o vacío” (cadena o colección): <#if nombre? has_content> • Conversión: is_string, is_number, number(str). . . 31

Estructura de directorios • src/main/webapp/ – i 18 n/. . . : ficheros para web Velocity – less: ficheros. less – fonts: fuentes – img: imágenes Web Velocity y web Freemarker no comparten ningún fichero estático – js: javascript – templates • web: plantillas Velocity • web 2: plantillas Freemarker – lib: librería 32

Uso de plantillas FTL desde el controlador • Nuevo nodo “ftl”, idéntico a “vm” <input. Mapping id=“xxx”> <ftl id=“/consulta/busqueda” /> </input. Mapping> • Convivencia FTL y VM – Digibib seguirá usando VM – Digimus puede requerir que algunas plantillas sigan siendo VM – Nodo “template”, redirige a vm o ftl según configuración – Se controla en web. xml <init-param> <param-name>templates</param-name> <param-value>ftl</param-value> </init-param> 33

Plantilla “base” vacía Librería estándar Digiweb <#import "/lib/digiweb. ftl" as dgb /> <@dgb. article title=dgb. i 18 n("Inicio")> <#escape x as x? html>. . . </#escape> </@dgb. article> Importante en todas las plantillas (incluso hijas): hace que todo lo que se escriba se escape automáticamente como HTML 34 Macro genérica “article”

Librería digiweb. ftl • Estructura de la página @dgb. article, @dgb. paginationlist. . . • Enlaces @dgb. button, @dgb. link, @dgb. form – Posibilidad arrastrar / eliminar parámetros – Posibilidad enlaces construidos automáticamente por comando: mejora SEO • Componentes de formulario @dgb. textbox, @dgb. select. . . • Elementos de bootstrap encapsulados @dgb. toolbar, @dgb. dropdownmenu, @dgb. icon. . . • Funciones de utilidad @dgb. i 18 n, @dgb. uriparam [para parámetros “destino”] 35

SEO: Estructura de URIs • Comandos no tienen por qué ser. cmd • No tienen por qué tener siempre 2 niveles (consulta/busqueda. . . ) • Librería digiweb. ftl facilita llamar a comandos sin saber cómo quedará la URI • Estructura de URI configurable con fichero uri_config. xml • Más “delicado” que antes. Afecta también a Digibib <? xml version="1. 0" encoding="ISO-8859 -1"? > <schema> <piece type="context" optional="true" /> <piece type="lang" optional="true" /> <piece type="command" match="((. *). cmd)|((. *). do)|((. *))" pref. Suffix=". do" /> </schema> 36

¿Qué se puede ver? Entorno común: algunas pantallas como la de login Digi. Mus: algunas fichas de registros Y en breve. . . ¿todo lo que hagáis vosotros? . . . 37

Web. Commons Plus: Nueva infraestructura “front” para desarrollos web FIN GRACIAS POR LA ATENCIÓN y. . . ¡¡¡SUERTE!!! Andrés Viedma Peláez 38