Siguenos en Twitter - tuProgramador.com
Contactanos por telefono - diseño web
tuProgramador.com empresa de diseño web en valencia
blog
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 »
24 de Septiembre de 2009

La página web de woork es un  recurso muy interesante y proporciona muchisimos recursos sea para diseñadores sea para programadores.

Una de sus ultimas aportaciones es una chuleta para jQuery 1.3. Esta chuleta (o Cheat Sheet ) de 6 páginas, contiene referencia a toda el API jQuery con una descripción detallada y algunos ejemplos de uso.

Podeis visualizar el PDF directamente desde Scribd pinchando aquí.

Podeis descargar el PDF completo desde este enlace.

FUENTE ORIGINAL:
http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html



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

¿Cuantas veces nos hemos encontrado con el problema de testear un envió de correos y no poder instalar un servidor SMTP?

Papercut puede ser una buena solución por lo menos para quien utiliza Windows como sistema operativo para desarrollar.

Esta pequeña aplicación no requiere instalación y proporciona en pocos minutos un servidor SMTP que no envía nada, simplemente te consiente de visualizar todo lo que ha sido enviado.

Podeis descargar Papercut desde este enlace:

DOWNLOAD PAPERCUT

Papercut necesita .NET Framework v3.5 instalado.



Publicado en Artículos | 1 comentario »
24 de Septiembre de 2009

Una colección de 50 layouts hechos por varios diseñadores de DevianArt para el diseño de tus páginas web.

Diseño web Inspira de AlxDesign

inspira-creative-web-design-layout-inspiration

Diseño web Jocoo de SencerBugrahan

jocoo-creative-web-design-layout-inspiration

Diseño web EG-Layout Web 2.0 de ejsing

eg-layout--creative-web-design-layout-inspiration

Diseño web Moodbase de sinthux

moodbase-creative-web-design-layout-inspiration

Diseño web Book Store de downsign

book-store-creative-web-design-layout-inspiration

Diseño web One Three V2 de BboyWicked

one-three-creative-web-design-layout-inspiration

Hypowired de sinthux

hypowired-creative-web-design-layout-inspiration

Diseño web Plush de AlxDesign

plush-creative-web-design-layout-inspiration

Diseño web My Portfolio de SencerBugrahan

my-portfolio-creative-web-design-layout-inspiration

Diseño web LedTek de hinokledtek-creative-web-design-layout-inspiration

Diseño web Art4you de ECP-Pro

art4you-creative-web-design-layout-inspiration

Diseño web New freebiesdock.com design de kac2or

freebies-dock-creative-web-design-layout-inspiration

Diseño web Eyebrid de sinthux

eyebrid-creative-web-design-layout-inspiration

Diseño web Greenfolio de CoronaLemon

greenfolio-creative-web-design-layout-inspiration

Diseño web Echo.com de ECP-Pro

echo-com-creative-web-design-layout-inspiration

Diseño web Hydro Quebec de niponwar

hydro-quebec-creative-web-design-layout-inspiration

Diseño web Trillium de Nas-wd

trillium-creative-web-design-layout-inspiration

Diseño web FreeLance de SencerBugrahan

free-lance-creative-web-design-layout-inspiration

Diseño web Partly temporary de tehacesequence

partly-temporary-creative-web-design-layout-inspiration

Diseño web Zimo de zee7

zimo-creative-web-design-layout-inspiration

Diseño web Milostudy de DouglasEltz

milo-study-creative-web-design-layout-inspiration

Diseño web Video de SencerBugrahan

video-creative-web-design-layout-inspiration-1

Diseño web Info CMS de Narayanan

infocms-creative-web-design-layout-inspiration

Diseño web Model de lluck

model-creative-web-design-layout-inspiration

Diseño web grochowicz.pl de gluszczenko

grohowicz-creative-web-design-layout-inspiration

Diseño web ForeSight de pcholewa

foresight-creative-web-design-layout-inspiration

Diseño web Music Shop de pcholewa

music-shop-creative-web-design-layout-inspiration

Diseño web PlugHD de jamesmtb

