CANAL VIDEOS DE DRUPAL 8

Diferencias entre Drupal 7 y 8, entre otras cosas…

Drupal 8 lleva algún tiempo con nosotros pero aún así, existen bastantes conceptos que todavía no están claros, sobre todo en cuanto a las diferencias entre versiones, pues como ya sabreis, han cambiado bastantes cosas.
He encontrado un canal con vídeos que conforman un curso de Drupal 8. Actualmente están orientados a gente que no sabe o no conoce aún Drupal en su versión 8. Ignoro si su autor, Manolo Latorre, tiene pensado regalarnos más conocimiento sobre Drupal 8 y en concreto, sobre cómo desarrollar para este framework. Y si, digo framework, no CMS, ya que pienso que clasificándolo solamente como tal, nos quedamos cortos. En esto disiento con Manolo en este punto.
Para aquellos que ya conocéis algo sobre Drupal, incrusto aquí directamente, uno de los vídeos, donde nos habla de las diferencias entre Drupal 7 y 8:

5.Versiones de Drupal. Cambios de Drupal 7 a 8 por manolo-latorre
Nada más. Un cordial saludo y hasta otra.

¿COBRARÁ ORACLE POR JAVA?

Logotipo de JavaEstoy suscrito a diferentes blogs y similares que me ayudan a mantenerme al día en este mundo tan cambiante del software libre y desarrollo en general.
Entre estas suscripciones, la de DZONE me parece una de las mejores y, ayer mismo, recibí un artículo que me dejó a primeras “flipando”: la posibilidad de que Oracle cobrara por el uso de Java… Sobre todo, cuando el autor de tal artículo es John Vester. Lo primero que pensé: “¿se han vuelto locos?”. Otros calificativos, es posible pero locos y tontos, hasta la fecha al menos, no son en Oracle.
No podía dejar de compartir un artículo como ese. Un cordial saludo y hasta otra.

LIFERAY 6.2: INTRODUCCIÓN A LA HERRAMIENTA. WEBINAR GRATIS.

EN BREVE

Estoy editando la grabación del webinar para hacerlo más orientativo aún y ponerlo a disposición
de todos.


¡¡ Atentos a los próximos días !!

Logo LiferaySi no conoces Liferay, te ofrezco una oportunidad para conocer esta herramienta que cada día cuenta con mayor expansión y ofrece jugosas oportunidades laborales.

El webinar es totalmente gratuito y se desarrollará mediante la herramienta Webex, en la cual tendremos que crearnos una cuenta, igualmente gratuita. De todas formas, las personas interesadas recibirán una invitación que simplificará el proceso, siempre, sin coste para el invitado.

ATENCIÓN:

PLAZAS LIMITADAS: quedan 6 plazas libres.
FECHA: 12 de diciembre de 2016
HORA DE COMIENZO: 17:00 (Horario de España). 1 hora de duración.
PUNTOS A TRATAR:
– ¿Qué es Liferay?
– Obtener e instalar la herramienta.
– Conocimiento básico de la interfaz.
– Creación de un sitio web básico.
– Comentarios finales.
¿Cómo obtener una invitación? Escribe un mensaje en el formulario de contacto detallando las razones por las que te gustaría conocer esta herramienta y tus conocimientos actuales en el mundo de la web.
Las solicitudes se atienden por orden de llegada. Se tendrán en cuenta tus conocimientos actuales, por lo que si tienes un curriculum online y una manera de demostrar estos conocimientos, mucho mejor.
PLAZAS CERRADAS.

Y eso es todo. Hasta el lunes 12, ¡¡recibe un cordial saludo!!

PROGRAMACIÓN. EL PLUGIN EMMET

