Gilberto Ramos

Mi trabajo de la universidad. Espero sirva de guía para quienes están empezando.

Antes de haber aprendido mucho de desarrollo front-end aprendí lenguajes del lado servidor (por ejemplo, PHP) por lo que al empezar a desarrollar seriamente con JavaScript familiarizarme con la sintaxis fue relativamente sencillo. Para entonces obviamente utilizaba muy normalmente las funciones. Si con PHP podía hacer lo siguiente:

function foo($bar = 0){ // si no se especifica un valor, $bar toma 0

}

En JavaScript al principio no me figuraba como poner un valor por defecto pero la solución resulta ser bastante simple:

function foo(bar){
    var bar = bar || 0;
}

¿Y con múltiples parámetros?

Ok, si determinamos cómo podemos establecer un valor por defecto, vamos a ver cómo lo hacemos si tenemos más parámetros.

Solución clásica sería la siguiente:

function foo(a, b, c, d, e, f, g, h){

}

Funciona, está bien, todos están contentos. Pero… pronto olvidaríamos que representa cada parámetro y en el orden en particular, por lo que el uso de una función después de unos días puede ser bastante problemático.

Si utilizamos jQuery (¿quién no?), podríamos valernos del jQuery.extend(). En lugar de enviar una serie loca de argumentos, un objeto sería mucho más atractivo…

var params = {
	moneda:	'guaranies',
	precio: 200
};
foo(params);

function foo(params) {
	var o = { // o de opciones
		moneda:	'USD',
		precio: 0,
		param_x_defecto: 'bar'
	}
	$.extend(o, params);

	console.dir(o);

}

Ahora no importa en qué orden van específicamente los argumentos. Simple ah!?

Y comentá ¿cuál es la técnica que utilizás actualmente?

¿Quieres que Apache envíe automáticamente a los usuarios de Internet Explorer 6 a un sitio alternativo o de actualización? Escribe esto en el archivo .htaccess:

< IfModule mod_rewrite.c>
    RewriteEngine On
 
    # Enviar paquetes de IE5 y 6
    RewriteCond %{HTTP_USER_AGENT} MSIE\ ([56])\.
    RewriteRule ^(.*)$ /ie6/ [R=302,L]
< /IfModule>

Con /ie6/ siendo una carpeta en la raíz de tu servidor web. Ten en cuenta que tendrás que tener la extensión de Apache mod_rewrite habilitado para que esto funcione.

Esta es la primera serie que escribo. Aprender CodeIgniter desde cero! 

La intención es que podamos aprender este framework PHP y sacar el máximo provecho de esta herramienta que se ha popularizado bastante y la verdad que no en balde ya que ofrece muchísimas características muy interesantes. Espero cubrir de manera práctica temas útiles que a su vez nos den una mano en la didáctica.

También a medida que vamos avanzando voy a estar muy agradecido con los comentarios que puedan aportar aquellos que ya conocen el framework!

¿Qué es CodeIgniter?

CodeIgniter es un Framework de Desarrollo de Aplicaciones - una caja de herramientas - para personas que construyen sitios con PHP. Su objetivo es permitirte desarrollar proyectos mucho más rápido de lo que podrías si estuvieras escribiendo código desde cero, ofreciendo un amplio conjunto de bibliotecas para tareas necesarias, así como una interfaz sencilla y una estructura lógica para acceder a estas colecciones. CodeIgniter te permite de manera creativa centrarse en el proyecto, minimizando la cantidad de código necesario para una tarea determinada.

¿Para quienes es CodeIgniter?

CodeIgniter es para vos si:

