Blog dedicado a la enseñanza gratuita, utilizando JavaScript, CSS, HTML, PHP, MySQL, UML, Patrones de Diseño.

05.- VideoTutorial del Curso de HTML5. Edición Inline.


VideoTutorial Nº 5 del Curso de HTML 5. Vemos las nuevas funcionalidades de Edición Inline. Atributos contenteditable, designmode y spellcheck; Convertir en editable un elemento div, añadir botones de edición; Convertir en editable un documento completo. 18 minutos.

Descargar en formato mp4

Descargar en formato m4v HD 720
Descargar vía iTunes
Feed Rss del Curso
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial



Fuente illasaron.com

040.- Curso de Java.uso de Java FX Composer en NetBeans


Videotutorial número 40 y último del curso de java. Vemos como utlilizar java FX Composer. Crear un proyecto Java FX; Crear una aplicación; Añadir efectos a la aplicación; Añadir formas, colores y efectos; añadir acciones a la aplicación. Ejecutar la aplicación. 44 minutos.

Fuente illasaron.com

Clase PHP para filtrar los parámetros recibidos por GET

A raiz de la publicación del post The
Perishable Press 4G Blacklist me surgió la idea de publicar una de
las clases en PHP que utilizo para controlar la seguridad de los sitios web desarrollados en este lenguaje. Toda prevención
es poca y hay veces que no tenemos acceso al fichero .htaccess, no conocemos lo suficiente su funcionamiento, el servidor
no es Apache, etc. En ese caso utilizar una clase como la siguiente nos puede ser útil para evitar ataques CSRF o
XSS mediante parámetros GET.

  1. class dXSS{  
  2. private $url;  
  3. private $longitud;  
  4.   
  5. public function TestGet(){  
  6. $ok = true;  
  7. $baneados =array(chr(34),  
  8. "'",  
  9. "--",  
  10. ";"  
  11. "<",  
  12. "[",  
  13. "&lt;",  
  14. ">",  
  15. "&gt",  
  16. "&quot",  
  17. "&#x27",  
  18. "%",  
  19. "&#x2F",  
  20. "/*",  
  21. "*/",  
  22. "request",  
  23. "select",  
  24. "declare",  
  25. "insert",  
  26. "update",  
  27. "delete",  
  28. "drop",  
  29. "exec(",  
  30. "execute(",  
  31. "cast(",  
  32. "char",  
  33. "nchar",  
  34. "varchar",  
  35. "nvarchar",  
  36. "substring",  
  37. "sysobject",  
  38. "iframe",  
  39. "syscolumns"  
  40. );  
  41.   
  42. $recuento=0;  
  43. foreach$_GET as $key => $value ) {  
  44. for($i=0;$i<sizeof($baneados);$i++) {  
  45. $Cadena = strtoupper($value);  
  46. $Encontrar   = strtoupper($baneados[$i]);  
  47. $pos = strpos($Cadena$Encontrar);  
  48. if($pos !== false) {  
  49. $recuento++;  
  50. }  
  51. if(strlen($Cadena)>$this->longitud){  
  52. $recuento++;  
  53. }  
  54. if(eregi('[^a-z0-9_]',$Cadena)){  
  55. $recuento++;  
  56. }   
  57. }  
  58. }  
  59. if($recuento>0){  
  60. header('Location:'.$this->url);  
  61. }  
  62. }  
  63. }  

La clase testea cada uno de los parámetros recibidos y:

1.- Se asegura que no esté en la lista de palabras baneadas

2.- Se asegura de que no tenga una longitud superior a la especificada

3.- Comprueba que sólo contenga caracteres alfanuméricos

Si se detecta un parámetro no válido se redirige a la $url especificada.

Un ejemplo de funcionamiento sería:

  1. $g = new dXSS();  
  2. $g->url = 'http://www.google.es';  
  3. $g->longitud = 10;  
  4. $g->TestGet();  

Este código debe ir antes de que se haya producido cualquier salida desde el navegador. Al principio de la página
por ejemplo.

De este modo se aceptarían parámetros como:

http://www.dominio.com/index.php?Id=45&acc=new&op=32

Pero no aceptaría cosas como:

http://www.dominio.com/index.php?p=<script>alert("XSS");</script>

Es bastante interesante definir una longitud pequeña, siempre que sea posible:

  1. $g = new dXSS();  
  2. $g->url = 'http://www.google.es';  
  3. $g->longitud = 3;  
  4. $g->TestGet();  

Permitiría:

http://www.dominio.com/index.php?Id=45&sub=3&acc=new&op=32

Pero no:

http://www.dominio.com/index.php?Id=<meta%20http-equiv="refresh"%20content="0;">

o incluso:

http://www.dominio.com/index.php?Id=$%

NOTA: Esta clase únicamente controla los parámetros recibidos por $_GET. Fácilmente
se podría adaptar o modificar la clase para la información recibida por $_POST o que incluso se ocupase de
ambas cosas pero quería mostrar un uso muy sencillo. Lo ideal es combinar esta clase con otras clases o funciones
que comprueben el contenido recibido a través
de los formularios, utilizar tokens en los formularios, establecer los permisos apropiados
a las carpetas del sitio web, utilizar .htaccess, recurrir a filter_input si
la versión de PHP instalada es
reciente, etc. En estas cosas más vale que sobre que falte.

Fuente webintenta.com

Infografía sobre la seguridad de las contraseñas

Recientemente la empresa desarrolladora de software de seguridad Zone Alarm ha realizado una encuesta sobre la seguridad en las contraseñas y con estos datos ha armado una excelente infografía que les dejo en este post.

Algunos datos interesantes a destacar de la infografía:

  • El 79% de los consumidores utiliza contraseñas muy inseguras partiendo de datos personales o frases comunes
  • El 4% utiliza contraseñas basadas en la palabra “password”
  • El 20% utiliza contraseñas basándose en su primer nombre
  • Sólo el 1% de los consumidores utiliza contraseñas de más de 13 caracteres



Fuente puntogeek.com

Cómo funciona Internet: ¿Qué son y para qué sirven las DNS?





En Xataka On estamos siempre muy atentos a todo lo que ocurre en la red, pero lo cierto es que hay veces que para comprender la actualidad cuando hay ciertos problemas técnicos, hay que conocer lo que hay debajo de la red, es decir, saber como funciona Internet. Y por eso hoy empezamos una serie de entradas en la que os explicaremos de una manera clara y no demasiado técnica como funciona “bajo los cables” la red de redes que está marcando un hito en la historia del hombre.

Hoy empezamos con los DNS. Para algunos de vosotros, los DNS únicamente son unas direcciones que introducimos en nuestra configuración de conexión a Internet y que nos sirven para poder conectarnos y para otros, son esas “cosas” que tienen que expandirse para que una dirección nueva se pueda ver en todas las conexiones. En realidad es algo mucho más complejo, siendo uno de los pilares sobre los que se sustenta la Internet actual. Por lo tanto, ¿qué son las DNS y cómo funcionan?

¿Qué son y para qué sirven?


DNS son las iniciales de Domain Name System (sistema de nombres de dominio) y es una tecnología basada en una base de datos que sirve para resolver nombres en las redes, es decir, para conocer la dirección IP de la máquina donde está alojado el dominio al que queremos acceder.


