Reproductores multimedia para Drupal 7

html5-videoEn muchos de los proyectos Drupal se tiene la necesidad de implementar la reproducción de videos dentro de nuestro sitio. Una alternativa, la más sencilla, es implementar el módulo Video Embed Field que permite permite incrustar videos desde Youtube y Vimeo o mostrar sus thumbnails para ingresar a la dirección url del video. Sin embargo, cuando se requiere reproducir videos que no estén hospedados en servidores de terceros, es necesario implementar un reproductor multimedia. Drupal 7 tiene varios módulos que permiten realizar esta tarea.

A continuación se muestra los módulos que implementan esta funcionalidad.

MediaElement.js

Sitio oficial: http://mediaelementjs.com/

Módulo Drupal: https://drupal.org/project/mediaelement

Permite implementar el plugin del reproductor HTML5 MediaElement.js en Drupal. MediaElement es un plugin jQuery que permite emplear los tags video y audio usando h.264 para trabajar en los navegadores que no soportan el tag o el códec y proporcionar una consistente interface a través de todos los navegadores.

Video.js

Sitio oficial: http://www.videojs.com/

Módulo Drupal: https://drupal.org/project/videojs

Video.js es un reproductor de video basado en HTML5 con un fallback Flash para navegadores antiguos. Por medio de este reproductor, se puede reproducir videos en casi todos los dispositivos y sistemas operativos, proporcionando los codecs adecuados que serán usados.

JW Player

Sitio oficial: http://www.longtailvideo.com/

Módulo Drupal: https://drupal.org/project/jw_player

Permite implementar el reproductor JW Player en Drupal. Proporciona un formateador de campo para renderear archivos usando JW Player. Usa la versión de video HTML5 del reproductor, el cual es compatible con dispositivos móviles, con lo cual sólo se usa Flash si es necesario.

jPlayer

Sitio oficial: http://www.jplayer.org/

Módulo Drupal: https://drupal.org/project/jplayer

Este módulo permite implementar un reproductor basado en HTML5 que emplea un fallback Flash para navegadores que aún no tienen soporte para HTML5. Permite una presentación por defecto para el reproductor, además integra mediante el módulo Content Construction Kit (CCK) campos de archivo y un estilo de visualización de vistas.

MediaFront

Sitio oficial (Open Standard Media (OSM) Player): http://mediafront.org/osmplayer

Módulo Drupal: http://drupal.org/project/mediafront

El módulo MediaFront es una solución multimedia frontend para Drupal. Emplea un innovativo e intuitiva interface de administración que permite al administrador del sitio personalizar la experiencia multimedia en frontend para sus usuarios sin escribir ningún código. Este módulo proporciona una interfaz con la cual reproductores multimedia de terceros pueden integrarse y utilizar los ajustes preestablecidos para visualizar multimedia.

Si se quiere realizar una comparación entre los distintos reproductores multimedia, de manera que se pueda conocer las características de cada uno de ellos. En la página presentada en html5video.org se muestra una breve comparación entre los reproductores multimedia presentados e incluso algunos más.

Anuncios

Favicon en Web, mobiles y Tablets

En esta oportunidad les hablare de la importancia del favicon (favorit Icon), y de su correcta insercion en páginas Web, dispositivos mobiles y Tablets (tanto android y iOS).

Sin ingresar en lo obsevivo, detallo a continuacion, lo que yo considero, lo básico y lo neceasrio para lograrlo:

HTML

La forma más básica de mostrar un favicon en la mayoria de los navegadores Web, es simplemente colocando un archivo con la extencion .ico en el directorio raiz del servidor.

Ahora, si lo que queremos es asegurarnos la presencia de nuestro favicon, podemos vincularlo en la cabecera de nuestro codigo:

favicon_basic

Referencia: http://es.wikipedia.org/wiki/Favicon

Para iOS 2.0+, Android 2.1

Para los usuarios de dispositivos moviles con versiones de iOS 2 o superior y Android 2.1 o superior podemos utilizar:

favicon_ios

Tanto en iOS y Android el nombre del archivo que debemos utilizar es favicon-152.png, este archivo se autoescala para los distintos dispositivos.

Para dispositivos Apple

Para lograr mostrar un favicon en distinto tamaño, opción muy útil en dispositivos de la Apple debemos utilizar:

favicon_ios2

Formato de imagen y dimenciones:

Para la mayoría de los navegadores alcanza con utilizar una imagen de 16×16 o 32×32 pixeles. En cambio para dispositivos iOS o Android podremos utilizar archivos más complejos con un tamaño de 152x152px.

