Presentado por Camilo Kawerín y Manuel Razzari el 28/11/2012 en http://ux2012.com.ar La Jornada Anual de Experiencia de Usuario en Argentina, organizado por IxDA Buenos Aires.
Web applications today are a challenge to make accessible because native HTML does not have the language to support the types of widgets added to Web pages. WAI-ARIA provides a way to add roles, states and properties to make RIA accessible to assistive technology such as screen readers.
App Development
Purpose,
What we are going to Develop
Planning,
Working,
Cost Estimation, Resource Estimation, Time Estimation,
Testing,
Software quality Assurance
And finally What we are going to deliver.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
This document compares and contrasts UI and UX design. It defines UI design as focusing on the interaction with products and services, while UX design focuses on what a person feels when using a product. The document outlines principles of good UI design, including structure, simplicity, visibility, feedback, tolerance, and reuse. It also discusses principles of good UX design such as usefulness, usability, desirability, accessibility, credibility, and findability. Examples of companies with good UX design are provided. The document concludes by noting that while related, UI and UX design have distinct purposes and goals.
This document provides an overview of user experience (UX) design. It begins with a brief history of UX, starting in the 1940s with a focus on ergonomics and human factors. It then discusses key developments in UX through the 1950s with cognitive science and augmented reality, and the first graphical user interface in the 1970s. The document also outlines an anticipated future for UX with more contextual and natural designs. It defines UX, explaining it is not just about visual design but also psychology, user needs, and emotions. It discusses the importance of UX and having a user-centered design process that includes research, prototyping, and testing. Finally, it provides tips and tools for different aspects of
Slide ini merupakan tutorial dasar dari penggunaan javaScript. Bagaimana javascript berjalan dan penggunaannya, javaScript statement, javaScript variable, javaScript looping, dan javaScript operator.
This document provides an introduction to UI/UX design. It defines UX as user experience design, which focuses on the user's emotions and feedback, and UI as user interface design, which defines the purpose and functionality of an app. The document outlines some basic principles of UI design like using clarity, consistency, established patterns, and visual hierarchy through typography, white space, and limited use of color. It emphasizes designing for legibility, readability, and creating a strong visual hierarchy through intentional use of white space.
The business-to-consumer aspect of product commerce (e-commerce) is the most visible business use of the World Wide Web. The primary goal of an e-commerce site is to sell goods online.
This project deals with developing an e-commerce website for Online Product Sale. It provides the user with a catalog of different product available for purchase in the store. In order to facilitate online purchase a shopping cart is provided to the user. The system is implemented using a 3-tier approach, with a backend database, a middle tier of
Microsoft Internet Information Services (IIS) and PHP, and a web browser as the front end client. In order to develop an e-commerce website, a number of Technologies must be studied and understood.
These include multi-tiered architecture, server and client side scripting techniques, implementation technologies such as PHP(OOP), JQUERY, BOOTSTRAP, HTML5, relational databases (such as MySQLi, Access). This is a project with the objective to develop a basic website where a consumer is provided with a shopping cart application and also to know about the technologies used to develop such an application. This document will discuss each of the underlying technologies to create and implement an e-commerce website.
The document provides an introduction to WordPress, including its history and how to set it up. It discusses the workshop goals of giving an overview of WordPress, how to install it, develop sites with it, use themes, and plugins. It then provides details on the prerequisites for using WordPress, an overview of what it is and its history starting in 2003. It outlines the basic 8 steps for setting up WordPress which includes installing a local server, creating a database, copying WordPress files, configuring it, running the installation, logging into the admin panel, and visiting the front site. It also provides brief descriptions of what themes and plugins are in WordPress.
HTML was first defined by Tim Berners-Lee in 1991 and has evolved through several versions. HTML5 and CSS3 are the next generation standards that will enhance the richness and interactivity of web content. HTML5 introduces new semantic tags and APIs for multimedia, geolocation, and offline storage. CSS3 includes features for rounded corners, drop shadows, columns, animations, and media queries for responsive design. While legacy browsers present challenges, HTML5 and CSS3 will improve the functionality of the mobile web and make the interface of the web comparable to native applications.
This document discusses usability and user experience. It defines usability as how intuitive and easy a product is to use, and how it can increase efficiency and remove obstacles. The document then lists several aspects of usability - intuitive design, learnability, efficiency of use, memorability, and error frequency. It provides a usability checklist with seven guidelines: recognition over recall, matching the system to real life, following standards and best practices, preventing errors, recognizing errors, visibility of system status, and informing users of their location. Examples are given for each guideline.
Testing Compliance with Accessibility GuidelinesTechWell
Currently, 2.4 billion people use the Internet, and about 10 percent of the world’s population has some form of disability. This means millions of potential users will have difficulty accessing the Internet. Thus, accessibility testing should not be ignored. Anish Krishnan discusses the importance of accessibility testing, reasons for considering accessibility issues while designing, and international Web accessibility laws. He shares effective techniques for carrying out accessibility testing, the potential scope of this testing, myths surrounding accessibility testing, and a set of automated tools to support this testing. Join Anish to learn about the Section 508 standards and how to test for web accessibility using screen readers and open source tools. Experience screen reader technology on both an accessible and non-accessible site. Learn how your test team can be advocates of accessible websites throughout the project lifecycle and add accessibility testing to your testing capabilities.
The document discusses the concept of modifiability in software architecture. It defines modifiability as the ease with which a software system can be modified to changes in requirements, environment, or specifications. It describes aspects that impact modifiability such as what can change, when changes are required, who implements changes, and the cost of changes. It also discusses business concerns related to modifiability and provides examples of modifiability scenarios and quality attribute scenarios. Finally, it outlines tactics to improve modifiability such as reducing module size, increasing cohesion, reducing coupling, and deferring binding time.
This document provides a marketing plan for Maxim's recruitment website with the goal of attracting young job seekers to join the food and beverage industry. It includes a situational analysis identifying target audiences, communication objectives, key elements of the website design, and a cost budget. It outlines plans for an initial website launch using owned and paid media, and monitoring methods to evaluate performance over time. The overall marketing plan aims to improve Maxim's employer branding and associate the brand with career development opportunities to appeal to different target job seeker segments.
Best Practices for Shifting Left Performance and Accessibility TestingPerfecto by Perforce
Web and mobile test cycles typically leverage automation frameworks like Selenium and Appium that are mostly focused on functional testing with end-to-end scenarios. But what about nonfunctional testing — including performance, accessibility, security, and UX?
Unfortunately, nonfunctional testing is either left to the end of the cycle or done only partially. Or, it’s outsourced externally, where it is performed manually due to a lack of time and automation abilities.
When nonfunctional testing is overlooked or left until the end of cycle, performance, accessibility, and UX defects can cause brand damage and are more expensive to fix after the fact. Specifically, accessibility defects can also result in expensive complaints or lawsuits.
Learn how you can avoid damaging defects. Join our panel webinar led by Perfecto’s VP of Products Tzvika Shahaf and Chief Evangelist and author Eran Kinsbruner, together with Dylan Barrel, CTO at Deque, and Henrik Rexed, Performance Testing Advocate from Neotys, to learn how you can expand your coverage within the build cycle by shifting automated nonfunctional testing left.
During the webinar, you will learn:
- The key benefits of shifting performance and accessibility testing left.
- Best practices and recommendations on how to succeed in shifting such tests into the build process.
- How to get started with mobile and web performance and accessibility testing.
The document discusses using AXE for web accessibility testing. It begins with an introduction to web accessibility and common issues like lack of text alternatives and low color contrast. It then summarizes the WCAG guidelines and principles of perceivable, operable, understandable and robust. Various accessibility testing options are listed including AXE, which is an open source tool that can be used as a browser plugin or API for automated testing. It provides details on using the AXE JavaScript API to integrate accessibility tests into existing automation frameworks.
This PPT throws light on some of the essential elements of Accessibility testing which have become crucial to ensure quality in this day and age. To know more on accessibility testing, accessibility mandates, WCAG 2.0, paired testing approach, accessibility guidelines and standards go through this presentation as well as the ones coming soon.
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
Front-end development involves building the elements of a website that users interact with directly. This document provides an overview of HTML, CSS, semantic markup, responsive design, and tools for front-end development. It defines HTML as the standard markup language for web pages and CSS as the style sheet language used to describe document formatting. Semantic HTML uses meaningful markup to reinforce content semantics rather than just presentation. Responsive design approaches like separate files or media queries allow content to adapt to different devices. Development tools like Chrome DevTools, WebStorm IDE, and Grunt help automate tasks.
El documento resume los desafíos de la accesibilidad web desde la perspectiva de diferentes roles como contenidistas, diseñadores, programadores back-end, maquetadores y clientes. Señala que a menudo estos roles ven la accesibilidad como una carga en lugar de una prioridad, y carecen de información, capacitación y motivación para cumplir con los estándares.
Presentado originalmente el martes 12 de junio de 2012, en la
5ta. Jornada "Por una Web Sin Barreras para las Personas con Discapacidad",
http://www.isoc.org.ar/proyectos/jornada5.html
Actualizado el 8 de agosto de 2013 para presentación en el curso
"Especialización en Diseño de interacción con estándares de accesibilidad y usabilidad"
del INSPT - Universidad Tecnológica Nacional.
A look at WordPress in 2016, and a proposal for a future direction for the project functionality and organization, delivered in December 2016 at WordCamp US in Philadelphia.
You can watch it on Youtube here: https://www.youtube.com/watch?v=Nl6U7UotA-M
How to Become a Thought Leader in Your NicheLeslie Samuel
Are bloggers thought leaders? Here are some tips on how you can become one. Provide great value, put awesome content out there on a regular basis, and help others.
Buenas y malas prácticas de accesibilidad en documentos electrónicosOlga Carreras Montoto
Taller de la Jornada sobre Recursos Tecnológicos para la Inclusión Social (Universidad de Alicante, 7/10/2014)
Vídeo de la presentación disponible en: http://web.ua.es/es/cae/eventos/videos-jornada-sobre-recursos-tecnologicos-para-la-inclusion-social.html#player_125007
Este documento describe el proyecto INREDIS, cuyo objetivo es desarrollar tecnologías de accesibilidad e interoperabilidad para personas con discapacidad. El proyecto aborda líneas de trabajo como el análisis de necesidades de usuarios, protocolos de interoperabilidad, interfaces de usuario y ayudas técnicas ubicuas. Se han desarrollado prototipos como un cajero accesible y un concentrador de control universal. El proyecto busca establecer un centro demostrador de tecnología accesible e interoperable
Principios básicos de UX para móvilesJavier Cuello
Este documento presenta los principios básicos de diseño de experiencia de usuario (UX) para aplicaciones móviles. Explora las diferencias clave entre diseñar para la web y para aplicaciones móviles, incluyendo el contexto de uso cambiante y las limitaciones del hardware. Luego describe el proceso típico de diseño de una aplicación móvil, desde el concepto inicial y el diseño de la interacción hasta la programación, el diseño visual y el lanzamiento final. Finalmente, enfatiza la importancia de probar iterativamente los prototipos con usu
TestingUY 2016 - Pruebas de Accesibilidad para aplicaciones móvilesLisandra Armas
Este documento habla sobre las pruebas de accesibilidad para aplicaciones móviles. Explica que la accesibilidad se refiere a que todos puedan usar un servicio independientemente de sus capacidades. Detalla los 4 principios de accesibilidad móvil según la W3C y algunas herramientas y ayudas técnicas para verificar la accesibilidad en dispositivos móviles. Finalmente, propone realizar un ejercicio práctico evaluando la accesibilidad de una aplicación a través de VoiceOver en iOS.
Wie werden Verlage Medien und Marketinginformationen zukünftig distribuieren? In diesem Vortrag, gehalten am 26.05.2011 auf dem Fachbuch-Panel des Kongresses der Deutschen Fachpresse, erläutert Ehrhardt F. Heinold die "Herausforderung Hyperdistribution".
Der Vortrag "Digitale Geschäftsmodelle = neue Geschäftsmodelle?", gehalten auf dem E:Publish-Kongress 2012, zeigt, dass die Entwicklung digitaler Geschäftsmdelle eine Reihe von neuen Herausforderungen stellt, die einen deutlichen Change erfordern. ..
In dem Vortrag "Bildungsverlage zwischen Papier und E-Revolution", gehalten auf der Leantec 2013, diskutiere ich die Frage, warum das digitale Lernen in den Schulen (noch) nicht funktioniert und welche Voraussetzungen dafür nötig wären.
Präsentation zum Agile Monday in Nürnberg am 14.3.2016
Agile Business Development bietet eine Landkarte, um Methoden zum Entwerfen und Entwicklen neuer Geschäftsideen oder von Produkten und Dienstleistungen einzuordnen.
Ordnungskriterien sind zum einen die Phasen des Lebenszyklus einer Idee und zum anderen die Ebenen bzw. Granularität des zu entwickelnden Angebots (vom Geschäftsfeld bis zur Funktionalität).
Primero empiezo con una breve introducción sobre accesibilidad web: objetivos, WAI, WCAG, etc.
Después enumero las directrices POUR: Perceptible, Operable, Comprensible, Robusto
Luego cuento los mitos de la accesibiliad web y los beneficios que obtenemos siguiendo las pautas de accesibilidad web.
Seguidamente, enumero los problemas de discapacidad, e intento mostrar como navegan los usuarios con dichas discapacidades.
También enumero los dispositivos harware y software que los usuarios con discapacidad suelen utilizar.
Continúo contando de una forma general los desafíos de las personas con discapacidad y las posibles soluciones, enumerando justo después los principios claves a tener en cuenta cuando desarrollamos una aplicación web.
Acto seguido, muestro trucos y códigos de ejemplo de los elementos más importantes a tener en cuenta: imágenes y animaciones, mapas de imagen, elementos multimedia, enlaces, organización de las páginas, figuras y diagramas, scripts, frames, tablas, formularios y elementos repetitivos
Para terminar enumero ciertas herramientas que nos pueden ser útiles para validar la accesibilidad web.
Este documento resume una presentación sobre la implementación de estándares web y componentes reutilizables en MercadoLibre. La presentación destaca la necesidad de agilizar el desarrollo web mediante el uso de widgets configurables, estandarización, y buenas prácticas de desarrollo como marcado semántico y accesibilidad. Se introduce la librería Chico UI de MercadoLibre, la cual provee componentes reutilizables como carruseles y capas para lograr consistencia en la interfaz.
Este documento presenta una introducción a los frameworks CSS. Explica brevemente qué son los frameworks CSS y sus ventajas e inconvenientes. Luego, ofrece una panorámica de varios frameworks populares como 1Kb CSS Grid, 960 Grid System, Blueprint, Foundation y Bootstrap, describiendo sus características principales. Finalmente, discute algunos factores a considerar a la hora de elegir un framework para un proyecto en particular.
Este documento introduce los frameworks CSS. Explica que son herramientas que abstraen tareas repetitivas de desarrollo CSS para aumentar la productividad. Explora ventajas como código más consistente y mantenible, e inconvenientes como curva de aprendizaje. Luego resume algunos frameworks populares como 1KB Grid, 960 Grid System, Blueprint y Bootstrap, destacando sus características como uso de retículas y facilidad de uso.
Este documento presenta las ventajas de HTML5 sobre HTML4 y XHTML, incluyendo menos etiquetas obsoletas, menos código necesario, nuevos tipos de entrada como fecha y color sin necesidad de JavaScript, soporte incorporado para audio y video, y una estructura semántica mejorada mediante elementos como <header>, <nav>, <article> y <section>. Aunque la mayoría de los navegadores ya soportan HTML5, todavía existe una alta cuota de mercado de versiones de Internet Explorer anteriores a la 9 que no lo admiten, por lo que se recom
AngularJS es un framework de JavaScript creado por Google para desarrollar aplicaciones web dinámicas. Permite añadir funcionalidades de programación a páginas HTML5 mediante directivas y expresiones que enlazan datos y presentación. AngularJS define aplicaciones, enlaza datos de formularios y muestra resultados usando directivas como ng-app, ng-model y ng-bind.
Empiezo contando qué es Bootstrap, sus ventajas e inconvenientes, y como empezar a usarlo.
Luego cuento detalladamente las distintas características del framework: el sistema de rejilla, la tipografía, las tablas, los formularios, los botones, las imágenes, los helpers...
Continúo explicando las facilidades que tiene para realizar diseños adaptables.
Sigo enumerando los distintos componentes del framework, y los distintos añadidos que tiene si además utilizas JavaScript.
Para terminar, comento como se puede personalizar, ya sea usando tu propio CSS, modificando el CSS de Bootstrap desde la página destinada a tal efecto, o directamente compilando los ficheros Less del core.
Grails: Framework para el desarrollo de aplicaciones Web No 3Esteban Saavedra
El documento describe cómo personalizar la apariencia de una aplicación web creada con Grails. Se explica cómo crear fragmentos de código como un footer y topbar y agregarlos a la plantilla principal mediante tags. También se detalla cómo crear una hoja de estilos para dar formato a estas secciones y al resto de la aplicación, logrando así una interfaz personalizada. Finalmente, se modifica la página de inicio para reemplazar el contenido predeterminado.
El documento describe una tarea en la que los estudiantes deben subir 3 documentos a sitios web para hacer presentaciones en línea. Los estudiantes deben subir su hoja de vida a Slideshare, un tema de su módulo a Scribd, e impresiones sobre la Web 2.0 a Calameo. El documento a entregar debe incluir una tabla con la información requerida (contenido, tipo de documento, herramienta en línea, enlace y código de inserción) y un mensaje al tutor indicando el cumplimiento de la tarea.
Elemento que se puede arrastrar
•
Dropzone: Zona donde se puede soltar el elemento arrastrado
•
Dragstart: Evento que se dispara cuando se inicia el arrastre
•
Drag: Evento que se dispara mientras se arrastra
•
Dragend: Evento que se dispara cuando termina el arrastre
•
Dragenter: Evento que se dispara cuando el elemento entra en la zona de soltado
•
Dragover: Evento que se dispara cuando el elemento está sobre la zona de soltado
•
Drop
Este documento proporciona una introducción a HTML5 y CSS3. Explica algunas de las nuevas características de HTML5 como los nuevos elementos semánticos como <header>, <footer>, <nav>, <article>, etc. También cubre las nuevas características de formularios en HTML5 como placeholder, autofocus, nuevos tipos de entrada como email, url, número de teléfono, etc. Además, introduce las nuevas APIs de HTML5 como Canvas, Audio, Video, almacenamiento web y drag and drop.
Este documento proporciona una introducción a HTML5 y CSS3. Explica las nuevas características de HTML5 como audio, video, canvas, almacenamiento local y semántica mejorada. También cubre nuevos elementos como <header>, <footer>, <nav> y <article>. Finalmente, describe algunas funciones de canvas y audio/video en HTML5.
Este documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 incluye nuevos elementos semánticos como <header>, <nav>, <article>, <section> y <footer>. También presenta nuevos elementos multimedia como <video> y <audio>. CSS3 incluye nuevas posibilidades para decoración como fondos múltiples, RGBa, text-shadow, box-shadow y transformaciones. El documento recomienda usar prefijos de proveedor y polyfills para mejorar la compatibilidad, y proporciona recursos adicionales para aprender más sobre estas
Jquery para principianes
JQUERY
AJAX ENVIAR FORMULARIOS SIN RECARGAR
ACTUALIZAR UN ELEMENTO SIN RECARGAR
COMBOS DEPENDIENTES AJAX BASE DE DATOS
STAR RATING JQUERY SIN BASE DE DATOS
STAR RATING JQUERY PLUGIN
DROPDOWN MENU DESPLEGABLE
ENVIA CORREOS SIN RECARGAR
PANEL DE IMAGENES CAROUSEL
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
RECARGAR TEXTO AUTOMATICAMENTE
AGREGAR GRAFICOS ESTADISTICOS PIE
VALIDAR FORMULARIOS
INCLUIR TOOLTIP EN MAPA DE IMÁGENES
SUBIR MULTIPLES ARCHIVOS
WEB MODULAR PHP
SLIDER CONTENIDO DESTACADO
VENTANA MODAL
AGREGAR BORRAR CAMPOS
MODIFICANDO ATRIBUTOS
JQUERY MUSIC PLAYER
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
Este documento proporciona resúmenes breves de varias técnicas y funcionalidades de jQuery y JavaScript para el desarrollo web. Incluye cómo enviar formularios sin recargar la página usando AJAX, actualizar elementos sin recargar, crear combos dependientes con una base de datos, agregar calificaciones de estrellas interactivas, crear menús desplegables, y más. El objetivo es ofrecer múltiples soluciones comunes con jQuery de una manera concisa y de alto nivel.
Este documento proporciona una introducción a HTML5. Explica que HTML5 no incluye CSS3, APIs de JavaScript u otras tecnologías relacionadas, sino que se refiere específicamente al lenguaje de marcado. Describe algunas de las nuevas características de HTML5 como formularios web, video, audio, canvas y almacenamiento web. También resume brevemente la historia del desarrollo de HTML5 y las organizaciones involucradas como WHATWG y W3C.
Este documento proporciona una introducción al framework jQuery Mobile. En 3 oraciones o menos: jQuery Mobile es un framework HTML5 para crear aplicaciones web móviles multiplataforma utilizando HTML, CSS y JavaScript. Proporciona componentes como listas, botones, formularios y transiciones entre páginas. Los desarrolladores pueden crear interfaces de usuario ricas para dispositivos móviles de manera rápida y sencilla con este framework.
Este documento proporciona una introducción a HTML5, incluyendo su historia, objetivos, nuevas características como Canvas, video, audio, almacenamiento web y más. También muestra ejemplos del uso de estas nuevas características a través de código HTML5 y JavaScript.
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a GoogleMiguel Ángel Pau
Este documento resume una presentación sobre marcado de datos estructurados. Explica que los datos estructurados organizan la información según estándares para definir tipos de datos y sus propiedades. Detalla los diferentes formatos admitidos como JSON-LD, microdatos y RDFa y recomienda marcados como recetas, eventos, productos y reseñas. También cubre herramientas de validación y detección de errores comunes. El objetivo es ayudar a los sitios web a destacar en los resultados de búsqueda de Google.
Este documento presenta ejemplos de uso de hojas de estilo CSS y JavaScript para la validación de formularios web. Se explican conceptos básicos como la creación de hojas de estilo CSS, la sintaxis de JavaScript y su uso para capturar eventos del usuario como clics de botones. Se proveen cuatro ejemplos con código que muestran aplicaciones como cambiar el color de fondo de una página usando JavaScript.
Similar a Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA (20)
"Los 10 Beneficios Clave de Contratar un Asistente Virtual" pdftiendadigitalboutique
"¡Descubre el fascinante mundo de los Asistentes Virtuales y desbloquea tu potencial profesional!
Este documento es tu guía definitiva para adentrarte en el emocionante universo de los Asistentes Virtuales (AV), una profesión en auge que está revolucionando la forma de trabajar en la era digital. Ya seas un joven emprendedor buscando tu camino o un profesional experimentado listo para un cambio, este recurso es tu puerta de entrada a un futuro lleno de oportunidades.
¿Qué encontrarás en su interior? Una mina de oro de información:
• Descubre qué es realmente un Asistente Virtual y por qué está en tan alta demanda.
• Explora las habilidades esenciales y las herramientas tecnológicas que necesitas para triunfar.
• Aprende a superar los desafíos comunes con estrategias probadas por expertos.
• Sumérgete en las tendencias futuras que darán forma a esta profesión, desde la Inteligencia Artificial hasta la Realidad Virtual.
• Obtén consejos prácticos para construir tu carrera, encontrar clientes y destacar en un mercado competitivo.
Este documento no es solo una guía, es tu compañero en el viaje hacia la libertad laboral y el éxito profesional. Con un lenguaje accesible y ejemplos concretos, te sentirás inspirado y equipado para dar tus primeros pasos o llevar tu carrera de AV al siguiente nivel.
¿Lo mejor? Está repleto de enlaces útiles y recursos adicionales, incluyendo una invitación especial a Entireweb, una plataforma diseñada para potenciar tu éxito como Asistente Virtual.
Ya seas un estudiante curioso, un profesional buscando un cambio de carrera, o un emprendedor en busca de flexibilidad, este documento tiene algo valioso para ti. Es tu pasaporte a un mundo de posibilidades laborales, donde la tecnología y la creatividad se encuentran.
No esperes más para descubrir cómo puedes formar parte de esta revolución laboral. Descarga este documento ahora y da el primer paso hacia un futuro profesional emocionante y lleno de oportunidades. ¡Tu aventura como Asistente Virtual comienza aquí!"
Edición número 18 de la revista Bifurcaciones. El número gira alrededor del eHealth y cómo la tecnología transforma la atención sanitaria. La colaboración de Juan Jesús Velasco pone foco en startups de eHealth españolas.
La implementación de nuevas tecnologías se ha desarrollado en paralelo con los cambios en los métodos de enseñanza e incluso con la forma de concebir el aprendizaje,, donde cada vez más es el propio alumno quien toma el control del proceso, los materiales y recursos adaptándose a sus requerimientos y posibilidades.
IPLOOK Solución de core móvil convergente 4G&5G de punta a punta.pdfIPLOOK Networks
IPLOOK Solución de core móvil convergente 4G&5G de punta a punta. Perfil de la empresa. ¿Por qué elegir a IPLOOK? Cooperación industrial. Clientes al rededor del mundo
LIBRO DE AUTOMATIZACION -DAR ORDENES A UN SISTEMA CON MINIMA INTERVENCION HUMANA-, MEDIANTE LOGICA DE CONTACTAROES- LOGICA CABLEADA Y MEDIENTA LOGICA DE AUTOMATAS PROGRAMABLES -PLCS-
PROYECTO INTEGRADOR: LAS TIC EN LA SOCIEDAD241578066
Nombre de la actividad: Proyecto integrador. Las TIC en la sociedad
Nombre del estudiante: Alejandra Santana Martínez.
En esta presentación se abordará lo siguiente:
Descripción de como las TICs son usadas en la comunidad en que vivo y como he visto que ayudan a los que me rodean, y su impacto en un pueblo, sus habitantes y en especial para los trabajadores como artesanos.
FOROS, BLOGS Y CHATS HERRAMIENTAS PARA LA COMUNICACIÓN VIRTUAL.pdfJosGregorioFernndezA
En esta presentación se analizará el uso de los blogs, los foros y el
Chats como elementos educativos fundamentales para fomentar dicha
interacción y colaborar, de esa manera, con la adquisición de
contenidos.
2. SUMARIO
1.Introducción: accesibilidad todos los días
2.HTML5: etiquetas, reglas, atributos
3. SVG y canvas: estado actual
4. CSS3: maquetado sin imágenes
5. WAI-ARIA: arreglos sencillos
6. Herramientas
3. ACCESIBILIDAD COTIDIANA
Olvidarse de A, AA, AAA
Bajar al validador del pedestal
Es una herramienta más
Valida errores de código
No inventar soluciones “creativas”
5. CAMBIOS EN HTML5
Nuevas reglas
Sintaxis flexible
Enlaces “block-level”
Nuevas etiquetas
Marcado más semántico
Nuevos atributos
Formularios
Dataset API
6. SINTAXIS EN HTML5
No se consideran errores:
– Etiquetas en MAYÚSCULAS
– Atributos sin comillas
– Falta de etiqueta HTML, HEAD o BODY
– Falta de cierre de etiquetas P, LI, HEAD
– Falta de cierre de elementos “standalone”
8. ENLACES “INLINE-LEVEL”
<div class="story">
<h3><a href="ux2012.html">
UX2012 es el evento del año
</a></h3>
<p><a href="ux2012.html">
<img src="ux2012.jpg" alt="artículo
completo" />Diseñadores y
programadores de todo el mundo
colmaron las salas del CCGSM.</a></p>
<p><a href="ux2012.html">Read more</a></p>
</div>
Enlaces redundantes
Texto del enlace no es único
9. ENLACES “BLOCK-LEVEL”
<article>
<a href="ux2012.html">
<h3>UX2012 es el evento del año</h3>
<p><img src="ux2012.jpg" alt="multitud
sedienta de saber">Diseñadores y
programadores de todo el mundo colmaron las
salas del CCGSM.</p>
<p>Read more</p>
</a>
</article>
Texto del enlace único
Agregamos información en el ALT
10. ENLACES “BLOCK-LEVEL”
<header>
<a href="/">
<img src="logo.png" alt="mi bonito
logo">
<h1>Mi sitio</h1>
<p>Toda la información que buscás</p>
</a>
</header>
11. SEMÁNTICA EN HTML5
<div class="picture">
<img src="ux2010.jpg" alt="Una multitud
llenó las salas del CCGSM">
<p>Una multitud llenó las salas
del CCGSM</p>
</div>
Descripción redundante
12. SEMÁNTICA EN HTML5
Cómo lo resolvemos
<figure>
<img src="ux2010.jpg">
<figcaption>Una multitud llenó
las salas del CCGSM</figcaption>
</figure>
O mejor aún
<figure role="img" aria-labelledby="lidl">
<img src="ux2010.jpg">
<figcaption id="lidl">Una multitud llenó
las salas del CCGSM</figcaption>
</figure>
18. JAVASCRIPT NO INTRUSIVO
Javascript no intrusivo con JQuery
<script>
$('.graph').plot();
</script>
Si cambian los datos para cada instancia
<div class="graph"></graph>
<script>
$('.graph').plot({
series: [...]
});
</script>
19. JAVASCRIPT NO INTRUSIVO
Usando el atributo DATA
<div class="graph" data-series="[...]">
</graph>
<script>
$('.graph').each(function() {
$(this).plot({
series: $(this).data('series')
});
});
</script>
25. ACCESIBILIDAD DE SVG
<svg Elemento SVG dentro de un HTML.
Marcar como imagen usando
width="534" el rol de ARIA y atributo title.
height="344" (Sino lee 'iframe' y URL del svg)
role="img"
title="Un SVG accesible"
xmlns="http://www.w3.org/2000/svg"
tabindex="1">
<g> DOM interno del SVG, con ARIA.
No soportado como uno espera.
<path
fill="#2C748C"
d="M80,41.5A12.5,12.5,0,1,1,79.9,41.5 z"/>
role="listitem"
aria-label="41% en Corrientes" />
</g>
</svg> http://goo.gl/RvoSa
26. SVG COMO IMAGEN
Se muestran los valores en texto
Reforzado con ARIA slider
<svg
role="range"
aria-valuemax="19"
aria-valuemin="1"
aria-valuenow="4"
arial-valuetext="4 right now"
aria-labelledby="title_id"
aria-live="polite">...</svg>
http://dojotoolkit.org/reference-guide/1.8/dojox/widget/AnalogGauge.html
27. TABLAS COMO ORIGEN
role="image" aria-describedby="id_tabla"
<caption>
<sup>
<td>
<sub>
<th>
<thead><th>
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV
28. ACCESIBILIDAD DE CANVAS
<canvas
id="example"
width="260"
Sub-DOM o “shadow DOM” de HTML y ARIA
height="200"> como fallback. Replica lo que sucede en el canvas .
<h2>Formas</h2>
<p>Un rectángulo con borde negro.</p>
</canvas>
http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/
29. EL ESTADO ACTUAL
“La accesibilidad de SVG no es mucho
mejor que la de canvas.”
Steve Faulkner, http://lists.w3.org/Archives/Public/w3c-wai-ig/2012JulSep/0178.html
32. LA REVOLUCIÓN DE CSS3
Maquetado sin tablas
Maquetado sin imágenes
33. RECORTE DE IMÁGENES
“Image slicing”
Trabajoso, repetitivo, propenso a errores
Difícil de hacer escalable
Riesgos si no cargan las imágenes
Más consultas HTTP
34. REEMPLAZO DE IMÁGENES
“Image replacement”
Display:none oculto a lectores de pantalla
No se puede leer si no cargan las imágenes
No se puede seleccionar
No aplican estilos del usuario
El diseño es poco flexible
Difícil de entender para principiantes
35. PENSAR EL DISEÑO Y EL
MAQUETADO DE OTRA MANERA
Entender cómo funciona el diseño
Desarrollo transparente, sin trucos
Aceptar las diferencias
Usar con precaución / usar “polyfills”
43. VENTAJAS
Menos archivos para descargar
El diseño no se pierde con imágenes desactivadas
Permite usar estilos de usuario
Diseño más flexible
– Se adapta al contenido
– Responsive
– Mobile friendly!
44. NOS LO HACEN DIFÍCIL
Falta de soporte o problemas de renderizado
Sintaxis compleja
Prefijos de navegador
/* Old browsers */
background: #1e5799;
/* FF3.6+ */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),
color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* W3C */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );
46. LANDMARK ROLES
“Son muy fáciles de implementar y, junto con los
encabezados de HTML, podrían ser
revolucionarios en mejorar el acceso.”
Terrill Thompson en http://terrillthompson.com/blog/262
47. LANDMARK ROLES
banner
navigation search
main complementary
contentinfo
http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
52. SALTEAR REDUNDANCIAS
(function($) {
$(".home-map img, #Map area")
.attr({
'role': 'presentation',
'aria-hidden':'true'
Del lector de pantalla
});
$("#Map area")
.attr('tabindex','-1')
})(jQuery);
Del teclado
Role:presentation no funciona en elementos enfocables, y otras reflexiones:
http://asurkov.blogspot.com/2012/02/aria-hidden-and-rolepresentation.html
55. INDICAR DESPLEGABLES
No tan correcto... ¡pero realista!
<a id="button-1"
aria-expanded="false"
aria-controls="menu-1">Menú</a>
<ul id="menu-1">
<li>...</li>
<li>...</li>
</ul>
56. CUÁNDO USAR WAI-ARIA
"WAI-ARIA sirve para mejorar, no sustituir, el
marcado nativo. Deberíamos usar éste último
cuando está disponible"
http://www.marcozehe.de/2011/12/05/from-wai-aria-to-html5-and-back-or-maybe-not/
59. COMPONENTES ACCESIBLES
Testearlo en nuestros browsers objetivo
Puedo usarlo con el teclado
Escalable (text zoom)
Si hay links, que apunten a una URL
¿Dice ser accesible?
Librerías
61. NO TE CONFÍES
<strong class="price" itemprop="price">
$700<sup>00</sup>
</strong>
https://github.com/mercadolibre/chico/issues/632
62. MAQUETADOR (FRONT-END)
Probar con un agente de usuario, en lugar de
contar errores de validación.
+
Incluir el lector de pantalla en la matriz de
navegadores soportados.
64. No deje de completar su evaluación online
ux2012.com.ar/encuesta
¡Muchas gracias!
Accesibilidad práctica con HTML5 + CSS3 + WAI-ARIA
Camilo Kawerín y Manuel Razzari