Cuando un ordenador está conectado a una red (ya sea Internet o una red casera) tiene asignada una dirección IP. Si estamos en una red con pocos ordenadores, es fácil tener memorizadas las direcciones IP de cada uno de los ordenadores y así acceder a ellos pero ¿qué ocurre si hay miles de millones de dispositivos y cada uno tiene una IP diferente? Pues que se haría imposible, por eso existen los dominios y las DNS para traducirlos.

Por lo tanto, el DNS es un sistema que sirve para traducir los nombres en la red, y está compuesto por tres partes con funciones bien diferenciadas.
  • Cliente DNS: está instalado en el cliente (es decir, nosotros) y realiza peticiones de resolución de nombres a los servidores DNS.
  • Servidor DNS: son los que contestan las peticiones y resuelven los nombres mediante un sistema estructurado en árbol. Las direcciones DNS que ponemos en la configuración de la conexión, son las direcciones de los Servidores DNS.

  • Zonas de autoridad: son servidores o grupos de ellos que tienen asignados resolver un conjunto de dominios determinado (como los .es o los .org).

¿Cómo funcionan?



Arbol DNS


La resolución de nombres utiliza una estructura en árbol, mediante la cual los diferentes servidores DNS de las zonas de autoridad se encargan de resolver las direcciones de su zona, y sino se lo solicitan a otro servidor que creen que conoce la dirección. Para no meternos en detalles muy técnicos, os voy a explicar como se realiza una petición DNS sencilla.
  • Tecleamos en nuestro navegador www.xatakaon.com
  • Nuestro Sistema Operativo comprueba la petición y ve que no tiene en su memoria caché la dirección de ese dominio (porque suponemos que no nos habéis visitado nunca en ese ordenador), entonces realiza la petición al servidor DNS configurado manualmente o mediante DHCP.
  • El servidor DNS que tenemos configurado tampoco tiene memorizada la dirección IP de ese dominio, por lo que realiza una petición al servidor encargado de la zona de autoridad .com.
  • El servidor encargado de la zona de autoridad .com tiene una tabla de datos en los que están almacenados las direcciones IP de las máquinas y sus dominios. Lo busca y le responde al servidor DNS que está almacenado en la máquina con dirección amazon-gw.ip4.tinet.net (77.67.82.130).
  • Es entonces cuando el servidor DNS que tenemos configurado realiza una petición a amazon-gw.ip4.tinet.net para saber en qué parte de su máquina (recordad que una máquina puede alojar varias páginas) está www.xatakaon.com
  • El servidor donde está la página alojada busca en su tabla de correspondencias y le responde diciendo que está en la dirección IP 178.236.0.213.

  • Es entonces cuando 178.236.0.213 le devuelve la consulta a nuestra aplicación (navegador en esta ocasión) y se comienzan a intercambiar paquetes para procesar el proceso.

Parece un proceso largo y complejo ¿no? En realidad no lo es, ya que es un proceso iterativo para el cual están diseñados los servidores para responder en cuestión de microsegundos. Y por supuesto, la mayoría de las ocasiones no se produce toda esta petición, ya que los servidores tienen zonas de memoria caché en la que almacenan las peticiones más habituales para así responder más rápidamente y no saturar la red con multitud de peticiones.

En la segunda imagen que ilustra la entrada se puede ver claramente como es la estructura en árbol. Y si os lo estáis preguntando sí, hay un servidor general que tiene las direcciones de los servidores encargados de las zonas de autoridad. Lo que ocurre es que ese servidor son muchas máquinas repartidas en todos los lugares del mundo (la imagen del principio representa la situación de algunos), por lo que no hay mucho peligro que nos quedemos sin servidores DNS (a no ser que haya un ataque muy planeado, claro está).

Fuente xatakaon.com

Publicado CodeIgniter 2.0

Acaba de publicarse la esperada versión 2.0 de CodeIgniter. Para los que no hayan estado siguiendo su desarrollo, debido a ciertas disputas entre los miembros de la comunidad y los desarrolladores, motivadas principalmente por la lentitud en la incorporación de nuevas funcionalidades y los retrasos en la publicación de versiones, se decidió por parte de Ellislab (la empresa que desarrolla CodeIgniter) separar CodeIgniter en dos ramas: Core y Reactor.

La versión Core, será de desarrollo más lento, y es la que usará Ellislab en sus productos comerciales.

Reactor será la versión “community”, en la que los usuarios podrán enviar sus propuestas de mejora, y un equipo de responsables del proyecto las revisará para ser incluidas o no en futuras versiones del framework.

A todos los efectos, la versión a usar es la Reactor. Ésta es la que aparece oficialmente para descarga en la web (aunque ambas están disponibles) y la que Ellislab recomienda.



Algunos de los cambios más importantes son:

  • Se ha eliminado la compatibilidad con PHP 4, ahora se requiere PHP 5.1
  • Añadida la protección CSRF en el form helper.
  • Drivers.
  • Application packages.
  • Se ha eliminado el uso de los plugins, en favor de los helpers.
  • Añadido $route[‘404_override’] para permitir manejar las páginas de error 404 por los controladores.
  • Se ha eliminado el scaffolding.
  • Soporte total de query strings.
  • Nuevo sistema de caché, con soporte para APC y memcache.
  • Compatibilidad con línea de comandos, para facilitar el uso del cron.

Se ha quedado fuera la inclusión de una librería de autenticación, que era una de las características más demandadas y a mi parecer muy necesaria, pero parece ser que está planeado y se incluirá en futuras versiones cuando se encuentre la manera correcta de implementarlo.

Podeis ver el anuncio oficial de Ellislab, y descargarlo aquí.


Fuente davidrojas.net

Crear una galería de fotos en Drupal, con efectos lightboxes


Crear una galería con efecto lightbox en nuestro sitio Drupal.
En un pocos pasos podremos tener una completa galería sumamente personalizada y con efectos del tipo lightbox.

Como siempre muchas gracias, y le envío un cordial saludo

Fuente illasaron.com

04.- VideoTutorial del Curso de HTML5. Controles de Formularios


VideoTutorial Número 4 del Curso de HTML5, en el que vemos los nuevos controles de formularios que incluye. Default, url, email, fechas y horas, colores, búsqueda. 17 minutos.

Descargar en formato mp4
Descargar en formato m4v HD 720

Descargar vía iTunes

Feed Rss del Curso

Descargar en formato m4v(iPod, iPhone, iPad...).

Descargar archivos de prácticas del videotutorial

Fuente illasaron.com

Recomendaciones para una comunicación exitosa con clientes

Para todo aquel que tiene un negocio el tratar con los clientes adecuadamente es indispensable. No importa cuán bien puede diseñar o puede codificar; como un freelance o si maneja una agencia digital, si usted no consigue tener un trato adecuado con el cliente, puede esperar al fracaso.

En este artículo discutiremos el aspecto de cómo mantener la productividad de un proyecto e ímpetu al trabajar con clientes.


LA SITUACIÓN EN COMÚN:

A la mayoría de los diseñadores Web nos ha pasado: trabajamos en un proyecto para un cliente, completamos la primera tarea que requiere una retroalimentación y esperamos para la respuesta en la fecha concordada, pero sucede lo peor. La respuesta no viene ni ayuda de ninguna manera el proyecto. Lo que te hace entrar en una depresión, querer refugiarte por unos meses en un lugar seguro, tibio y olvidarte del cliente.

