HTML5 ofrece una API muy potente de geolocalización. Esta API permite a los desarrolladores determinar la posición física del usuario que se encuentra navegando. Anteriormente se realizaba capturando la IP y almacenando los datos en una base de datos, para posteriormente realizar una consulta. Esto se realizaba generalmente mediante programación con algún lenguaje del lado servidor como pueden ser PHP, JSP, ASP. Con la anterior técnica se puede obtener la dirección IP del usuario gracias a que las direcciones IP están agrupadas de modo que se sabe que cada IP pertenece a un determinado lugar del planeta. De esta forma podríamos de obtener del usuario el país, estado, cuidad, etc…) mediante un web service o una base de datos de IPs . HTML5 y su API aprovecha datos de la posición GPS de un dispositivo o mediante la triangulación de señales WIFI de los routers. De esta forma, con la información que nos proporciona la API podemos adaptar nuestras aplicaciones en función de la ubicación del internauta. HTML5 se apoya en javascript para poder programar estas acciones. Existen 3 métodos para trabajar con la geolocalización
Adobe Edge, animación HTML al estilo Flash. Integración manual y con WordPress
Lejos quedan ya los años en los que los desarrollos animados y la interactividad dominaban Internet. Recuerdo que muchos proyectos de empresas y particulares se realizaban empleando la herramienta de animación de Adobe Flash. Flash se expandía por Internet, y era necesario el reproductor para poder visualizar las películas. Las páginas eran objetos .swf dentro del HTML. El formato generado era propietario, y el código compilado no era «interpretable» (aunque existían decompiladores). Pero llegaron los cambios. Por un lado, Steve Jobs daba su espaldarazo a la tecnología de Adobe al no permitir la reproducción de películas flash en sus dispositivos iPad, iPhone. Además Google pedía que los datos cada vez fueran más estructurados para un mejor análisis, y el SEO comenzaba a liderar los intereses de empresas y particulares. El posicionamiento comenzaba a serlo todo, por encima del diseño, por encima de la animación. El objetivo era llegar, la visita, la venta, la conversión. Estos factores sumados a la guerra de los codecs de vídeo hicieron que los proyectos Flash empezaran a quedar en desuso. El responsive, la velocidad de carga, la aparición de CMS como el todopoderoso WordPress, Joomla, Typo, entre otros, fueron minimizando y minando los desarrollos. La animación empezaba a sucumbir. Las webs eran más planas. El empleo de templates en estos CMS, abarataba los desarrollos. El mundo web, comenzaba a tener la misma esencia, la misma forma, el mismo estilo. Estilo Cabecera, sidebar, blog, foot y contenidos en 4 columnas. Estilo Bootstrap y responsive, y animaciones a modo banner, como luce este blog. Sin darnos cuenta, poco a poco, iban despareciendo las webs animadas. El usuario demandaba más velocidad y accesibilidad de contenidos. Cada vez existían más dispositivos y era necesario empezar a trabajar en tecnologías que permitieran ser visualizadas desde cualquier medio. Lejos quedan los proyectos web realizados sólo en
Responsive Web Design. Conjeturas y conceptos.
Existen una serie de estrategias, conceptos y técnicas que comprenden el diseño responsive. Uno de los principales problemas existentes cuando un diseñador crea contenidos para la web, es que se va a encontrar con diferentes escenarios, variables, dispositivos, resoluciones, navegadores y sistemas operativos. Además estos dispositivos cambian todos los días, existiendo diversos tamaños de pantallas desde los equipos fijos hasta los móviles. Responsive Design fue ideado por Ethan Marcotte (http://ethanmarcotte.com) y es una estrategia de diseño para la creación de contenidos para que funcionen y respondan de forma adecuada independientemente de la resolución del dispositivo o la pantalla. Ethan identificó 3 técnicas diferentes. Lo primero las Rejillas fluidas para crear diseños flexibles. Las Imágenes flexibles que respondan a los cambios de pantalla, es decir contenidos multimedia adaptables. Y para finalizar el uso de Media Queries. Debido a los cambios existentes en el mercado, sobre todo en el diseño web, los creadores necesitaran tener en mente estas 3 técnicas para crear sitios que sean visualizados en diferentes marcos o escenarios. El mundo del diseño web es muy cambiante. Podemos recordar aquellos tiempos en los que el diseño de sitios web en flash arrasaba en Internet. Algo parecido ocurría con las resoluciones, Se creaban sitios para resoluciones que se consideraban estándar, como los 640×480 pixel de pantalla, luego poco a poco, esta resolución fue cambiando a los 800×600, 1024×768, etc. Con la llegada de los móviles, se planteó crear 2 webs diferentes en función del dispositivo que la visualizaba. Como podemos apreciar han existido y siguen existiendo grandes cambios.
BootStrap, el prefabricado de la web. Monográfico: Conceptos y algunas alternativas. Parte II
Parte II – Adentrándonos más en Bootstrap Sistema de Rejilla en Bootstrap. http://getbootstrap.com/css/#grid-options El ancho de la pantalla se divide en 12 columnas por defecto. Estas 12 dejan entre ellas un espacio de 30px (15 a cada lado), por cada lado hay un margen de 15px del contenedor. El contenedor de las columnas se centra en pantalla, es fluido, se adapta al tamaño de la ventana y en su interior alberga filas. Las filas agrupan columnas. Para que las columnas funcionen adecuadamente tienen que ir dentro de las filas y todas ellas dentro de un contenedor. A esas columnas es posible aplicarle las clases(prefijo) que definen la media querie empleada. Por defecto es xs de mobile first. Una regla básica es que la suma de las columnas existentes en una fila no sumen más de 12. Y no aplicar estilos que existen entre las columnas para evitar saltos. Sigamos …
BootStrap, el prefabricado de la web. Monográfico: Conceptos y algunas alternativas.
El desarrollo de proyectos para Internet desde cero o «from scratch» puede ser algo muy, pero que muy tedioso, lento y complejo. En la actualidad es necesario intentar acelerar los trabajos para obtener proyectos rentables. Es por ello que los diseñadores de frontends trabajan con herramientas que permiten construir rápidamente sites. El bootstrapping puede referirse al proceso mediante el cual se han desarrollado entornos de programación cada vez más complejos a partir de otros más simples. De aquí viene BootStrap o Twitter Bootstrap. Es un framework frontend que nos ayuda a ganar velocidad, evitar errores comunes y aumentar la compatibilidad en nuestros proyectos en Internet. Es software libre para diseñar sitios y crear aplicaciones web. Ganaremos tiempo al trabajar con tecnologías del lado del cliente como son CSS, HTML y Javascript (JQuery). Gracias a este framework realizaremos tareas de forma más sencilla al apoyarnos en técnicas, métodos, responsive y APIs que de otra forma tendríamos que realizarlas a mano.
Frameworks de desarrollo para móviles + #infografia
En el mundo de desarrollo de aplicaciones para dispositivos móviles existen diversas soluciones. Aunque algunos programadores tienen sus preferencias y aseguran que determinados IDEs son los mejores, la experiencia determina que, el mejor entorno es aquel en el que nos encontremos más seguros y desarrollemos con mayor agilidad y menor tiempo. Por lo tanto la elección del IDE y/o Framework de trabajo para desarrollar dependerá de nuestras preferencias y plataforma destino. El mercado de los smartphones y tablets actualmente se encuentra gobernado por los tres grandes: Android, iOS y Windows Phone. Bajo estos escenarios generalmente se trabaja con un IDE de desarrollo para generar proyectos en cada plataforma de forma nativa. Es decir, en su propio entorno de controles, funciones y APIs.
Recursos interesantes relacionados con el HTML5, CSS y JAVASCRIPT
Recursos y enlaces interesantes relacionados con el HTML5, CSS3 y Javascript
Trucos y técnicas de diseño avanzado FrontEnd en HTML
El desarrollo de websites ha cambiado en los últimos años de forma sustancial. Es por ello que proyectos grandes requieren de equipos multidisciplinares de trabajo. Lo que antes hacia un webmaster, ahora es inviable para grandes desarrollos y se requiere de grupos profesionales especializados. Estos equipos están formados por miembros con diversos perfiles, desde los desarrolladores Front-End, administradores de bases de datos, programadores Back-end, administradores de sistemas, consultores, analistas, etc. Además existen metodologías de trabajo que coordinan el desarrollo y avance del proyecto así como herramientas software para compartir ficheros a modo de repositorio. Ejemplos actuales de gran éxito pueden ser Github,Mercury, etc. En esta entrada, os dejaré una serie de ideas y herramientas de desarrollo que marcan las últimas tendencias en el despliegue del FrontEnd, es decir, esa parte que permite crear interfaces de usuario. No necesariamente pueden emplease estos consejos, puesto que existe mucha libertad a la hora de desarrollar, pero son tendencia en desarrollo.
Convierte películas Flash en HTML5. Curiosidades. Reutiliza tus animaciones anteriores.
Hace ya tiempo, el empleo de Adobe/Macromedia Flash en los proyectos web era algo muy habitual y extenso. A raíz de la llegada de las posibilidades de HTML5, dispositivos no compatibles (iphone, ipad) y la polémicas del formato de vídeo, su uso fue descendiendo de forma radical. Muchos desarrolladores y empresas tenían proyectos realizados en Flash. Realmente la herramienta es muy versátil y potente, su grado de conocimiento y fama muy extenso. En esta entrada, os mostraré los pasos necesarios para adaptar y reutilizar las peliculas .FLA. Aprovechando nuestro trabajo previo para los nuevos medios, navegadores y dispositivos aparte de aplicar conocimiento anterior de la herramienta multimedia de Adobe.