Tips

Estos tips serviran para cuando no se visualizen los cambios (algo que muy habitualmente suede)

  • Borrar la cache del navegador.
  • Abrir y cerrar (en general funciona con Internet Explorer).
  • Abrir más pestañas si la actual no se refresca.
  • Agregar un parámetro al archivo para forzar la actualización (lo mismo que se suele hacer con archivos CSS)

favicon_parametros

Favicon con animación, imagen y video

Favicon.js, una libreria en JavaScript, está un paso mas adelante, ya que permite diferentes tipos de transiciones y animaciones, compatible con video html5, y live stream de la webcam. Desafortunadamente, no tiene soporte para Safari ni Internet Explorer (por el momento).

favicon_js

Para mas información:

Como una nota final , cabe hacer notar que no es valido favicon.png en la especificación HTML5 de W3C, solo favicon.ico http://www.w3.org/TR/html5/links.html#rel-icon

Tendencia en diseño Web – Flat Design

Flat designEn esta oportunidad me gustaría “hablar” un poco de la tendencia actual que al parecer es “Flat Design”.

¿Qué es Flat Design?

Flat Design es el diseño plano que se aplica a la interfaz de usuario del software como por ejemplo aplicaciones móviles, sitios web, trípticos, sistemas operativos, etc. Desde mi punto de vista (y algunos comentarios que encontré en Internet) este tipo de diseño se popularizo con la nueva versión de Microsoft, el sistema operativo Windows 8 que tiene la interfaz plana bajo el nombre “Modern UI”.

Windows 8

Flat Design consiste en un diseño sin sombras ni relieves tampoco incluye imágenes complejas ni en tres dimensiones, es más bien minimalista y sencillo.

¿Por qué Flat Design?

Hasta hace un tiempo el diseño de sitios, sistemas y aplicaciones mostraban una interfaz “sobrecargada” de información lo cual daba la apariencia que uno tenía que ser un experto para utilizar una herramienta, perdiéndose en un mar de iconos, botones, imágenes y datos.

El diseño Flat Design viene a reemplazar a los anteriores debido a su sencillez para el usuario, quien se siente cómodo con una interfaz limpia y sencilla es decir fácil de usar.

En Flat Design, los puntos importantes a tomar en cuenta son:

  • Combinación de colores: una agradable combinación de colores es fundamental puesto que no se debe exagerar con la cantidad de colores, sin embargo los colores seleccionados deben ser armónicos entre sí.

Mezcla de colores

  • Tipografía: una tipografía visualmente atractiva y moderna ayuda bastante al Flat Design, actualmente tenemos una gran cantidad de fuentes libres en Google Fonts, Adobe Web fonts y Typekit.

Font types

Animación

Todos los puntos anteriores pueden ser alcanzados con la versión “antigua” de HTML es decir XHTML, pero se recomienda usar HTML5 en combinación con CSS3 y JavaScript.

Para finalizar no olvidemos del RWD (Responsive Web Design), el diseño adaptativo está en continuo crecimiento, por lo tanto es importante tomar en cuenta Flat Design para aplicaciones Web y aplicaciones móviles.

Enlaces de interés:

  • Flat UI Pro: colección de recursos gráficos de pago que incluye más recursos que la versión Free y también permite obtener las fuentes PSD. http://designmodo.com/flat/

Acerca de drupal 8

Se aproxima el lanzamiento de Drupal 8, hoy les hablare sobre algunas de sus novedades, como la integración con Symfony.

Qué es Symfony?

Es un framework de desarrollo en PHP de tipo full-stack construido con varios componentes independientes el cual puede ser utilizado bajo el patrón Modelo Vista Controlador (MVC).

Un conjunto de clases Orientadas a Objetos compatibles con PHP 5.3 y versiones posteriores.

Un conjunto de componentes reutilizables de manera independiente y cohesionada que solucionan problemas comunes de desarrollo web.

mvc

Por qué la integración?

Las personas que ya trabajaron con drupal saben que la curva de aprendisaje es bastante elevada, al tener que dominar los hook que son las funciones y metodos que posee drupal para la resolucion de los problemas que se presentan a lo largo del desarrollo.

Esto se conoce como “The Drupal Way”, todo este conocimiento adquirido solo es válido y útil en el entorno de Drupal. En ocaciones el modo de Drupal no esta apegado a los estandares del mercado, no toma ventaja de nuevas buenas prácticas y hace más complicada la implementación de nuevas tecnologias.

Por qué cambiará el core?

