Modernizr: librería Javascript para detectar HTML5, CSS3 y más

ByLuis

Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:

if (Modernizr.geolocation) {
  // Admite geolocalización
}
if (Modernizr.csstransitions) {
  // Transacciones CSS
}
if (Modernizr.rgba) {
  // RGBA
}

Las características que detecta son:

  • @font-face
  • Canvas
  • Canvas Text
  • HTML5 Audio
  • HTML5 Audio formats
  • HTML5 Video
  • HTML5 Video formats
  • rgba()
  • hsla()
  • border-image
  • border-radius
  • box-shadow
  • Multiple backgrounds
  • opacity
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Transitions
  • Geolocation API
  • Input Types
  • Input Attributes
  • localStorage
  • sessionStorage
  • Web Workers
  • applicationCache
  • SVG
  • SVG Clip paths
  • SMIL
  • Web SQL Database
  • IndexedDB
  • Web Sockets
  • hashchange Event
  • History Management
  • Drag and Drop
  • Cross-window Messaging

Modernizr

Similar Posts

JS Bin: edita, testea y haz debug de Javascript online

ByLuis

JS Bin es una aplicación que nos permite crear nuestros scripts y testearlos o hacerles debug de forma colaborativa. Su interfaz es muy sencilla, consta de tres pestañas: javascript, el html en el que se incluye el javascript y la salida del HTML y el Javascript.

Además, permite añadir librerías javascript con jQuery o YUI, y exportar el trabajo a una URL propia.

JS Bin

Vía / WebAppers

|

Revisión sobre HTML5

ByLuis

Aunque ya en su momento hablamos de las etiquetas que traerá HTML5, no hemos llegado a hablar del resto de novedades que quieren introducir en HTML5.

Aunque en otros sitios ya se ha hablado de ello, al no haber encontrado un artículo que me pareciera sencillo y completo, sobre todo porque no solo comenta aspectos técnicos, sino un poco de base y explicación de por qué es necesaria esta nueva versión. En este caso se trata de un artículo que nos indica los cambios/novedades principales:

  • Nuevos elementos, los cuales ya hemos mencionado y que están divididos en las siguientes categorías: elementos metadata (title, base, link), elementos de sección para dividir las páginas en secciones (body, section, nav y article), elementos de bloque (blockquote, section, p y div), elementos inline (a, meter e img), elementos estructurados ol, blockquote y table), elementos interactivos entre el usuario y la página vía teclado o ratón (a, button y radio), control de formularios y otros.
  • Cambios de programación en el DOM, introduciendo la nueva versión del DOM.
  • Formularios web actualizados.
  • Eventos server-sent.
  • Capacidades para gráficos dinámicos.

An Overview of HTML 5

Vía / dzone

UI.Layout: plugin de jQuery para crear layouts

ByLuis

UI.Layout es un plugin para jQuery que nos permite crear layouts en nuestras aplicaciones web, ya sean complejos o sencillos. Con este plugin podemos añadir toolbars, menús, paneles de ayuda, status bars, …

Entre sus características encontramos:

  • Sencillez: potente pero fácil de usar y de aprender
  • Layouts ilimitados: 5 regiones por layout
  • Docenas de opciones: cada aspecto es personalizable, globalmente y por región
  • Control total de las CSS: docenas de clases auto-generadas crean cualquiero aspecto UI
  • Extensible: callbacks, métodos y utilidades especiales
  • Botones personalizados: puedes integrar tus propios botones
  • Collapsable: cada panel puede ser cerrado, usando la animación que desees
  • Ocultable: los paneles se puede ocultar completamente, de inicio o en cualquier momento
  • Redimensionables: cada panel se puede redimensionar, automáticamente o indicando límites
  • Slidable
  • Cabeceras y pies de página: para cada región
  • Hotkeys: puede usarse cursores o teclas para definir hotkeys
  • Se puede usar cualquier elemento para los paneles
  • Integrable con cualquier widget o plugin jQuery

UI-Layout

Vía / WebAppers

Crear aplicación web con Hapi.js, Vue y MongoDB

Crear aplicación web con Hapi.js, Vue y MongoDB

ByLuis

Estoy aprendiendo Hapi.js y Vue.js y qué mejor que ir anotando aquí lo que voy aprendiendo, y si a alguien le sirve, mejor que mejor.

Pretendo crear una aplicación web e ir explicando en diferentes posts, que iré añadiendo aquí, lo que estoy aprendiendo.

He estado viendo distintos boilerplates y el que más me ha gustado ha sido appy. Podría usarlo, pero prefiero aprender poco a poco que pegarme con algo ya hecho e indagar qué hace cada cosa.

Lo que más me gusta de appy es que diferencia entre el backend y el frontend de forma bastante clara, distintos directorios y aplicaciones para cada cosa. Es por ello que voy a seguir esta estructura. Aquí hay un artículo bastante majo que explica más o menos lo mismo.

Pues nada más, iré subiendo posts sobre lo que voy aprendiendo. Eso sí, porfa, si meto la pata en algo, no me lo tengas muy en cuenta, estoy aprendiendo.

  1. Hapi.js+Vue.js Crear servidor backend (código v0.1.0)
  2. Reorganización de la configuración (código v0.2.0)
  3. Empezar añadiendo routes (código v0.3.0)
  4. Conectando a mongodb (código v0.4.0)
  5. Modelos mejorados y controladores (código v0.5.0)
  6. Inicializando el frontend (código v0.6.0)
  7. Vue router y login form “tonto” (código v0.7.0)
  8. Comunicación entre frontend y el servidor usando JWT (login) (código v0.8.0)
  9. i18n (código v0.9.0)
  10. Activación de usuario, recordar contraseña, … (código v0.10.0)
  11. Roles (código v0.11.0)
  12. Vuex y avatares (código v0.12.0)

jMaps: Google Maps mediante jQuery

ByLuis

jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense…
jMaps
Vía / Script & Style