• Querés un framework con una pequeña huella.
• Necesitas un rendimiento excepcional.
• Necesitas una amplia compatibilidad con el estándar de cuentas de alojamiento que ejecutan una variedad de versiones de PHP y configuraciones.
• Querés un framework que requiere casi cero configuración.
• Querés un framework que no requieren el uso de la línea de comandos.
• Querés un framework que no requiere que se adhieran a las normas restrictivas de codificación.
• No estás interesado en las bibliotecas monolíticas a gran escala como PEAR.
• No querés verte obligado a aprender un lenguaje de plantillas (aunque un analizador plantilla está opcionalmente disponible si deseas uno).
• Evitar la complejidad, favoreciendo las soluciones simples.
• Necesitas una documentación clara, completa.

Cuadro de flujo de trabajo

El siguiente gráfico muestra cómo fluyen los datos en todo el sistema:

• El index.php sirve como controlador frontal, inicializando la base de los recursos necesarios para ejecutar CodeIgniter.
• El enrutador examina la petición HTTP para determinar qué se debe hacer con ella.
• Si existe un archivo en caché, se envía directamente al navegador, sin pasar por la ejecución normal del sistema.
• Seguridad. Antes de que el controlador de aplicación se cargue, la petición HTTP y cualquier dato de usuario enviado se filtran para la seguridad.
• El controlador de carga del modelo, las librerías, ayudantes (helpers), y todos los demás recursos necesarios para procesar la solicitud.
• La vista una vez completada es renderizada luego se envía al navegador web para ser visto. Si el almacenamiento en caché está habilitado, la vista se almacena en caché primero de modo que en las solicitudes posteriores puedan ser servidas.

Modelo-Vista-Controlador

CodeIgniter está basado en el patrón de desarrollo Modelo-Vista-Controlador. MVC es un enfoque de software que separa la lógica de aplicación de la presentación. En la práctica, permite que las páginas Web contengan mínimas secuencias de comandos ya que la presentación está separada de los scripts PHP.

• El modelo representa las estructuras de datos. Normalmente las clases modelo contienen funciones que le ayudan a recuperar, insertar y actualizar la información en la base de datos.
• La vista es la información que es se presenta a un usuario. Una vista normalmente será una página web, pero en CodeIgniter, una vista también puede ser un fragmento de la página como un encabezado o un pie de página. También puede ser una página de RSS, o cualquier otro tipo de “página”.
• El controlador actúa como un intermediario entre el modelo, la vista, y todos los demás recursos necesarios para procesar la petición HTTP y generar una página web.

CodeIgniter tiene un enfoque bastante flojo para MVC ya que los modelos no son necesarios. Si vos no necesitás la separación añadida, o encontrás que el mantenimiento de los modelos requiere una mayor complejidad de la que quisieras, podés ignorarlos y construir tu aplicación mínimamente con los controladores y vistas. CodeIgniter también te permite incorporar tus propias secuencias de comandos existentes, o incluso desarrollar bibliotecas del núcleo para el sistema, lo que te permite trabajar de una manera que tiene más sentido.

Diseño y Objetivos de Arquitectura

La meta de CodeIgniter es obtener el máximo rendimiento, capacidad y flexibilidad en el paquete más pequeño y ligero que, sea posible.

Desde un punto de vista técnico y arquitectónico, CodeIgniter es creado con los siguientes objetivos:

• Instanciación dinámica. En CodeIgniter, de componentes se cargan y ejecutan rutinas sólo cuando se le solicita, en lugar de globalmente. No se hacen suposiciones por el sistema respecto a lo que puede ser necesario más allá de los recursos básicos mínimos, por lo que el sistema es muy ligero de peso de forma predeterminada. Los eventos, siendo disparados por la petición HTTP, y los controladores y vistas que diseñes determinará lo que se invoca.
• Acoplamiento flexible. El acoplamiento es el grado en que de componentes de un sistema dependen uno del otro. A la menor dependencia de componentes uno del otro más reutilizable y flexible se vuelve el sistema. El objetivo es un sistema de acoplamiento flexible.
• Singularidad de componentes. Singularidad es el grado en que de componentes tienen un propósito muy específico. En CodeIgniter, cada clase y sus funciones son muy autónomos a fin de permitir la máxima utilidad.