Para cumplir los objetivos que se proponen para Drupal 8.

  • Un core robusto, escalable, desacoplado y facilmente extendible, basado en un framework moderno para reemplazar código propio por librerías y componentes externos.
  • Pensado en móvil con una gran experiencia móvil para edición de contenidos.
  • Mayor interoperabilidad con otros proyectos PHP y un menor costo de mantenimiento en el código.

Qué componentes utilizará Drupal 8?

HttpFoundation & HttpKernel, ClassLoader, Routing, EventDispatcher, DependencyInjection, Twig, Validator, Process, Serializer, Yaml.

Otros componentes relacionados a Symfony ó que utilizan componentes de este serán utilizados.

Composer, Annotations, Guzzle, Assetic.

http://crossfunctional.net/blog/2013/mar/symfony-components-in-drupal-8
Qué es REST?REST = Representational State Transfer.Protocolo cliente servidor que permite intercambiar información entre diferentes dispositivos. Un conjunto de operaciones bien definidas. POST, GET, PUT y DELETE. Con frecuencia estas operaciones se relacionan a las operaciones CRUD que se requieren para el acceso y la persistencia de datos. Una sintaxis universal para identificar los recursos.

Para qué sirve?

Desacoplar back-end y frontend, podemos tener un sitio en Drupal, exponer los datos en diferentes formatos y consumirlos desde nuestro sitio en Drupal ó desde alguna aplicación construida en Symfony, Silex, HTML5, JS framework (Backbone, Angular, Ember) ó algun SDK nativo para móvil (iOS/android).

http://drupalize.me/blog/201307/podcast-episode-22-decoupling-drupal

https://github.com/Lullabot/copelandia

Cómo planea Drupal 8 hacer esto?

  • Obteniendo y enviando datos de manera programática en Drupal desde un cliente utilizando un API.
  • Drupal trabaja como un proveedor de interfaz de servicios web.
  • Los datos son intercambiados en un formato entendible para los dispositivos.
Utilizando que MÓDULOS?

  • RESTful Web Services.
  • Serialization.
  • HAL (Hypertext Application Language).
Qué formatos utilizaJSON


{
  "name": "Larry Garfield",
    "role": {
	  "name": "Initiative Owner",
	  "project": "WSSCI"
    }
}

XML


<contributor>
  <name>Larry Garfield</name>
  <role>
    <name>Initiative Owner</name>
    <project>WSCCI</project>
  </role>
</contributor>

Copy la alternativa a Dropbox que ofrece 15 gigas gratis

Kernel Panic

Copy

Hoy os traigo un nuevo servicio en la nube donde podrás almacenar todos tus datos con una gran capacidad, estamos acostumbrados a servicios como Dropbox pero en éste caso os voy a hablar de Copy que es nuevo pero funciona muy bien en todos los sistemas operativos, incluidos Android e iOS y ofrece mucha más capacidad que la competencia de forma gratuita.

Ver la entrada original 357 palabras más

Montar un servidor PHP MySQL en Android

La tarea se me ocurrió puesto que vengo desarrollando buen tiempo para web y el traspaso a aplicaciones puede llevar tiempo, pero conociendo que Android básicamente es Sistema Operativo linux y al igual en los equipos de escritorio deberíamos de ser capaces de convertir nuestro equipo en un servidor web y de base de datos.

Montar un servidor PHP Mysql no es imposible en Android

Bueno con los objetivos planteados en este post empezaremos de la manera fácil describiendo algunas aplicaciones que ya existen y que nos brindan este servicio y la experiencia que me brindo la misma.

1. KSWEB server + PHP + MySQL

Selection_063

Es una aplicación para android que nos brinda una versión de prueba de 5 días

  • lighttpd server v1.4.31
  • PHP v5.4.11
  • MySQL v5.1.62

tras haber instalado el servidor ya podemos acceder al panel a través del puerto 8080 recuerden que si contamos con WiFi y una red interna o podemos ver nuestro servidor en nuestro equipo desktop a través de la IP

Muchos de los últimos modelos de celular también ya vienen con un Thetering que les ayudara a brindar su propia red WiFi.

Nos permite también poder instalar una versión de PHPMyAdmin para que podamos administrar nuestras bases de datos

Selection_066

2. PAW

Selection_064

También es un servidor pero este segundo dependiente de Wifi

te brinda un control mas halla de solo montar tu servidor como pueden apreciar en la imagen pueden revisar SMS, media, etc.

Screenshot_2013-08-26-10-06-33

Selection_068

Selection_069

Tenemos que instalar un plugin para que podamos correr PHP