Hoy quiero escribir sobre una herramienta que, aunque los desarrolladores web la encontrarán útil en general, serán los maquetadores en particular los que la encontrarán especialmente útil y, de hecho, es probable que ya la conozcan. Cualquier freelance que realice proyectos pequeños donde lo mismo se realiza el “backend” como el “frontend”, le sacará mucho partido.
Los usuarios del editor de código, Sublime Text, seguramente son viejos conocidos de este plugin. Personalmente, el hecho de que Sublime sea una herramienta de pago, lo deja fuera de mi elección en principio, puesto que prefiero el software libre y hay muy buenas alternativas. En lo particular uso Eclipse, Geany, Notepad++, CodeLobster, etc., dependiendo del proyecto.
 Logo de Emmet No es una herramienta nueva, desde luego, pero si realmente útil. Me refiero al plugin Emmet, anteriormente conocido como Zend Coding, y la buena noticia es que está disponible para diferentes entornos de trabajo y editores, tal y como puede verse en la página de Download.
Como puede verse, los usuarios de herramientas como Vim y Emacs pueden utilizarlo. Pero si como yo, utilizas Geany a menudo, la cosa se complica un poco, ya que no aparece directamente en la web de Emmet.
Tendremos que utilizar una adaptación que puede conseguirse aquí: https://github.com/sagarchalise/geanypy-emmet

Las funcionalidades que nos ofrece Emmet son:

  • Procesamiento de abreviaturas:
    Escribimos unas secuencias de caracteres que se transforman en un bloque de código HTML con solamente pulsar una tecla (Tab normalmente). Ejemplo (viene en la documentación oficial):
    + Presionamos la tecla [TAB] =
    La documentación acerca de todas las funcionalidades de Emmet es excelente, así que me limito a poner enlaces a su documentación, aún a riesgo de hacer un poco más incómoda la lectura del artículo:
    http://docs.emmet.io/abbreviations/
  • Generador “Lorem Ipsum”:
    Dentro de la funcionalidad de abreviaturas, podemos generar textos “Lorem Ipsum”.
    http://docs.emmet.io/abbreviations/lorem-ipsum/
  • Abreviaturas CSS:
    Siguiendo con abreviaturas, CSS no escapa a ellas y podemos generar (entre otros), el código CSS necesario para realizar gradientes compatibles con diferentes navegadores:
    http://docs.emmet.io/css-abbreviations/gradients/
  • Corrección de abreviaturas CSS:
    Emmet buscará por nosotros la abreviatura CSS correcta, si no hemos escrito correctamente la abreviatura, tal como se indica en:
    http://docs.emmet.io/css-abbreviations/fuzzy-search/
  • Búsqueda de par de etiquetas:
    Toda etiqueta está formada por una de apertura y otra de cierre. Si nos situamos dentro de un texto, Emmet puede buscar y seleccionar el texto donde estamos situados, más el par de etiquetas (apertura y cierre) que lo contiene:
    http://docs.emmet.io/actions/match-pair/
  • Búsqueda de la etiqueta complementaria:
    Funcionalidad que complementa a la anterior. Si nos situamos en una etiqueta de apertura o cierre, Emmet buscará su contraparte:
    http://docs.emmet.io/actions/go-to-pair/
  • Anidamiento de código:
    Podemos situarnos en un código ya creado y lo podemos meter dentro del código resultante de la expansión de una abreviatura:
    http://docs.emmet.io/actions/wrap-with-abbreviation/
  • Desplazamiento rápido del punto de edición:
    Podemos desplazarnos rápidamente por diferentes bloques de código (HTML o no).
    http://docs.emmet.io/actions/go-to-edit-point/
  • Selección de elemento:
    Similar al anterior, pero seleccionando el elemento al que se desplaza.
    http://docs.emmet.io/actions/select-item/
  • Cambiar a comentario y viceversa:
    Es una funcionalidad que traen por defecto muchos editores. Emmet analiza el elemento dónde se encuentra el cursor (no hace falta seleccionar código) e intuye el tipo de comentario que debe insertarse.
    http://docs.emmet.io/actions/toggle-comment/
  • Unir y partir etiquetas:
    Modifica una etiqueta haciendo que aparezca su etiqueta de cierre o tratándola como un elemento vacío.
    http://docs.emmet.io/actions/split-join-tag/
  • Borrar etiqueta:
    Permite borrar una etiqueta que tiene un bloque de código anidado, sin borrar ese bloque de código anidado.
    http://docs.emmet.io/actions/remove-tag/
  • Fundir línea de código:
    Aunque es una funcionalidad que tienen diversos editores, Emmet permite eliminar los saltos de línea sin necesidad de seleccionar, solamente por el contexto.
    http://docs.emmet.io/actions/merge-lines/
  • Tamaño de una imagen:
    Según el contexto, añade el ancho y alto a una imagen.
    http://docs.emmet.io/actions/update-image-size/
  • Evalúa expresiones matemáticas:
    Emmet es capaz de evaluar expresiones matemáticas.
    http://docs.emmet.io/actions/evaluate-math/
  • Incrementa y decrementa números:
    Muy útil cuando trabajamos con propiedades CSS con valores numéricos.
    http://docs.emmet.io/actions/inc-dec-number/
  • Propagación de cambios:
    Para proveer compatibilidad entre navegadores, muchas veces se recurre a utilizar varias propiedades CSS, con distinta sintaxis, pero que realizan lo mismo. Si cambiamos el valor de una, Emmet cambiará el valor de todas las relacionadas, según el contexto.
    http://docs.emmet.io/actions/reflect-css-value/
  • Codificación y decodificación de imágenes:
    Codifica o decodifica una imagen en base64. En mi opinión, una excelente funcionalidad que evita usar alguna herramienta externa.
    http://docs.emmet.io/actions/base64/

Existen algunas más, como la creación de plantillas, mediante las cuáles podemos usar una abreviatura para generar todo un documento HTML. Pueden verse en la citada documentación.

Como las funcionalidades son muchas, la sintaxis de las abreviaturas amplia y las combinaciones de teclas numerosas, Emmet aporta una
“chuleta” o referencia en un documento PDF.

Emmet es personalizable

Las teclas y combinaciones de éstas que ejecutan las acciones que describen las anteriores funcionalidades son totalmente personalizables. Sirva de ejemplo: me encontré que al instalar el plugin Emmet en Eclipse, al escribir los corchetes [], se ejecutaba una acción de desplazamiento y no se escribían los corchetes. Personalicé estas acciones y asunto arreglado.

La personalización de las combinaciones de teclas, dependerá del editor al que añadimos el plugin, pero podemos hacerlo de dos formas: o bien el plugin provee una interfaz para el editor (como mi caso con Eclipse), o bien modificamos directamente unos ficheros JSON como se describe aquí:
http://docs.emmet.io/customization/

El único “pero” que le veo, es que para sacarle todo el jugo, hay que usarlo frecuentemente para que todas esas abreviaturas, acciones, etc., se nos queden grabadas de tal forma que las usemos de forma inconsciente, aparte de preparar plantillas y personalizar lo que no nos guste.

Recomiendo su uso por el aumento significativo de productividad que supone. Nada más, un cordial saludo y hasta la próxima.Logo de Emmet

JOOMLA 3.x. LÍMITE DE PALABRAS INTRODUCIDAS EN EL EDITOR

Anteriormente, ya me había encontrado con la problemática de limitar el número de caracteres o palabras que pueden escribirse en un campo de tipo editor en Joomla:
Campo editor de JoomlaEs el campo que aparece cuando queremos crear un artículo nuevo por ejemplo, tal como se ve en la imagen de la izquierda.
Este tipo de campo muestra un editor WYSIWYG donde puede crearse el contenido correspondiente; tal como hemos mencionado, un artículo por ejemplo.
No son pocos los usuarios a los que les gustaría establecer un límite en la cantidad de información que se introduce. Puede ser muy útil conocer ese dato y tenerlo en cuenta por si ese contenido ha de mostrarse en un dispositivo móvil, queremos que sea de una determinada extensión por motivos de atención del usuario, etc. Los requerimientos pueden ser muchos. El usuario manda.
Necesitamos entonces limitar el número de caracteres. Sin embargo aquí surge el primer escollo. Estamos trabajando con un editor WYSIWYG que “internamente” tiene elementos HTML que, implicando un cierto número de caracteres, visualmente es posible que solamente resulten en un salto de línea, como puede ocurrir con el elemento <BR />.
Es preferible por tanto, no limitar el número de caracteres, sino más bien, el número de palabras introducidas en el editor.
En el momento en que se publica este artículo, la última versión estable de Joomla es la 3.3.6 y su editor WYSYWIG para campos de tipo editor por defecto, es TinyMCE versión 4.1.2. Esta versión también dispone de un plugin que permite mostrar cuántas palabras llevamos introducidas y que podemos ver en funcionamiento, si configuramos TinyMCE para que opere en modo extendido. Lógicamente podemos cambiar el editor WYSIWYG por defecto, pero nos centraremos en el que viene en Joomla tal cual, sin aditivos y de paso, nos sirve para saber como cambiarlo en cualquiera de nuestras aplicaciones que usen TinyMCE como editor HTML.

