GX2383: HTML5, CSS3 y CSV para más flexibilidad y usabilidad web
•Descargar como PPTX, PDF•
0 recomendaciones•339 vistas
GeneXus Evolution 2 ofrece mayor flexibilidad y usabilidad en la interfaz web a través del uso de estándares como HTML5, CSS3 y validación de datos CSV. Nuevas características como dominios semánticos, temas, fuentes web y validación de cliente mejorada permiten crear experiencias de usuario más ricas e intuitivas. La capacidad de agregar clases a niveles más específicos también aumenta la personalización y rendimiento de las aplicaciones web.
Recomendados
Más contenido relacionado
Similar a GX2383: HTML5, CSS3 y CSV para más flexibilidad y usabilidad web
Similar a GX2383: HTML5, CSS3 y CSV para más flexibilidad y usabilidad web (20)
Más de GeneXus
Más de GeneXus (20)
GX2383: HTML5, CSS3 y CSV para más flexibilidad y usabilidad web
- 1. GeneXusEvolution 2 y HTML5, CSS3, CSV: más flexibilidad y usabilidad en la interfaz web #GX2383 Claudia Murialdo cmurialdo@genexus.com
- 2. GeneXusEvolution 2 Experiencia de usuario Seguridad Desempeño
- 3. Estándares Usabilidad Flexibilidad Experiencia de usuario
- 4. Estándares Usabilidad Flexibilidad 1.Estándares
- 5. 1.Estándares HTML válido según W3C HTML 4.01 Transitional HTML 4.01 Strict XHTML 4.01 Transitional HTML 5 CSS válido según W3C
- 13. Estándares Usabilidad Flexibilidad 2.Usabilidad
- 14. 2.Usabilidad
- 22. 2. Usabilidad – dominios semánticos
- 23. 2. Usabilidad – dominios semánticos
- 24. 2. Usabilidad – dominios semánticos
- 38. Estándares Usabilidad Flexibilidad 3. Flexibilidad
- 39. 3.Flexibilidad Client Side Validation más personalizable
- 42. 3.Flexibilidad Class a nivel de atributo, variable y dominio
- 45. 3.Flexibilidad
- 46. Estándares Usabilidad Flexibilidad Experiencia de usuario
- 47. Conferencias relacionadas La vuelta al mundo en 80 pixels - Sala 2B, martes, hora: 11:45 La evolución WEB está lejos de terminar - Sala 4CR, martes, hora: 15:45 Desarrollando aplicaciones seguras con GeneXus – Sala 2ª, miércoles, hora:9:30 Claudia Murialdo, desarrollo, cmurialdo@genexus.com MUCHAS GRACIAS
- 48. Muchas gracias
Notas del editor
- En el generador web de GeneXusEv2 hemos seguido trabajando en estas tres áreas. Agregando funcionalidad, o mejorando lo que ya existe, siempre es posible mejorarlo. Ya se para contemplar nuevos requerimientos o para seguir evolucionando junto con las especificaciones y estándares que van surgiendo, en seguridad, en html.En particular en esta charla les cuento qué hemos estado haciendo en el área de experiencia de usuario con la interfaz web de las aplicaciones generadas.Y dentro de esa área, las mejoras y las cosas nuevas caen en una de las siguientes tres categorias: (sig. Ppt).
- Usabilidad que refiere a mejoras que hacen que las pantallas puedan hacerse mas amigables, y que tengan mas semántica haciendo que sea mas facil ingresar un dato por ejemplo.Flexibilidad para quien programa la aplicacion, que sea mas sencillo customizar el comportamiento por ejemplo de client side validation.Estándares, que es un area en la que siempre estamos atentos, que es evolucionar acercandose lo mas posible a las especificaciones de estandares web que tambien van evolucionando como HTML y CSS.
- El WorldWide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares como XML, XHTML, SOAP, Comercio electrónico, HTML, CSS; que aseguran el crecimiento de la Web a largo plazo. La problemas derivados de la heterogeneidad de la web desde sus inicios ha dejado de manifiesto la necesidad de tener un estándar que permita una programación e interpretación de aplicable a cualquier plataforma, navegador y usuario.De esto modo, el Consorcio WorldWide Web (W3C por sus siglas en ingles) fundador de la WWW ha venido sacando una serie de estándares para la escritura correcta de una página web en HTML.La validez es un criterio de calidad para una pagina web. Una pagina web valida no es necesariamenteuna buena pagina. Pero una pagina invalida tienemenos chances de ser una buena pagina.La validación es el proceso de chequear una pagina web contra una gramática.W3C MarkupValidator dice si la pagina cumple con un conjunto de reglas.TheMarkupValidator es una herramienta gratuita que chequea la sintaxis de documentos web contra una gramática, la que la pagina dice estar usando.En cadapáginaquevalida se puedemostrar un distintivo “W3C valid” es un iconoqueprovee el validador.Esta herramienta de validación tiene tres formas de operar: Por la dirección de tu página.Subiendo el archivo HTML que quieres validar.Poniendo directamente el código a validar dentro de un campo de texto.Una vez introducido y validado tu código; te mostrará los errores y su ubicación con lo que podras iniciar corregir para llevarla al estardar.La validez de un style sheet depende del nivel de CSS usado en ese style sheet.Debecontener solo rules nombre de propiedades y valoresdefinidos en suespecificación.El servicio de validación de w3c es gratis. Es open y se puedebajarinstalarlolocalmenteusarlo y modificarloincluso.Algunos browsers extiendenesos profiles con nuevaspropiedadescomohizo Mozilla con la propiedad-moz-opacity.El validador no contemplaesaspropiedades y haceque sea inválido en términos de lasespecificaiones de CSS. Las ventajas más importante de tener una web validada son las siguientes: Carga más rápida ante menos código extraño.Adaptación a múltiples plataformas y navegadores.Preprara el sitio ante cualquier cambio en los navegadores.Homogeniza la visibilidad de tu web.Permite un mejor acceso de los buscadores y por tanto, mayor trafico.
- El warning que se muestra ahí se debe a:Using experimental feature: HTML5 Conformance Checker.The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies.
- Una vez que el validador valida la página, se puede utilizar en ella el ícono de validez como un distintivo de dicha validación.
- Iconos que da la w3c para poner en cada pagina valida.
- En el área usabilidad en la interfaz web hemos agregado nuevos controles y funcionalidades que están presentes en las ultimas especificaciones de HTML5 y CSS3 que nos da un valor agregado en la parte visual.Hasta versiones previas de GeneXusEv2 el HTML generado por GeneXus sigue la especificación HTML4, los controles y característias que se utilizan son propios de esa especificación. Que además es una versión de html creada en 1990 y estandarizada en 1997 que no ha cambiado por muchos años y eso hace que todos los browsers implementaran esa especificación es decir se soporta en todos. La especificación de HMTL5 aun esta en desarrollo, no esta cerrada e intenta ser una conjunción de las versiones previas (html4, xhtml).
- El primer draftde HTML5 se publico en Enero de 2008W3C creó un logotipo oficial propio para HTML5 y motiva a que se use como distintivo del uso o interés en HTML5.HTML5 introduce un numero de elementos nuevos que reemplazan a otros ya existentes dando mas semántica. HTML5 esta diseñado de manera que versiones viejas de browsers pueda ignorar los nuevos constructores de forma segura. Algunos elementos nuevos que agregamos en Evolution 2 son: Email, tel, url, search, color, invitation text.La principal ventaja de estos controles es que son semánticamente mas correctos y permiten mas accesibilidad en los mobiles: si se lleva a un input mail con iPhone, el iPhonedespliega un teclado con el simbolo @ en la pantallaprimaria. O .comosies del tipourl.
- PlaceHolder (Invitation Message) proporciona unindicioque describe el valor esperado en un input. Se despliegamientrasestavacio, desaparececuandoese campo obtiene el foco.
- Opera permiteseleccionar un color desde un color picker.
- La primer especificación de CSS oficial, la version 1, fuepublicada en 1996. Y la 2 se publicó en 1998.CSS3 es un poco distinta porque en lugar de definir todas las features en una única gran especificación, como CSS2 y CSS3 esta dividida en varios módulos. Los primeros drafts fueron publicados en 1999. Y debido a esa modularización es que diferentes módulos tienen distinta estabilidad y status.En marzo de 2011Algunos módulos (son mas de 40) como Selectors, Namespaces, Color y Media Queries son considerados estables y en estado de candidato o recomendación.
- La propiedad @font-face de CSS3 nos permite utilizar tipografías personalizadas en la Web de una manera accesible, manipulable y escalable.Algunas ventajas de utilizar @font-face:El texto puede ser localizado mediante búsquedas (Ctrl-F ). Los motores de busqueda va a encontrar y priorizar estos textos sobre una pagina que tenga imágenes con los mismos textos por mas que tengan el tag ALT.Menos costo de mantenimiento.El texto es accesible, pudiendo ser interpretado por las ayudas técnicas como los lectores de pantalla.El texto es traducible, mediante la traducción en el navegador u otros servicios de traducción.El texto puede ser formateado mediante las propiedades de estilo de texto: line-height , letter-spacing , text-shadow , text-align , y utilizado con los selectores ::first-letter y ::first-linePermite usar fonts mas creativos, que antes habrian requerido imagenes, ahora pueden ser creados embebiendo los fonts. Ayudando a crear un markup mas limpio y mas semantico en el backend.Otra cracteristica interesante es que se pueden usar como los fonts regulares, configurando todas las propiedades que se tienen en un fontcomun. Para browsers que no soportan las fuentes ttf, se puede escribir una definicion que incluya los dos, es decir definir el font con multiplesrc.
- Nuevaspropiedades de CSS 3:-border-radius soportada en IE9+, Firefox 4+, Chrome, Safari 5+, y Opera.-box shadow soportada en IE9+, Firefox 4, Chrome, and Opera.-text shadow se soporta en todos los browsers excepto IE-Css3fonts, antes de css3 los diseñadores web tenian que usar fonts que tuvieran instaladas en su computadora. Ahora pueden usar cualquier font que les guste.Por ejemplo en http://www.google.com/webfonts existen muchas font gratuitas que se pueden usar.Internet Explorer solo soporta fonts de tipo .eot (Embedded OpenType).Firefox, Chrome, Safari, y Opera soportan fonts de tipo.ttf (True Type Fonts) y .otf (OpenType Fonts).
- La imagen de la derecha muestra como se ve en un browser como IE8 o IE7.
- Se permite importar un archivo css completo. Se selecciona un archivo css y los nombres de clases que coinciden se actualizan.O se permite también importar una definición de css de una clase por ejemplo.Esto facilita la interacción del diseñador con el desarrollador, podemos generar un css pero no podíamos importar uno.
- Client side validation:Mas configurable, mensajes de error inline en el flujo del documento.Extensibles: se puedeprogramar un user control para los erroviewerInteracción mejorada: permitir seguir al usuario y dar feedback tan pronto como sea posible, al salir del campo.
- Class a nivel de atributo/dominio/variable. Mas flexibilidad para el desarrollador.Por ejemplo un atributo que se que siempre voy a requerir su valor, si bien se chequea con reglas pero puedo indicar que es requerido.
- Dominiosearch con una class asociada: en este caso al class se le asocia una imagen de background (la lupita) alineada a la izquierda, de modo que cada vez que se use una variable o atributo de tipo search, se dibuje un campo de texto de esa manera.
- Variable basada en atributo con una class asociada: en este caso le pueso asociar una Class particular, por ejemplo LongAttribute a este atributo “Contentido” y hago que la ReadOnlyLongAttribute muestre solo la primer parte del texto, y no todo el texto como se veia en el grid anterior.
- Razones para ofrecer mas de un css en un sitio web:-contemplar variedad de gustos: diferentes diseños son apropiados para diferentes personas. Por ejemplo a algunos les gusta un diseño colorido. A otros Uno mas sencillo y limpio.-contemplar necesidades especiales: por ejemplo gente de tercera edad que puede necesitar font sizes mas grandes.