Sean optimistas pues a continuación les dejamos unas recomendaciones que pueden ayudarte a no darte por vencido en la primera derrota.

ACTUALIZACIONES REGULARES DE LA AGENDA Y EL PRESUPUESTO:

Desde el comienzo es importante ser disciplinado y enviarle al cliente el presupuesto y la agenda del proyecto actualizado. En esta actualización usted podría destacar lo siguiente:

1. Complete las tareas de la semana anterior.

2. El presupuesto de gastos y el presupuesto que queda en cada fase.

3. Las tareas planeadas para la semana siguiente y quien es responsable, usted o el cliente.

4. Cualquier tarea que sobre pase las fechas acrodadas o exceda el presupuesto, y si ése es el caso por qué. También considere el impacto potencial en el proyecto.

MAS VALE PREVENIR QUE LAMENTAR:

El enviar presupuestos y las actualizaciones semanales del proyecto son vitales para mantener al cliente informado sobre la situación y hacerle saber si se va en buen camino. Así se evita, en algún momento, debilitar la relación entre el cliente y tú.

EL CLIENTE ES MIEMBRO DEL EQUIPO:

Desde la etapa inicial del proyecto es muy importante hacerle ver al cliente que son un equipo y que como tal cada uno tiene sus responsabilidades y que se deben de apoyar para que ese proyecto salga adelante. Así se evitaran malos entendidos y dobles tareas.

UN CAMBIO EN LAS FECHAS NO SIEMPRE ES MALO:

El llevar un orden al día de la situación del proyecto ayuda a entender por que el desplazar la fecha esperada no es tan malo. Pueden surgir situaciones que ameriten un análisis más profundo por lo que es necesario aplazar la fecha. Si se mantiene al cliente informado sobre estas situaciones es mucho mas sencillo que el lo entienda y que no lo tome como falta de disciplina por parte tuya o de la agencia.

SEA PRO-ACTIVO Y AYUDE AL CLIENTE POR FUERA:

Este dispuesto a ayudar al cliente con tareas que usted supuestamente no debería de estar haciendo y ni es pagado por hacer. Ejemplos: iconos, versión de impresión del sitio Web, pequeñas imágenes de rompecabezas y banderas más bajas de página de nivel. Si consigue que le paguen por hacerlo mucho mejor, pero hacerlo puede ayudar al cliente y a su negocio a agilizar el proceso y en su economía.

CONSIGA PROPAGANDA:

El poner especial cuidado en las cosas más pequeñas para que estas se encuentren al día pude ayudar bastante. Probablemente es necesario que prepares algunos trabajos como de microcopy y someterlos a la aprobación del cliente. Sabemos que no es su trabajo pero de esta manera puede salvar el proyecto.

Considerar el contratar a un diseñador o escritor de material publicitario para trabajar por un par de horas mantendrá un flujo adecuado del dinero y del proyecto. Créame que el cliente apreciará que se este tomando la delantera. Recuerda que todo el tiempo que gaste ayudando al cliente favorece su relación.

TRATANDO CON MÚLTIPLES CLIENTES:

A menudo al trabajar para un cliente, usted sólo interactúa con algunas personas pero este tiene que informar a muchos más. Una causa común para tardanzas en proyectos Web es el tiempo que toma su contacto directo para conseguir que sus superiores revisen el material, reaccionen o aprueben el trabajo y comunicarle los resultados a usted.

Las buenas noticias son que hay maneras de combatir esto.

IDENTIFIQUE EL LADO DEL DIRECTOR DEL PROYECTO:

Asegúrese de identificar quien será el Director del proyecto y si esta persona tiene la autoridad de tomar decisiones lo más pronto. Esto puede parecer una pregunta difícil de realizar pero puede ayudarte a evitar problemas futuros.

Si es complicado definir a la autoridad entonces aclare que las decisiones del proyecto se tienen que tomar estrictamente según el calendario que se haya realizado.

HAGA QUE SU CONTACTO SE VEA BIEN:

Haz lo posible para que tu contacto se vea bien con sus superiores, incluso si este comete algunos errores o no comunique las cosas lo suficientemente claro. Si se logra una buena impresión de su contacto con los superiores estos lo adoraran y pondrán especial atención en su proyecto y en esta relación.

QUE HACER CUANDO NO PUEDE AYUDAR A SU CONTACTO A BRILLAR:

La última de las opciones a considerar es pasar por alto a tu contacto directo y comunicarte con sus superiores para poder agilizar el proceso de retroalimentación.

Esto solo se puede hacer cuando no ha resultado ninguna de las opciones anteriores pues es un proceso muy delicado, se puede afectar la relación que se tiene con el contacto directo y a la vez el que este tiene con sus superiores.

Sinceramente no hay una manera fácil de llevar a cabo este paso, pero si se logra puedes obtener muy buenos resultados.

SESIONES Y REUNIONES CARA A CARA:

No se sienta mal si no obtiene respuesta alguna del cliente, muchas veces es por su vida agitada y lo que puede solucionar este problema es el de citarse para llegar a un acuerdo.

LA JUNTA DE LA ADMINISTRACIÓN:

Existirán clientes a los que literalmente tendrás que arrastrar a su oficina y no permitir que salgan hasta que tengas todas las reacciones y las decisiones que necesitas.

Al encontrarse cara a cara con un cliente es importante definir claramente la razón para la reunión y proporcionar a clientes con suficiente tiempo para preparar todo lo que necesitan de antemano.

REUNIONES SEMANALES DE CLIENTE:

Otra solución de reunión para ayudar con la productividad del cliente y el proyecto es de arreglar reuniones semanales. No es necesario que se realicen cara a cara, se pueden realizar llamadas telefónicas

Los beneficios que se pueden obtener de ellas son:

1. Aumente la importancia percibida del proyecto en su y el campo visual de su agencia.

2. Reduzca la tentación de retrasar algo en ese proyecto por otro.

3. Realizar una revisión constante del proyecto y las decisiones a tomar.

4. Favorezca rápidamente una relación de trabajo buena con un cliente que hace cosas más fáciles para ambos lados.

En términos generales, el principal beneficio de reuniones semanales es que mantienen realmente la presión en completar un proyecto.

¡NO ES SIEMPRE EL CLIENTE, ES EL EMBOTELLAMIENTO!

Muy a menudo criticamos al cliente por las tardanzas, pero no es el cliente quien tiene encima un proyecto. Mantenga su workflow organizado y revise sus procesos internos todos los meses, tratando de encontrar los embotellamientos y mejorar el flujo de sus proyectos.

LAS CONDICIONES MÉDICAS NO-DIAGNOSTICADOS AYUDAN:

El ser organizado es la mejor herramienta para no ser usted el que cree un embotellamiento del trabajo.

Esta es una lista de las cosas que puede hacer para ser mas organizado:

1. Delegue tareas si tiene a quien delegar.2. Busque apoyo de su superior si es agobiado con el trabajo.

3. Intente de utilizar un sistema de gestión de volumen de trabajo como GTD8 o Pomodoro9.