Requerimientos del servidor

PHP versión 5.1.6 o superior.

Una base de datos es requerida para la mayoría de las aplicaciones web. Actualmente las bases de datos soportadas son MySQL (4.1+), MySQLi, MS SQL, Postgres, Oracle, SQLite, y ODBC.

Instalación

• DESCARGARLO
  Podés descargar CodeIgniter desde este enlace: http://codeigniter.com/downloads/
  
  
• INSTRUCCIONES DE INSTALACIÓN
  CodeIgniter se instala en 4 pasos:
  
  1. Descomprime el paquete
  2. Sube las carpetas y archivos de CodeIgniter a tu servidor. Normalmente el archivo index.php estará a la raíz.
  3. Abra el archivo application/config/config.php con un editor de texto y configure la URL base. Si tenés intenciones de utilizar encriptación y/o sesiones, también hay que configurar la clave de encriptación.
  4. Si tenés intenciones de utilizar base de datos, abra el archivo application/config/database.php con un editor de texto y escriba la configuración adecuada para la base de datos.

  Si se desea aumentar la seguridad ocultando las ubicación de sus archivos CodeIgniter puede cambiar el nombre de las carpetas de system y application a algo más privado. Si los renombras, tenés que abrir tu archivo principal index.php y establecer las variables $system_folder y $application_folder en la parte superior del archivo con los nuevos nombres que hayas elegido.

  Para la mejor seguridad, tanto en la system y las carpetas application debe estar por encima de la raíz web, para que no sean directamente accesibles a través de un navegador. De forma predeterminada, los archivos. htaccess se incluyen en cada carpeta para evitar el acceso directo, pero es mejor sacarlos del acceso público en su totalidad en caso de cambio de servidor web de configuración o no cumplir con la htaccess..

  Después de moverlos, abra el archivo index.php principal y establecezca las variables $system_folder y $application_folder, preferiblemente con una ruta completa, por ejemplo, '/www/MiUsuario/system'.

  Una de las medidas adicionales a adoptar en entornos de producción es deshabilitar la presentación de informes de error de PHP y cualquier otra funcionalidad de sólo-desarrollo. En CodeIgniter, esto puede hacerse mediante el establecimiento de la constante ENVIRONMENT.

Eso es todo!

Ahora que ya tenemos un parorama completo y muy amplio del tema estamos tratando y también sabemos preparar el ambiente adecuado para nuestro desarrollo estaremos viendo ya algo de código en el siguiente artículo de la serie.

No voy a entrar en muchos detalles sino que asumo que esta entrada es del interés de las personas que tienen ya conocimiento previo.

Si sos nuevo en lo que a sistemas de información georeferenciales se refiera y tenés interés en aprender, por favor leé mi artículo Básicos. El SIG (Sistema de Información Geográfica)

Conceptos básicos

• El Esri Shapefile o simplemente shapefile es un popular fomato de datos de vectores geoespaciales para sistemas GIS. Es desarrollado y regulado (la mayor parte) por Esri como su especificación abierta para la interoperabilidad de datos entre ESRI y otros productos de software. Las extensiones para un archivo son .shp, .shx, .dbf
• PostGIS es un programa de software de código abierto que añade soporte para objetos geográficos a la base de datos objeto-relacional PostgreSQL. PostGIS sigue las características simples para la especificación de SQL del Open Geospatial Consortium (OGC). La extensión sería por supuesto un .sql

Conversión automatizada por medio de Bash Scripting

Escribí 2 archivos ejecutables distintos para esta migración

• autoShp2Psql: se encarga de transformar todos los archivos shapefile a archivos SQL
• autoExecSql: se encarga de ejecutar uno por uno los archivos SQL

El script para autoShp2Psql sería el siguiente:

#!/bin/bash

DIR_MAPAS="/directorio/de/los/mapas"

# BASE DE DATOS
SCHEMA="public"
DBNAME="NombreBaseDeDatos"

