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>

Social Bookmarking

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/

Social Bookmarking

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.

Social Bookmarking

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

Social Bookmarking

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:

Atención: IE6 no soporta este selector.

Social Bookmarking

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.

jQuery Infinite Carousel Plugin

Es un carrusel de imágenes que a diferencia de la mayoría de carruseles, no para al acabar el primer ciclo.

NyroModal – jQuery Modal Plugin

NyroModal es un plugin jQuery que permite abrir ventanas modales con imágenes, capas o páginas HTML cargadas en Ajax.

jQTouch – jQuery Plugin For Mobile Web Development

jqTouch es un plugin jQuery que permite la creación de páginas web para los navegadores del iPhone, del G1, o del Pre.

AnythingSlider jQuery Plugin

AnythingSlider es uno de los mejores plugins jQuery para construir slides en tu página simplemente añadiendo unas etiquetas ‘li’.

jQuery YouTube Playlist Plugin

YouTube Playlist Plugin es un plugin jQuery que permite crear una lista de reproducción de videos. Con solo proporcionarle un listado de videos el plugin se encarga de crear la lista y reproducir los videos.

Uploadify – Multiple File Upload Plugin For jQuery

Uplodify es el mejor plugin jQuery para la subida múltiple de imágenes que tu puedas encontrar.

Encrypting HTML Form Data With jCryption

jCryption es un plugins jQuery que permite la encriptación de las peticiones GET y POST de un form HTML.

Content Translation With jQuery Translation Plugin

Sundaymorning es un plugin de jQuery que permite ofrecer su sitio en 30 idiomas a sus visitantes de una forma sencilla y elegante.
También disponible como Bookmarklet.

Horinaja Slide Show Plugin For jQuery And Scriptaculous

Horinaja es un plugin jQuery para la creación de un slide show de imágenes. Permite de reproducir la presentación con la ruedecita del ratón.

jQuery Week Calendar Plugin

The jQuery Week Calendar es un plugin jQuery para la creación de un calendario semanal. Es muy fácil de instalar y configurar y tiene muchísimas opciones.

AD Gallery – jQuery Gallery Plugin

AD Gallery es un plugin jQuery que permite la creación de una galeria de fotos o slide show. Es muy facil de instalar y configurar y tiene la posibilidad de elegir entre varios efectos visuales como: scroling horizontal y vertical, fade, shrink/grow y wild.

jqDock – Fish Eye Menu Powered By jQuery

jqDock es un plugin jQuery que permite la creación de un “dock MAC” con efecto “fisher eye”. Transforma cualquier conjunto de imágenes o elementos en una barra de herramientas MAC o WINDOWS 7.

AnythingZoomer – jQuery Plugin to Zoom Anything

AnythingZoomer es un plugin jQuery que permite ampliar cualquier área de tu sitio web con extrema facilidad.

jMonthCalendar – Full Month Event Calendar Using jQuery

jMonthCalendar es un plugin jQuery para la creación de un completo calendario de eventos. Lo único que hay que hacer es configurarlo y el lo hará todo por ti.

Put Twitter Live on Your Website With Juitter jQuery Plugin

Juitter es un plugin jQuery que permite tener en nuestras páginas un componente que muestra todos nuestros tweets.

Jcrop – The jQuery Image Cropping Plugin

Jcrop es un plugin jQuery que permite recortar imágenes online de manera fácil y sencilla.

jQuery UI Selectmenu Plugin

jQuery UI Selectmenu Plugin añade funcionalidades
y un aspecto gráfico agradable a un select HTML. Permite añadir iconos, opciones en sub niveles etc..

FUENTE ORIGINAL EN INGLES:

http://visionwidget.com/inspiration/web/398-latest-jquery-plugins.html

Social Bookmarking

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

Social Bookmarking

¿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.

Social Bookmarking

Diseño web Inspira de AlxDesign

Diseño web Jocoo de SencerBugrahan

Diseño web EG-Layout Web 2.0 de ejsing

Diseño web Moodbase de sinthux

Diseño web Book Store de downsign

Diseño web One Three V2 de BboyWicked

Hypowired de sinthux

Diseño web Plush de AlxDesign

Diseño web My Portfolio de SencerBugrahan

Diseño web LedTek de hinok

Diseño web Art4you de ECP-Pro

Diseño web New freebiesdock.com design de kac2or

Diseño web Eyebrid de sinthux

Diseño web Greenfolio de CoronaLemon

Diseño web Echo.com de ECP-Pro

Diseño web Hydro Quebec de niponwar

Diseño web Trillium de Nas-wd

Diseño web FreeLance de SencerBugrahan

Diseño web Partly temporary de tehacesequence

Diseño web Zimo de zee7

Diseño web Milostudy de DouglasEltz

Diseño web Video de SencerBugrahan

Diseño web Info CMS de Narayanan

Diseño web Model de lluck

Diseño web grochowicz.pl de gluszczenko

Diseño web ForeSight de pcholewa

Diseño web Music Shop de pcholewa

Diseño web PlugHD de jamesmtb

Diseño web BlackNews de SencerBugrahan

Diseño web Freschwimmer de CoronaLemon

Diseño web ECO Insect de Lbr0skc

Diseño web Qarstar Design de Qarstar

Diseño web Grabzer de alighandour

Diseño web 490 -The Layout de detrans

Diseño web SuitJunky de night-m4re

Diseño web Empati Design de SencerBugrahan

Diseño web Kosetasi Web Interface de ThanRi

Diseño web Guitar de Merendil

Diseño web SimpleSolution de acidflow

Diseño web CubeProductions de vanmall

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

Diseño web 8Pixels Studio de arakros1

Diseño web Pencilpress theme de gdnz

Diseño web Miasma de Sunjo

Diseño web ATAK Interactive – Unofficial de Bugx0r

Diseño web Business theme de prkdeviant

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

Social Bookmarking

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.

Social Bookmarking