Desde el 01 de Octubre de 2013 no recibimos más trabajos ni prestamos más servicios.
Clientes de Agencia Web pueden solicitar soporte a la empresa WDesign
Ver más información

Desarrollo Web

21
Ene

En SmashingMagazine, han publicado una lista de 50 herramientas para PHP, que pueden ayudarnos a hacer el desarrollo de una aplicación un poco más fácil.

Link: 50 Extremely Useful PHP Tools

Leer más ...
20
Jun

Interesante checklist creada por Andrés Nieto, en su blog. Hay varios trucos que actualmente no utilizamos pero que vale la pena chequear, como el de utilizar opacity:0.99 en todos los elementos de texto.

La lista:

  1. Siempre usa el DOCTYPE strict y valida los estandares HTML/CSS
  2. Usa siempre un sistema para resetear tus CSS
  3. Usa opacity:0.99 en elementos de texto para limpiar el renderizado de Safari
  4. Nunca redimensiones imagenes desde el CSS o HTML
  5. Revisa el renderizado de la fuente en todos los navegadores. Nunca uses Lucida.
  6. El tamaño del texto es % en el body y em para el resto
  7. Todos los divs flotantes deben llevar display:inline y overflow:hidden
  8. Los contenedores deben tener overflow:auto y activa hasLayout usando un width o un height
  9. No uses ningún estilo CSS3 extravagante
  10. No uses imagenes PNG transparentes a menos que hayas cargado el apha.

El punto 5 (no usar fuente Lucida), ya nos causó problemas en nuestro sitio hace un poco más de un año. El problema y la solución están detallados aquí.

Fuente: aNieto2k.

Leer más ...
05
Oct

Creando un newsletter en el cual algunos links debían ir hacia documentos PDF, y luego de buscar en Google un rato, descubrí que existe una forma de linkear directamente a una página dentro de un PDF.

PDF

En RDPSlides.com lo explican en detalle. La forma de usar esta característica es agregar parámetros después del nombre del documento, de esta forma:

documento.pdf#param1=valor1&param2=2& ... paramN=valorN

Algunos de los parámetros posibles son:

  • page: para indicar en que página se debe abrir el documento.
  • zoom: establece el nivel de zoom. Un valor de 100 da un zoom de 100%.
  • pagemode: elige entre bookmarks, thumbs, o none.
  • toolbar: true para mostrar la barra de herramientas y false para no mostrarla.

Existen más parámetros, pero a esos cuatro son los que les veo más utilidad en el día a día.

Sin embargo no todo es color de rosas, ya que el asunto tiene algunas limitaciones:

  • funciona sólo en Adobe Reader y otros lectores de pdf que tengan programada la funcionalidad.
  • funciona sólo con links a documentos en servidores y no a archivos locales.

Las limitaciones no son tan graves, y ya que no hace daño ocupar esta opción se puede concluir que puede mejorar mucho la experiencia del usuario ahorrándole valiosos segundos (o minutos) en su navegación.

Leer más ...
08
Jun

Quienes diseñan sitios o aplicacione web, muchas veces pasan por alto el hecho de que su lenguaje es diferente al de usuarios que no tienen mucho conocimiento de informática. Esto hace que las páginas web contengan texto incomprensible para un buen porcentaje de los usuarios.

En Usolab lanzaron la pregunta ¿Que palabras, de las que vemos a diario en la interfaz de un sitio, te parecen poco adecuadas y con que palabras las reemplazarías?

Una lista preliminar ya arroja resultados:

  • Home - Inicio
  • F.A.Q – Preguntas frecuentes
  • Radio button - Botón de opción
  • Checkbox - Casilla de verificación
  • Login - Iniciar Sesión
  • Refrescar - Actualizar
  • Mapa Web - Mapa del Sitio.

Como ellas existen muchas más. Lo importante es siempre tomar en cuenta que tipo de lenguaje ocupará el mercado objetivo al que esté dirigido el sitio web.

Leer más ...
04
May

Problema:

a pesar de crear una buena hoja de estilos css, mis textos y otros elementos no se ven igual en distintos navegadores.

Solución:

utilizar una hoja de estilos que lleve a cero los estilos por defecto del navegador.

Sucede que cada navegador tiene una "hoja de estilos" por defecto la cual establece tipos de letras, márgenes y otras propiedades a los elementos de una página, cuando el creador de la misma no ha establecido estilos personalizados. Esto provoca inconsistencias al momento de ver una página en distiintos navegadores.

Eric Meyer ha creado una hoja de estilos para solucionar este problema, a la que llamó Reset Reloaded. Este trabajo muestra lo útiles que son los blogs para crear productos de buena calidad a través de la colaboración. Meyer lanzó su primer post sobre el tema el 12 de abril y desde esa fecha ha ido recibiendo, filtrando e incorporando las sugerencias de sus lectores.

A continuación reproduzco la hoja de estilos, la que es de completa autoría de Eric Meyer.

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Esta hoja de estilos debe ir antes de todas las hojas de estilos que desarrolles para tu sitio.

Leer más ...
04
Oct

