Versión actual: Template Saga 2.0 - Diseño y Desarrollo Web
Aprovecha OpenCms 8 al máximo.

Html5 paso a paso

LogoHtml5RSS

Todo lo que querías saber de HTML5

  • File API de html5

    29-06-2012 a las 01:54:00

    Hasta la llegada de HTML5 era imposible realizar operaciones con los ficheros de un formulario, como por ejemplo:Conocer el tamaño de un fichero y el tipo antes de ser enviado para poder realizar validaciones sin necesidad de enviarlo.Poder seleccionar más de un fichero en un mismo input file.Usar drag & drop para adjuntar un fichero a un formulario.Miento, si había formas, pero todas ellas pasaban por usar otro tipo de elementos como por ejemplo, flash o applet de javaCon HTML5 disponemos de una nueva api con la que poder trabajar con los ficheros seleccionados en un formulario. En concreto disponemos de las siguientes funciones:File: Nos permite acceder a información de un fichero individual como es el nombre, el tamaño, el mimetype o una referencia un manejador del fichero.FileList: Nos permite las mismas acciones que File pero aplicadas a una lista de ficheros. Se utiliza cuando usamos un <input type="file" multiple>.Blob: Nos permite cortar un fichero por rango de bytes. (Este todavía no lo he podido probar)Como casi siempre en HTML5 no todos los navegadores soportan actualmente estas api, en principio las últimas versiones de Firefox, Chrome y Opera no tendremos problemas, pero si en Internet Explorer y Safari.Para saber si el navegador del cliente soporta estas api podemos usar el código:if (window.File && window.FileReader && window.FileList && window.Blob) { // Todas las APIs soportadas.} else { alert('La API de FILE no es soportada en este navegador.');}A modo de ejemplo tenéis el siguiente código que muestra en un div la lista de todos los ficheros seleccionado y la información asociada a él.<input type="file" id="files" name="files[]" multiple /><output id="list"></output><script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } document.getElementById('files').addEventListener('change', handleFileSelect, false);</script>Espero que os sea útil. Yo ya le he encontrado alguna funcionalidad como por ejemplo, validar un formulario antes de ser enviado y mostrar por pantalla el tamaño del formulario que se va a enviar para calcular el tiempo medio de espera.
  • CSS3, el futuro. (Conclusiones de la conferencia mejorando.la)

    20-11-2011 a las 11:52:00

    En el siguiente artículo me gustaría mostrar a las conclusiones a las que he llegado después de ver ayer mismo (19 de Noviembre de 2011) la conferencia de Christian Van Der Henst titulada: "El camino a CSS4".Esta claro que HTML5 ha dejado ya de ser el futuro para convertirse en el presente. Ya la gran mayoría de navegadores modernos soportan gran cantidad de los nuevos elementos del estándar lo que hace que su uso se ya posible hoy día. Pero HTML5 no es lo único que ha evolucionado, conjunto a él ha crecido CSS3 y la nueva generación de JavaScript.La nueva versión de CSS nos va a permitir que el diseño de páginas web cambie por completo, esta nueva versión nos va a permitir hacer cosas que antes eran impensables, podremos incluso dibujar con CSS, hacer que nuestras webs cobren vida, y otras muchas cosas. Esto hará que los diseñadores que quieran mantenerse al día tenga que evolucionar, tenga que cambiar el concepto de hacer diseños web como si fueran artistas y pasar a hacer web como si fueran programadores haciendo uso de las nuevas herramientas que nos ofrece CSS3. Lo que está claro que la tecnología avanza y que todo el que se dedique al desarrollo web , ya sean programadores o diseñadores tendrán que ir de la mano de la evolución para no quedarse estancado en el pasado.El gran rival la evolución en los estándares son los navegadores antiguos, estilo IE6. Nosotros los desarrolladores web debemos luchar por la desaparición de esta "lacra de la evolución". Es significativo que hasta microsof mediante un comunicado oficial desaconsejara el uso de dicha versión de su navegador, y como la gente sigue usándolo. Menos mal que las últimas estadísticas hablan de un descenso en el uso de este tipo de navegadores y por lo tanto, menor número de usuarios que lo usan.Es importante recordar que todos los navegadores modernos (opera, firefox, chrome, internet explorer, safari) ya dan un amplio soporte. Por lo tanto no debemos tenerle miedo a la actualización de nuestros desarrollos, abrazar estos nuevos estándares y empezar a dejar de mirar al pasado, y esas compatibilidades estúpidas que solo hacen aumentar los costes de desarrollos y que no compensa el retorno de la inversión que se obtiene con ello.Menos mal que siempre hay programadores dispuesto a resolver muchos de los problemas que nos encontramos debido a incompatibilidades. Por ello existen productos como:Modernizr: Libreria JS que nos permite conocer la compatibilidad del navegador con tecnologías HTML5 y CSS3 permitiéndonos hacer sitios web que se adapten a todos nuestros usuarios.Selectivizr: Librería JS que nos simula el comportamiento de CSS en los navegadores IE6-IE8.Recursos CSS3 interesantes:zurb.com: Página donde generar botones interesantes con CSS3.ecsspert.com: Herramienta para dibujar directamente en CSS3Adobe CSS Shaders: Permite aplicar efectos cinematográficos solo con CSS3.CSS3 secrets: Demostración sobre las principales mejoras de CSS3hakim.se: Sitio web con demostraciones de HTML5 y canvas en el que podemos ver el potencial de este nuevo elemento.raphaeljs.com: Libreria JS que nos simplifica el trabajo de desarrollar gráficos vectoriales en la web.impact.js: Libreria JS que nos ayuda en el desarrollo de juegos en HTML5.CSS3Generator: Herramienta que nos permite generar código CSS3 de una manera fácil y rápida.Original Hover efects: Efectos originales basados en CSS3jquerymobile.com: Libreria JQUERY para el desarrollo de páginas web para móviles con la posibilidad de crear nuestros propios temas a medida.Prefijos CSS3Uno de los grandes inconvenientes de CSS3 es la necesidad de usar preficos para que los estilos sean comprendidos por los distintos motores de los navegadores. Esto nos obliga a duplicar la creación de estilos y a tener que ser muy cuidadosos a la hora de desarrollar con CSS3. Pero como siempre, hay recursos para facilitarnos el trabajo de desarrollo, como por ejemplo: CSS Prefixer o Prefix-Free, que nos permiten pasar nuestro CSS con los estilos propios de CSS3 y ellos se encargan automáticamente de generar los mismos estilos con todos los prefijos necesarios.Frameworks CSS3En cualquier lenguaje de programación no suelen tardar mucho las herramientas que nos hacen que desarrollar en él sea una tarea mucho más simple. Para ello aparecen los frameworks de desarrollo. En CSS3 también existen frameworks que nos permiten que la tarea de desarrollar sea mucho más simple. Entre los entornos de desarrollo más importantes están:lesscss.orgsass-lang.comTambién disponemos de otras herramientas que nos facilitan la creación de nuestros layouts:blueprint960CSS4Por último, y para concluir la charla, Christian comentó cual es el futuro del CSS, y no es más que la próxima versión: CSS4.Ya se está empezando a hablar de cuales son las nuevas características que nos ofrecerá la W3C con esta versión. Entre algunas de las que se comentaron están:Nueva api para Vibración destinada a realizar webs para dispositivos móviles.Nuevos selectores que nos permitirán elegir un elemento de nuestro DOM mucho más preciso.Elemento Matches.Pero CSS4 hoy día no es una realidad, es el futuro, y por lo tanto, tendremos que estar muy atentos para que la tecnología no nos deje atrás.
  • div, section y article

    10-08-2011 a las 02:04:00

    Quizás, lo más repetido desde que comenzamos a trabajar con HTML5 es que esta nueva versión nos ofrece la posibilidad de dotar de semántica a los contenidos de una web. Para ello dos nuevos elementos han aparecido: section y article. Pero, ¿realmente conocemos como y cuando debemos usarlos? Y tenemos claro que lo diferencia del antiguo (y todavía válido) div.Pues bien, voy a intentar explicar los posibles usos de cada uno y dar los suficientes ejemplos para que lleguéis a comprender mejor las diferencias entre estas etiquetas. div La etiqueta div sigue funcionando exactamente igual que lo hacía hasta el momento. Lo usaremos para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico. Este etiqueta era la más usada en HTML 4 y nos servía tanto para representar un artículo como para la cabecera o el pie de la página usando tan solo el atributo id para diferenciarlos sin dar significado ninguno a los contenidos.article Esta etiqueta será usada para representar un contenido específico de nuestra web. Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de una web como el típico quienes somos o a qué nos dedicamos. Para que entendáis mejor esta etiqueta, la usaremos para representar el contenido típico que se publica en una RSS. Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Este elemento debería tener principalmente un título (un header con un h1-h6) y podría tener un footer (con la fecha de publicación, el autor o cualquier otra información adicional) y un cuerpo con el detalle. Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article. section La etiqueta section es quizás la más difícil de comprender. En principio se usa para representar un bloque de nuestra página que tiene valor semántico, es decir, que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del significado, el ranking sería: article sería la etiqueta que contiene la información más relevante, section la que contiene información menos relevante, y div que contiene información que no aporta significado ninguno. Bien, vamos a intentar poner ejemplos de uso: Listado de noticias: Antes hemos comentado que un listado de noticias será un listado de elementos article, pero, ¿cómo representamos este listado? Pues la mejor forma será con la etiqueta section. Este listado quedaría aproximadamente:  <section> <header><h1>Listado de noticias</h1></header> <article><header><h2>Noticia 1</h2></header></article> <article><header><h2>Noticia 2</h2></header></article> <article><header><h2>Noticia 3</h2></header></article> </section> Bloque principal de la página: Imaginaros por ejemplo una portada que tiene una zona destacada en la que se muestra una introducción. Este bloque de contenido podría ser perfectamente un bloque section. Separar elementos dentro de un artículo: Cuando se trata de un artículo muy completo podríamos estructurar la información por secciones. Por ejemplo, un articulo separado en Introducción, Desarrollo y Conclusión estaría formado por 3 section, uno para cada bloque. Igualmente podríamos usarlo para agrupar una galería de imágenes asociada al contenido o incluso un listado de enlaces relacionados directamente con el artículo.  <article> <header><h1>Artículo</h1></header> <section><header><h2>Introducción</h2></header> …TEXTO … </section> <section><header><h2>Desarrollo</h2></header> …TEXTO … </section> <section><header><h2>Conclusiones</h2></header> …TEXTO … </section> <section><header><h2>Galería de imágenes</h2></header> …TEXTO … </section> </article> Un aspecto importante de la etiqueta section es que debe tener un título. Tal y como hemos comentado en otros artículos de este blog, la etiqueta section crea una sección de manera explícita en el outline del documento, por lo tanto debemos siempre asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle. Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es cuando tengamos la necesidad de aplicar un encabezado. Si os dedicáis a investigar un poco por ahí veréis como hay opiniones para todos los gustos. Hay quien dice que el elemento section debería ser quien contiene al article, y otros dicen todo lo contrario, que article es quien debe contener a section. Lo cierto es que la documentación oficial no aclara mucho sobre el tema y lo deja abierto a posibles interpretaciones. Solo el tiempo dirá como lo acaba utilizando la gente, pero desde luego, yo creo que realmente ambos están en lo cierto. La etiqueta section abre un gran abanico de posibilidades y nos permite usarlo de muchas maneras, en algunos casos será el padre de article (como por ejemplo en el caso del listado de noticias) y en otros será el hijo de article (como en el caso del articulo fraccionado en bloques). Por lo tanto, pensad antes de usar una etiqueta u otra que tiene más sentido usar en base a la información que estamos representando. Espero en un futuro aportar más ejemplos conforme se me vayan ocurriendo. Si queréis aportar vuestra experiencia no dudéis en comentar lo que queráis.
  • Header y Footer

    05-08-2011 a las 02:41:00

    Bueno, va siendo hora de seguir repasando alguno de los nuevos elementos introducidos por HTML5.En este caso le toca el turno a las etiquetas header y footer.HeaderLa etiqueta header sirve para mostrar información de cabecera útil para un documento u otras secciones principales. Típicamente se utiliza para agregar encabezados, es decir, h1-h6 que definen el título y subtítulos de la sección, aunque también se puede utilizar para dar información sobre fechas de publicación, versiones del contenido mostrado, o enlaces de navegación dentro del documento (por ejemplo, enlaces a la home, información de contacto, o al mapa web de una página). A pesar del nombre de la etiqueta, ésta no tiene porque ir situado al principio del HTML, sino que puede estar posicionado en cualquier posición dentro de nuestro documento.Ej:<header><h1>Blog: HTML5 Paso a paso</h1><p>Mi nombre es Sergio Raposo Vargas</p></header> FooterLa etiqueta footer representa el pie de un documento o sección. La información que se suele añadir en este bloque es el autor del documento, enlaces a contenido relacionado, información de copyright, avisos legales, etc.Igualmente podremos agregar al pie información de contacto. Recordar que para ello disponemos de otra etiqueta llamada address. Al igual que en la etiqueta anterior, a pesar de su nombre, este elemento no tiene porque ir al final del documento o sección aunque suele ser lo más normal.Ej:<footer>Este documento fue escrito en 2011.</footer>

Saga Soluciones

LogoSagaRSS

Últimas novedades del portal Saga Soluciones

OpenCms Hispano Articulos

LogoOpenCmsHispanoRSS

Sindicación de los articulos de la comunidad OpenCms Hispano

  • Integrando Hibernate y Maven en un módulo de OpenCms

    04-05-2010 a las 07:59:00

    Una de las tareas que forman parte de la release-beta del módulo opencms-free-balance es llevar a cabo la integración de este módulo con Hibernate para facilitar su interacción con la base de datos, para ejecutar esta tarea he seguido con el enfoque que en GMV seguimos (y que recomiendo encarecidamente) a la hora de trabajar con este gestor de contenidos y sus módulos, utilizar Maven como herramienta de construcción de dichos módulos.

  • eCommerce integrado a OpenCms: Konakart

    04-05-2010 a las 07:15:00

    El uso de Konakart dentro de un sitio OpenCms es una opción viable para integrar un administrador de contenidos (CMS) con una aplicación de eCommerce.

  • OpenCms v7 workflow: simple, rápido y gratis

    16-04-2010 a las 06:56:00

    OpenCms v7 utiliza módulos de terceras partes para resolver la funcionalidad de Workflow. Actualmente existen varias opciones para implementar este mecanismos. Las más populares son OSWorkflow y módulos que utilizan JBPM para flujos complejos. No obstante, todas estas requieren un proceso de implementación que para la mayoría de los usuarios puede ser complicado.

  • Proceso de carga de las plantillas

    02-02-2010 a las 03:50:00

    Este artículo trata del proceso de carga de las plantillas en OpenCms

OpenCms Hispano Blog

LogoOpenCmsHispanoRSS

Sindicación del blog de la comunidad OpenCms Hispano

  • Tag cms:formatter

    12-03-2013 a las 09:34:00

    Uno de los nuevos tag más usados en la nueva versión de OpenCms es el tag que nos permite acceder a los contenidos XML a la hora de realizar un Formatter
  • Uso del tag cms:navigation en OpenCms 8

    21-02-2013 a las 05:56:00

    Uno de los nuevos taglibs que creo Alkacon en OpenCms 8 fue cms:navigation. En este artículo explicamos como se usa y las distintas configuraciones.
  • Error en Collector ByQuery (Solr) en OpenCms 8.5

    11-01-2013 a las 07:49:00

    Una de las grandes novedades de OpenCms 8.5 es la integración con solr, y con ello, la aparición de un nuevo Collector que nos permite hacer un listado de contenido mediante una consulta a Solr. En este artículo podréis ver un error encontrado con el máximo de resultados a obtener.
  • Error con Firefox 17 y editor WYSIWYG

    28-11-2012 a las 10:47:00

    Como suele ser habitual últimamente, la actualización de los navegadores están trayendo problemas con los editores WYSIWYG, en concreto, con el editor de contenido de OpenCms. A continuación mostramos los pasos a dar para solucionar el problema en nuestros OpenCms.
Calidad Calidad

©Saga Soluciones Tecnológicas
T. 954 45 72 75 / F. 954 45 75 72
Inscrita en el registro mercantil de Sevilla. Tomo 3662, folio 76 , hoja numero SE-52019

Aviso legal
Powered by OpenCms 7.5 & Template Saga

© Saga Soluciones Tecnológicas
T. 954 45 72 75 / F. 954 45 75 72
Inscrita en el registro mercantil de Sevilla. Tomo 3662, folio 76 , hoja numero SE-52019