Webydo (webydo.com), la plataforma que permite a los profesionales del diseño crear y gestionar sitios web sin necesidad de programar, está invitando a la comunidad de lectores de WWwhatsnew.com a probar su solución de creación de animaciones con paralaje en una campaña a la que solo se puede acceder con invitación.
La función Parallax Scrolling Animator, en estado beta, ya ha sido probada por más de 2.000 usuarios que han tenido acceso a la misma (se acabaron los 2.000 accesos en 1,5 horas) y ahora están ofreciendo 8.000 más. Puedes solicitar tu invitación en este enlace. Date prisa, ya que se entregarán las invitaciones a medida que se reciban y se cerrará el acceso dentro de siete días.
Paralaje (parallax, en inglés) es el efecto que permite que objetos lejanos parezcan moverse más lento que los objetos cercanos, un efecto que se está utilizando últimamente mucho en el diseño de sitios web.
Generalmente es necesario conocer bastante sobre programación web para obtener este tipo de efectos, pero desde Webydo han creado un sistema que permite diseñar este tipo de webs sin necesidad de programar. Los sitios que usan paralaje necesitan una programación en la que se define el movimiento de cada elemento pixel por pixel, con trabajos que a veces tardan meses en completarse, por lo que disponer de un sistema que agilice este proceso es sin duda una buena noticia.
Lo que nos permite es crear animaciones con ilusión de profundidad, permitiendo que los elementos se muevan de forma individual a medida que el usuario baja por la página, podremos definir eventos a medida que se realiza scroll, así como definir caminos, opacidad, rotaciones y velocidad y será posible diseñarlo todo desde una interfaz visual bastante intuitiva, generando caminos de movimiento para cada elemento sin necesidad de programar nada.
Os hablamos de conceptinbox.com en 2013 y lo hacemos ahora al comprobar que la nueva versión es bastante más útil y flexible.
Se trata de una herramienta creada para facilitar el envío de diseños a nuestros clientes, plataforma que ayuda a centralizar el feedback de los mismos, teniendo así más control sobre los proyectos aprobados y los que necesitan alterarse para poder ponerse en producción.
Ofrece un sistema integrado de comunicación con los clientes para no depender del email, permite construir prototipos interactivos sin necesidad de programar (ideal para que el cliente entienda la «vida» del proyecto antes de que empecemos a realizarlo), genera listas de proyectos pendientes de revisión y aprobador, ofrece la posibilidad de crear notas sobre los dibujos, ayudando a determinar los puntos que deben ser alterados… todo desde la web, con extensión para Chrome disponible en chrome store, integrando nuestros trabajos con la cuenta de Google Drive.
La última versión fue lanzada en abril y anunciada en su blog destacando la posibilidad de hacer prototipos de aplicaciones de forma sencilla: solo tenemos que subir los diseños y seleccionar las areas en las que será posible interaccionar, permitiendo simular links entre un diseño y otro.
La versión gratuita está limitada en espacio y número de proyectos, aunque podemos contratar planes premium a partir de 14 dólares al mes.
Al igual que en la versión de escritorio desde hace algún tiempo, ahora, la nueva modificación del diseño de la versión móvil de la Wikipedia quiere poner mayor atención en aquellos editores que han contribuido en el desarrollo de los artículos.
Con ello, no sólo les otorgará el crédito que se merecen, sino además, facilitará a los visitantes el conocimiento de cuando se han realizado las últimas actualizaciones y quienes las han llevado a cabo de aquellos artículos que están visitando, incitando tanto a ellos como a los actuales editores a involucrarse en tener los contenidos de los artículos lo más actualizados posible, sin que los mismos caigan en la dejadez y el abandono.
La idea de este cambio comenzó a gestarse desde el pasado mes de septiembre, llevándose ahora a cabo, situando una barra de «última modificación» en la parte superior de la página, la cual tomará el color verde si el artículo que se visita se considera actual y recientemente editado, y gris cuando no ha recibido contribución alguna desde hace algún tiempo, sirviendo de señal para que se tenga en cuenta para su revisión y actualización.
Los visitantes también tendrán la oportunidad de conocer en profundidad a los editores que han hecho posible los artículos, pudiendo sobre cada uno de ellos conocer aquellos otros artículos en los que han contribuido, las imágenes que han subido, así como conocer a todos los editores que han participado en mismo artículo.
La Wikipedia es consciente de que su éxito se debe a los editores que, mediante sus contribuciones persistentes y desinteresadas, ha convertido a su plataforma en lo que es a día de hoy.
Continuamos con nuestra serie mensual de recursos gráficos y de desarrollo trayendo 50 nuevos recursos variados para salvar el preciado tiempo de diseñadores y desarrolladores. Toma asiento y disfruta de esta lista que te inspirará y te dará útiles ayudas para tus próximos proyectos.
Gráficos
En esta sección se encuentran trabajos de diseño que pueden ser usados en todo tipo de ambientes, web e impresos.
En esta sección se pueden encontrar como es usual, las mas recientes interfaces gráficas de usuario que sirven de inspiración en la creación de páginas y aplicaciones móviles.
En esta sección hay una lista con frescos temas de WordPress para usar directamente en tu sitio, y plantillas HTML y PSD para inspiración y desarrollo.
Por último, en esta sección se pueden encontrar algunos experimentos de código y plugins de jQuery para los desarrolladores en busca de novedosas caracteristicas para mejorar sus proyectos.
Probablemente a la mayoría nos sorprendió el importante cambio en el aspecto de los nuevos perfiles de Twitter y mucho más el enorme parecido con el diseño de Facebook quizá sacrificando un poco la simplicidad de su esencia y lo que le brindó tal popularidad. En fin, sea que nos guste o no, Twitter sigue siendo un referente en la web así que lo único que se puede hacer es adaptarse y exprimir al máximo sus nuevas características, y un excelente punto de partida nos lo dan en el blog de Buffer con algunos consejos de marketing en Twitter muy sencillos pero imprescindibles a partir de ahora.
¿Cómo activar los nuevos perfiles?
Por supuesto, para los que apenas se enteran, ahora está disponible una nueva versión para los perfiles de Twitter que cualquiera puede activar visitando about.twitter.com/es/products/new-profiles, pulsando en “Consíguelo ahora”, iniciando sesión de manera convencional y dando clic en “Actívalo”.
Ahora sí, las ideas para aprovecharlos:
1. Aprende de las mejores páginas de Facebook para diseñar la cabecera del perfil
La cabecera ahora se ha expandido para tomar protagonismo de la misma manera que lo toman las Timeline de las páginas de Facebook. Aprovecha al máximo el espacio, utiliza una imagen de alta calidad (1500×500 pixeles, así que no se puede simplemente copiar alguna de Facebook que son de 850×315), usa en lo posible una imagen original y edita los colores del perfil para que combinen con ella. Puedes poner una foto de tu equipo de trabajo, de tu local, tus productos y mucho más.
2. Fija un tweet que exalte una emoción
Un valioso detalle de los nuevos perfiles es que se puede fijar un tweet para que esté siempre por encima de cualquier otro tweet publicado. La idea es destacar tweets especiales, un tweet muy popular, con información sobre un evento, un anuncio importante, una segunda bio tuya o de tu marca con muchos más detalles y más visible, o simplemente, un tweet que exalte una emoción. Una frase positiva, graciosa, motivante, inteligente, crítica o hasta un dato curioso, pueden marcar la diferencia.
3. Comparte más fotos y videos
Sácale jugo a lo viral que se vuelven los tweets cuando incluyes contenido visual en ellos. A tener en cuenta: Se pueden subir hasta cuatro imágenes por tweet, los videos incluyen vista previa y se pueden reproducir dentro de Twitter, puedes valerte de Vine para los videos cortos (sólo publica el enlace al Vine para que se muestre automáticamente) y es importante que en los nuevos perfiles hay una completa sección en la que se dispondrá con un clic de todo el material gráfico que compartas.
4. Ten en cuenta la regla número 1 para las menciones
La clave de Twitter es su calidad de medio público, que lo que se escribe llegue a todo el mundo. Pues bien, en los nuevos perfiles no hay un espacio para tweets que comienzan con una mención (“@fulanito123 no olvides ir por la leche”), o si lo hay pero está relegado a la casi oculta sección “tweets y respuestas”. El problema está en que se toma como una conversación privada y que no es relevante para el público en general, así que si quieres destacar algún otro usuario dentro de un tweet y que todo el público lo vea de forma predeterminada, no empieces el tweet con el símbolo @.
Muchas gracias @IlluminaAgencia por los muchos retweets de nuestros artículos en @wwwhatsnew. Feliz fin de semana.
Con los nuevos perfiles la sección con los tweets marcados como “Favoritos” vuelven a tener una relevancia enorme pues están a disposición de todos con un sólo clic. Así pues, ten cuidado a lo que le pones “estrellita” y aprovéchalo sabiamente, por ejemplo, si es el perfil de tu empresa, marca como favoritos los tweets con comentarios, testimonios y recomendaciones de los clientes; Ahora, si lo tuyo es el compartir contenidos, marca los más importantes recursos que puedan ser de utilidad para tus fans.
¿Tienes algún consejo para añadir al listado? No dudes en dejarlo en los comentarios.
Velositey es una acción para Photoshop (Photoshop action) que busca facilitar la vida de los diseñadores o de cualquier otro que se ponga a la tarea de prototipar la plantilla de un sitio web mediante la popular herramienta de Adobe. Para esto, ofrece una barra de herramientas integrada a la interfaz de Photoshop con la que será posible ir añadiendo los diferentes elementos de su composición.
La barra flotante la conforman tres simples pestañas: Layout, Style y Tools. La primera recoge diseños predeterminados y opciones suficientes para definir la estructura y distribución de los diferentes elementos de la nueva plantilla: cabeceras (con o sin logo), sliders, la sección del contenido (especialmente sus columnas) y el footer (con diferentes modelos de disposición para sus bloques).
Ya en Style se definen más a fondo los detalles de cada elemento (guías, espaciamientos y algunos vectores) y en Tools se le dan los retoques finales (a menos que se quiera seguir con la edición de forma independiente) eliminando elementos innecesarios, especificaciones de fuentes, íconos extra y los detalles para su exportación en formatos rápidos (SVG, PNG y JPG).
Para descargar Velositey de forma gratuita hace falta publicar un tweet o crear una publicación en Facebook para recomendarlo a otros usuarios, sin embargo, esto se hace automáticamente con un par de clics. Está disponible para Photoshop CS6 y Photoshop CC. Las instrucciones de instalación y algunas notas importantes se encuentran en el archivo Readme.txt dentro de la carpeta comprimida descargada. Por si fuera poco es software libre y es compatible con Bootstrap.
En múltiples ocasiones nos hemos hecho eco de las novedades que nos ha ido ofreciendo la plataforma Codecademy desde su lanzamiento desde hace dos años, en el que más de 24 millones de usuarios están aprendiendo programación en diferentes lenguajes a través de su plataforma. Con la idea de facilitar el aprendizaje a sus actuales usuarios así como facilitar el acceso a los nuevos, Codecademy acaba de renovar su aspecto para ser más ágil e intuitivo, o como ellos mismos señalan en su blog, su plataforma ha sido «reimaginada».
Una de las principales razones de su «reimaginación» es por la incoherencia visual que disponía su anterior diseño, así que han empezado desde cero para ofrecer un lenguaje visual uniforme a lo largo de su plataforma. La otra de las razones es la búsqueda de la madurez de su propia marca, con la idea de hacerla más fuerte, atractiva, profesional y sofisticada. Los detalles del rediseño lo explican a través del propio blog, donde han empleado cuatro fases para llevarlo a cabo durante los últimos cuatro meses.
Además, Codecademy pretende que sus usuarios puedan adquirir habilidades y conocimientos participando en proyectos reales, entendiendo que es algo necesario para tener éxito en el lugar de trabajo de hoy, mostrando esta postura con una serie de ejemplos de como algunos de sus miembros han cambiado sus vidas gracias al uso de su propia plataforma.
Hace apenas un mes que Facebook anunció nuevos cambios y actualizaciones respecto a sus páginas, que daban la oportunidad de, por ejemplo, introducir nueva información personalizada en la columna izquierda, cambiar la localización de las aplicaciones, cambiar el modo en el que se visualizan los mensajes y varias opciones que se han ido actualizando en las distintas páginas de forma progresiva.
Junto a este cambio reciente, no implementado todavía en todas las cuentas, la red social introduce ahora nuevas opciones de personalización para administradores de páginas que quieran cambiar o modificar ciertos elementos de éstas. Por ahora sólo disponemos de páginas contadas que muestren el nuevo diseño, y leemos en AllFacebook que éstas despliegan un nuevo orden de pestañas y opciones que pueden cambiarse mediante un menú. La pestaña que no podrá modificarse será la que muestre el «About» de la página, y lo mismo pasará con el «Contact». En cambio, sí podrán modificarse otras secciones como por ejemplo la de fotos, que podrá o eliminarse o moverse, y lo mismo pasará con las secciones Posts To Pages, Apps y Notes.
¿Qué os parecen las nuevas opciones de personalización? ¿Habéis visto alguna página que ya haya modificado dichas secciones?
Si queréis consultar una página web con una hoja de estilos o un comportamiento específico, tomodo.com os puede ayudar. Se trata de una aplicación que permite hacer una versión personalizada de cualquier página, indicando la url de la misma para que podamos sobreescribir el css y el javascript. En algunos casos (no es compatible con todos los sitios web) podemos retirar e incluir contenido, llevando la personalización al máximo.
El resultado puede guardarse en un subdominio de tomodo, permitiendo ser consultado por cualquier persona. Ellos no guardan nada en sus servidores (no se clona el contenido), solo se hace de puente entre el servidor original y el cliente alterando los componentes especificados por el usuario.
El funcionamiento es semejante a lo que podemos hacer con Greasemonkey, aunque en este caso no es necesario tener una extensión, generando resultados que pueden consultarse desde cualquier dispositivo.
Desde tomodo comentan que se retirarán los sobdominios que reciban denuncias, y en su FAQ incluyen un código que los webmasters podrían incluir en su robots.txt para que su web no pueda ser alterada por la plataforma.
Personalmente lo encuentro una muy buena idea que puede usarse en cursos de programación y diseño. Un ejercicio del tipo «cambia el aspecto de reddit completamente usando tomodo» puede ser muy productivo.
Las infografías interactivas son representaciones de datos que utilizan color y recursos informativos ingeniosos para que el usuario pueda interactuar con ellas y a la vez captar más información. La interacción permite a los usuarios descubrir más información al hacer clic, desplazarse, hacer zoom, ver y pasar el mouse por encima de la infografía para explorar más allá.
Éstas pueden ser infografías animadas, también conocidas como “gifografías”, o no. Las infografías interactivas involucran la interacción desde el extremo del usuario con el fin de impulsar la atracción.
¿Significa esto que las infografías estándar o estáticas ya no sirven? No, realmente. Éstas todavía están vivas y bien. Pero como ya se han popularizado al punto de que se encuentran decenas de ellas a diario en la red, las infografías planas se han tornado un poco aburridas.
¿Por qué funcionan las infografías interactivas?
Las personas están programadas para lo visual. Usted tiene mayor probabilidad de recordar lo que ha visto que lo que ha leído y procesa las imágenes 60.000 veces más rápido que el texto plano. Pero hay una mejor manera de aprender y es mediante la combinación de ver con hacer. En resumen: visualidad + cinética produce mucha más interacción.
Cuando usted tiene que hacer algo para obtener información, es más probable que la recuerde. También está la necesidad de revelar lo que está allí guardado y la curiosidad por explorarlo, así usted se siente atraído por la infografía.
Las infografías interactivas le permiten ir más allá y se pueden crear usando HTML5 y JavaScript, aunque eso sí, se requiere de algo de experiencia y conocimiento para crearlas. Demos un vistazo a 6 infografías interactivas increíbles y veamos por qué los usuarios hacen “clic” en ellas:
Esta es una infografía divertida de MahiFX que le pregunta su salario anual y revela el número de minutos o de horas (si usted gana mucho dinero) que le toma a John Paulson (famoso accionista e inversionista) ganar la misma cantidad. Usted interactúa con la representación ingresando su salario, así que tiende a recordarla bien. También funciona bien porque es divertida, agradable pero frustrante a la vez, causa estupor el pensar que alguien puede ganar tanto en cuestión de minutos.
Esta infografía le invita a hacer clic en ciertas partes del mapa para revelar datos específicos. Habla del dinero de devolución de impuestos sin reclamar que se acumula cada año. Al hacer clic en un territorio, puede ver las personas de cada estado de USA, el reembolso potencial promedio y el total de los reembolsos potenciales.
3. ¿Hasta dónde llegaremos en el espacio? (enlace)
Esta infografía nos da una visión general de los diversos y sorprendentes fenómenos durante nuestro tiempo en el espacio.
4. Por qué su cerebro ansía una infografía (enlace)
Esta es, por mucho, mi infografía preferida. Tiene colores brillantes (y apropiados) que la hacen atractiva. La infografía lo mantiene atraído mientras se desplaza por ella para aprender más cosas. También tiene algunos botones integrados para compartirla en medios sociales que funcionan eficazmente para hacer las estadísticas compartibles. Esto demuestra por qué los elementos visuales son tan eficaces con datos curiosos como “el 80 % recuerda lo que ve y lo que hace” y “el 10 % recuerda lo que escucha”.
Esta infografía explica el funcionamiento del cerebro haciendo clic en cada área del mismo. Cubre la corteza cerebral y sus cuatro lóbulos, el cerebelo y el tronco cerebral.
¿Alguna vez se preguntó cómo funciona la búsqueda de Google? Usted no tiene que hacerlo, porque esta infografía le explica todo.
Al equipo de Google se le ocurrió esto cuando se dieron cuenta de que no hay nada que explique su proceso con facilidad y rapidez. Aunque había mucha información sobre el tema, nada estaba en formato de infografía ni era tan atractivo para el consumidor. Y a partir de ahí, nació la infografía interactiva “Cómo funciona la búsqueda”.
Bien, entonces, ¿ahora está convencido del poder de las infografías y le gustaría darle usted mismo una oportunidad? Pruebe una nueva y estupenda herramienta llamada Visme (antes EWC Presenter), que es totalmente gratuita y le permite crear hermosas infografías interactivas fácilmente.
¿Conoce otras buenas infografías interactivas? ¿Qué cree que las hace funcionar?
Payman Taei es el fundador de HindSite Interactive, una empresa de diseño y desarrollo web premiada, que crea web personalizadas y sitios móviles y aplicaciones para empresas y organizaciones.
_______
Extra de WWWhat”™s new: El currículum de un diseñador gráfico
No podemos dejar pasar la oportunidad para compartir el flamante, colorido y extraordinario currículum interactivo de Robby Leonardi, un diseñador gráfico que ahora trabaja en New York para FOX News y que le enseña a todo el mundo lo mucho que se puede obtener de los recursos gráficos interactivos.
Al igual que en la versión de escritorio desde hace algún tiempo, ahora, la nueva modificación del diseño de la versión móvil de la Wikipedia quiere poner mayor atención en aquellos editores que han contribuido en el desarrollo de los artículos.