4. Revise sus horarios de proyecto diarios, ajústelos y se comuníquelos al cliente.

5. Revise la lista de tareas diarias con la intensión de crear una lista práctica de terminación por el día.

6. Evite tratar con solicitudes inesperadas, a menudo ellos no son tan urgentes como parecen.

7. Tenga una estructura coherente en la carpeta del proyecto y el archivo.

8. Siga procesos coherentes, así podrá estimar caunto tiempo le toma desarrollar algunas tareas y mejorar en el futuro.

9. Consiga un gran par de auriculares y escuche la música que usted adora

¿TUVISTE UNA MALA SEMANA? SEA HONESTO ACERCA DE ELLO:

Si al final has hecho todo lo que pudiste para seguir con el proyecto pero el resultado sigue estando fuera de tu mano se honesto con ello y díselo al cliente explicando por completo la situación.

Los clientes son más accesibles y comprensibles de lo que usted piensa. Si usted sinceramente le dice a un cliente la razón para la tardanza, ellos comprenderán completamente; sea profesional y asegúrese de proporcionar a clientes con una nueva fecha tope para la entrega.

En caso de que te veas en un segunda o tercer fallo debes analizar si el proyecto es el correcto para ti, si tu manera de trabajar no concuerda con la del cliente; probablemente el cliente ha contratado a la persona incorrecta. Y si reaccionas rápidamente, crecerás como un profesional y podrá mantener tu proyecto actual.

¿Qué otros consejos nos puedes dar para mantener la productividad en proyectos web al trabajar con clientes?

Fuente portafolioblog.com

Buscador de recursos de Photoshop


Aquellos que utilizamos plantillas o recursos realizados en Photoshop tenemos sitios de confianza que sabemos nos aseguran encontrar aquello que buscamos. Es por eso que pensé que este buscador puede llegar a resultarles de mucha utilidad.

Se trata de SearchPSD, un sitio que nos permite buscar archivos PSD en la web a partir de palabras clave o una gran variedad de categorías de elementos diferentes.

Buscadores

Los archivos se descargan directamente desde el sitio y la calidad de los mismos es excelente, muy bien diseñados y se encuentran fácilmente. Entiendo que quizás es un buscador nuevo, por lo que solo contiene 1500 archivos, pero con el tiempo, confío en que crezca y se convierta en un recurso de consulta constante.

Furnte kabytes.com

Conversor de fuentes online con freefontconverter



Muchas veces necesitas cambiar de formato de fuente al usar plataformas distintas para conseguir una mayor compatibilidad, prueba freefontconverter.



freefontconverter es un conversor online con el que podrás convertir fácilmente los formatos de fuentes más populares, TrueType (. ttf), OpenType (. oft) y PostScript (. ps) también ofrece soporte a otro tipo de formatos.


Puedes añadir la fuente de que dispongas para convertirla rápidamente al formato que desees, es fácil y rápido y podrás añadirlo según la plataforma con la que trabajes.

Fuente blog.estudiosinnova.com

Preguntas y respuestas sobre sitemaps de vídeo



Para aquellos que no pudieron asistir, aquí os traemos un resumen de la sección de preguntas y respuestas de nuestro seminario web sobre los sitemaps de vídeo que realizamos hace varios meses.

Nuestro seminario web trató los aspectos básicos de los sitemaps de vídeos y las prácticas recomendadas; prácticamente todo lo que necesitas saber cuando envías un feed de vídeo.


1. ¿Se puede alojar el código fuente/contenido del vídeo (tal vez un proveedor de terceros) en otro sitio? Por ejemplo, ¿puedo alojar mis vídeos en YouTube y optar al tráfico de la búsqueda de Google Videos?



Sí, puedes usar un servicio de terceros para alojar vídeos. Solo es necesario que la página de reproducción (la URL en la etiqueta <loc>) esté en tu sitio. <video:content_loc> y <video:player_loc> pueden incluir direcciones URL en un sitio o subdominio diferente.



Por ejemplo, este es el fragmento de un sitemap de vídeo válido que muestra contenido alojado en un subdominio diferente de la página de reproducción:





<url>

<loc>http://www.example.com/videos/some_video_landing_page.html</loc>

<video:video>

<video:thumbnail_loc>http://www.example.com/thumbs/123.jpg</video:thumbnail_loc>

<video:title>Grilling steaks for summer</video:title>

<video:description>Alkis shows you how to get perfectly done steaks every time</video:description>

<video:content_loc>http://video-hoster.example.com/video123.flv</video:content_loc>

<video:player_loc allow_embed="yes" autoplay="ap=1">http://www.example.com/videoplayer.swf?video=123</video:player_loc>

</video:video>

</url>




2. Si uso YouTube para alojar mis vídeos, ¿puede Google verificar si soy el propietario legítimo?



En estos momentos no hay ninguna funcionalidad que te permita, como la persona que sube los vídeos, verificar que eres el propietario de un vídeo. La autoría es un problema complicado en la Web. No solo lo es para los vídeos, sino que también lo es para todos los tipos de contenido.



3.Puesto que YouTube pertenece a Google, ¿deben los usuarios que insertan vídeos de YouTube seguir enviando sitemaps de vídeo o ya no es necesario?



Google trata YouTube como cualquier otra fuente de contenido de vídeo, aunque no es necesario que envíes un sitemap de vídeo si solo deseas indexar tus vídeos alojados en YouTube. Sin embargo, si usas YouTube como una plataforma de vídeo online (es decir, con páginas de reproducción en tu propio sitio), entonces sí recomendamos un nuevo envío de sitemaps.



4.¿Cuánto tarda Google en aceptar y verificar un sitemap de vídeo?



El envío de sitemaps de vídeo es un proceso que consta de dos partes:

1.Cogemos el sitemap y lo analizamos en búsqueda de errores sintácticos. Esto ocurre en pocos minutos.
2.Cogemos los activos a los que se hace referencia en el sitemap, ejecutamos comprobaciones, validamos los metadatos, hacemos otras cosas y, por último, indexamos el vídeo. El tiempo necesario para ejecutar este paso depende del sitio y de la carga de nuestro sistema.
5.¿Qué etiquetas y categorías son más importantes en sitemaps de vídeo o mRSS? ¿Debo crear mis propias categorías o hay una lista a la que me debo adherir?



En estos momentos, los metadatos más importantes que deben incluirse son el título y la descripción. Ambos son obligatorios. La etiqueta de categoría es opcional y no hay ninguna lista de selección.



6.¿Debo usar HTML5 para utilizar sitemaps de vídeo? ¿Ayuda HTML5 con el descubrimiento? O, si mi sitio es compatible con HTML5, ¿es necesario que envíe un sitemap de vídeo?



Ninguno de los principios de la búsqueda de Google Videos cambia con HTML5. Seguimos recomendando usar un sitemap de vídeo independientemente de las marcas de tu sitio. HTML5 puede resultar útil, ya que etiquetas como <video> facilitan a nuestros sistemas la verificación de la existencia del vídeo en la página.



7.Si uso un marco ('iframe') en lugar de insertar mis vídeos, ¿podrá Google encontrarlos?



No recomendamos el uso de marcos para insertar contenido de vídeo en tus páginas.



8.¿Puedo tener varios vídeos en una URL?



