INCLUYEME

1. INCLUYEME Departamento Ciencias de la Computación FACET – UNT – Tucumán - Argentina

2. Marco • INCLUYEME es una iniciativa de docentes, investigadores y alumnos universitarios, que forman una alianza estratégica en atención a la diversidad, tratando de eliminar barreras tecnológicas e informáticas para que todas las personas puedan tener acceso a la información.

3. Quienes somos? • Grupo interdisciplinario • Licenciados en Informática • Ingenieros en Sistemas • Bibliotecarios  documentalistas • Especialistas en lenguajes de señas • Programadores universitarios • Estudiantes

4. Motivación • La Ley Nacional Argentina Nº 26.653 de “Accesibilidad a la información en las páginas web” promulgada el 26 de Noviembre de 2010, establece que  en el término de dos años  se deberán respetar en los diseños de sus páginas Web las normas y requisitos sobre accesibilidad de la información a todas las personas con capacidades diferentes.

5. La Web • Es el medio de comunicación social por excelencia plataforma democrática que proporciona mayor INCLUSIÓN y menor discriminación • Tim Bernes Lee  supone una web PARA TODOS • Permite la comunicación entre diferentes sistemas operativos y diferentes soportes tecnológicos • Sitios web que separan las plantillas CSS del contenido HTML, disminuyen la brecha digital y colaboran con las buenas prácticas de programación

6. La Web • La Web permite a los usuarios realizar un sinnúmero de actividades, independientemente del software o hardware que se utilice. • Comprar • Vender • Pagar impuestos y servicios • Tramitar documento, etc.

7. A quiénes debemos incluir? • Diferentes tecnologías • Diferentes dispositivos • Personas con capacidades diferentes • Población vulnerable • Personas alejadas de centros urbanos (donde no llega o no llegó el programa “Conectar igualdad”) • Adultos mayores • A los estudiantes: para concientizar respecto de la necesidad de una “web para todos” • Toda persona que lo solicite

8. Cómo los podemos incluir? • Difundir: informar y sensibilizar a la población sobre las ventajas que trae aparejada la política de inclusión social que contempla la ley 26.653. • Concientizar: Difundir la ley entre las personas con capacidades diferentes informando acerca de sus derechos y qué servicios brindan las entidades públicas a las que pueden acceder: DNI, CUIL, pago de impuestos, entre otros. • Capacitar: Brindar información a desarrolladores respecto de la creación de sitios accesibles y las ventajas de generar código limpio y módulos reusables.

9. Cómo los podemos incluir? Insertarnos en la comunidad, observar y estudiar para establecer estrategias y caminos de inclusión Trabajo Colaborativo mediado entre personas que se encuentran distantes Teléfonos móviles

10. Además de las discapacidades físicas, se deben tener en cuenta: navegadores y dispositivos

11. Objetivo general • Este proyecto busca crear canales de divulgación científico-tecnológica, que brinden información sobre el derecho y las ventajas que reporta el hecho de que todas las personas puedan acceder a la información que se encuentra en los sitios web y otorgarles la posibilidad de incorporarse a este mundo de manera natural.

12. Objetivos específicos • Implementar un portal web para informar respecto de las normas y técnicas para el desarrollo de sitios accesibles. • Desarrollar Objetos de Aprendizaje, con formato audiovisual, actualizables y reutilizables, para el dictado de cursos y conferencias. • Crear un Repositorio de Objetos de Aprendizaje, conforme a normas internacionales. • Publicar un boletín informativo en formato digital e impreso. • Trabajar con instituciones públicas. • Incorporar la temática en la comunidad

13. Plan de trabajo • Involucrar a la comunidad universitaria • Involucrar a alumnos (secundarios y universitarios) • Creación del Portal INCLUYEME • Crear Objetos de Aprendizaje (reusables, interoperables  diferentes sistemas intercambian procesos/datos) • Crear un Repositorio de Objetos de Aprendizaje • Organizar cursos, talleres y jornadas de concientización • Realizar campaña publicitaria

