INCLUYEMEDepartamento 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º 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.

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

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 <div..> para establecer bloques en un sitio web

Con HTML5 División del sitio

en distintas secciones

Estructura

Nuevos tags

<header> <nav> <section> <article> <aside>

<footer> <audio> <video> <canvas> <embed>

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.

HTML5 agrega…

Type

Email url Tel Date Datetime Search Time

Atributos adicionales

Placeholder Required autofocus

Con Opera

color:<input type="color" name="color"> <br>

Con Opera: datalist..

<form method="post"><input list="browsers" name="browser" />

<datalist id="browsers"> <option value="Internet

Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari">

</datalist><input type="submit" /></form>

En Opera: input type=“date”

Fecha de evento:

<input type="date" name=“fech" />

Opera: fecha y hora (datetime)

Fecha y hora: <input type="datetime"

name=“feyho" />

Mes y día

Mes y día: <input type="month"

name=“mes_dia" />

Selecciona semana

Seleccione una semana:

<input type="week" name=“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 DOMEl 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 <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

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.

Ejemploborder: 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

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

Transition

p{ transition:[Propiedad CSS] [Tiempo] [Función de Tiempo]

[Retardo]; } Ejemplonav 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 <head> Convertir png a ico: http://www.elguruinformatico.com/conve

rtir-imgenes-en-iconos-online/ Png a ico: http://www.convertico.com/

<link rel="shortcut icon" type="image/x-icon" href="laboI.ico" />

Responsive design

<meta name="viewport" content= "width=device-width,initial-scale=1“ >

Media Queries /*Responsive design. Cómo se verá el sitio si estamos trabajando con un disp. de 1081px*/@media(min-width:1081px){

header h1{text-align: left;width: 35%;}nav{text-align: righth;width: 60%;}

}

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;

}

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