Siguenos en Twitter - tuProgramador.com
Contactanos por telefono - diseño web
tuProgramador.com empresa de diseño web en valencia
blog
2 de Marzo de 2010

Un enlace canónico no es otra cosa que un tag o etiqueta de código HTML, ubicado en la cabecera de la página (<head></head>), con indicaciones sobre cuál es el URL que debe ser tomado como la versión “canónica” o principal de la página en cuestión.

Veamos un  ejemplo de como implementar este tag en Symfony y incluirlo en automatico en todas nuestra páginas sin ningun esfuerzo:

<link rel=”canonical”  href=”<?php echo url_for($sf_context->getRouting()->getCurrentInternalUri(true), true); ?>” />


Si tenemos páginas con contenido duplicado, o con direcciones parcial o totalmente diferentes, con colocar el enlace canónico le estamos dando una pista a los buscadores de que las páginas son similares y que deben ser manejadas como tales.

El URL indicado en la etiqueta HTML será el que aparecerá en los resultados de una busqueda.

Algunos detalles a tener en cuenta:

  • Solo se puede utilizar enlaces canónicos dentro de un mismo sitio web. Es válido entre directorios y sub-dominios, pero no entre sitios web diferentes.
  • El contenido de las páginas duplicadas o copias deberá ser muy similar o exactamente igual.
  • Se pueden usar enlaces relativos ( href=”/blog/category/conceptos-basicos/“) pero se recomieda utilizar enlaces absolutos.
  • Si el tag canónico es aceptado por los buscadores, todas las copias y su peso en las busquedas serán consolidados.
  • El mal uso de esta nueva opción puede ser detectado por los motores de búsqueda de la misma manera como redirecciones de tipo 301 frudulentas son identificadas. Así que mucho cuidado en no usar enlaces canónicos tratando de engañar a Google, Yahoo y demás.

Desde comienzos de Febrero buscadores como Google, Yahoo, Microsoft y Ask.com han incorporado en su serie de directivas el reconocimiento de enlaces canónicos. ¡Es prácticamente un estándar!



Publicado en Noticias | No hay comentarios »
1 de Marzo de 2010

Red.es

En este mes de Marzo, Red.es planea subir a producción una nueva versión de su sistema de gestión de nombres de
dominio o SGND. Estamos hablando de la versión 5.0 que al parecer plantea un cambio sustancial en los procedimientos
de gestión de dominios .es, lo que obligará a los agentes registradores a adecuar sus procesos y herramientas internas
y de comunicación vía WebService.

Concretamente se tiene prevista su puesta en marcha el día 13 de Marzo y tal como podemos leer en nic.es algunos de los cambios más importantes son:
- El alta y renovación de dominios podrá ser hasta un plazo de 10 años (en una versión anterior la 4.6.5 se consiguió
ampliar hasta 5 años aunque de una forma bastante confusa a nuestro parecer).
- Ya no existirán las colas de solicitudes en los nuevos registros. Por lo que la concesión de los nombres de dominios
será a todos los efectos inmediata (excepto algunas excepciones), eliminando una tarea bastante molesta en la gestión.
- La renovación de los dominios podrá efectuarse en cualquier momento, eliminando la restricción que sólo permitía tal
acción 15 días antes de la fecha de caducidad del dominio.
- El periodo de gracia se reduce a 10 días, periodo tras el cual los dominios quedarán de nuevo libres para el registro
y reduciendo así de forma importante el anterior periodo de 40 días.

Aunque sin lugar a dudas, esta nueva versión solucionará en gran medida la problemática en la gestión de nombres de
dominio que durante años atrás han ido evidenciando los agentes registradores, tampoco dudamos en que un cambio tan
importante traerá de cabeza a muchos durante algún tiempo.



Publicado en Noticias | No hay comentarios »
25 de Febrero de 2010

Hace un tiempo actualize mi Macbook a Snow Leopard, tras dicha actualizacion me encontre con un problema que me ha traido de cabeza estos ultimos dias y es que cualquier comando de Symfony en el terminal me devolvia los siguientes errores:

Warning: date(): It is not safe to rely on the system’s timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function.

y

Unable to open PDO connection [wrapped: SQLSTATE[HY000] [2002] No such file or directory]

El problema es que los comandos en el terminal del nuevo macosx se ejecutan utilizando PHP 5.3 que viene de forma nativa con dicho sistema operativo, y la solucion es la siguiente:

1º Renombramos el PHP que viene en Macosx y que se encuentra en /usr/bin ejecutando en el terminal:

sudo mv php php5.3

2º Creamos un enlace en /usr/bin al PHP que viene con MAMP (5.2.6) ejecutando en el terminal:

sudo ln -s /Applications/MAMP/bin/php5/bin/php php

Y si todo ha ido bien, problema resuelto :)



Publicado en Noticias | No hay comentarios »
25 de Febrero de 2010

HTML, “Hypertext Markup Language” o como diríamos en español: Lenguaje marcado de hipertexto llega a su versión 5 con cambios. Según comentan en el W3C y en un fenomenal artículo de IBM, HTML5 incluirá nuevos elementos por primera vez en el último milenio.

Los nuevos elementos estructurales serán: aside, figure, y section. Pero aún hay más porque se incluirán también las otras etiquetas: time, meter,progress, video, audio, details, datagrid, command… Sin duda todo un gran paso hacia la web semántica.

La adición de nuevos elementos es sin duda una noticia impactante, sobre todo después de ver como el desarrollo del lenguaje HTML lleva parado desde 1999 con el lanzamiento de HTML4. El consorcio mundial de la web hasta ahora había estado centrado en el desarrollo de SGML, XML, XForms, RSS, CSS e incluso AJAX. Como comentan en el artículo de IBM, este cambio era necesario. Seguir utilizando un lenguaje de 1999 es seguir siendo hombres de las cavernas: Nuestros navegadores ahora tienen pestañas, utilizamos RSS y conocemos XML… sin embargo seguimos haciendo básicamente lo mismo que el milenio pasado: Tablas (<table>) y Párrafos (<p>)

La chuleta de HTML5 que os dejamos, es un cheat sheet muy util desarrollada por woork para todos los diseñadores web y para los desarrolladores.

La chuleta es esencialmente una tabla con un listado de todos los tags HTML y su soporte en HTML version 4.01 o 5.

Fuente original:


Publicado en Noticias | No hay comentarios »
19 de Octubre de 2009

Son numerosas las ventajas de tener una extensión como Firebug en Firefox, al menos para los desarrolladores web.

El problema es que hay que probar en todos los demás navegadores: Opera, Internet Explorer, Safari, etc. Cada uno cuenta con extensiones o métodos de depuración propios pero tanta diversidad no ayuda.

Para resolver estos problemas, los desarrolladores de Firebug, han creado Firebug Lite.

Firebug Lite replica las herramientas más útiles de la extensión Firebug de Firefox como la consola o el inspector de XmlHttpRequest en Internet Explorer, Opera o Safari.

El resultado es soprendente y es que esta nueva versión de Firebug Lite ha revolucionado el concepto de debug de aplicaciones web. Da igual en que navegador estes desarrollando o teniendo problemas, con Firebug Lite creerás que estás en Firefox, con la confianza y seguridad que eso conlleva.

Uso e Instalación de Firebug Lite 1.2:

Para instalar esta extensión, lo único que tenemos que hacer es añadir en la cabecera de nuestras aplicaciones web, una simple linea:

    <script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
    </script>

Desde este momento podremos simplemente arrastrar nuestra página en este enlace
que previamente habremos grabado en nuestros bookmarks:
Firebug Lite Bookmarlet

Firebug se puede utilizar también en local simplemente descargando los archivos desde este enlace,
sustituyendo la ruta del css dentro del archivo "firebug-lite.js"
y por ultimo incluyendo el javascript en la cabecera.

    <script type='text/javascript'
        src='/ruta/del/javascript/firebug-lite.js'></script>