Sí, puedes. Sin embargo, sabemos que no es la mejor opción para los usuarios. Cuando un usuario hace clic en un resultado de búsqueda de vídeo, a menudo no le gusta tener que buscar el vídeo correcto entre varios vídeos en la página resultante.



9.¿Debo crear específicamente un archivo robots.txt que habilite el robot de Google o solo debo asegurarme de que el robot de Google no esté bloqueado?



Solo tienes que asegurarte de que el robot de Google no esté bloqueado.



10.He añadido una miniatura, pero no se usa. ¿Crea Google sus propias miniaturas a partir de mis vídeos?



Procuramos siempre usar la miniatura añadida por el usuario si ésta es válida. Si no lo es, intentamos generar una miniatura nosotros mismos. Recomendamos añadir miniaturas que tengan un tamaño de al menos 120 x 90 píxeles. También aceptamos distintos formatos de miniatura, como PNG y JPEG.



11.¿Está limitado el tamaño del archivo de los vídeos?



En estos momentos no hemos impuesto ninguna limitación al tamaño del archivo de los vídeos para contenido remitido a través de sitemaps de vídeo.



12.¿Hay alguna forma de incluir una transcripción o subtítulos cerrados en un vídeo?



En estos momentos no la hay, pero puede que la haya pronto.



13.Si utilizo Lightbox o una ventana emergente para mostrar un vídeo, ¿se puede indexar?



Depende del caso y cómo se represente, pero si es importante para ti que los motores de búsqueda lo indexen, éste no es el método más seguro. En el Centro de asistencia de webmasters explicamos que “cuando diseñas tu sitio, es importante configurar las páginas de vídeo sin un ajuste de Flash o JavaScript excesivamente complejo”. A menudo, para los robots, la opción más sencilla es la más segura.



Publicado por Maile Ohye, Developer Programs Tech Lead

Fuente googlewebmaster-es.blogspot.com

3 opciones de cajas de notificación para Photoshop


Es usual y más en este último tiempo, encontrarse con cajas de notificación que avisan diversas cuestiones, en especial en acciones que refieren a procesos, por ejemplo: registros, cargas, incluso muchos sistemas nuevos para agendar proyectos o tareas realizadas.

Los cuadros de diálogo de este estilo son útiles para recordar campos obligatorios faltantes, o que el usuario no está disponible, si hacen memoria se darán cuenta que son mucho más comunes de lo que pensábamos.

Recursos gráficos para Photoshop

Descargar 3 different styles of notification boxes | DownloadPSD

Y aquí hay un archivo para Photoshop con tres modelos diferentes de cuatro cajas de notificación, verán que incluyen: información, advertencia, error y éxito, en los cuatro colores típicos. Obviamente se pueden personalizar ya que utilizan tipografía genérica.

Fuente kabytes.com

Diseño de una perfecta pagina de destino


En kissmetrics nos muestran el diseño de una perfecta Landing Page (página de destino), en nuestro wordpress el fichero single.php.



  • Titulares de la página
  • Titulares limpios y concisos
  • Gramática impecable
  • Indicadores de confianza
  • Usar Strong para llamar la atención
  • Los botones y acciones deben destacarse
  • Los enlaces deben ser sencillos y accesibles
  • Imagenes y vídeos relacionados
  • Mantenerse siempre arriba
  • Test

Clickar en la imágen para verla en grande

Fuente tectonilogia.com

10 Extensiones de Firebug que deberias conocer


Logo Firebug

Si estas en el mundo del Desarrollo Web, es muy probable que ya conozcas Firebug.

Este popular plugin de Firefox nos permite, entre otras cosas, hacer debug del Javascript, cambiar el CSS de tus paginas en tiempo real y ver el trafico de red de tu pagina.

Pero aparte de lo que viene de serie, Firebug nos permite añadirle funcionalidades a traves de extensiones. Algunas de estas extensiones se estan convirtiendo en imprescindibles para muchos diseñadores y programadores web.

Asi que aquí os dejo una lista de las 10 extensiones para Firebug que más utiles me han sido en los ultimos años:

1.- PixelPerfect


Screenshot de PixelPerfect

La herramienta perfecta para los diseñadores y para los obsesivos del pixel perfectamente colocado (conozco yo a unos cuantos).

Te permite poner como fondo semi-transparente el diseño de tu página web, de forma que luego puedes ajustar el CSS para hacer tu maquetado “pixelarmente” perfecto.

Descargar PixelPerfect

2.- YSlow


Screenshot YSlow

YSlow analiza tu sitio web y te muestra un informe de su rendimiento. En este informe sugiere mejoras que puedes acelar para acelerar la carga de tu página.

El analisis que hace YSlow está basado en las reglas que sugiere Yahoo para webs de alto rendimiento desde su Developer Network.

Descargar YSlow

3.- CodeBurner


Screenshot CodeBurner

CodeBurner te permite acceder desde Firebug al material de referencia de HTML y CSS de SitePoint http://www.sitepoint.com/.

Te muestra un pequeño informe con la posibilidad de acceder a la descripción detallada de la propiedad CSS http://reference.sitepoint.com/css o del tag HTML http://reference.sitepoint.com/html seleccionado

Descargar CodeBurner

4.- FireQuery


Screenshot FireQuery

Con este complemento de FireBug podras ver desde la consola o desde el inspector de DOM tus expresiones jQuery (eventos, data, colecciones).

Imprescindible si quieres depurar Javascript bajo jQuery.

Descargar FireQuery

5.- Widerbug


Screenshot Widerbug

Con esta extensión instalada podras ver Firebug como panel lateral del browser lo que nos permite aprovechar el ancho de las pantallas panorámicas.

Simple pero efectivo, no?

Descargar Widerbug

6.- FireCookie


Screenshot de FireCookie

Con esta extensión podras ver y manejar las cookies desde Firefox de una manera sencilla.

Descargar FireCookie

7.- FireRainbow


Screenshot de FireRainbow

FireRainbow colorea tu codigo y te permite aplicar diferentes temas. Muy util sobre todo para la lectura del código JavaScript desde Firebug.

Descargar FireRainbow

8.- FirePHP


Screenshot FirePHP

Te permite comunicarte con la consola de Firebug desde PHP. Ideal para debuggear desarrollos PHP con llamadas AJAX.

Descargar FirePHP

9.- Jiffy


Screenshot de Jiffy

Esta extensión añade un panel a Firebug que te muestra de forma visual los tiempos de ejecución del JavaScript. Perfecto para analizar el rendimiento de tu JS.

Descargar Jiffy

10.- FireFinder


Screenshot de FireFinder

Con esta herramienta podras localizar rapidamente los elementos HTML de tu paginas mediante selectores CSS o expresiones XPath.

Tambien te puede servir para chequear que tus selectores CSS estan accediendo a los elementos correctos.

Descargar FireFinder

Y hasta aqui la lista...

¿Que opinas de Firebug? ¿Y de estas extensiones? ¿Las has probado? ¿Alguna extension que no esté en la lista y que nos quieras recomendar?

Esperamos vuestros comentarios.

Enlaces y mas



Fuente pixelovers.com

03.- VideoTutorial del Curso de HTML5. Arrastrar y Soltar.