# PROYECCION
SRID="4326"

OUTPUTDIR="/directorio/de/salida"

TEMPFILE="$OUTPUTDIR/$SCHEMA.t"
OUTPUTFILE="$OUTPUTDIR/import-$SCHEMA.sh"

echo -e "#! /bin/bash\n#`date`" > $OUTPUTFILE

find $SEARCHDIR -nowarn -name *.shp > $TEMPFILE
cat $TEMPFILE | while read line
do
SINESPACIO=`echo ${line} | tr ' ' '_'`
echo "shp2pgsql -W \"ISO8859-1\" -s $SRID \"${line}\" $SCHEMA.`basename $SINESPACIO .shp` > `basename $SINESPACIO .sql`" >> "$OUTPUTDIR/import-$SCHEMA.sh"
done

chmod +x $OUTPUTFILE
rm $TEMPFILE

exit 0

Con esto tenemos creados todos nuestros archivos SQL listos para ser ejecutados en nuestra base de datos.

El segundo script, autoExecSql, es muy simple:

#!/bin/bash

# LOOP EN EL DIRECTORIO ACTUAL DE 
# TODOS LOS ARCHIVOS CON EXTESION .sql
for i in ./*.sql; do
	psql -h 127.0.0.1 -p 5432 -d NombreBaseDeDatos -U Usuario -f $i
done

El comando psql debe ser adaptado según la configuración de la base de datos.

• -h corresponde al host
• -p al puerto
• -d (database) al nombre de base de datos
• -U al usuario de base de datos
• Si se requiere contraseña utilizarían la opción -W

Fin

Voilà! Ya han hecho la migración =)

Si tienen alguna duda acerca del funcionamiento dejen un comentario

Tengo que serles sinceros que luego de leer esta infografía quedé algo preocupado! 

Via: Medical Billing And Coding

Yo conduzco 1 hora por la mañana hasta mi lugar de trabajo, se supone que me siento 8 horas que son las que trabajo, al salir de la oficina 30 minutos hasta la universidad donde tengo que estar por lo menos 3 horas más en una silla para terminar el día conduciendo 40 minutos a mi casa. Acabo de cumplir 22 años!!!

Y ustedes ¿cuántas horas al día están sentados?

Muchas veces encontramos la belleza en la simplicidad. A continuación una lista de packs de iconos minimalistas para utilizarlos en tu próximo diseño y ¡Gratis!

1. gcons

Estos iconos son de usos múltiples y pueden caber en una serie de escenarios como los temas de interfaz de usuario, diagramas técnicos, diseño web, desarrollo de prototipos, etc

2. Minimalistica Icon Set

Simple y en 2 tonos en formato PNG: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128

3. Goo-EE Icon Set

En 10 opciones de colores, varios tamaños que van desde 8x8 hasta 32x32

4. Munich

Todos los iconos están orientados hacia el uso práctico y el comercio. Algunos son de carácter general (por ejemplo, dejar comentarios, usuarios, editar), algunos específicos (por ejemplo, independiente, donar, cestos).

5. Wireframe Toolbar Icons

Estos iconos pueden ser utilizados para wireframes y la creación de maquetas de software, sitios web y barras de herramientas de aplicaciones de software y menús como Android, Windows Mobile, Palm, iPhone y aplicaciones IPAD.

6. Dormunt

Dormunt esta compuesto por una línea gruesa, pero cada línea tiene una brecha. Hermoso!

7. Iconic

Iconic es un hermoso conjunto que consiste de 120 iconos en formato raster y vectorial. También viene en 14 colores diferentes para satisfacer las necesidades que los diseñadores.

8. Mono Icons

Los iconos son sencillos, en negrita y muy bien diseñado y encajaría bien en la mayoría de las aplicaciones, tal vez mejor, aunque sea dentro de una aplicación de software de interfaz de usuario o en formato blog. La facilidad con que se pueden personalizar y coloreada convierten en una opción atractiva para tu próximo proyecto.

9. Pitoico

Los iconos pueden ser incorporados en tus aplicaciones de software en línea, medios impresos, móviles. El autor sugiere incluso la utilización de los signos en el mundo real alrededor tu calle, la escuela, localidad o ciudad incluso.

10. Token

Token incluye 128 diseños de iconos únicos, disponibles como una agrupación ICO de 16 × 16, 32 × 32 256 × 256 píxeles iconos, o como un archivo PNG de 128 × 128 píxeles. Cada icono tiene dos variantes claras y oscuras, viene junto con un PSD que incluye los estilos de capa para cada resolución.

No sabría con cual quedarme como favorito la verdad. Y según ustedes ¿cuál o cuáles son los mejores?

El objetivo aquí es una imagen de fondo en un sitio web que cubre la ventana del navegador en todo momento. Vamos a poner algunos detalles específicos sobre él:

• Llena toda la página con la imagen, sin espacios en blanco
• Escalas de imagen según sea necesario
• Mantiene las proporciones de la imagen (relación de aspecto)
• La imagen está centrada en la página
• No causa barras de desplazamiento
• Compatible entre navegadores como sea posible
• No son unas artimañas de lujo como Flash

Impresionante, fácil y progresiva a la manera CSS3

Podemos hacer esto simplemente a través de CSS gracias a la propiedad background-size ahora en CSS3. Vamos a utilizar el elemento HTML (mejor que el body ya que tiene siempre al menos la altura de la ventana del navegador). Creamos un fondo fijo y centrado en él, y luego ajustamos su tamaño con background-size establecido en la palabra clave cubierta.

html {
        background: url(img/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Funciona en:

• Safari 3 +
• Chrome sea-cual-sea +
• IE 9 +
• Opera 10 + (Opera 9.5 compatible background- size pero no en las palabras clave)
• Firefox 3.6 + (Firefox 4 soporta la versión prefijada non-vendor)

Solo CSS: Técnica 1

Aquí se utiliza un elemento <img> en línea (inline), que será capaz de cambiar el tamaño en cualquier navegador. Se plantea un mínimo de altura que mantiene rellenando la ventana del navegador en posición vertical, y establecer un ancho de 100%, lo que mantiene el llenado horizontal. También establece un mínimo de ancho de la anchura de la imagen para que la imagen no se haga más pequeña de lo que realmente es.

La pisca inteligente es usar una consulta de medios de comunicación (media query) para comprobar si la ventana del navegador es más pequeña que la imagen, y con un combinado en el margen izquierdo negativo y de porcentaje de izquierda que le mantenga centrada independientemente.

Es decir, en CSS sería así:

img.bg {
        /* Setea reglas para rellenar el fondo */
        min-height: 100%;
        min-width: 1024px;

        /* Setea una escala proporcional */
        width: 100%;
        height: auto;

        /* Setea el posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}

/* Esta parte tiene que ser específica de la imagen que se utilice */
@media screen and (max-width: 1024px) {
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Funciona en:

• Cualquier versión de los navegadores buenos: Safari / Chrome / Opera / Firefox
• IE 6: Borked - pero probablemente corregible si se utiliza algún tipo de posicionamiento fijo
• IE 7.8: Mayormente funciona, no se centra en los tamaños pequeños, pero llena bien la pantalla
• IE 9: Funciona

Solo CSS: Técnica 2

Una forma bastante simple de manejar esto es poner una imagen en línea en la página, de posición fija a la parte superior izquierda, y darle un min-width y min-height de 100%, preservando su relación de aspecto.

HTML:

CSS:

#bg {
        position:fixed;
        top:0;
        left:0; 

        /* Conservar la relación de aspecto */
        min-width:100%;
        min-height:100%;
}

