Notice: Undefined index: pag in /var/www/vhosts/web/version-2010/controllers/noticiasController.php on line 397
alvaroremesal.net - blog Ir a contenido
Está usando una versión antigua de su navegador. Este sitio web no está preparado para su visualización en navegadores obsoletos.
Por favor, por su seguridad, instale un navegador más actualizado y seguro.

Navegador Internet Explorer 8  Navegador Google Chrome  Navegador Mozilla Firefox
 

blog

01 sep

Notificaciones en el favicon

0 comentarios how-to , Programación , Javascript , Web

Muchas aplicaciones web usan el favicon para notificar eventos, como nuevos mensajes o nueva actividad. Uno de los ejemplos más claros es Gmail, aunque también otros como Facebook o Pinterest lo usan.

 

Hace poco encontré una clase Javascript que permite implementar esta funcionalidad en una web: Notificon. Con esta clase, el notificar al usuario, por ejemplo, que tiene un nuevo mensaje en nuestra aplicación web es coser y cantar.


Seguir leyendo


24 jul

Git para repositorios compartidos

0 comentarios how-to , Programación , Git

Una de las grandes ventajas de Git es su potencia para el trabajo en grupo. Para poder usar Git de esta forma basta con un par de comandos para configurar el repositorio de forma que permita escribir a los usuarios autorizados.

 

Lo primero es crear los usuarios autorizados para que puedan conectar por SSH (es el método de conexión que utilizo en mis repositorios, por comodidad de configuración), y añadirlos a un grupo que será el que esté autorizado para escribir en el repositorio. Yo utilizo el grupo git-user para ello.

 

Después, ya sólo nos falta configurar el repositorio para permitir el acceso compartido. Para ello basta con cambiar el contenido del repositorio al grupo autorizado, y configurar el parámetro adecuado del repositorio:

 

$ cd /var/git/mirepositorio.git
$ sudo chmod -R g+ws *
$ sudo chgrp -R git-user *
$ git repo-config core.sharedRepository group

 

El último comando configura el repositor para el uso compartido por varios usuarios pertenecientes a un mismo grupo. Este grupo es el tienen asignados los objetos del repositorio, y hay que asegurarse de que todos los archivos y objetos pueden ser escritos por ese grupo (los dos comandos anteriores).

 

También se podría haber usado el parámetro world:

 

$ git repo-config core.sharedRepository world

 

Esto haría el repositorio visible a todo el mundo, lo cual es mucho más inseguro y sólo debe usarse cuando el sistema operativo no permita que los nuevos directorios creados tengan el grupo adecuado (NetBSD por ejemplo).

 

Cuando ya tenemos un repositorio personal, y queremos dar acceso a otros usuarios, lo más probable es que los usuarios vean este error al hacer un push:

 

Insufficient permission for adding an object to repository database

 

La forma de solucionarlo es ejecutando los comandos indicados anteriormente, ya que por defecto el repositorio de Git está configurado para no ser compartido (core.sharedRepository = false).



31 may

Liberado SitemapHP

0 comentarios Programación , PHP , SEO , Web

En los proyectos web es importante asegurar un buen posicionamiento desde el principio, ya que una web mal posicionada es una web inexistente. Una de las herramientas de SEO son los sitemaps, archivos que contienen un listado de todas las páginas de un sitio, de forma que los buscadores puedan indexarlas sin tener que rastrear todos los enlaces de la web; estos archivos suelen generarse de forma automatizada según se añade nuevo contenido a la web.



He liberado la clase SitemapHP que hace exactamente eso: facilita al programador la tarea de generar sitemaps programáticamente. Puedes leer más información sobre SitemapHP, o ir directamente a descargarlo en el repositorio Github de SitemapHP.



11 abr

Adiós -9999px

0 comentarios how-to , Programación , CSS , Web , Diseño

Una técnica CSS muy extendida, casi básica, es la de reemplazar un texto por una imagen usando text-indent. Con esta técnica podemos transformar un enlace en un botón, o un aburrido título en un título con fuentes especiales o con un bonito diseño. Esto último es cada vez menos necesario ya que podemos usar fuentes propias con CSS3, pero para muchas otras situaciones el reemplazar texto por imagen sigue siendo una labor del día a día.

 

Hasta ahora usábamos la identación negativa del texto, a la vez que dábamos una imagen de fondo al elemento; así, conseguimos que se muestre la imagen pero el texto se desplaza fuera de la pantalla, siendo "invisible":

 

background: url("../images/boton.png") 0 0 no-repeat;
text-indent: -9999px;

 