Publicado en Noticias | No hay comentarios »
16 de Octubre de 2009

Esta chuleta para CSS2 contiene todas las principales referencias para trabajar con CSS 2.

CSS2 se cimenta en CSS1 (véase [CSS1]) y, con muy pocas excepciones, todas las hojas de estilo CSS1 válidas son hojas de estilo CSS2 válidas. CSS2 brinda soporte a hojas de estilo específicas para cada medio, de modo que los autores puedan adaptar la presentación de sus documentos a los browsers visuales, a los dispositivos sonoros, a las impresoras, a los dispositivos braille, de mano, etc.

Esta especificación también soporta el posicionamiento de contenidos, fuentes descargables, disposición de la página, aspectos para la internacionalización, contadores y numeradores automáticos, y algunas características relacionadas con la interfaz del usuario.

El visual cheat sheet ofrecido por la página web woorkup.com está completo de descripciones detalladas y algunos ejemplos.

Podeis descargar la versión en PDF directamente desde aquí.

FUENTE:
http://woorkup.com/2009/10/02/css2-visual-cheat-sheet/



Publicado en Artículos, Recursos diseño web | 1 comentario »
14 de Octubre de 2009

En el portal TAW de la Fundación CTIC podemos encontrar un validador de accesibilidad web WCAG 2.0.

Esta versión del analizador de las pautas WGAG 2.0 está en versión BETA pública, sobre la que se irán implementando mejoras durante los próximos meses.

El Área de Tecnología que lo desarrolla, está abierto a las recomendaciones y propuestas de quienes deseen, en el correo info(arroba) fundacionctic (punto) org

Estas son las principales mejoras de este validador WCAG 2.0 con respecto al precedente validador:

  • Incorporación de la validación de la gramática html y css automáticamente en el análisis.
  • Incorporación de nuevas comprobaciones para las hojas de estilo.
  • Actualización del informe de resultados, para proporcionar una mayor información tanto para la detección como ayuda para la reparación de las incidencias encontradas y que esta información se presente de forma clara y precisa/concisa.
  • Nuevo motor de javascript que permite analizar no sólo el código html de la página si no también el código generado dinámicamente mediante este lenguaje.


Publicado en Artículos | 1 comentario »
13 de Octubre de 2009

En este post incluimos alguna de las ideas básicas sobre la usabilidad de una página web que todos deberíamos tener en cuenta.

Además, lo que consideramos especialmente interesante, incluimos tres tests para analizar si una determinada página cumple con nuestros objectivos de usabilidad.

Una de las frases que más representan cualquier estudio de usabilidad es “debemos construir interfaces que reduzcan el esfuerzo del usuario”.

Esta es una de las claves de una interfaz bien diseñada. Es la misma idea que plasmó muy eficazmente Steve Krug en su clásico libro “No me hagas pensar“. La propia apariencia de la interfaz sin observarla en detalle, sin detenerse demasiado para analizarla, debe transmitir el máximo de información posible.

Por ejemplo:

  • la propia apariencia y situación del menú de navegación de un sitio web debe indicar claramente que es el menú del sitio, no debería hacer falta leer sus distintas opciones para inferir que se trata de un menú.
  • debe claramente intuirse la opción activa del menú sin esfuerzo
  • debe identificarse rápido y sin dificultad cual es el logo identificador del sitio
  • qué es enlace y que no
  • cuál es el título de la página

Ejercicios interesantes para saber hasta que punto una determinada página de un sitio cumple este objetivo es la realización de alguno de los test siguientes:


Navigation Stress Test (Autor: Keith Instone)