VideoTutorial Nº 3 del Curso de HTML 5 en el que vemos como aplicar arrastrar y soltar a elementos de nuestra página Web. Atributos HTML 5 de arrastrar y soltar; El Objeto dataTransfer; Creación de un proyecto completo de arrastrar y soltar; Atributos. 32 minutos.

Descargar en formato mp4
Descargar en formato m4v HD 720
Descargar vía iTunes
Feed Rss del Curso
Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial

Fuente illasaron.com

Cloud computing y Google Apss

Hace unos días he estado investigando acerca de la estabilidad de las aplicaciones web y como cada día más las aplicaciones web, sitios están apuntando más y más hacia la “Computación en la nube“ del inglés "Cloud computing".

¿Pero que es la nube?

La nube es un paradigma que permite ofrecer servicios de computación a través de Internet.


Bueno y de que viene todo esto, Google tiene un nuevo servicio Google Apss  de pago por supuesto, pero también cuenta con su versión gratuita, que la única diferencia notable que tiene con la versión Premium es la cantidad de cuentas que puedes crear para un domino que en la versión gratuita es de 50.

Ventajas al utilizar el servicio de email de Google Apss:

Google Apss cuenta con muchas opciones pero la que más me llamo la atención fue la del correo ya que te da la posibilidad de tener tu propia cuenta de correo empresarial pero usando la tecnología de Google, seguridad, espacio de almacenamiento, anti-span y todas las ventajas adicionales que tenemos cuando utilizamos una cuenta de google normal.

Supongamos que yo tengo un servicio de hosting en hosting.com que tiene su propio servidor de correo, podemos configurar para que utilize el servidor de correo de Google Mail y no el de nuestro hosting. Con esto ahorramos tráfico, que como todos sabemos el tráfico es dinero, seguridad, tener la certeza de que nuestro server estará disponible sin interrupciones.

Google ha publicado recientemente unas informaciones donde señala que su plataforma de correo electrónico estuvo disponible un 99,984% durante 2010.


Esto deja mucho que decir.

Google hace hincapié en que los sistemas de correo tradicionales están caídos una media de 3,8 horas al mes, lo que convierte la fiabilidad y estabilidad de Gmail en algo a tener en cuenta, más aun si consideramos que el servicio de correo electrónico de Google ha incorporado durante este tiempo hasta 30 nuevas características y añadido millones de usuarios activos.

Drupal Summit Latino 2011 – Lima, Peru






Por fin podemos anunciar oficialmente el lanzamiento del mayor evento Drupal del año: "Drupal Summit Latino – Lima 2011".


Lima (Perú) alojará el primer evento a nivel latinoamericano dedicado a Drupal los días 27, 28 y 29 de Enero de 2011.


Habrán 36 conferencias dictadas por reconocidos y experimentados drupaleros provenientes de varios países de América Latina, Estados Unidos y Europa.


Se espera la presencia de más de 300 participantes lo que será sin duda alguna, a nivel continental, la mayor concentración jamás vista de experiencia y conocimiento sobre el software de publicación de sitios Web más exitoso del momento: Drupal por supuesto!

Concurso Drupal en tu vida


El evento será la oportunidad de premiar a la mejor fotografía Drupal del año en nuestro continente. El ganador será elegido por la comunidad en el sitio del evento y será premiado con un pack de libros en castellano de la colección Aprende Drupal 6 (Inicial + Intermedio + Avanzado) de FORCONTU.


Así que ingresa al sitio del evento - ! PARTICIPA y GANA !


Keynotes


Como si fuera poco, tendremos también 3 KEYNOTES de infarto!
Fran Gil (España), Felix Delattre - xamanu (Alemania) y Fernando P. García – develCuy (Perú) nos hablarán de los temas más candentes del presente y del futuro de Drupal.


! Eso sí que no te lo puedes perder !


Sorteo Curso On-Line FORCONTU durante el evento


Además durante el evento, se sorteará entre todos los participantes un curso integral online de creación y gestión de portales web con Drupal 6 (300 horas de formación online tutorizada, en un período de 5 meses) de FORCONTU.


No pierdas esta increíble oportunidad ! inscríbete ya !

Fuente buayacorp.com

02.- VideoTutorial del Curso de HTML5, API Canvas


VideoTutorial Nº 2 del Curso de HTML 5, en el que vemos el trabajo con la API Canvas. Dibujar líneas y figuras; Rellenar figuras geométricas; Dibujar con Curvas Bezier; Dibujar con Curvas Cuadráticas; Dibujar Arcos; Dibujar Textos; Incluir Imágenes; Dibujar sobre Imágenes; Incluir gradientes; Crear animaciones en Canvas. 30 minutos.

Descargar en formato mp4
Descargar en formato m4v HD 720

Descargar vía iTunes

Feed Rss del Curso

Descargar en formato m4v(iPod, iPhone, iPad...).
Descargar archivos de prácticas del videotutorial

Fuente http://www.illasaron.com/html/modules.php?name=News&file=article&sid=5305

BrowserShots, comprueba la compatibilidad de tu web

BrowserShots este sencillo servicio gratuito, que nos da la posibilidad de realizar test para comprobar la compatibilidad de nuestras aplicaciones en cualquier navegador web e incluso de diferentes versiones y sistemas operativos.

Básicamente lo que hace es generar capturas de nuestro diseño web y nos da la opción de guardarla.

El funcionamiento es sencillo, simplemente tenemos que enviar la url y las configuraciones de Flash, Java, JavaScript o resoluciones de pantalla. Posteriormente el sistema hace todo lo demás, abre las direcciones, realiza las capturas de pantalla correspondiente y la sube a los servidores de BrowserShots dándonos la posibilidad de descargarlas o ver el aspecto que tienen online.

El manejo de BrowserShots es muy sencillo, simplemente hay que enviar la URL de nuestro site junto con otras configuraciones como Flash, Java,JavaScript o resolución de pantalla, para que un número de computadoras distribuidas, abra la dirección, haga las correspondientes capturas de pantalla y las suba a los servidores de BrowserShots desde donde podremos revisarlas.

20.- Curso de PostGres. Triggers final.

Continuamos con el video tutorial de PostGres, terminando el tema de los triggers con un ejercicio más complejo que refleja la acescencia de este ejemplo que nos ofrece, tambien se refleja la importancia de porque tenemos que utilizar los esquemas en nuestras bases de datos para categorizar nuestra información de forma ordenada con PostGres, son aproximadamente 45 minutos."

01.- VideoTutorial del Curso de HTML5


Primer VideoTutorial del Curso dedicado al nuevo Estándar Web, HTML5. Empezamos indicando las principales novedades que presenta, su integración con JavaScript, y empezaremos a trabajar con el nuevo elemento Canvas, creando un lienzo y empezando a introducir figuras en el mismo. 20 minutos.

jQuery cumple 5 años y lo celebra liberando jQuery 1.5 Beta 1


jQuery cumple hoy, 14 de enero de 2011, 5 años de vida, y sus desarrolladores lo celebran liberando jQuery 1.5 Beta 1. Y no sólo eso, planean sacar la versión candidata en 10 días y la versión final antes de finalizar el mes.

¿Qué novedades tenemos? Se ha reescrito por completo el módulo Ajax. Se considera el cambio más significativo en esta versión, ya que brinda numerosas mejoras en el desempeño, estabilidad y características de $.ajax.