Al momento de construir un sitio web multi-idioma se presenta el problema de reconocer cuál es el idioma de nuestro usuario. Es común colocar una página de inicio donde el propio usuario seleccione un idioma. Esto agrega un clic más a la búsqueda de información por lo que no es totalmente recomendable.

Una buena solución al problema es ocupar la cabecera HTTP_ACCEPT_LANGUAGE. El navegador que ocupemos (IE, Firefox, Opera, etc.) al solicitar una página a un servidor envía varios datos, entre ellos la cabecera HTTP_ACCEPT_LANGUAGE, la que contiene el código del idioma del sistema operativo o el especificado en el propio navegador.

Utilizando PHP, podemos recoger ese valor, analizarlo y entregar al usuario la página en un idioma adecuado, sin que el tenga que hacer la selección.

Veamos una función en PHP que analiza la cabecera HTTP_ACCEPT_LANGUAGE y devuelve el código del idioma adecuado a nuestro criterio.

function detectarIdioma(){

//revisamos cabecera HTTP_ACCEPT_LANGUAGE

$idiomas = explode(";", $_SERVER['HTTP_ACCEPT_LANGUAGE']);
if(strpos($idiomas[0], "es") !== FALSE){
$idioma = "es";
}
elseif(strpos($idiomas[0], "en") !== FALSE){
$idioma = "en";
}

//Ante cualquier otro idioma devolvemos "es"
if($idioma <> "es" && $idioma <> "en"){
$idioma = "es";
}
return $idioma;
}

Utilizando esta función podemos detectar el idioma del usuario y hacer que nuestro sitio web actúe en base a esa información. Es una buena idea poner en cada página un link "Ver esta página en [otro idioma]", para de este modo cubrir los casos en los cuales la detección automática del idioma falle.

Es casi obvio pero no está de más decir que es recomendable que el idioma por defecto sea el que ocupe la mayoría de tu público objetivo.

Leer más ...
03
Ago

Se Viene XHTML 2.0

Escrito por Publicado en Desarrollo Web

XHTML 2.0 está en proceso de borrador y su implementación todavía no se ve cercana. Sin embargo, los cambios que traerá con respecto a XHTML 1 son bastante interesantes. Veamos algunos de ellos.

Mejor Estructuración de Contenidos

Definir secciones y títulos dentro de una página será fácil gracias a dos nuevos elementos: section y h. El objetivo es que la estructuración de contenidos sea explícita y que no tenga que ser inferida en base a los niveles de elementos encabezados (h1, h2, h3, etc.)

De este modo el elemento div podría reemplazado por section al momento de definir secciones en una página y así el código tendría una mejor semántica. Por ejemplo:

<h>Encabezado de nivel superior </h>
<section id="navegacion">
  <h>Encabezado de segundo nivel</h>
  <nl>....</nl>
</section>
<section id="contenido">
  <h>Encabezado de Segundo Nivel</h>
  <p>....</p>
</section>

Por su parte, cada elemento h, tendrá mayor o menor nivel dependiendo en que sección se encuentre y si la sección se encuentre anidada en una o más secciones superiores.

Listas de Navegación

En adición a las listas ordenadas (ol) y desordenadas (ul), XHMTL 2.0 agrega un tercer tipo de lista: la Lista de Navegación y su elemento de marcado es nl. Debiera funcionar igual que las otras listas con la diferencia de que su significado es que los elementos de la lista corresponden a una colección de links hacia otras áreas dentro sitio web. Debiera usarse para barras de navegación y menús.

Además de lo anterior, la lista acepta el elemento label, para ocuparlo como título y de esta forma definir el propósito de la lista.

Enlaces Extendidos

La esencia de la web es la capacidad de relacionar distintos recursos a través de enlaces (también conocidos como links o hiperenlaces). En XHTML 2.0 la capacidad de definir enlaces no estará restringida solamente al elemento a, sino que cualquier elemento podrá definir un enlace, ya que todos manejarán el atributo href.

Esto será útil en listas de navegación pues el elemento li definirá el enlaces y no será necesario poner un elemento a dentro del li. En el caso de un bloque div que contiene la entrada para una noticia, con una foto y un pequeño párrafo, no será necesario definir enlaces en la foto y el párrafo sino que se podrá hacer en el div.

Queda claro que esto tendrá consecuencias en el posicionamiento en buscadores y por lo tanto Google y competencia tendrán que modificar sus algoritmos de búsqueda. Mientras no pase eso, probablemente los desarrolladores no utilizarán esta nueva funcionaliad de XHMTL.

Más sorpresas

Además de lo visto anteriormente habrán otras sorpresas.

  • Se eliminaría el elemento img, ya que cualquier elemento podría mostrar una imagen porque todos tendría la propiedad src.
  • El elemento hr, regla horizontal, se reemplaza por el elemento separator, esto porque en algunos idiomas la escritura es vertical y hr se muestra en forma vertical, por lo tanto el nombre no era el adecuado.
  • Los párrafos (p), que actualmente sólo pueden contener texto, han sido mejorados para contener otros elementos XHMTL.

La mayor sorpresa de todas es que casi todos estos cambios funcionarán en los navegadores actuales haciendo más fácil la transición de un lenguaje a otro.