Sin embargo, esto no centra la imagen aún… Por lo tanto, podemos fijar que envolviendo la imagen en un div. A ese div lo haremos el doble de grande de la ventana del navegador. Luego la imagen se coloca, aún conserva su relación de aspecto y que cubre la ventana visible del explorador, y el punto muerto de eso.

HTML:

CSS:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Funciona en:

• Safari / Chrome / Firefox (no probé, pero las últimas versiones están muy bien) 
• IE 8 + 
• Opera (cualquier versión) y el IE fallan de la misma manera (mal colocado, no sé por qué)

EXTRA: el método con jQuery

Esta idea se convierte en mucho más fácil (desde una perspectiva CSS) si sabemos si la relación de aspecto de la imagen (<img> en línea que va a utilizar como fondo) es más grande o más pequeña que la relación de aspecto actual de la ventana del navegador. Si es inferior, entonces se puede establecer sólo el ancho a 100% en la imagen y sé que va a llenar la altura y anchura. Si es mayor, se puede establecer sólo la altura a 100% y sé que va a llenar tanto el alto y ancho.

Tenemos acceso a esta información a través de JavaScript. Como de costumbre por aquí, me gusta apoyarme en jQuery.

HTML:

CSS:

#bg { position: fixed; top: 0; left: 0; }
.fondo-ancho { width: 100%; }
.fondo-alto { height: 100%; }