Esto conlleva dos pequeños detalles, uno de rendimiento y otro de diseño:

  1. El navegador debe "dibujar entre bastidores" una caja de 9999 píxels cuadrados, o dicho más fácilmente, una caja inmensa. Esto consume memoria, y si en una misma página usamos varias veces esta técnica (varios botones, por ejemplo) el problema se multiplica.
  2. Al hacer clic en elementos con texto oculto aparecen esas horribles líneas (outlines, las "líneas de enlace") desde la izquierda de la página. Estas líneas se podrían ocultar con outline: 0; pero eso está prohibido si queremos que nuestra página sea accesible a personas con deficiencia visual.

 

La nueva solución

 

Un nuevo planteamiento para resolver esta situación, propuesto por Scott Kellum en Zeldman.com, identa el texto al mismo tamaño que la caja contenedora, pero al no hacer wrapping y esconder el overflow, el texto no aparece ni cambia el tamaño de la caja:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

 

Esta solución evita los dos problemas del clásico -9999px, siendo una solución mucho más elegante y limpia.



09 abr

La usabilidad del límite de caracteres

0 comentarios Usabilidad , Programación , Web , Diseño

En muchas webs encontramos cajas de texto con limitación de caracteres. Esto suele ser debido a limitación en el tamaño de datos que la web quiere soportar, o a limitación de espacio en pantalla. Cada desarrollador elige lo que cree más conveniente. Pero cuando esta limitación interfiere con la usabilidad del sitio web ya entramos en el ámbito del fallo, por no hablar de chapuza.

 

Esto viene a raíz de que hace un rato me he estado registrando en un nuevo servicio web de proyectos y servicios freelance, cuyo nombre mantendré en la intimidad. En el momento de introducir mi descripción, me aparece una caja de texto. Escribo una descripción que considero adecuada y... error, máximo 500 caracteres. Problemas de usabilidad:

 

  1. En ningún momento se indica que exista esta limitación, sólo aparece el mensaje de error al tratar de enviar un texto de más de 500 caracteres. Esto implica que alguien puede perder mucho tiempo redactando un texto que luego no podrá guardar.
  2. No hay un contador de caracteres, de forma que la única forma de saber si el texto ya es correcto o si aún es demasiado largo es pulsando una y otra vez el botón de Guardar y recibiendo, una y otra vez, el mensaje de error.

 

Estos dos problemas derivan en una experiencia de uso nefasta. El buen trabajo hecho en el resto del diseño del portal se va al traste cuando se trata de rellenar un apartado tan importante como es la descripción del usuario del servicio y te encuentras con esta... desfuncionalidad. Una de las reglas de oro de la usabilidad es no sorprender nunca al usuario. No se le puede pedir al usuario que rellene un texto y darle la sorpresa de que hay un límite de tamaño del que no se le ha informado previamente. Ni tampoco se puede pedir al usuario que vaya contando caracteres uno a uno.

 

Además, es un error tan fácilmente subsanable que confío en que lo arreglen cuanto antes mientras este servicio aún luzca el cansino cartel de Beta en su logo. Para arreglar este problema de usabilidad basta con poner un mensaje al mostrar la caja de texto, indicando el tamaño máximo del texto a introducir, y poner un contador de caracteres que de feedback al usuario de la longitud del texto que lleva escrito (hace más de un año que liberé maxlen, un plugin jQuery para dotar de esta funcionalidad -y más- a un textarea).



21 mar

Mejora tus FAQ con el selector target de CSS3

0 comentarios how-to , Programación , CSS , Web , Diseño

Una de las partes más aburridas de cualquier web son los contenidos de ayuda o de términos de uso. Suelen ser bloques de texto intragable, con un índice en la parte de arriba si hay suerte. No se puede hacer mucho para mejorar esto, ya que tanto la ayuda como sobre todo los términos de uso, políticas legales, etc. requieren de mucho texto.

 

Lo que sí podemos hacer es tratar de que la experiencia de usuario sea más agradable a la hora de leer estos contenidos. Y lo podemos hacer usando únicamente CSS, gracias al nuevo selector target de CSS3.


Seguir leyendo


07 sep

Fantástica extensión para HTML para tu IDE

0 comentarios Programación , Web

Los que nos dedicamos al desarrollo web tendemos a usar IDEs pero acabamos tecleando mucho código HTML. ¿No hay alguna forma de hacer más cómodo el escribir HTML y CSS? Sí, hay una forma, y es espectacular: Zen Coding.

 

