Archivo | CSS RSS for this section

SportFitness Responsive Design html5 Drupal

SportFitness es otro proyecto que he realizado ahora que soy un declarado Freelance , cuando me reuní con el cliente el quería un portal dedicado a deportes, donde sean las imágenes las que se lucieran, que además pueda ser “social”, administrable y que se adaptara a diferentes resoluciones de pantalla (tablet, desktop, phone).

Diseñe el site tomando en cuenta las consideraciones del cliente, implemente el desarrollo frontend usando css3 para las imágenes deslizantes, las cargas en la galería son a sincrónicas (esto ayuda al rendimiento del site considerando que es drupal), la parte de backend no fue sencilla pero valió la pena el trabajo hecho. El Site se adapta a dispositivos modernos (tablet, iphone,desktop) .

Los invito a visitar http://sportfitness.pe/

http://sportfitness.pe/ es un site desarrollado por Luis Rodriguez Martinez

http://sportfitness.pe/ es un site desarrollado por Luis Rodriguez Martinez

Anuncios

Responsive design imagenes

Continuemos con las tècnicas para implementar la web a diferentes dispositivos , esta ves el tema de las imagenes :

Responsive design, media queries

Diseño de respuesta y media queries una técnica para crear website que se puedan ver adecuadamente en distintos dispositivos tanto tablet, como smartphone ademàs de desktop. Este vídeo tutorial pretende ayudar a aquellos desarrolladores frontend que busquen información para el uso de esta técnica

Tutorial Sublime text 2, fragmentos de código que se repiten

Un tutorial de como hacer las cosas más rápidas con Sublime text 2

Tutorial Sublime Text 2 snippet

Sublime text 2 es un editor de código muy potente, he decidido hacer pequeños tutoriales con trucos interesantes para los desarrolladores frontend que nos ayudarán a ser más productivos, el primero de estos vídeo tutoriales trata sobre los snippet o fragmentos de código.

<span style=”text-align:center; display: block;”></span>

Embeber vídeo en HTML 5

Estoy aprendiendo sobre HTML5 y sus bondades y quería compartirlo.
El mayor problema en la actualidad para insertar o embeber un vídeo en la web es que teníamos que considerar si este utilizaría el plugin de flash o Silverligth el plugin de Microsoft, con HTML5  ese problema ha sido resuelto.

Para embeber un vídeo en HTML5 es necesario considerar lo siguiente :

. Los vídeos pueden ser ogg o mp4

. diferenciar entre codec y contenedor

. el codec ogg theora es soportado  por firefox, opera chrome

. el codec  h-264 es soportado  por safari ie9, iphone, opera, ipad , android, chrome

¿ Cual es la diferencia entre Contenedor y codec ?

La diferencia es que “contenedor” es el formato del archivo, es la extensión que nos sirve para comunicar nuestro fichero de video con el reproductor y “codec” es el decodifcador de este contenedor .

Ya sabiendo todo esto vamos ahora a embeber nuestro video en HTML5. con la etiqueta de video

<video></video>

Esta etiqueta es el atractivo visual mas importante en html5, el código completo sería así:

<video src=”movie.ogg” width=”300″ heigth=”300″controls=”controls”>Tu browser no soporta este tag HTML5</video>

como ven primero abrimos y cerramos la etiqueta <video></video> de html5 , luego le decimos la ruta src=”movie.ogg” , luego agregamos el control del reproductor controls=”controls y luego colocamos un mensaje por si el browser no soporta esta etiqueta.

Podrán ver el ejemplo Aquí

Si no cuentan con browser que soporte HTML5 podrán descargar el ejemplo de aquí

EL DATO

– HTML5 esta muy avanzado, asi que diseñadores empiecen a investigar y aprender sobre ello

– Para convertir online los videos pueden utilizar http://tinyogg.com/


A %d blogueros les gusta esto: