30 de noviembre de 2017

:: Sombras en CSS

En CSS3 podemos establecer sombras sobre diversos elementos por medio de "text-shadow" y "box-shadow".
Un sencillo ejemplo de su uso sería el siguiente:
< !DOCTYPE html >
< html lang="es" >
< head >
< meta charset="UTF-8" >
< title >Text Shadow y Box Shadow< /title >
< style >
body{
font-family: trebuchet ms;
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 40px;
}
h1{
color: #000;
text-shadow: 0 0 20px #dadada;
}
input{
font-size: 1em;
background-color: #fff;
border: 1px solid #dcdcdc;
border-radius: 5px;
padding: 8px;
width: 400px;
box-shadow: 0 0 20px #dedede;
}
div {
padding: 20px;
background-color: #333;
color: #ddd;
width: 300px;
font-size: 1em;
box-shadow: 0 0 20px #dcdcdc;
border-radius: 5px;
}
< /style >
< /head >
< body >
< h1 >Texto con sombra< /h1 >
< br />
< input type="text" placeholder="Introduzca un valor" />
< br />
< div >Efecto sobre una capa< /div >
< /body >
< /html >


La salida del código anterior sería algo como esto:


24 de noviembre de 2017

:: Liferay. Configurando urlrewrite

Para llevar a cabo esta tarea, Liferay utiliza una libreria de "tuckey" de forma similar al mod-rewrite de Apache. Esta librería nos permite tener un sistema de gestión de redirecciones en las fases iniciales de procesado de peticiones.

El filtro que viene configurado por defecto en el fichero: "liferay-web.xml" es el siguiente:
< filter > < filter-name >URL Rewrite Filter< /filter-name > < filter-class >com.liferay.portal.servlet.filters.urlrewrite.UrlRewriteFilter< /filter-class > < init-param > < param-name >logLevel< /param-name > < param-value >ERROR< /param-value > < /init-param > < init-param > < param-name >statusEnabled< /param-name > < param-value >false< /param-value > < /init-param > < init-param > < param-name >url-regex-ignore-pattern< /param-name > < param-value >(^/combo/)|(^/html/.+\.(css|gif|html|ico|jpg|js|png)(\?.*)?$)< /param-value > < /init-param > < /filter >
En este mismo fichero podría llevarse a cabo la siguiente modificación para evitar que se procese el filtro con cada una de las peticiones realizadas a nuestro portal.
De esta manera, para evitar que ejecute peticiones innecesarias podemos modificar la expresión regular por la siguiente:

< param-value >(^/combo/)|(^/image/)|(^/document/)|(^.*\.(css|gif|html|ico|jpg|js|png|woff|ttf|eot|bmp).*)|(^/html/.+\.(css|gif|html|ico|jpg|js|png)(\?.*)?$)< /param-value >

Más información: http://tuckey.org/urlrewrite/

17 de noviembre de 2017

:: Esquema SMS

El esquema SMS permite mostrar una pantalla para enviar un SMS desde nuestras aplicaciones web.
< a href="sms:+34 123456789?body=SMS desde la web" >Envíanos un SMS< /a >

El enlace anterior mostraría la opción de enviar un SMS con el texto: "SMS desde la web".

De todas formas, es necesario señalar que no todos los dispositivos soportan el parámetro "?body". Por ejemplo, en IOS no podemos especificar este parámetro para que el SMS aparezca con el cuerpo ya cumplimentado y tendremos que llevar a cabo esta tarea de manera manual.

12 de noviembre de 2017

:: Alfresco. Obtener los mimetypes definidos (Tip)

En Alfresco 5.2 podemos consultar los mimetypes definidos invocando la siguiente url:


http://{Alfresco}/alfresco/s/mimetypes
http://localhost:8383/alfresco/s/mimetypes?mimetype=* (Obtendremos las transformaciones disponibles)



Obtendremos un listado con los tipos definidos en nuestra instalación de Alfresco (simpre que tengamos permisos para llevar a cabo esta llamada):


De esta manera podemos obtener los detalles sobre las posibles conversiones soportadas por Alfresco.

9 de noviembre de 2017

:: Traducir textos desde Excel (Tip)

En ocasiones necesitamos llevar a cabo traducciones de un ficheros de recursos, y aunque lo normal es contratar un servicio de traducción profesional, para aquellos proyectos en los que no importe demasiado o bien se desee realizar las traducciones con Google Translate, una opción sería utilizar Excel para automatizar este proceso.



Los pasos a seguir serían:
1.- Crear una hoja excel en Google Drive
2.- En la columna A insertaremos los términos a traducir (uno por fila)
3.- En la columna B1 insertaremos la fórmula siguiente, por ejemplo para traducir del español al inglés:

=GOOGLETRANSLATE(A1;"ES";"EN");

4.- Aplicaremos esta misma fórmula al resto de celdas de la columna

De esta manera tendremos los términos traducidos de una manera rápida.

7 de noviembre de 2017

:: CSS. Reseteo de estilos

Es habitual que para resetear los estilos CSS cuando vamos a desarrollar un tema, utilizar el selector global: "*". Por ejemplo:
*{
margin:0;
padding:0;
}


Aunque es correcto, quizás podría utilizarse una opción no tan drástica:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

El objetivo de las hojas de estilo "reset" es reducir las inconsistencias del navegador correspondientes a la altura de las líneas, márgenes y tamaños de fuentes de los encabezados, y muchas otras cosas.

Los estilos anteriores son muy genéricos; por ejemplo no hay ningún color establecido para el body. Este CSS da únicamente unas pautas a seguir, pero deberíamos adaptarlo a cada caso particular, por ejemplo definiendo, colores de la página, enlaces,...

Más información: https://meyerweb.com/eric/tools/css/reset/

:: Cookies de nuestra página web. ¿Para qué sirve cada una?

A menudo una pregunta que nos hacen es qué cookies se están utilizando en mi página y para qué sirven. Para ver las cookies, podemos selecci...