Diferencia entre revisiones de «Usuario:Juanda/html5/Introducción»
De WikiEducator
(→Modernizr) |
(→Modernizr.load()) |
||
| (4 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 202: | Línea 202: | ||
<div class="slide"> | <div class="slide"> | ||
====jQuery: ¿CDN o local?==== | ====jQuery: ¿CDN o local?==== | ||
| + | *CDN significa content delivery network: se suelen utilizar servidores cercanos y utilizados frecuentemente para que la carga de la página sea rápida: normalmente el js ya estará descargado de alguna otra página que utilice el mismo origen. | ||
*Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN. | *Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN. | ||
*En este caso, procederemos a insertar en nuestra página la versión local de jQuery. | *En este caso, procederemos a insertar en nuestra página la versión local de jQuery. | ||
| Línea 210: | Línea 211: | ||
<div class="slide"> | <div class="slide"> | ||
| + | |||
====plugins.js y main.js==== | ====plugins.js y main.js==== | ||
*plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor) | *plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor) | ||
| Línea 311: | Línea 313: | ||
: Las clases con prefijo no, representan las características que el navegador no soporta. | : Las clases con prefijo no, representan las características que el navegador no soporta. | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
| − | + | <script> | |
| + | if (Modernizr.canvas) { | ||
| + | alert("This browser supports HTML5 canvas!"); | ||
| + | } | ||
| + | </script> | ||
</source> | </source> | ||
*No se fija en el User Agent (propiedad navigator.userAgent) -> "feature detection" (mejor). | *No se fija en el User Agent (propiedad navigator.userAgent) -> "feature detection" (mejor). | ||
| Línea 326: | Línea 332: | ||
<div class="slide"> | <div class="slide"> | ||
====Modernizr.load()==== | ====Modernizr.load()==== | ||
| − | * | + | *Normalmente para no recargar la página web de Polyfills, se hace un cargado condicional, basándonos en la libreria de JavaScript [http://yepnopejs.com/ yepnope.js] |
| − | + | *Ejemplo de uso: Si el navegador no soporta geolocalización, se descargará el polyfill: | |
| − | *Si el navegador no soporta geolocalización, se descargará el polyfill: | + | |
<source lang="html4strict"> | <source lang="html4strict"> | ||
Modernizr.load({ | Modernizr.load({ | ||
| Línea 336: | Línea 341: | ||
}); | }); | ||
</source> | </source> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | *Otro ejemplo con el input type="date" que [http://caniuse.com/#search=date no está muy soportado] | ||
| + | <source lang="html4strict"> | ||
| + | <script src="modernizr.js"></script> | ||
| + | <script>Modernizr.load({ | ||
| + | test: Modernizr.inputtypes.date, | ||
| + | nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'], | ||
| + | complete: function () { | ||
| + | $('input[type=date]').datepicker({ | ||
| + | dateFormat: 'yy-mm-dd' | ||
| + | }); | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
| + | </source> | ||
| + | *En el ejemplo, se carga el componente de datetime del famework de JQuery User Interface. Para ello se debe cargar primero jQuery y luego jQuery User Interace (js y css). | ||
</div> | </div> | ||
</div> | </div> | ||