También nos permite varias configuraciones como puerto de salida cambios de contraseña de nuestro panel entre otros.

3. Servers Ultimate

Selection_065

la tercera opcion es un paquete de varios servidores en una misma aplicación

Screenshot_2013-08-26-10-48-02

Selection_070

Lamentablemente esta versión también es de prueba, pero la experiencia de uso es muy buena ofrece un entorno mas serio administración desde el celular

4. AndroPHP

Selection_067

Este ultimo el mas adecuado a nuestros propósitos Gratuito y solo tiene PHP y MySQL al igual que PAW funciona a través de navegador

Screenshot_2013-08-26-10-55-48

Screenshot_2013-08-26-10-56-08

Selection_003

Screenshot_2013-08-26-11-04-23

Screenshot_2013-08-26-11-03-33

Screenshot_2013-08-26-11-03-49

Esperando que la información les pueda ayudar en algún momento, mi recomendación final es que recuerden que si bien los últimos teléfonos tiene características estos no fueron creados para este propósito.

Escritop por: Gaston Nina

10 claves para navegar seguros por Internet

Tecnologia al Dia

seguridad internetHoy en día, Internet es un sistema ampliamente utilizado por particulares y empresas. Los sites de Internet han crecido a gran velocidad, y los negocios dependen cada vez más de lared de redes (Google+, Twitter, Facebook…) para desempeñar sus tareas y funciones.

Ver la entrada original 508 palabras más

Frameworks para el desarrollo de aplicaciones para dispositivos móviles basados en tecnología web

En el desarrollo de aplicaciones para dispositivos móviles se puede indicar tres tipos de aplicaciones: aplicaciones basadas en tecnología web, aplicaciones nativas y aplicaciones hibridas.

Las aplicaciones basadas en tecnología web son básicamente páginas web que interactúan dinámicamente mediante Javascript y pueden presentar un diseño similar a una aplicación nativa, sin embargo tienen algunas limitaciones en cuanto a la interacción con el hardware del dispositivo debido a que deben ser ejecutados en un navegador instalado en el dispositivo además que requieren de acceso a internet.

Las aplicaciones nativas son desarrolladas en el lenguaje que es soportado por el sistema operativo del dispositivo móvil, por ejemplo Objective C para IOS o Java para Android, mediante el cual se puede tener acceso a todas las características del hardware del dispositivo, sin embargo la aplicación es ejecutada solo en el sistema operativo para el cual fue desarrollado.

Las aplicaciones hibridas es una fusión de los conceptos de aplicación basada en tecnología web y nativa. El código nativo es proporcionado por medio de un framework que tiene un API de Javascript con el cual el código Javascript de la aplicación puede acceder algunas funciones del hardware del dispositivo móvil, como ser tomar fotografías con la cámara, acelerómetro y otras. Los archivos de la aplicación hibrida son almacenados localmente, por lo cual no se requiere de un navegador y acceso a internet para que la aplicación sea ejecutada.

apps-hibridas

HTML5 se está convirtiendo en la mejor alternativa para el desarrollo de aplicaciones multiplataforma, por lo cual se puede desarrollar aplicaciones móviles hibridas haciendo uso de esta tecnología. Como se indicó anteriormente, se necesita de un framework que permita convertir una aplicación con código HTML5, Javascript y CSS3 en una aplicacion que se ejecute en diferentes dispositivos móviles como iOS, Android, Blackberry y otros, PhoneGap o Apache Cordova es un framework de código abierto con el cual se puede empaquetar el proyecto y distribuirlo en tiendas como Appstore o Google Play.

Se puede desarrollar aplicaciones HTML5 desde cero, sin embargo existen diversos frameworks que permiten desarrollar interfaces similares al de las aplicaciones nativas pero usando tecnología web, es decir HTML5, Javascript y CSS3. A continuación se muestran algunos de los frameworks:

JQuery Mobile
jQuery Mobile

JQuery Mobile es un framework basado en HTML5 optimizado para todas las plataformas de dispositivos móviles, es uno de los más populares y está desarrollado a partir de JQuery y JQuery UI. Su implementación es sencilla y posee amplia documentación, además cuenta con ThemeRoller for Mobile para la creación la temas personalizados aprovechando las ventajas de CSS3.

Sencha Touch 2

sencha

Sencha Touch 2 es una framework para el desarrollo de aplicaciones móviles de alto rendimiento basados en HTML5. Este framework incluye soporte para Blackberry 10 e IE 10 y es compatible con iOS, Android, BlackBerry, Windows Phone y otros. Esta desarrollado a partir de la plataforma HTML5 de Sencha, por lo cual se puede emplear Sencha Cmd, que es una herramienta de línea comando multiplataforma que permite realizar muchas tareas de manera automática como ser generar un nuevo proyecto.