plug-hd-creative-web-design-layout-inspiration

Diseño web BlackNews de SencerBugrahan

black-news-creative-web-design-layout-inspiration

Diseño web Freschwimmer de CoronaLemon

freschwimmer-creative-web-design-layout-inspiration

Diseño web ECO Insect de Lbr0skc

eco-insect-creative-web-design-layout-inspiration

Diseño web Qarstar Design de Qarstar

qarstar-creative-web-design-layout-inspiration

Diseño web Grabzer de alighandour

grabzer-creative-web-design-layout-inspiration

Diseño web 490 -The Layout de detrans

490-creative-web-design-layout-inspiration

Diseño web SuitJunky de night-m4re

suit-junky-creative-web-design-layout-inspiration

Diseño web Empati Design de SencerBugrahan

empati-creative-web-design-layout-inspiration

Diseño web Kosetasi Web Interface de ThanRi

kosetasi-creative-web-design-layout-inspiration

Diseño web Guitar de Merendil

guitar-creative-web-design-layout-inspiration

Diseño web SimpleSolution de acidflow

simple-solution-creative-web-design-layout-inspiration

Diseño web CubeProductions de vanmall

cube-productions-creative-web-design-layout-inspiration

Diseño web Photo-Folio de S-a-t-i-n-e

photo-folio-creative-web-design-layout-inspiration

Diseño web 8Pixels Studio de arakros1

8pixels-creative-web-design-layout-inspiration

Diseño web Pencilpress theme de gdnz

pencil-press-creative-web-design-layout-inspiration

Diseño web Miasma de Sunjo

miasma-creative-web-design-layout-inspiration

Diseño web ATAK Interactive – Unofficial de Bugx0r

atak-creative-web-design-layout-inspiration

Diseño web Business theme de prkdeviant

business-creative-web-design-layout-inspiration

FUENTE: http://www.1stwebdesigner.com/inspiration/46-outstanding-web-layouts-from-deviantart-september-2009/



Publicado en Recursos diseño web | 1 comentario »
17 de Septiembre de 2009

Os proponemos hoy diversos fondos de pantalla para Twitter (y para otros sistemas de microblogging con ligeras adaptaciones).

Los podeis ver directamente desde aquí:

http://www.wishafriend.com/twitter/backgrounds/custom/

Twitter es una nueva herramienta de comunicación resultante de conjugar los conceptos de blog, red social y mensajería instantánea. Se trata de un servicio gratuito concebido para explicar en internet qué estás haciendo en cada momento mediante mensajes de texto de una longitud máxima de 140 caracteres, lo cual ha dado pie al concepto de nanoblogging.

Twitter se ha convertido en una de las herramientas más populares de Internet, con cerca de 45 millones de usuarios en todo el mundo. Su éxito ha derivado en un sinfín de aplicaciones, muchas de ellas en el ámbito empresarial.

La principal característica de Twitter es su simplicidad. Escribir frases de no más de 140 caracteres está al alcance de cualquiera y más aún si su particular informalidad permite el uso de todo de abreviaturas, al igual que sucede en el mundo de los SMS. La web también es tremendamente sencilla, pues tan sólo tiene una caja de texto en la que escribir. No hay que acostumbrarse a un interfaz mucho más complejo, como sí sucede en redes sociales más sofisticadas.

Uno de los principales objetivos del uso de twitter por parte de las empresas es dar una voz humana e informal a una entidad que normalmente tiene una imagen un tanto artificial. De esta forma, se da credibilidad a los mensajes corporativos y se les da mayor visibilidad. Esto se traduce a la larga en mayor fidelidad de los consumidores y atracción de talento. En el caso de un profesional que tuitea sobre su trabajo, la principal contrapartida que obtendrá es que se convertirá en la referencia en esa temática.

Aprovechamos la ocasión para informaros de que hemos añadido un simpatico enlace de “siguenos en twitter” en la cabecera y que estais todos invitados a pincharlo para poder estar en contacto con nosotros y enteraros de todo lo que pasa en las oficinas de tuprogramador.com.



Publicado en Noticias | 1 comentario »