JavaScript:

$(window).load(function() {    

        var laVentana        = $(window),
            $fondo           = $("#bg"),
            aspectoRelacion  = $fondo.width() / $fondo.height();

        function redimensionarFondo() {

                if ( (laVentana.width() / laVentana.height()) < aspectoRelacion ) {
                    $fondo
                        .removeClass()
                        .addClass('fondo-alto');
                } else {
                    $fondo
                        .removeClass()
                        .addClass('fondo-ancho');
                }

        }

        laVentana.resize(function() {
                redimensionarFondo();
        }).trigger("resize");

});

Funciona en:

• IE7 + (probablemente podría funcionar en Internet Explorer 6 con una posición fija)
• Prácticamente todos los demás

Bueno, espero les sirva de alguna forma y si tienen dudas u otra técnica que quieren compartir dejen sus comentarios!

Al comenzar en su próximo gran proyecto web, probablemente se encuentre tan emocionado como yo - uno mezcla en su cabeza el diseño, la paleta de colores, y la navegación hasta que no se puede pensar con claridad. He estado allí antes y sé que no siempre es tan divertido como antes al recibir el proyecto crece un estusiasmo. Hay maneras de aliviar esta tensión y el estrés que su cliente puede sentir, por tomarse el tiempo para ahondar primero en la organización de la página web, sin estos elementos extraños que más tarde se llevará a la mayor parte del tiempo de uno creando.

Wireframe para una Startup, por Stephanie Hamilton Design.

Aquí es donde los wireframes llegan. Son una simple plantilla de líneas, formas, y etiquetas para definir el diseño de un sitio web y son bastante fáciles de crear. Una gran cantidad de industrias deben disponer de maquetas y prototipos antes de ir a la producción final, así que un sitio web a gran escala no debería ser diferente. Los wireframes son creados para ayudar a establecer la jerarquía entre los contenidos y ayudar a una organización alcanzar sus objetivos de negocio en línea.

Y por cierto, ¿por qué son tan importantes?

• Establecen la jerarquía.
• Le dan al cliente una visión general a principios del diseño del sitio.
• Permiten a usted y su cliente centrarse en la disposición sin la distracción de colores, tipografía y otros elementos de diseño.
• Fomentan la comunicación abierta con el programador, quien consigue una imagen clara de lo que necesitan para codificar.
• Son mucho más fáciles de ajustar, ya que sólo tiene que mover los dibujos de líneas simples en lugar de elementos complejos para conseguir el diseño deseado.
• Son un punto de partida y se pueden adaptar a muchas secciones de la web.
• Son similares a los planos. Al igual que un edificio, una página web debe tener una base sólida antes de crear o no va a durar.

Los wireframes previenen:

• Tener que volver atrás y rediseñar un diseño complejo porque no se invirtió el tiempo suficiente en la fase de planificación.
• Un rediseño del sitio caro debido a la interfaz de usuario pobre.
• La frustración del usuario.

Un wireframe para la Embrace Pet Community, por Jesse Bennett-Chamberlain de 31Three.

Y ¿qué debo incluir?

Los wireframes son creados con la intención de mostrar los elementos importantes de un sitio web. Utilice formas simples y la etiqueta en la creación que su diseño. Por lo general, debe incluir estos elementos en la creación de que su wireframe:

• Logotipo, eslogan
• Navegación primaria (acerca de, contacto, etc.)
• Navegación secundaria (categorías, las páginas de contenido)
• Barra de búsqueda, registro en formulario, etc.
• Áreas de características (blog, acerca de, Twitter)

¿Cómo son hacen?

Las herramientas que se utilizan para crear los wireframes varían y muchas veces se reducen a las preferencias personales. Pruebe una variedad para ver qué método es más efectivo para usted.

Dibujo a mano

Dibujar a mano en papel es un gran punto de partida, ya que le permite centrarse libremente y organizar el contenido. También son útiles para uno-a-uno reuniones con clientes.

Software de Gráficos

El programa estándar de la industria para la creación de los wireframes es Fireworks. Muchos diseñadores se sienten cómodos trabajando en una variedad de programas como Adobe Photoshop e Illustrator, también, y puede alcanzar un wireframe presentable con ellos.

Software de prototipados web

Estas herramientas fueron creadas específicamente para crearlas, y su fácil manejo de capacidades de creación de prototipos hacen que sean una opción popular entre muchos.

Diagrama de flujo o software de mapas mentales (como Visio.)

Estas opciones de software cuentan con elementos pre-empaquetados que permiten crear fácilmente representaciones organigrama de su wireframe.

Aplicaciones para crear wireframes digitalmente

Mientras que los diseñadores web pueden ser propensos a la creación de los wireframes a través de lápiz y papel o Photoshop, también hay un gran cantidad de sitios web que le permiten crear prototipos, mapas de sitio, o los wireframes digital que obtiene una corrección de su equipo. Éstos son algunos de los más populares de estos programas:

Balsamiq

Fácilmente ajuste sus dibujos utilizando Balsamiq. Una vez que usted tiene en mente un diseño, puede fácilmente modificar en tiempo real en el transcurso de una reunión.

iPlotz

iPlotz hace que sea fácil crear un wireframe para el prototipado de un sitio web y fácilmente hablar de sus creaciones con los demás. Basta con invitar a otros a los comentarios sobre que su diseño para optimizar su flujo de trabajo.

DUB

DENIM es un instrumento informal para el las primeras etapas de un sitio web y diseño de interfaz de usuario. DENIM apoya dibujo de entrada, permite el diseño en diferentes niveles de refinamiento, y unifica los niveles a través del zoom.

¿Algunas directrices?

Ahora que usted entiende qué necesita ser incluido y tiene las herramientas necesarias para producir su wireframe, es el momento de bajar a lo esencial. He aquí algunos consejos claves a tener en cuenta:

Manténgalo en escala de grises

Recuerde que debe trabajar en escala de grises, ya que se centrará su atención en el diseño y menos en el diseño. Si el cliente le ha dado imágenes a todo color, como un logotipo, convertirlas a escala de grises también. Tonos de gris se puede utilizar para distinguir entre ciertas categorías y elementos.

Simplicidad

Evite el contacto sobre la cabeza y concentrarse en el diseño en esta etapa. Recuerde que la meta es comunicar rápidamente la intención de un sitio web al cliente sin el ojo añadido dulces que vendrá después. Esto se logra a través de líneas simples.

Centrarse en los objetivos de la empresa

¿Sabe usted lo que su cliente quiere que sus visitantes saquen de este sitio web? Comprender la intención del usuario hace la llamada a la acción mucho más evidente.

