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

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.

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

Motivación  La Ley Nacional Argentina Nº 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.

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

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.

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

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  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.

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

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

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.

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

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

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

HTML5  Estructura.  Nuevos Tags.  Formularios.  DOM.  MODERNIZR

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)

Estructura Tradicional  Abusivo uso de la etiqueta para establecer bloques en un sitio web Con HTML5  División del sitio en distintas secciones

Estructura

Nuevos tags 

Formularios  para cajas de búsqueda.  para adicionar o restar números mediante botones.  para seleccionar un valor entre dos valores predeterminados.  seleccionar un color.  números telefónicos.  direcciones web.  direcciones de .

HTML5 agrega… Type   url  Tel  Date  Datetime  Search  Time Atributos adicionales  Placeholder  Required  autofocus

Con Opera color:

Con Opera: datalist..

En Opera: input type=“date” Fecha de evento:

Opera: fecha y hora (datetime) Fecha y hora:

Mes y día Mes y día:

Selecciona semana Seleccione una semana:

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

DOM Jerarquía de DOM El World Wide 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.

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  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

CSS3 Separar contenido de las vistas

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

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

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); }

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; }

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;

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; }

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.

Fuentes permite usar fuentes personalizadas en nuestras paginas web sin usar flash o imágenes  { 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;

Transition p{ transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo]; }  Ejemplo 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; }

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;

Incorporar icono en sitio  En el  Convertir png a ico:  imgenes-en-iconos-online/ imgenes-en-iconos-online/  Png a ico:

Responsive design   Media Queries  /*Responsive design. Cómo se verá el sitio  si estamos trabajando con un disp. de header h1{ text-align: left; width: 35%; } nav{ text-align: righth; width: 60%; }

Bloques en 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; }

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….

GRACIAS!!