Puedes ver más información respecto de las diferencias entre XHTML 1 y XHTML 2 en la Introducción a XHTML 2 de la W3C.

Leer más ...
11
Jul

Enfrentarse a un feed RSS en estado puro es una experiencia sumanente confusa ya que el marcado XML no está pensado para ser visualizado directamente.

visualizacion de feed rss en estado puro

Feed RSS en estado puro

Por suerte, contamos con las hojas de estilo XSLT, las cuales permiten transformar cualquier documento XML en otro tipo de documeto. Lo que haremos a continuación es transformar un documento en formato RSS (un tipo de XML) a formato XHTML (otro tipo de XML).

Puedes ver un ejemplo de la aplicación de esta técnica en el Feed RSS de este blog.

Para comenzar, tu feed RSS debe tener estas líneas al comienzo:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="rss2html.xsl" type="text/xsl"?>
<rss version="2.0">

La línea en negrita es la que asocia la hoja de estilo al documento RSS. Asegúrate de que la propiedad href apunte hacia donde está ubicado el archivo xsl, que en este caso es llamado rss2html.xsl..

El siguiente paso es crear la hoja de estilo XSLT. Si no conoces nada de XSLT, te recomiendo utilizar la plantilla XSLT RSS - HMTL, que es la utilizo actualmente en este sitio.

Dentro del la hoja XSLT, encontrarás esta línea:

<link rel="stylesheet" type="text/css" href="estilos.css" />

Debes reemplazar el valor de la propiedad href con la dirección de la hoja de estilos CSS que dará formato gráfico al feed.

Y eso es todo ! Tu feed RSS, ahora será fácil de leer y ya no alejará más a los visitantes de tu sitio.

Leer más ...
04
Jul

Esta técnica permite mostrar y ocultar filas de una tabla, para poder, por ejemplo,entregar mayor información a nuestros usuarios.

A continuación se muestra una función en Javascript que muestra y oculta una fila, dependiendo del estado actual de la misma.

function cambiarDisplay(id) {
  if (!document.getElementById) return false;
  fila = document.getElementById(id);
  if (fila.style.display != "none") {
    fila.style.display = "none"; //ocultar fila
  } else {
    fila.style.display = ""; //mostrar fila
  }
}

Si la fila está visible, entonces al llamar a la función, la fila será ocultada y viceversa. Lo que hace la función es cambiar la propiedad display del elemento. Para ocultarlo, establece su valor a none y para mostrarlo establece su valor a una cadena vacía. este punto es importante porque permite a cada navegador ocupar el valor por defecto para esa propiedad (Firefox usa "table-row", Internet Explorer y Opera usan "block").

Veamos un ejemplo de su aplicación. El siguiente código muestra una tabla con 2 filas. La primera corresponde a un título y la segunda una descripción en detalle. Al hacer clic en el título, se muestra la fila de detalle.

<table>
  <tr id="row1" onClick="cambiarDisplay('row2')">
   <td><strong> Televisores de LCD, Pantalla de Cristal L&iacute;quido</strong> (Stock: 90 unidades ) </td>
  </tr>
  <tr id="row2" onClick="cambiarDisplay('row2')" style="display:none">
   <td>Los Televisores de LCD brindan la m&aacute;s alta calidad de im&aacute;gen dentro de la gama de modelos de pantallas planas, lo que los convierte en una excelente opci&oacute;n para los m&aacute;s exquisitos. </td>
  </tr>
</table>

Como se puede apreciar cada fila tiene establecido un identificador. La segunda fila está oculta por defecto a través de la propiedad style.

Para que la función trabaje correctamente el navegador debe manejar DOM. El script ha sido probado en Firefox 1.5, Internet Explorer 5.0 y superior y Opera 9. Si encuentras problemas en otros navegadores por favor hazlo saber en los comentarios.

Leer más ...
07
May

Los usuarios que se enfrentan al contenido de una página web, utilizan un movimiento en forma de F para buscar la información que requieren. Ese es el resultado del estudio realizado por Jacob Nielsen, publicado en su sitio useit.com.

El estudio se basó en el análisis del movimiento ojos de 232 usuarios enfrentados a 3 tipos de páginas comunes en un sitio web corporativo: un artículo, la descripción de un producto y un resultado de búsqueda.

Planos de Escaneo de Páginas

La imagen muestra en colores cuales son las áreas más vistas por los usuarios. El grado de atención es mayor en las áreas rojas, decreciendo en las amarillas (atención media) y azules (atención baja).

Algunas implicancias de este comportamiento para el arte del diseño web son:

  • Los usuarios no leen el texto de la página en forma exhaustiva. Más bien realizan un escaneo de la página
  • Los primeros 2 párrafos deben mostrar la información más importante, ya que existen muchas probabilidades de que estos párrafos sean leídos con más detención
  • Se deben empezar los subtítulos, párrafos y elementos de lista con palabras que llamen a la lectura del resto del elemento, ya que es más probable que los usuarios lean las 2 primeras palabras que las 3 primeras

El artículo completo lo puedes leer en F-Shaped Pattern For Reading Web Content

Leer más ...