incluyeme
DESCRIPTION
INCLUYEME. Departamento Ciencias de la Computación FACET – UNT – Tucumán - Argentina. Marco. - PowerPoint PPT PresentationTRANSCRIPT
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!!