Zen Coding es una extensión para los IDEs y editores de código más conocidos:  Aptana/Eclipse, Visual Studio, Netbeans, Coda, TextMate, Komodo, Notepad++, Dreamweaver, Ultraedit, BBEdit... que se basa en la expansión de expresiones para autocompletar código HTML, XML y XSL. Basta con instalar el plugin en nuestro IDE favorito y escribir la estructura que deseamos usando una sintaxis muy similar a los selectores CSS. Así, para escribir toda la estructura de un menú en HTML bastaría con escribir:

 

div#dvContainer>div#dvHeader>div.dvUser+div#dvMenu>ul#ulMenu>li.liMenuItem*4

 

Lo que, una vez expandido, da como resultado:

 

<div id="dvContainer">
    <div id="dvHeader">
        <div class="dvUser"></div>
        <div id="dvMenu">
            <ul id="ulMenu">
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
                <li class="liMenuItem"></li>
            </ul>
        </div>
    </div>
</div>

 

Cualquier desarrollador web puede escribir selectores CSS a gran velocidad, así que, ¿por qué no dejar de teclear docenas de etiquetas HTML y que ese trabajo lo haga nuestro IDE?

 

Las posibilidades de Zen Coding son inmensas, es lo suficientemente flexible como para escribir casi cualquier estructura que necesitemos:

 

div#dvContainer>div#dvHeader>(div.dvUser+div#dvMenu>ul#ulMenu>li.liMenuItem*5)+div#dvContent>form#fLogin[name=loginform method=post action]>fieldset>(label[for=login]{Usuario}+input[type=tex name=login])+(label[for=pass]{Password}+input[type=tex name=pass])+input[type=submit]

 

Y por supuesto, no sólo para HTML, ya que podemos generar cualquier estructura XML:

 

libraries>library#id$*5>address[type]+tlf[type]

 

Así que, baja el plugin para tu IDE e instálalo, y deja de teclear etiquetas eternamente; deja que tu IDE haga el trabajo sucio.

 



30 ago

Imágenes de relleno para diseños y bocetos

0 comentarios Programación , Web , Diseño

Cuando estamos haciendo un boceto de web o diseñando una nueva web pero aún no tenemos material del cliente solemos usar imágenes de stock para rellenar los huecos, lo que se llaman placeholder images. Pero hay una forma más cómoda: usar servicios de imágenes automáticas, basta con poner el src de la img apuntando a uno de estos servicios para tener imágenes aleatorias acordes a nuestro diseño. Conozco dos servicios así:

 

Lorem Pixum

 

Con un nombre que recuerda al conocido Lorem Ipsum, Lorem Pixum nos devuelve una imagen aleatoria del tamaño indicado, con la ventaja de que podemos pedir además una temática concreta. Por ejemplo:

 

src="http://lorempixum.com/400/200/sports/1/Texto de la imagen"

 

 

La sintaxis de la ULR es:

 

http://lorempixum.com/ANCHO/ALTO/CATEGORÍA/ID/TEXTO 

 

siendo todos los parámetros opcionales. En categorías, podemos elegir entre abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics y transport.

 

Placehold

 

La otra opción es más simple pero también muy útil. Placehold.it nos permite insertar una imagen plana con el tamaño escrito en ella. Si Lorem Pixum es ideal para diseño terminados a falta de material por parte del cliente, Placehold.it es perfecto para bocetos. Basta con llamar a la URL pasándole el tamaño deseado:

 

src="http://placehold.it/350x309"

 

 

La sintaxis de la URL es:

 

http://placehold.it/TAMAÑO/COLORFONDO/COLORTEXTO.TIPO&text=TEXTO

 

Siendo todos opcionales excepto el tamaño. El tamaño puede ser de la forma ANCHOXALTO o sólo ANCHO, en cuyo caso la imagen será un cuadrado. Los colores de fondo y texto van en hexadecimal, por ejemplo, 99FF99. El texto debe ponerse siempre al final de la URL y los espacios cambiarse por el símbolo '+'. El tipo puede ser .jpg, .gif o .png (por defecto es GIF) y puede ponerse detrás de cualquier otro parámetro aunque por claridad es mejor ponerlo al final. Un ejemplo más elaborado sería:

 

src="http://placehold.it/430x285/99FF99/22CC00.jpg&text=Probando+Placehold.it"

 

 

Conclusión

 

Con estos dos servicios de imágenes de relleno podemos acelerar el trabajo con bocetos y diseños de webs al no tener que andar buscando imágenes, recortando... ya que nos permiten insertar imágenes de cualquier tamaño sin salir de nuestro editor de código favorito.

 

 



Creative Commons License Esta web http://alvaroremesal.net , su contenido, texto e imágenes está licenciado bajo una Licencia Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 España.

2017 - Álvaro Remesal Royo   Avisos legales

logo-acms