Asegurar el contenido de antemano

Proteger el contenido que aparecerá en la página es esencial para evitar las revisiones a tiempo más adelante. Como mínimo, el cliente debe proveerle con logotipos, anuncios, reportajes, secciones de navegación, así como un encabezado y pie de página. Teniendo estos elementos en su lugar se reduce el riesgo de confusión en la línea de las expectativas poco claras.

¿Qué debo evitar?

Para lograr el wireframe más eficaz, es importante evitar estos elementos.

Desorden

Trate diseñar su wireframe para que el cliente (y programador) pueda comprender fácilmente el diseño y lo que puede conseguir echando un vistazo en él durante 10 segundos o menos.

Demasiados detalles

La intención suya en la creación de un wireframe debe ser proporcionar un vista de pájaro de lo que un sitio web está destinado ser similar. Quedarse atascado en los detalles, tales como el ancho y la altura sólo añaden confusión.

Demasiado color y diseño

Recuerde que usted va a llegar a las cosas divertidas, como el color y los gráficos más tarde después de establecer una base sólida que usted y su cliente puede estar de acuerdo.

Recursos para el wireframes

Para obtener más información sobre los wireframes y un mirada más en profundidad en lo que ellos pueden lograr, echa un vistazo a Wireframe Magazine.

La creación de un sitio web puede ser una tarea desalentadora. El no poder planificar su próxima gran página web puede conducir a mucha frustración innecesaria y la posibilidad de incumplimiento de plazos. Aunque los wireframes no suelen ser la idea más interesante que viene a la mente cuando piensas en lo que es un sitio web, es un pequeño paso muy necesario para llegar allí!

La mayoría de los programas que vienen con los dispositivos móviles (Nokia PC Suite, BlackBerry Desktop Manager, etc.) sólo están disponibles para sistemas operativos Windows por lo que crea un inconveniente obvio para las personas que no utilizan tal sistema operativo.

Wammu es un programa para manejar los datos en el teléfono celular como los contactos, calendario y mensajes!

Es un manejador de teléfonos celulares que ejecuta en Linux, Windows y posiblemente otras plataformas, donde funcione libGammu y wxPython. La comunicación se realiza mediante la biblioteca Gammu.

Funcionalidades

Las funcionalidades soportadas actualmente son:

• soporte completo (lectura/edición/borrado/copiado) de contactos, tareas y calendario
• puede leer/crear/guardar/enviar/respaldar SMSes
• enviar archivos al teléfono (teléfonos OBEX y Sony Ericsson únicamente)
• creador de SMS multi-parte (actualmente sólo se puede editar texto y sonidos/imágenes predefinidas)
• mostrar mensajes, incluyendo imágenes y reproducción de tonos
• soporte para respaldos e importaciones en varios formatos (vCard, vCalendar, vTodo, iCalendar, respaldo propio de gammu, …)
• exportar mensajes a e-mail (los almacenamientos IMAP4, maildir y mailbox son soportados)
• buscar en el teléfono
• traducido a varios idiomas
• evaluado como el mejor en varios servidores de programas

Fabricantes soportados

Actualmente tiene soporte para la nada despreciable cantidad de 44 fabricantes y sus distintos tipos de modelos entre los cuales se encuentran algunos como:

• Apple
• BlackBerry
• HTC
• LG
• Motorola
• Nokia
• Samsung
• Sony Ericsson

Descargas

• Código fuente
• Binario de Windows
• Paquetes para Debian
• Paquetes para Ubuntu
• Paquetes para Ubuntu en repositorio personal (PPA, última versión estable)
• Paquetes para Ubuntu en repositorio personal (PPA, última versión de pruebas)
• Paquetes RPM para openSUSE, Fedora, Mandriva, SLES, RHEL y CentOS (última versión estable)
• Paquetes RPM para openSUSE, Fedora, Mandriva (última versión de pruebas)