< Jose Llinares />
Llevaba tiempo queriendo reivindicar el diseño de prototipos a la hora de implementar un site, este gran artículo de Sopa de Píxels sobre técnicas de prototipado es el pretexto perfecto para hacerlo.
La mayor parte de mi tiempo laboral la dedico al desarrollo web y es sorprendente la poca organización y planificación de algunos proyectos en los que he trabajado.
El tiempo de análisis y prototipado se convierten en partes mínimas en caso de que existan… Cuantas veces me he encontrado programando algunas funcionalidades sin tener una visión general de la aplicación, sin saber que información exacta se tendrá que mostrar, sin saber si habrá una paginación, si se incluirá una foto…
Muchos de los responsables de realizar proyectos web consideran que el tiempo de sus empleados está mejor invertido programando funcionalidades que probablemente no sean necesarias que “perdiendo” el tiempo dibujando y pegando papelitos.
Una buena definición no sólo de las funcionalidades de una aplicación, sino de su interfaz (que es la que dota de sentido a las funcionalidades) es el camino hacia una aplicación útil y bien diseñada. Una vez tienes claro a donde quieres llegar, construir la escalera es fácil y sobre todo esa escalera será sólida y resistirá mucho peso. Y no debemos olvidar que estos prototipos también nos ayudan a comprender la interacción, algo que por lo general los diseñadores convencionales dejan de lado.
Cuantas horas podríamos haber ahorrado si en nuestro prototipo hubiéramos decidido donde insertar la publicidad, la paginación, como mostrar la información extendida.
Existen diferentes tipos de prototipado pero el prototipado en papel es sin duda el más útil. Las razones;
- Mantenerte alejado del ordenador da un punto de vista más neutral y fresco.
- Si lo haces con partes intercambiables (post-it, recortables…) ver como funcionan los diferentes elementos se hace muy fácil.
- Todo el mundo puede tocar e intervenir, no es lo mismo que te digan sobre un photoshop “pon esto aquí” que hacerlo tú mismo con el prototipo.
- Todo es más fácil de cambiar en papel.
Aquí os dejo unos videos de Youtube donde además de ver prototipos en paple se puede ver el diseño de la interacción… si es que además de útiles son divertidos!!
Prototipo en papel para una aplicación de mail.
Prototipo en papel para una tienda on-line.
Charla a cargo de Javier Sanz de Adslzone.
Título: El nacimiento del website.
La importancia de elegir un contenido.
La importancia de elegir una plataforma. La página funcionaba con PHP NUKE, decidieron cambiar a Wordpress, esta plataforma en un proyecto tipo portal y con muchos usuarios no funcionó muy bien ,carga de los servidores, frente a PHP NUKE y PHPBB (funciona mejor).
En torno al 70% de las visitas de Adslzone provienen de Google.
Herramientas básicas para la gestión, Google Analytics (ver por donde entran y por donde salen!!), porque palabras eres buscado y webmaster tools.
Para el crecimiento de la web, es fundamental un alojamiento de calidad. No se debe cambiar cuando la página lento, hay que adelantarse.
Políticas de cacheo de contenido, mejorar el rendimiento de tu site.
Esquemas que permitan crecer a largo plazo. De sistemas más simples a más complejos (balanceador, dos servidores para la web, uno para el back-up…).
Crecimiento web y diseño
Diseño del website.
Claridad.
Usabilidad.
Espacio publicitario para formatos standard. Integrado en el contenido y pensar en estos espacios en el diseño.
Adaptado para todos.
Relevancia de la web.
El contenido, con tutoriales y noticias actualizados continuamente.
La importancia de los blogs en su estrategia de conocimiento. El que ofrece recibe.
Publicidad y rentabilidad.
Como primera herramienta es aconsejable Adsense, debido a su facilidad de integración, intentando cubrir gastos.
Email marketing. En este caso la opinión de Javier Sanz es que no les resultó muy rentable (con 100.000 usuarios!!).
Redes publicitarias. Adlink, TradeDoubler…
La rentabilidad es a largo plazo, en unos inicios los ingresos son mínimos, más tarde con mayor relevancia y conocimiento los ingresos suben.
Ojo con la posición de los banners y con el diseño, los anunciantes buscan páginas atractivas. Los datos de adslzone dicen que el formato más rentable es el robapaginas.
La temática es fundamental.
Pero es importante diversificar los contenidos, que generan más masa de contenido para buscadores y también contenido para la publicidad.
Javier cuenta sus problemas de marca en la web.
Por tanto debemos comprar la mayoría de dominios, ahorrará problemas y registrar la marca. Organización Mundial de la Propiedad Intelectual. Evitará problemas futuros (por sólo 10€ cada dominio).
Problemas y aspectos legales.
No tener los datos de contacto implica una sanción de 600€ a 60.000€ y dar de alta el fichero de BBDD.
Problemas con las opiniones de los usuarios registrados, que se hable mal de las empresa puede traer problemas, parece que borrar es la mejor manera de curarse en salud.
¿Como establce adslzone su CPM?
Depende del anunciante, las empresas relacionadas con la página pagan más.
Sobre el contenido, generar contenido es difícil y costoso, pero una vez te das a conocer y eres una referencia, la información te es enviada, las empresas te la envian.
Interesante. Tienen un tutorial como quitar la publicidad es su site, al final te debes a tus usuarios y los anunciantes saben contablizar que anuncios no se han enviado.
Conclusiones. Con esfuerzo y dedicación, es posible sacar adelante exitosos proyectos.
Con un día de retraso aquí esta mi resumen de la conferencia de apertura de Foro de Internet (lo siento, mucho cansancio y necesitaba poner notas en claro).
Presentación a cargo de Enrique Dans en el Foro de Internet 2008.
Título:La red en 2008: una visión personal.
La red comienza con una filosofía de apertura, basada en protocolos abiertos (http).
¿Que hechos han marcado la historia de la web?
Uno de los grandes hitos es la aparición de Amazon. Es la primera página adaptada a cada usuario basada en un sistema de recomendaciones), todo esto se daba ya por el 94, mucho antes de existir el concepto web 2.0.
Hot Wired (Wired). La aparición del primer banner (94), queda claro que viendo el panorama digital actual este momento es clave, es el principio de unas de las principales maneras de monetizar la web.
Ebay. La idea de mercado dinámico y precios variables. (95)
Google. 1998. La empresa que marca un antes y un después no sólo en Internet sino también en la historia de la información; ahora existe el AG (antes de Google) y DG (despues de Google). Google se basan en brokers de atención, genera atención en sus productos y la revenden a sus publicistas ya nicheados.
Napster. 1999. La web se convierte en el medio más eficiente para compartir información.
Blogger. 1999. Cambiando el modelo comunicación y haciéndonos entrar de lleno en la web 2.0. Los usuarios adaptan un papel activo y dejan de ser un elemento pasivo, independientemente del conocimiento tecnológico cualquier persona podía hacer una “web” sin conocimiento tecnológico.
Wikipedia. 2001. La creación de lo que se ha venido llamar el conocimiento colectivo.
Friendster. 2002. A pesar de su escasa importancia hoy en día Friendster fue la primera “red social”, la web también valía para hacer amigos y socializarte
Keyhole. 2001. Comprada por Google en 2004. Representa el boom de la geoweb, una web que nos situa en el espacio y casi conecta en “cyber” mundo con el mundo real.
Youtube. 2005. La generación de contenidos por usuarios (videos) hace de Youtube el canal audiovisual con mayor audiencia y potencial del mundo.
Facebook. 2007. Da un paso adicional en la creación de redes sociales, red social abierta, donde cualquiera puede desarrollar aplicaciones.
Y el momento actual, donde como al principio el espíritu de apertura parece ser el motor del futuro; Google con Open Social, intenta ofrecer una apetura mayor. Con Google Open social, las aplicaciones serán indedpendientes de las plataformas, escritas en el lenguaje estándar html (y no ffml, lenguaje propio de Facebook), además de permitir unos datos únicos utilizables en todos los sitios.
Estas nuevas ideas comienzan a llegar al mundo corporativo;
Ahora llega a la gran empresa, del blog como amenaza a correr blogs corporativos.
Funky Business y Cluetrain Manifesto se convierten en best-seller.
¿Con que amenazas se enfrenta la web?
La neutralidad de la web. La web en su naturaleza es neutral. El peligro de ser dominada por Empresas de tecnología con contenidos, no podemos hacer que las webs paguen en función del ancho de banda usado.
Privacidad. El problema del “Data retention”.
Evolución del copyright. No adaptadas a los buenos tiempos. SGAE, actuando como lobby en nuestros actos sobre internet.
Censura y la Justicia. La sobrelegislación es un peligro que puede limitar las posibilidades de desarrollo.
Protocolos cerrados (lease el modelo Microsoft).
Indiferencia. Mucha gente todavía no entiende el valor de Internet.
¿Qué oportunidades nos ofrece Internet?
Las plataformas. Piezas interconectadas.
Mash ups.. Aplicaciones formadas por diferentes aplicaciones.
Las tecnologías libres. Linux, Apache, PHP… son tecnologías con amplio crecimiento. Desarrollo de la mobilidad. Los móviles son un elemento muy extendido que pueden traer el acceso a Internet a una nueva ola de usuarios.
Conclusiones
La presentación incide en una serie de elementos, una serie de ladrillos que existen, con estos ladrillos nosotros tenemos que construir el futuro de la red, este uso que hagamos de ellos serán los que definen como será la web y el mundo del futuro.
——————
Aquí teneis otro enlace a la trancripción que Carlos Blanco (cuya charla fue tan divertida como interesante) hizo de la misma conferencia.
Conciertos Barcelona es una agenda musical con las actuaciones de las bandas de música que pasan por Barcelona y el culpable de que últimamente no escriba mucho por el blog. Basada en un “mash up” con Google maps, con una serie de funcionalidades básicas (pero muy útiles) pretende convertirse en un referente de la música en directo y los conciertos que se llevan a cabo en Barcelona. La aplicación permite:
1- Filtrar los conciertos por fechas
2- Obtener una representación visual (em el mapa) de donde se llevan a cabo conciertos en Barcelona.
3- Ofrece informaciones sobre festivales
4- Recomendaciones (con videos) de ciertos conciertos.
De momento nos encontramos en una versión 1.0. La idea del proyecto es continuar creciendo y ofrecer mayor número de posibilidades. Widgets, RSS, blog… pero bueno todo se andará, que de momento esto es por amor al arte.
En el equipo de Conciertos de Barcelona a parte de yo mismo están:
Marc Teixidó (a.k.a un-compressed) y Sheyla López encargados del diseño.
David Ayats (a.k.a Sinestesia) encargado de la promoción y de los datos.
Llevaba tiempo escribir un artículo sobre SEO para un desarrollador web, la clase que tuve con Rodrigo Miranda fundador de searchMedia en el “Master in Digital Advertising and Communication” (que está siendo genial hasta el momento) del Instituto de Empresa me ha servido como estimulante para por fin escribir este artículo.
Como conseguir que tu página web se posicione en buscadores desde un inicio depende en gran parte de como esté programada, sin duda un posicionamiento en las primeras posiciones es una inversión larga y costosa. Ahora bien programar bien para ayudar al posicionamiento es la misma inversión que programarla sin ayudar a dicho posicionamiento, por tanto este es un tema clave debido a la poca inversión y la importancia en los resultados.
1- Haz que tus etiquetas title sean dinámicas (con PHP o ASP por ejemplo). La etiqueta <title> es la etiqueta de mayor importancia, haz que incluya los términos para los que te quieres posicionar.
Un error frecuente es dejar una parte estática de esta etiqueta, el cambio del texto en ella variando las palabras es muy relevante. Las palabras más importante deben aparecer en las primeras posiciones.
2- Utiliza “headers” <h1> y <h2> … e incluye en ellos las palabras clave, utiliza las cabeceras más importantes para las palabras más importantes.
3- No olvides los textos para las etiquetas “alt” en las imágenes.
4- No olvides la etiqueta “title” para los enlaces < a xhref=”misite.com” mce_href=”misite.com” title”keywords”>, especialmente si es un enlace interno.
5- Genera enlaces internos y posiciona entre las etiquetas “a” de tu link texto relevante sobre tus palabras clave.
6- Pon las palabras clave en negrita.
7- Que tus recursos tengan nombres relevantes. Por ejemplo las imágenes del tipo “mikeyword.jpg” o “mikeyword.css”.
8- Utiliza css y deja el html lo más claro y sencillo posible.
9- Dota a tu código html de una estructura relevante, es decir que tenga un layout con sentido. Diferencia con capas las diferentes partes y utiliza nombres del tipo o <div id=”kewyord_menu”> o <div id=”keyword_content”>, todo tu html debería contener etiquetas relevantes que indiquen de que se trata (a esto se le conoce como dotar al html de un significado semántico). Pon tu texto entre <p> por ejemplo, utiliza <ul> y <li> para tu listados…
10- Revisa tu código a fondo. Un etiqueta mal cerrada, un javascript que no funciona o con errores pueden hacer que los “spiders” abonden nuestra página o la mal interpreten.
Estos consejos ayudan al posicionamiento web, pero no olvides que el SEO es algo más amplio, esto vendría a ser lo que un programador debería tener en cuenta si quiere hacer una página SEO-friendly… sobre backlinks, la importancia del contenido y demás… hablaremos en otro momento, si tenemos tiempo.
Las prediciones tecnológicas (Economist, El País, BBC) para el 2008 apuntan hacia los portátiles ultraligeros y en concreto hacia el Asus EEE PC (ver artículo en Gizmología) como uno de los productos con mayor proyección para este año que empieza, además se rumorea que el próximo bombazo tipo iphone de Apple será un ultraportátil.
Así pues la cantidad y tipos de dispositivos donde nuestras webs son y serán vistas se hace más complejo, la división entre ordenador y dispositivo móvil comienza a difuminarse y la idea de tener una versión web para móviles y otra para equipos de sobremesa comienza a resultar un tanto inútil y podría ser que debamos empezar a replantearnos algunas cuestiones.
En mi caso, siempre partía de un diseño adaptado a pantallas de 1024 x 768, pero es muy probable que me vea obligado a replanterme este punto de partida, el Asus EEE PC tiene una resolución de 800 x 480 (aquí podeis ver una simulación del navegador del Asus EEE) y sus futuros competidores rondarán esos números (probablemente algo más altos).También debemos tener en cuenta que es cuestión de tiempo que los reproductores mp3 como los nuevo ipod nano con vídeo (con pantallas de 320px x 240px) ofrezcan conexión a Internet (ya existen reproductores que lo hacen como el FreeCom MusicPal).
Así pues tendremos que ir aceptando una vez lo que el W3C nos lleva diciendo ya tiempo y que siempre nos hacemos los locos, diseños líquidos, flexibles y adaptables a numerosos soportes. Nuestros diseños no deben satisfacer sólo las necesidades actuales, sino sobre todo las necesidades futuras y el futuro nos indica una gran variedad de soportes que van desde pantallas de 24 pulgadas hasta la de 7 pulgadas del Asus EEE e incluso dispositivos más pequeños, la tendencia apunta a la portabilidad y con ella tamaños más reducidos.
El tema no parece de fácil solución, un único diseño que abarque desde los 1.920px X 1.200px de las pantallas de 24 pulgadas de Apple (y creciendo…) hasta los 170px X 200px de los dispositivos móviles se me antoja casi imposible, ahora bien ¿donde empieza la resolución de un dispositivo móbil en 320px X 240px? ¿No es esta una división arbitraria?¿Existe alguna manera de un único diseño para todos ellos?
Lo que si tenemos claro es que nuestras webs se tienen que ver bien independientemente del dispositivo en el que se ve, y que estos dispositivos son cada vez más diversos y que por tanto el éxito de nuestra web estará en que se pueda visualizar adecuadamente en todos ellos.
Leo en Leandono’s blog que IE8 ha pasado con éxito el el test acid2. Eso quiere decir que estamos cerca de que nuestro mayor quebradero de cabeza, ese sinsentido absoluto y completo como es la diferente visualización de nuestras páginas en función del navegador que utilizábamos… basicamente la mayoría cumplía unos estándares e IE hacía lo que quería como consecuencia de su posición de poder.
Esta estúpida tarea (contrastar la visualización entre los navegadores), puede llevar según mi experiencia a un incremento del tiempo de desarrollo de hasta el 20%, vamos una burrada para algo que en sí ya funciona. ¿Se imagina usted a un escritor reescribiendo su libro para adaptarlo a la versión de bolsillo, a la versión de tapas duras…? Todavía nos quedan unos años de sufrimiento, pero por lo menos se empieza a ver la luz al final del tunel.
Leo en programmable web que Google lanza una herramienta para crear gráficos incrustables en tu web, mandando una serie de datos via url la API de “Google Chart” devuelve un imagen (.png).
Les dejo el link al artículo para que amplien la información si lo desean. Mi primera impresión, es que puede ser muy útil.
1- No partas desde cero, ten una base sólida creada por cientos de programadores. Benificiate así de formar parte de una gran comunidad.
2- Ahorra tiempo y dinero. Tus horas como desarrollador valen dinero, aprovechalas al máximo. Partiendo desde wordpress obtendrás resultados inmejorables en tiempos muy cortos.
3- Cumple con los estándares. Los buscadores y muchos de tus potenciales clientes te lo agradecerán.
4- Ten tiempo para ocuparte de lo más importante, el contenido. El back-office de wordpress es un auténtico lujo, crear contenido será un placer. Tendrás tu web actualizada, un clásico siempre es tener información desfasada por falta de tiempo, con wordpress no hay excusas.
5- Incrementa tu número de visitas. Una web con información variada y actualizada permitirá que tus usuarios quieran volver a visitar tu site. Además las arañas de los buscadores te visitarán con más regularidad. Y siempre tendrás lasa posibilidad de las suscripciones con los rss generados automaticamente por wordpress.
6- Beneficiate de miles de funcionalidades extras, gracias a los cientos de plugins disponibles.
7- Obtén feed-back de tus visitas gracias al sistema de comentarios ya integrados.
8- Cambia tu diseño tan a menudo como quieras. Tienes cientos de diseños (”themes”), intercambiables en un sólo click. Aprende así trabajar con css, disfruta de un diseño ideal donde la presentación y el contenido están totalmente separados. Experimenta con tus css sabiendo que tu contenido está a salvo.
9- Aprende a programar de una manera diferente, ver código no programado por tí es una manera muy interesante de aprender a programar.
10- Personaliza e individualiza tu página cuando lo desees. Tienes todo el código y siempre puedes “retocar” aquello que quieras, de esta manera puedes adaptar la estructura de wordpress para que se parezca más a una “web clásica”, si además te sientes especialmente trabajador puedes desarrollar tus propios plugins y herramientas y obtener el prestigio de la comunidad de Wordpress.