14. I SEMINARIO DE INTRODUCCIÓN A LA PROGRAMACIÓN EN DISPOSITIVOS MÓVILES

15. HTML5 • Estructura. • Nuevos Tags. • Formularios. • DOM. • MODERNIZR

16. HTML5 para la diversidad • Información organizada: facilita la tarea de lectores de pantalla (inclusión de personas que utilizan programas lectores de pantalla) • Se adapta a diferentes tamaños de dispositivos (inclusión tecnológica)

17. Estructura Tradicional Abusivo uso de la etiqueta <div..> para establecer bloques en un sitio web Con HTML5 División del sitio en distintas secciones

19. Estructura

20. Nuevos tags <header> <nav> <section> <article> <aside> <footer> <audio> <video> <canvas> <embed>

21. Formularios • <input type="search"> para cajas de búsqueda. • <input type="number"> para adicionar o restar números mediante botones. • <input type="range"> para seleccionar un valor entre dos valores predeterminados. • <input type="color"> seleccionar un color. • <input type="tel"> números telefónicos. • <input type="url"> direcciones web. • <input type="email"> direcciones de email.

22. HTML5 agrega… Type Atributos adicionales • Placeholder • Required • autofocus • Email • url • Tel • Date • Datetime • Search • Time

23. Con Opera color:<input type="color" name="color"> <br>

24. Con Opera: datalist.. <formmethod="post"> <input list="browsers" name="browser" /> <datalist id="browsers"> <optionvalue="Internet Explorer"> <optionvalue="Firefox"> <optionvalue="Chrome"> <optionvalue="Opera"> <optionvalue="Safari"> </datalist> <input type="submit" /> </form>

25. En Opera: input type=“date” Fecha de evento: <input type="date" name=“fech" />

26. Opera: fecha y hora (datetime) Fecha y hora: <input type="datetime" name=“feyho" />

27. Mes y día Mes y día: <input type="month" name=“mes_dia" />

28. Selecciona semana Seleccione una semana: <input type="week" name=“semana" />

29. DOM • El HTML5 es una colección de elementos individuales. • Se puede detectar qué elementos soporta cada navegador. • Los navegadores construyen un Modelo de Objetos de Documentos  DOM  W3C • Todos los objetos DOM tienen características comunes • Para comprobar si el navegador soporta HTML5: • Se hace una pequeña prueba creando un elemento y se observa el DOM

30. DOM Jerarquía de DOM El WorldWide Web Consortium (W3C), el consorcio encargado de definir los estándares de la web, decidió crear un modelo de objetos único, el DOM, para que todos los fabricantes pudieran adoptarlo, facilitando la compatibilidad plena entre ellos. No obstante, Microsoft ha añadido su propia extensión al DOM, creando problemas de interoperabilidad para los navegadores web.

31. MODERNIZR • Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. • Se la incluye en el <head> • Se ejecuta automáticamente • se crea un objeto global llamado Modernizr que contiene un set de propiedades Boleanas para cada elemento que detecta. • Devolviendo True o False de acuerdo a la respuesta del navegador ante la solicitud de determinado elemento

32. CSS3 Separar contenido de las vistas

33. Nuevas propiedades CSS3 • Bordes • border-color • border-image • border-radius • box-shadow • Fondos • background-origin • background-clip • background-size • hacer capas con múltiples imágenes de fondo • Color • colores HSL • colores HSLA • colores RGBA • Opacidad • Texto • text-shadow • text-overflow • Rotura de palabras largas