Estableciendo un límite de palabras para TinyMCE

Lo primero que tenemos que hacer es localizar el sitio donde realizar nuestros cambios. El fichero que necesitamos se encuentra en:
$SU_CARPETA_JOOMLA/plugins/editors/tinymce/tinymce.php
En la línea 575 del fichero aparece una instrucción switch que controla las opciones con que se inicializará el editor, dependiendo del modo en que esté configurado en Joomla:
Joomla. Código inicializador de TinyMCE
Si queremos que el límite de palabras introducidas en el editor, se procese en todos los modos, tendremos que hacer las modificaciones en todos ellos. En este artículo, estableceremos el límite en el modo extendido solamente (línea 655), ya que suele ser el más usado.
El cambio, básicamente consiste en añadir el parámetro setup al método init:

Una vez guardados los cambios y recargada la página, cada vez que queramos añadir más palabras de las indicadas en la constante LIMITE_PALABRAS, aparecerá un alert indicándonos que hemos sobrepasado el límite y evitando que introduzcamos más información. Por supuesto, dependiendo de versiones, puede cambiar. Nada más, espero que lo encontréis útil.
Un cordial saludo y hasta otra.

LIFERAY. PROPIEDADES DE PORTAL.PROPERTIES MODIFICADAS QUE AFECTAN A FREEMARKER Y VELOCITY

Hay propiedades en el fichero portal.properties que afectan al procesamiento de plantillas realizadas en Freemarker o Velocity y aquí, aparece uno de los problemas comúnmente asociados al software libre: una nueva versión de la herramienta, puede implicar cambios que afectan a código desarrollado para versiones anteriores.
Es precisamente lo que ha ocurrido con las clases y variables restringidas en Freemarker y Velocity a partir de la versión 6.2 de Liferay. En versiones anteriores nos encontrábamos con:
// Entre otras propiedades…

Sin embargo, si nos bajamos el código fuente de Liferay
Selección de Bundle Liferay
Atención: Datos actualizados a 09/01/2017.
En la actualidad, la zona de descarga de Liferay ha cambiado bastante y se ha orientado totalmente hacia la última versión de Liferay en este momento: Liferay 7. Para cualquier descarga de versiones anteriores o de recursos relacionados a esas versiones: Descargas de Liferay.
…, abrimos el fichero /portal-impl/src/portal.properties con un buen editor y buscamos la palabra Velocity o Freemarker, nos daremos cuenta que ya no existen. Lo que ahora tenemos a nuestra disposición es (se indican las propiedades con los valores que vienen por defecto):
Atención: Datos actualizados a 21/12/2015.

Por tanto, si queremos acceder a esas variables y clases desde nuestras plantillas Freemarker o Velocity, el clásico fichero portal-ext.properties que sobrescribe a portal.properties contendrá algo como:

Parece ser que la razón del cambio es hacer más genéricas estas clases y variables que pueden ser usadas en diferentes contextos.
En cualquier caso, acceder a esas variables y clases en plantillas, implica generalmente que vamos a usar lógica en ellas, lo cual no es recomendable, como tampoco es recomendable el uso de serviceLocator en plantillas, recomendándose mejor usar el método getClass().forName(‘…’). Sobre esto tengo pensado realizar un artículo, así que lo veremos con más profundidad más adelante.
Nada más, un cordial saludo y hasta otra.