Para leer la lista completa (¡y extensa!) de cambios, mejoras y corrección de errores (bug fixes), los invito a leer el anuncio oficial.

Para descargar jQuery 1.5 Beta 1, usen los siguientes enlaces directos:


Fuente: gespadas.com

El Logo Oficial de HTML5




Así es, HTML5 ya tiene Logo Oficial y nos comparte una estrategia de posicionamiento. En su sitio web encontrarán diversas variantes del logotipo para descargar, ahora es la punta de la pirámide de la W3C.
Hay camisetas, pegatinas, y hay un generador automático de badges. Cosas tangibles, elementos digitales. Y todo en la página más muy original, con herramientas y estándares que apuntan hacia el futuro de la web.

VideoTutorial 20 del Curso de PHP y MySQL


Este es el VideoTutorial 20 del Curso de PHP y MySQL .
Primero que todo aclaro que durante el video digo que Netbeans es para trabajar con java y no con ajax como dije durante el video. Comenzamos un bloque dedicado al trabajo con ajax. Analizaremos qué es Ajax, en qué consiste, y que nos permite hacer. Revisaremos cómo trabajar con el objeto HTTPREQUEST, y analizaremos su funcionamiento.
Estudiaremos sus distintos atributos, por ejemplo open , onreadystatechange , readyState , status . También veremos cómo recibir los datos procesados desde el servidor usando responseText y responseXML .
Finalmente veremos cómo aplicar una barra de precarga en nuestras consultas ajax al servidor, usando la función de PHP sleep() .
Todo en casi una hora.





Ver directamente en blip.tv! 
Descargar en formato avi
Descargar vía iTunes
Descargar en formato m4v(iPod, iPhone, iPad...). 
Feed Rss del Curso
Descargar proyecto (código, video)

Fuente cesarcancino.com

Como cargar/subir imágenes con TinyMCE


Bien parece mucho tiempo que no posteo, el trabajo seglar me privan de este gusto. Pero ya que encontré un tiempito, y además con el fin de contestar uno de los tantos correos y comentarios de los fieles visitantes, me anime a postear acerca de cómo subir/cargar imagenes con la ayuda de TinyMCE.

Seguramente conocen TinyMCE, el editor web WYSIWYG por excelencia, muy usado en WordPress para su contenido back-end. Este editor esta disponible para descarga gratuitamente. Algunos componentes adicionales como un administrador de imágenes y archivos tienen un costo monetario. Ahora con la ayuda de WordPress y otros CMS quizas no tengamos que pasar por el proceso de instalar y configurar TinyMCE. Sin embargo si, como yo, surge un proyecto web en el que el usuario nos pide que su aplicacion web contenga un editor de contenidos, entonces podemos hacer uso de TinyMCE. La configuración para su funcionamiento es fácil y sencilla.

Pero ahora vamos al grano. TinyMCE tiene la opción de hacer uso de plugins para darle potencia al editor. Por defecto TinyMCE no trae una opción para subir imágenes al servidor. Solo nos muestra una botón que llama una ventana para incluir imagenes en el contenido especificando su URL. Pero queremos el adicional de subirla. Veamos:

¿Qué debemos hacer?


Vamos por pasos y asi no nos perderemos. Asumimos que ya tienes el TinyMCE configurado en tu servidor:

  1. Descargar el plugin PHP Image Upload.
  2. Descomprime y el directorio phpimage copia y pega en el directorio plugins de tiny_mce (donde esté instalado)
  3. Dentro de phpimage ve a config.php y edita los siguiente:

    1. //Comenta esta lineas  
    2. //$_cur_dir = getcwd(); if ($_cur_dir == FALSE) { $_cur_dir = dirname($_SERVER['SCRIPT_FILENAME']); }  
    3. //$_cur_dir = $_cur_dir.'/../../../..';   
    4.   
    5. //Y copia y pega la de abajo  
    6. $_cur_dir = $_SERVER['DOCUMENT_ROOT'];   
    7.   
    8. //Por defecto el directorio donde irán a parar las imágenes es raiz/uploads/images.   


  4. Ahora ve al archivo index.php (u otro similar) donde está la configuración para referenciar a TinyMCE.
    En la línea opción relative_urls:false, configuramos para que la URL de la imagen sea de formato /upload/images/imagen1.jpg y no de esta otra forma ../upload/images/imagen1.jpg. Así no tendremos problemas desde donde se llame a la imagen.
    En la línea theme_advanced_buttons1, donde especificamos que botones aparecen en el editor cambiamos image por phpimage, para mostrar la ventana del Subir Imagen.

    1. <script type="text/javascript" src="tiny_mce/tiny_mce/tiny_mce.js"></script>  
    2. <script language="javascript" type="text/javascript">  
    3.     tinyMCE.init({  
    4. relative_urls: false,  
    5.         mode : "textareas",  
    6.         plugins : "phpimage",  
    7.         theme : "advanced",  
    8.         theme_advanced_toolbar_location : "top",  
    9.         theme_advanced_toolbar_align : "left",  
    10.         theme_advanced_statusbar_location : "bottom",  
    11.         theme_advanced_resizing : true,  
    12.         theme_advanced_resize_horizontal : false,  
    13.         theme_advanced_buttons1 : "bold,italic,strikethrough,separator,styleselect,formatselect,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,phpimage,separator,code",     
    14.         theme_advanced_buttons2 : "",  
    15.         theme_advanced_buttons3 : "",  
    16.         content_css : "tiny_mce/estilo_editor.css",  
    17.     });  
    18. </script>  

  5. Finalmente cuando carguemos nuestro editor y le demos clic en el botón imagen veremos esta ventana. Listo para cargar e insertar nuestras imagenes.
    phpimage

Espero le sirva la información.

Fuente ribosomatic.com

¿Crear sitios usables? Piensa en móviles primero

Un buen diseñador/maquetador web sabe que crear un site no es sólo cuestión de colocar elementos aquí o allá para que quede bonito. El mundo web es bastante más complejo que eso y cosas como la accesibilidad, usabilidad, semántica y SEO (y no estoy hablando de personas/empresas que te prometen colocar tu sitio de primero en Google en dos días) son elementos fundamentales, no sólo para que tu sitio se llene de visitas sino, más aún, para que esas visitas vuelvan y se conviertan en fieles.

Lamentablemente, es muy común ver que estas cosas son ampliamente ignoradas, a veces por tiempos de entrega que se mueven entre lo mediocre y lo imposible, clientes que sólo quieren un sitio igualito a aquel, o simplemente por no considerar la verdadera importancia que tienen los aspectos arriba mencionados en el mundo web. Muchas veces esto ocurre porque olvidamos que el verdadero objetivo de un sitio web no es crear una especie de tarjeta de presentación en internet sino un medio de comunicación entre el cliente y su mercado. Esto no me parece una consideración menor, al contrario, comprender el objetivo final es algo vital a la hora de pensar en el producto en el que estás trabajando.

Ahora mismo nos encontramos en uno de los momentos más excitantes de la tecnología, posiblemente desde la aparición en escena de la web social (conocida también como web 2.0): HTML5, Flash en dispositivos móviles y televisores, tablets, smartphones y un largo etcétera que hace que nuestras ideas sobre nuevas formas de hacernos millonarios comiencen a surgir a borbotones y nuestra cabeza explote con las nuevas cosas que queremos y debemos aprender sólo para mantenernos al día.