Método:

  • Seleccionar aleatoriamente una página interna del sitio (no la página de inicio)
  • Imprimir la página en blanco y negro sin que aparezca el URL
  • Imaginando que se ha entrado al sitio por primera vez a través de esta página, se debe tratar de responder a las preguntas siguientes:
    • ¿sobre qué trata esta página?
    • ¿qué sitio es este?
    • ¿cuáles son las secciones principales del sitio?
    • ¿dentro de qué sección principal está la página?
    • ¿qué hay un nivel más arriba?
    • ¿cómo voy a la página de inicio?
    • ¿cómo voy a la página de inicio de la sección?
    • ¿qué representa cada grupo de vínculos?
    • ¿cómo llegas a esta página desde la página de inicio?
  • Marcar sobre el papel las respuestas
  • Tomar a personas que no tengan nada que ver con el sitio y repetir el test


Ensayo del maletero (autor: Steve Krug, aparece en su libro “No me hagas pensar”. A partir de la página 87).

Es similar al Navigation Stress Test pero añadiendo mayor dificultad de visibilidad.

Metodo:

  • Seleccionar aleatoriamente una página interna del sitio (no la página de inicio)
  • Imprimir la página en blanco y negro sin que aparezca el URL
  • Mantenerla a la distancia del brazo o entrecerrar los ojos de forma que no se pueda estudiar muy de cerca
  • Trazar un círculo, tan rápido como se pueda, en todos los elementos siguientes:>
  • Identificador del sitio
  • Nombre de la página
  • Secciones y subsecciones del sitio
  • Navegación local
  • Indicadores de situación
  • Búsqueda


Técnica de Thomas S. Tullis (Vicepresidente de Experiencia de Usuario de Fidelity)

Técnica similar a las anteriores pero añadiendo una nueva dificultad al usuario: los textos deben mostrarse sin significado, ilegibles o en otro idioma.

Todas estas técnicas tienen una ventaja común: se pueden realizar informalmente de formasencilla y detectar, con un coste muy bajo, problemas de usabilidad importantes en nuestras interfaces. Esperamos que os sean útiles en vuestro día a día.

FUENTE:
http://www.usolab.com/wl/2009/10/reduciendo-el-esfuerzo-del-usuario.php



Publicado en Artículos | 2 comentarios »
8 de Octubre de 2009

En este articulo vamos a explicar como distribuir horizontalmente varios elementos dentro de un contenedor utilizando CSS.

Suponemos de querer 3 elementos distribuidos horizontalmente dentro de una capa contenedora.

<div id="contenedor">
    <div class="seccion"></div>
    <div class="seccion"></div>
    <div class="seccion"></div>
</div>

Para distribuir los elementos "seccion", dentro de la capa contenedora,
se podría pensar de aplicar un  margin-left a la clase .seccion. 

En este caso pero, tendríamos el problema de la ultima capa a la derecha que no cabría
dentro del contenedor.

La solucion es utilizar el selector CSS :first-child para aplicar un estilo al primer elemento
dentro de la capa contenedora "contenedor".

Primero hay que definir un estilo a la capa contenedora:

#contenedor { width: 640px; height: 300px; }

luego hay que aplicar un estilo a la clase “seccion” de los tres elementos:

.seccion{
    float:left;
    height:300px;
    margin-left:10px;
    width:200px;
}

y entonces podremos sobrescribir el estilo del primer elemento dentro de la capa
contenedora:
#contenedor div:first-child{margin-left:0px;}

Atención: IE6 no soporta este selector.



Publicado en Artículos, Recursos diseño web | 1 comentario »
30 de Septiembre de 2009

jQuery es una libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.

La sencillez de su sintaxis y la poca extensión del código que necesitas escribir son las características más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrías que escribir mucho, si no que surgirían muchos errores si no eres un experto en JS.

Aquí teneis una colección de los mejores plugins de jquery.

FacyBox – jQuery Based Facebook/FancyBox Style Lightbox

Es un componente que permite la visualización de imágenes, divs o enteras páginas como si fuera una FancyBox o una ventana de Facebook.

FacyBox – jQuery Based Facebook/FancyBox Style Lightbox

Leer el resto de esta entrada »



Publicado en Artículos, Recursos diseño web | No hay comentarios »
« Entradas más antiguas