HTML 5. REQUIRED SELECT.

HTML5 Logotipo

HTML 5 ha traído bastantes funcionalidades a los desarrolladores de aplicaciones web que antes era necesario “fabricar”; bastantes de ellas dentro de los llamados Formularios HTML 5 y en concreto aquellas que tienen que ver con validaciones de los campos de formularios, como la frecuente tarea de comprobar si se han rellenado o no, los campos que establezcamos como obligatorios.

Una tarea, simple en su cometido, pero que requería un uso intensivo de JavaScript y CSS. Con HTML 5 solamente tenemos que añadir el atributo required al campo del formulario que consideremos obligatorio completar.
A partir de ahí, será el propio navegador el encargado de controlar si ese campo requerido tiene información adecuada o no, interactuando con el visitante de acuerdo a la implementación que de HTML 5 tenga el navegador que se esté usando. Es el punto donde entra en juego la compatibilidad del navegador con el estándar HTML 5. Hay un muy buen artículo sobre compatibilidades aquí: http://www.wufoo.com.mx/html5/
Puesto que con las nuevas versiones de navegadores esto puede cambiar, la información del artículo al que apunta el enlace, solamente debe servir como guía. En cualquier caso, si queremos cambiar el comportamiento que ofrece el navegador para required, tendremos que utilizar nuevamente CSS y JavaScript. También podemos usar el atributo aria-required (se puede utilizar de manera conjunta a required) que hace lo mismo que éste pero es compatible con algunos navegadores que no lo son con este atributo.
EDITADO 16/12/2016
Actualmente los atributos aria no se consideran necesarios ya que la práctica totalidad de navegadores son compatibles con la mayoría de características de HTML 5 y realmente no aportan nada. En el siguiente hiperenlace se trata este punto de forma exhaustiva:
http://html5doctor.com/on-html-belts-and-aria-braces/

Un usuario anónimo me comentó que la misión de aria-required no es la compatibilidad si no para indicar que un campo es requerido desde un lector de pantalla. Sin entrar en debates baldíos de lo que realmente hace aria-required, es verdad que quizás su uso en este artículo, debería haber sido más detallado para evitar confusiones. Gracias quien seas. La idea de incluirlo aquí, era que, en las fechas en que se publicó el artículo, habían clientes web que no reconocían correctamente el atributo required y aria-required podía ser usado como factor de ampliación de compatibilidad, independientemente de lo que pueda ser su uso real. De todas formas: https://www.w3.org/TR/html-aria/
El uso con cualquier elemento de tipo input, textarea o select es muy simple, ya que simplemente basta con añadirlo al elemento obligatorio. De todas formas, si hay problemas de compatibilidades con navegadores, estas son las posibilidades:

Con todo, su utilización en un elemento select, actualmente implica tener en cuenta algunos detalles más que su mera inclusión. Estos factores son:

  • Debe tener uno o más opciones (elementos option).
  • La primera opción o elemento option debe tener su atributo value vacío o simplemente no tener contenido de texto.
Ejemplos:

A la hora de crear las vistas para nuestras aplicaciones o nuestras herramientas como Liferay, Joomla, Prestashop, etc., no cabe duda de que es un arma excelente que nos ahorrará mucho trabajo, eso, sin tener en cuenta que estaremos ahorrando código CSS y JavaScript, lo que hará que aumente el rendimiento de la aplicación.
Lo dejamos aquí de momento, ya que este artículo tenía como misión mostrar el uso correcto de required con select. La creación de formularios HTML 5 podéis estudiarla con todo detalle, bien en la abundante documentación existente en la web, bien, realizando algún curso como los que podemos ofrecerte. Si quieres más información, puedes hacerlo a josema@orbispservices.com o más cómodamente desde el formulario de contacto.
Un cordial saludo y mis mejores deseos para todos para este nuevo año.