Una página web con diseño responsivo (horrible traducción del inglés responsive design) es aquélla que se adapta a cualquier pantalla alterando su estructura en función del tamaño del dispositivo que la esté visualizando. En español se está usando mucho el término «web responsiva», aunque es más correcto hablar de diseño web adaptable o adaptativo.
Para crear una web con estas características tenemos que tener bastantes conocimientos de las últimas tendencias en CSS, javascript y HTML, aunque proyectos como layoutit.com nos pueden ayudar a comenzar a crear este tipo de sitios sin necesidad de tener excesivos conocimientos de programación.
Se trata de una plataforma en la que podemos definir la estructura de nuestra página incluyendo áreas con diferentes columnas y elementos (menús, textos, paginación, etc.) obteniendo como resultado el código en HTML5 y CSS3 para que podamos editarlo posteriormente (añadiendo php en la parte del contenido para hacerlo dinámico, por ejemplo).
Es un constructor de plantillas creado para Bootstrap (colección de herramientas opensource para crear sitios y aplicaciones web), no es un constructor de sitios web y sí una herramienta que nos ayuda a no empezar desde cero, creada para ahorrar tiempo a los programadores, no para terminar con una web 100% lista para ser divulgada.
En hongkiat.com tenemos un ejemplo de como se ha usado esta plataforma para crear su propia página de inicio, ejemplo que demuestra lo realmente sencillo que es su uso.
Más rápido, más intuitivo y más bonito, esas son las tres características del nuevo reproductor de vídeos de Vimeo, desarrollado completamente desde cero y mostrando el motivo por el cual miles de profesionales del vídeo prefieren subir sus trabajos a Vimeo en lugar de usar el clásico Youtube.
Comentan en su blog que han conseguido reducir a la mitad el tiempo que tarda un vídeo en cargarse. Está desarrollado en HTML5 y puede adaptarse a la pantalla del dispositivo que lo está reproduciendo, cargándose en prácticamente cualquier aparato sin necesidad de instalar ninguna extensión (el mismo reproductor se ejecuta en tabletas, móviles, televisores y ordenadores).
Han añadido funcionalidades que facilitan la inclusión de subtítulos y la traducción automática de los mismos, así como herramientas para que sea más sencillo compartir el contenido en redes sociales o incrustar los vídeos en páginas web.
El nuevo reproductor permite también que los creadores de vídeos incluyan botones para que se pueda comprar el contenido completo, por lo que se hace mucho más intuitiva la experiencia de compra durante la reproducción de contenido multimedia (podéis ver un ejemplo en la esquina superior derecha de la imagen superior). Esa funcionalidad la explican en vimeo.com/ondemand, la idea es que independientemente de donde se incruste nuestro vídeo, los lectores puedan ver un trailer y pagar allí mismo para ver el vídeo completo. Continúa leyendo «Vimeo presenta un reproductor de vídeo totalmente renovado, en HTML5»
Big Data ha sido un importante tema en el 2013, y se plantea la pregunta amenazante de cómo se pueden interpretar todos los datos disponibles.
Como consumidores de datos, estamos constantemente decidiendo si debemos marcar como «Favorito» un archivo particularmente interesante, o hacer una entrada en Evernote para volver a leerlo más tarde. Hay tantos datos que se generan cada minuto en Internet que se hace cada vez más difícil tomar decisiones tales como: ¿Debo leerlo ahora? ¿Debo hacer una nota en mi libreta Moleskine? ¿Debo enviarme el enlace por correo electrónico a mí mismo? En resumen, pasamos más tiempo clasificando y organizando datos que ya existen. Al hacerlo, ¡creamos más datos sobre los datos!
Del mismo modo, como «proveedor» de información, tanto si es un reclutador buscando candidatos perfectos para un trabajo, un diseñador mostrando sus habilidades en un solo lugar, o un educador hablando de un tema interesante, se enfrenta también a un desafío: ¿Cómo recojo la enorme cantidad de datos a mi disposición de forma clara y convincente para mi lector sin perder el eje?
Introduzca el marketing con contenido visual
Al reconocer este dilema, algunos estudiosos de la red crearon una mezcla única de fotografías y datos brutos: la infografía.
¿Qué es una Infografía?
La infografía es la presentación visual de la información que comprime las ideas complejas y las presenta a los televidentes en una forma fácil de asimilar. Estas le permiten comunicar datos difíciles de captar de forma rápida y clara.
Una infografía puede ser una imagen suplementaria para su entrada en el blog o página web, o podría ser una pieza independiente de información con poco texto de apoyo. Eso significa que usted puede basar todo un blog en una infografía.
Un estudio realizado por Jakob Neilson concluye algunos hallazgos interesantes. Para empezar, la gente pasará más tiempo en su página si incluye más palabras; sin embargo, sólo gastan 4,4 segundos para cada 100 palabras adicionales. Más importante aún, la gente va a pasar el tiempo en su página analizando el diseño y mirando las imágenes en su página, por lo que realmente terminan por leer sólo el 20% del texto.
Parecía lógico que incluyéramos esto: una infografía para explicar una infografía (Fuente)
¿Por qué utilizar infografías?
Un estudio realizado por la Escuela de Negocios de Wharton descubrió que el 50% de la audiencia fue persuadido por una presentación puramente verbal, mientras que el 67% por la presentación verbal que tenía imágenes adjuntas. Otro estudio encontró que las imágenes en color de la infografía aumentan la voluntad de leer en un increíble 80%.
Aquí hay 6 razones sobre por qué las infografías son tan eficaces para la comercialización de contenidos:
1. Los seres humanos están programados para procesar el contenido visual. Piense en esto: ¿las señales de tránsito serían tan eficaces si se presentaran en forma de texto puro? ¡La mayoría de la gente ni siquiera tendría la oportunidad de leerlas mientras conduce!
2. Los seres humanos están cansados ”‹”‹de la sobrecarga de información. Según Mihaly Csikszentmihalyi, estamos bombardeados con aproximadamente 2 millones de bits de información por segundo, mientras que sólo podemos procesar 134 bits de estos 2 millones por segundo. Simplemente no podemos procesar el exceso en el ingreso de datos.
3. Los seres humanos pueden recordar el contenido visual más rápido que cualquier otra forma. Vamos a recordar el 80% de lo que vimos e hicimos, el 20% de lo que leímos y el 10% de lo que escuchamos.
4. La adición de imágenes cuidadosamente elaboradas hacen que lo que estamos leyendo sea más creíble.
5. Dado que las infografías son fáciles de digerir, atractivas y divertidas, más personas están dispuestas a compartirlas con otros.
6. El primer paso para convertir una perspectiva en un visitante a largo plazo y en un futuro comprador es mantener su atención. Las infografías son muy atractivas por sí mismas y hacen que esto sea más fácil de lograr. Si usted tiene un sitio web o un blog, ya no puede conformarse con el texto llano, aburrido. Para empezar, nadie “lee» un texto en línea. La mayoría de la gente va a rozar su página sin leer la información. Pero con la infografía, tiene un método organizado para hacer que se queden más tiempo y quieran más.
Cómo utilizar las infografías
Los investigadores Barbara M. Miller y Brooke Barnett explican:
Por sí solos, el texto y los gráficos son a la vez métodos de comunicación útiles e imperfectos. El lenguaje escrito permite un número casi infinito de combinaciones de palabras que permiten un análisis profundo de los conceptos pero depende en gran medida de la habilidad del lector para procesar dicha información. Los gráficos pueden ser más fáciles de comprender para el lector, pero son menos eficaces en la comunicación de lo abstracto y los conceptos complicados…. Este estudio mostró que para la presentación de información científica, la combinación de texto y gráficos permite a los comunicadores aprovechar las fortalezas de cada medio y disminuir las debilidades de los mismos. (P. 63, » “Understanding of Health Risks Aided by Graphics with Text”)
Esto significa que lo mejor es utilizar una infografía con el soporte de una pieza de texto. Esto le permite a una infografía convertirse en instructiva de una manera convincente y atractiva.
Por ejemplo, en su sitio web o blog, puede pegar infografías coloridas y atractivas que pueden actuar como una herramienta de reclutamiento, presentar datos de encuestas, explicar cómo funcionan las cosas y comparar conceptos. Desde los superhéroes hasta las ideas más complicadas, las infografías han encontrado su lugar en todas partes. Demos un vistazo a algunas de las más eficaces a continuación:
Cómo ser un superhéroe: Una guía ilustrada (enlace) 13 razones por las que al cerebro humano le encantan las infografías (enlace) Cómo quieres tu diseño (enlace)
Cómo crear infografías impresionantes en menos de una hora
Bien, está convencido de la eficacia del contenido visual en línea. Al ser una organización o una pequeña empresa, desea darle a esto un buen andar. Naturalmente surge la siguiente pregunta, ¿cómo puedo crear una infografía de impresionante aspecto para mi sitio web?
La manera más obvia para algunas personas es contratar a un diseñador freelance. Pero dependiendo de a quién contrate, usted puede terminar pagando cientos de dólares y no conseguir finalmente lo que quiere. Si usted es del tipo “hágalo usted mismo” y le gusta aprender y aplicar nuevas habilidades para la vida sin gastar dinero, eche un vistazo en EWC Presenter. Todo lo que tiene que hacer es crear una cuenta gratuita en www.ewcpresenter.com y elegir Infografía ”“ allí puede crear presentaciones, anuncios publicitarios, demostraciones de productos e infografías.
No necesita instalar ningún software adicional ya que la aplicación está basada en la nube y trabaja en HTML5, con temas atractivos y la posibilidad de personalizar bastante el resultado.
Artículo escrito por ewcpresenter para WWWhatsnew
Aunque YouTube es la principal plataforma de vídeos de Internet, también hay otras que merecen nuestra atención, como Dailymotion, la cual hoy ha adquirido la compañía Jilion, desarrolladora de la suite de soluciones para vídeo bajo tecnología HTML5 SublimeVideo, la cual funciona desde hace cuatro años, aunque no va a estar afectada por la adquisición, ya que seguirá funcionando con total normalidad como hasta ahora, según informa la propia compañía en un comunicado a través de su blog oficial, que además añade que están contentos por unirse a Dailymotion, ya que han visto tener una mejor visión y propuesta para aprovechar su tecnología única para llevarla al siguiente nivel.
También Dailymotion se hace eco de la adquisición de Jilion indicando sobre la misma lo siguiente:
SublimeVideo es una solución optimizada para la reproducción de vídeo HTML5 creado por la startup suiza Jilion. Sea cual sea el dispositivo utilizado, podrá disfrutar de una experiencia única: el reproductor de vídeo asegura una experiencia coherente y homogénea, tanto en términos de diseño como de funcionalidades, con un rendimiento gráfico perfecto sea cual sea el tamaño de la visualización en pantalla.
En cualquier caso, no se han desvelado los detalles del acuerdo por ninguna de las partes, pero esta adquisición supondrá mejoras en la prestación del servicio que ofrece Dailymotion, aunque todavía queda por ver como se va a implementar la tecnología y en qué plazos. Dailymotion quiere así estar altura de la web actual. Quizás pronto veamos los resultados.
Nuevo evento que nos presentan, esta vez relacionado con el mundo de los juegos y con el HTML5, evento que se realizará en Madrid durante los días 13 y 14 de diciembre.
Desde que hablamos de HTML5 parece inevitable hablar también de juegos. Poco a poco los juegos en flash van desapareciendo dejando paso a esta nueva generación, compatible con dispositivos móviles, creados para navegadores modernos y con características que se van añadiendo poco a poco para mostrar que es algo más que una moda pasajera.
En el evento pretenden, principalmente, conectar a los participantes. Para ello quieren potenciar la interacción entre empresas y programadores y ofrecer una buena visión del mercado del desarrollo de los videojuegos, todo con talleres, eventos para potenciar el networking, sesiones de Recruitment, casos de Gammification y muchas otras actividades donde se mostrarán tecnologías emergentes y casos de éxito.
En html5-spain.com tenéis los detalles del mismo, con los enlaces para poder realizar las reservas y conocer la agenda de lo que tienen preparado.
Ya os hemos comentado en algunas ocasiones varios sitios en los que podéis realizar clases para aprender HTML5, os dejamos ahora con una recopilación de dichos enlaces, esperando que nos ayudéis a ampliar la lista en los comentarios.
– Cursos de HTML5 en Udemy: 3 cursos que imparten en Udemy, sin necesidad de conocimientos previos, incluyendo uno en español para entender las bases.
– Curso en Codeavengers: Ideal para aprender tanto HTML5 como CSS3 y Javascript. Existen varios juegos que nos ayudan a mantenernos motivados, subiendo de nivel y ganando premios.
– Edutin: Lista de vídeos en español para aprender las bases de HTML5.
– mozilla.org: Documentación extensa en el sitio web de Mozilla.
Podéis ver algunas demostraciones de lo que se puede hacer usando HTML5 en chromeexperiments.com o en esta recopilación de experimentos que publicaron en spyrestudios.com
Hace pocas semanas os anunciamos una herramienta que Google había construido para permitir que los diseñadores realicen campañas (anuncios) en HTML5. Se trataba de WebDesigner, aplicación que podemos instalar en nuestro ordenador para crear banners y animaciones de diversos tamaños olvidando el Flash, tecnología cada vez menos presente en la web moderna.
Esta aplicación está disponible para Mac y Windows, pero si lo que queréis es una que pueda ejecutarse en la web, sin necesidad de instalar nada, echad un vistazo en Flite.com.
Se trata de una plataforma que, según han informado a Techcrunch, no tiene mucha competencia en el mercado, a excepción de la mencionada WebDesigner de Google, aunque en este caso, al no requerir instalación (es 100% web), puede ayudar mejor a los que usan Linux o a los que no pueden instalar aplicaciones sin pasar por burocráticos procesos en su empresa.
Flite permite importar también archivos de otras plataformas, como Photoshop o Illustrator, siempre con la idea de que el trabajo creado pueda ser visualizado sin problemas desde dispositivos portátiles.
Aunque el objetivo principal es el de crear anuncios, podemos usarlo para realizar cualquier tipo de animación, eligiendo el tamaño y arrastrando los componentes deseados dentro del panel de control.
Descubrimos vía Seetio a Tululoo Game Maker, una herramienta pensada para la creación de videojuegos en HTML5 basados en navegador y jugables desde dispositivos móviles, teniendo en cuenta que los smartphones más recientes soportan los últimos estándards de HTML5.
Tululoo nos ofrece varias herramientas para ello, como un manager de recursos y un editor de scripts con el que importar imágenes, fondos, sprites animados y sonidos así como la posibilidad de crear distintos objetos (coleccionables, personajes, enemigos, etc.) y funciones.
Obviamente, la herramienta nace orientada para aquellos que dispongan de nociones básicas o avanzadas de programación, pero en este caso la creación de código no será compleja ya que Tululoo cuenta con características como completar el código automáticamente o resaltar ciertas partes de la sintaxis, para que dentro de lo complejo el proceso se nos haga lo más fácil posible. Otras cosas que podremos ver en Tululoo serán detalles como soporte para archivos de audio WAV, MP3 y OGG, soporte para jugar con teclado, ratón y touchpad, creación de objetos en tiempo real, etc.
Si queréis ver algunos ejemplos de lo que puede llegar a desarrollarse con Tululoo, podéis acceder a diversos juegos desarrollados con la herramienta en la sección «Games«. Lo mejor de todo, dejando de lado lo útil que puede ser para desarrolladores independientes de videojuegos, es que la herramienta es gratuita (si nos encanta y queremos colaborar en su mantenimiento y desarollo, podemos realizar donaciones desde la misma página web).
Iván Barcia nos presenta una plantilla realizada por él mismo en HTML5 y CSS3 que, imitando el estilo de las tarjetas de Google Now para Android, está disponible de forma gratuita en su web para que podamos bajarla y usarla en nuestros proyectos.
Se trata de un documento que comenzó como un proyecto personal para realizar documentos (manuales), aunque fue tomando forma para un uso general y se decidió desarrollar un manual para ofrecerlo de forma gratuita bajo licencia Creative Commons Attribution 3.0 Unported.
Todo el código HTML y CSS está escrito por mí, sin partir de ninguna plantilla. Ambos están validados por la W3C. El manual y toda la documentación adjunta está en español, espero poder ofrecerla en mas idiomas pronto.
El diseño puede consultarse desde cualquier dispositivo, ya que se adapta a las diferentes pantallas. Es posible bajarlo desde la web y acceder a una demostración de dicha plantilla directamente desde aquí.
Esperemos que siga evolucionando y llegue a transformarse en un tema para WordPress, el diseño lo merece.
Una de esas noticias que pueden alegrarnos un domingo como éste es, desde luego, anunciar que tenemos disponible una versión beta para jugar a Super Mario Bros desde el ordenador.
Y es que leemos en Seetio que gracias al HTML5 y a la iniciativa de un individuo podemos disfrutar de Super Mario Bros desde el mismo navegador, sin cargas, sin instalaciones y con ls posibilidad de disfrutar de las 40 pantallas de uno de los juegos más míticos del mundo de las consolas. Los controles son simples ya que el juego funciona con las flechas del teclado para realizar el movimiento (o con WASD si nos gusta más esta posibilidad) y con SHIFT para acelerar. Adicionalmente, el juego incluirá con un editor para que creemos nuestros propios niveles o juguemos a mapas aleatorios.
También merece la pena comentar que el creador del juego en navegador, Josh Goldberg, ha publicado el código del juego en GitHub para que todos nosotros podamos echarle un ojo, editarlo, mejorarlo o simplemente experimentar a nuestro gusto.
Obligatorio para que los fanáticos de juegos retro como este vivan un pequeño momento de nostalgia y para que cualquiera pase un buen rato en el teclado en esas horas muertas que pasan durante el domingo. Para jugar ahora mismo, haz clic en este enlace.
Nuevo evento que nos presentan, esta vez relacionado con el mundo de los juegos y con el HTML5, evento que se realizará en Madrid durante los días 13 y 14 de diciembre.