PhoneJS

PhoneJS

PhoneJS es un framework que contiene lo necesario para crear aplicaciones usando HTML5 y Javascript para desarrollar aplicaciones compatibles con los más populares smartphones y tablets. Es compatible para aplicaciones de IOS, Android y WindowsPhone. PhoneJS aprovecha todas las funcionalidades de JQuery y opcionalmente se puede incluir Knockout para el desarrollo de las interfaces de usuario con el modelo MVVM (Model-View-ViewModel).

Kendo UI

kendoUI

Kendo UI es un framework para el desarrollo de sitios web con HTML5 y aplicaciones mobiles. Posee widgets basados en JQuery, una simple y consistente interfaz de programación, un framework MVVM, temas y templates. Permite construir aplicaciones que parecen y se usan igual que una aplicación nativa por medio de un simple código de interfaz de usuario usando solo HTML5 y JavaScript.

Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

Cuando se diseñan y crean sitios Webs Responsive y llega el momento de probarlos, lo que generalmente se hace es probarlos reduciendo el tamaño (arbitrariamente) del browser, o en el mejor de los casos hacer uso plugins como “Web Developer”, ya sea para Firefox o para Chrome.

Pero, la realidad nos demuestra que no existe ningún sustituto, lo mejor siempre será probar directamente el sitio Web en un dispositivo móvil real. Los browsers en dispositivos móviles tienen algunas características peculiares y diferentes que las versiones de escritorio, por lo que hace mas fácil encontrar los posibles errores e investigar problemas técnicos que pueden ocurrir.

En este articulo, se pretende mostrar como realizar las pruebas, directamente en un dispositivo móvil, utilizando una herramienta de Adobe Adobe Edge Inspect.

edge-inspect-cover

Adobe Edge Inspect

En primer lugar es necesario instalar la aplicación Adobe Edge Inspeccionar, que se puede descargar desde Adobe Creative Cloud con una cuenta.

edge-inspect-isntall

edge-inspect-isntall1

Después de instalar la aplicación, se abrirá una venta para introducir los datos de usuario (cuenta Adobe Creative Cloud). A continuación, lo que queda es instalar la extensión para Google Chrome de Adobe Edge Inspeccione , y posteriormente la aplicación para dispositivos móviles, tanto para dispositivo iOS y Android  (en el momento de escribir estas líneas).

Instalando la extensión para Google Chrome

Google Chrome es impresindible para la interacciones y control con los dispositivos utilizando Adobe Edge Inspect.

Para ello necesitamos podemos instalar la extencion desde la Chrome Web Store.

edge-inspect-chrome-ex

Conexión A Dispositivos Móviles

Una vez que se termino de instalar, tanto la extención de Chrome como la aplicación en los dispositivos móviles, ahora se puede conectar de su computadora a su dispositivo móvil, en este caso (par mi) un dispositivo Android.

Hay que asegurarse de que los dos dispositivos están en la misma conexión inalámbrica – WIFI, y tambien que la extensión de Chrome está en la posición ON. A continuación, detectar su equipo y le dará una contraseña de 6 dígitos para conectarse.

edge-inspect-phone

Ahora solo queda introducir el código de acceso dentro de la extensión de Chrome.

edge-inspect-chrome

Prueba Web

Una vez que el código de verificación ha sido aceptado y los dos dispositivos están conectados, cada vez que abre una página web en Google Chrome (cuando Adobe Edge Inspect se está ejecutando), entonces al instante se mostrará en el dispositivo móvil conectado.

edge-inspect-prueba

Conclusión

Esta es la manera más recomendada de realizar pruebas de diseños Responsive Design. Como comentario adicional, decir que la versión Pro de Adobe Edge Inspect, permite conectar más de un dispositivo móvil al mismo tiempo.

Drupal 7 Primeros pasos

MODULO ADMIN
Este módulo me parecio bastante interesante ya que proporciona mejoras de interfaz de usuario con la interfaz de administración estándar de Drupal.

El modulo lo pudes descargar desde: https://drupal.org/project/admin

Lo puedes descargar ya sea en tar.gz o zip.
O tambien puedes instalarlo directamente utilizando Drush.

Una vez instalado lo habilitas y ya tienes el módulo.

Y al hacer un click sobre ella se despliega el menú.icono

La barra de herramientas de administración aparecerá automáticamente, en parte superior izquierda de la pantalla.

admin