34. Nuevas propiedades CSS3 • Interfaz • box-sizing • Resize • Outline • nav-top, nav-right, nav-bottom, nav-left • Selectores • Selectores por atributo: • elemento[atributo^=“inic"] {color: #ccc} • elemento[atributo$=“fin"] .. • elemento[atributo*=“todo"].. • Modelo de caja básica • overflow-x, overflow-y • Otros • Css3 transition • media queries • creación de múltiples columnas de texto • Web Fonts

35. Gradiente .degradado{ background: -webkit-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc); background: -moz-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc); background: -o-linear-gradient(45deg, #66f 160px, #f80 180px, #ffc); background: linear-gradient(45deg, #66f 160px, #f80 180px, #ffc); } .degradado1{ background: -webkit-linear-gradient(orange, pink); background: -moz-linear-gradient(orange, pink); background: -o-linear-gradient(orange, pink); background: linear-gradient(orange, pink); }

36. Gradiente • Se puede trabajar el texto con imágenes semitransparentes • En este caso, el truco consiste en mostrar por encima del texto una imagen semitransparente que simule el efecto degradado • Ejemplo: h1 { position: relative; } h1 span { position: absolute; display: block; background: url("imagenes/gradiente.png") repeat-x; width: 100%; height: 31px; }

37. Bordes redondeados • Atributo border-radius: define la curvatura que debe tener el borde del elemento. • Ej: border-radius: 5px; define un radio de 5 píxeles en el redondeo de las esquinas del elemento. • Ejemplo border: 1px solid #000000; -moz-border-radius: 7px; (mozila) -webkit-border-radius: 7px; (chrome, safari) padding: 10px;

38. Sombras • Box-shadow • Ejemplo: #sombraredondeada{ background-color: #090; color: #fff; width: 400px; padding: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 15px -10px 3px #000; -webkit-box-shadow: 15px -10px 3px #000; -moz-box-shadow: 15px -10px 3px #000; }

39. Sombras • Box-shadow • 1º medida: obligatoria, indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza haciala izquierda. • 2º medida: también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba. • 3º medida: es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido. • 4º medida: opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.

40. Fuentes • @font-face permite usar fuentes personalizadas en nuestras paginas web sin usar flash o imágenes • Ejemplo: @font-face { font-family: 'ChantelliAntiquaRegular'; src: url('../font/Chantelli_Antiqua-webfont.eot'); src: url('../font/Chantelli_Antiqua-webfont.eot?#iefix') format('embedded-opentype'), url('../font/Chantelli_Antiqua-webfont.woff') format('woff'), url('../font/Chantelli_Antiqua-webfont.ttf') format('truetype'), url('../font/Chantelli_Antiqua-webfont.svg#ChantelliAntiquaRegular') format('svg'); font-weight: normal; font-style: normal;

41. Transition p{ transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo]; } • Ejemplo nav a:hover{ background:#212121; border:0.1em dashed #F60; border-radius: 0 0.5em 0 0.5em; color: #FFF; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -moz-transition: all 10s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }

42. Animación Se crea un fotograma Luego se trabaja con animation -webkit-animation-name: movimiento-diagonal; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;

43. Incorporar icono en sitio • En el <head> • Convertir png a ico: • http://www.elguruinformatico.com/convertir-imgenes-en-iconos-online/ • Png a ico: http://www.convertico.com/ <link rel="shortcut icon" type="image/x-icon" href="laboI.ico" />

44. Responsive design • <meta name="viewport" content= "width=device-width,initial-scale=1“ > • Media Queries • /*Responsive design. Cómo se verá el sitio • siestamostrabajando con un disp. de 1081px*/ @media(min-width:1081px){ header h1{ text-align: left; width: 35%; } nav{ text-align: righth; width: 60%; } }

45. Bloques en cascada @media all and (max-width: 800px){ #contenedor .bloque{ display: block !important; /* Cuando el ancho sea inferior a 800px el elemento será un bloque */ width: auto !important; } } #contenedor .bloque{ display: inline-block; /* Es esencial para que se muestren los bloques en línea */ height:300px; width: 300px; border:1px solid #333; background: #999; margin:20px; }

46. Conclusiones • Trabajar en la construcción de sitios web para la diversidad, trae aparejado una serie de beneficios para el programador: • Buenas prácticas de programación • Clara separación de Diseño, Contenido, Módulos de control cuyo beneficio es  reuso  crecimiento • Se trabaja conforme a normas • El juego es que las personas sin problemas evidentes, NO noten el cambio….

47. GRACIAS!!