Creo que es en momentos como éste donde debemos recordar lo aprendido y no olvidar cosas como la usabilidad o accesibilidad justo en el momento en que se vuelven más importantes, sobre todo teniendo en cuenta que dispositivos como los smartphones y tablets nos exigirán repensar una y otra vez sobre nuestras aplicaciones y el modo como nuestros usuarios interactuarán con ellas. Estoy convencido que la idea de “trasladar la experiencia de la PC a los nuevos dispositivos” no es la forma más acertada de entender el futuro de la web.

Piensa en móviles primero



Crear sitios específicamente para móviles no es una idea novedosa (¿recuerdan el protocolo WAP?), pero la aparición de dispositivos móviles con cada vez mayores capacidades le ha dado un nuevo auge, aún cuando creo estamos lejos de ver lo que realmente pueden llegar a ser. En el nuevo mundo móvil tenemos browsers de verdad, mayor capacidad, Wi-Fi, etc. que nos da todo un nuevo abanico de posibilidades.

Sin embargo, no podemos olvidar que estos dispositivos no disponen de las ventajas que nos da un computador personal, ya sea en términos de resolución de pantalla, velocidades de conexión, etc. lo que nos obliga a crear una interfaz que funcione específicamente dentro de estas limitaciones.

Eso significa que, en miras de hacer un proceso escalable y siguiendo los patrones del Progressive Enhancement, lo ideal será pensar primero las interfaces con mayores limitaciones y luego aumentar las prestaciones a medida que los recursos aumentan: móviles primero, luego tablets y de allí a la PC.

Claro que siempre existe la posibilidad de que el proyecto en el que vas a trabajar no contemple móviles y entonces te preguntes ¿y para qué voy a diseñar para móviles entonces? Bien, dos respuestas: 1.- Deberías proponer a tu cliente la posibilidad de tener una versión para móviles (antes que a alguien más se le ocurra). 2.- Aunque no vayas a crear una versión móvil, pensar en términos de móvil te permitirá desarrollar ciertas habilidades que mejorarán tu producto en áreas como usabilidad y jerarquía de contenidos.

¿Qué implica diseñar para móviles?


Obliga a enfocarse en lo verdaderamente importante:


Dadas las limitaciones que tenemos en un dispositivo móvil (tamaño de pantalla, velocidad de conexión, etc.) es indispensable aprender a jerarquizar la información ¿qué es realmente lo que queremos que nuestros usuarios sepan? ¿Cuáles de los servicios que nuestro sitio ofrece son realmente usados como para aparecer de primero en nuestra lista de jerarquía? ¿Realmente es útil darle la bienvenida con un lindo texto de presentación o es mejor mostrar de una vez aquello que los usuarios realmente buscan en nuestro sitio?

Para ilustrar mi punto, quiero citar Steve Krug, en su ya clásico libro sobre usabilidad web: Don’t Make Me Think:

Steve Krug :

A veces la gente me pregunta:

“¿Qué es lo más importante que debería hacer si quiero asegurarme de que mi sitio es fácil de usar?”

La respuesta es simple. No es “Nada importante debería estar a más de dos clics de distancia”, o “Habla en el lenguaje del usuario”, o siquiera “Sé consistente”.

Es…

“¡No me hagas pensar!”

He estado diciéndole a la gente por años que ésta es mi primera ley de usabilidad. Y mientras más páginas web veo, más me convenzo.


Diseñar un sitio específicamente para móviles nos obliga a entender al usuario, a saber qué es lo que busca en nuestro sitio y darle justamente eso. Es imprescindible que sepamos enfocar nuestro sitio en aquello que realmente queremos mostrar al usuario o aquello que sabemos que realmente quiere de nosotros, desechando aquellas cosas que, por interesantes que puedan ser desde nuestro punto de vista, resulten secundarias o poco importantes para él.

Hace fundamental conocer al usuario final


Uno de los principales problemas que enfrentamos con nuestros clientes es que, por lo general, no piensan en sus usuarios a la hora de crear el sitio web, haciendo solicitudes que responden básicamente a una mezcla entre sus gustos personales (o los suyos, los de su pareja, los de sus socios, etc.) y las cosas que desea que el sitio muestre sobre su producto. La mayoría de las veces esto se traduce en un montón de información (muchas veces innecesaria y sin importancia para el usuario final) combinada con una serie de pautas estéticas tomadas de otros sitios web: la galería de acá, la animación de allá, el fondo de más allá… Una especie de Frankenstein hecho a la medida de quien solicita la página pero que poco o nada tiene que ver con quien realmente debería interactuar con esta información.

Cuando las limitaciones propias de los dispositivos móviles nos obligan a prescindir de aquello que no es realmente necesario, conocer al usuario, sus preferencias, su comportamiento se convierte en algo vital. Si le damos sólo aquello que no necesita, si no entendemos qué es prioritario para él, si no nos preocupamos del modo como se comportan los usuarios cuando navegan desde un dispositivo móvil, nuestro sitio será un fracaso. No lo olvides, un sitio web es exitoso si es redituable, de lo contrario sólo es una pérdida de dinero.

Se hace entonces más evidente que a la hora de desarrollar nuestra idea, conocer al usuario final y actuar en consecuencia marca la diferencia entre el éxito y el fracaso de nuestro proyecto.

Nos obliga a presentar un buen producto, incluso con recursos limitados


Por supuesto, cada vez que yo digo smartphone, lo más probable es que pienses en iPhone, Android o Blackberry, por decir lo común, y eso está muy bien si estamos pensando en lo que será el mundo móvil dentro de unos dos o tres años, pero hoy mismo, este mercado apenas abarca una fracción del mundo móvil en general y no hace falta tener un smartphone para acceder a la Mobile Web, por supuesto, un teléfono móvil no-smartphone tiene aún más limitaciones que un smartphone. Se hace necesario mostrar un producto que sea atractivo y –sobre todo– efectivo incluso con recursos muy limitados. Esto, aunque requiera un mayor esfuerzo en planificación, resultará en un producto más veloz y óptimo.

En conclusión, hacer el cambio de paradigma de móviles a PC en vez de PC a móviles no sólo nos prepara para el futuro cercano en el que desarrollar sitios optimizados para estos dispositivos no será simplemente un lujo de grandes empresas sino una necesidad real del mercado sino que además nos permite hacer un necesario ejercicio de arquitectura de la información en pro de un producto más efectivo y usable.

Estas son sólo algunas de las consideraciones personales que me motivan a exponer la idea de diseñar para móviles primero, si les parece interesante esta idea y quieren profundizar en ella, el primer lugar donde deberían buscar información es en el sitio de Luke Wroblewski, promotor de la idea de Mobile First! y que además agrega otras razones a las acá expuestas (excepto en el caso del enfoque, que también hemos tratado acá). Hay mucha más información al respecto allí y deberías revisarla.

Mucho queda por decir y aprender respecto a este tema, por supuesto, así que tendremos que volver a ello en posteriores artículos.

Fuente cristalab.com

Twitter Delicious Facebook Digg Stumbleupon Favorites More