Curso de HTML5 #1: El comienzo

Dibujo de un globo terraqueo con los simbolos del potocolo de internet representando la conectiviad global

¡Bienvenidos al curso de html5!

Y si, a pesar de que ahora ya no hay mas versiones de html sino que todo son capacidades que tenga o no el navegador lo llamaré 5 porque es lo que el comun de los mortales comprende que es lo ultimo en html. Tengo que hacer esas pequeñas cesiones en pro de la comprension de la generalidad.

Comenzamos

He de decir que  hoy no voy a introducir contenido en detalle, solo voy a realizar una somera introducción de lo que pretendemos aqui y en la próxima clase seguiremos con la materia mas en serio.

Si, aclaro un poquito esto de HTML5 , tecnicamente ya no se le llama HTML 5, sino HTML a secas porque el grupo de empresas y organizaciones que dan lugar al estandar HTML han llegado a la conclusion de que tanta version de html era un lio y que era mucho mejor centrarse en activar o desactivar distintas capacidades que tuviera el navegador.

De este modo ya no usamos versiones y solo nos centramos en “bueno, este navegador es capaz o no de esto o de aquello” y así poder estandarizar un poquito html y la ejecución de páginas web en navegadores.

Y es que todos los que hayais desarrollado a lo largo de los 90 y hasta mediados dela decada de los 2000, incluso un poco mas , habeis asistido a la locura de la incompatibilidad entre navegadores y de navegadores compitiendo entre si creando etiquetas que solo funcionaban en uno y aunque a dia de hoy aun hay ciertos elementos en los cuales un navegador va en plan puntero desmarcandose del estandar, lo cierto es que hoy en día hay una compatibilidad superior al 95%, lo cual es muy conveniente.

Responsive Universal

Siempre hay variaciones, pero mas o menos es asi. Dado este entorno y este proceso y siendo que últimamente aparecen dispositivos cada vez mas accesibles , creo que en el desarrollo web accesible usando responsive esta parte de la clave.

Responsive se refiere al hecho de que la web se adapte de forma autonoma y automatica al dispositivo del cliente donde esta siendo mostrada , pero quiero llevar el concepto mas alla, ademas de esto deberia adaptarse al contenido que esta mostrando, al receptor del mensaje y, si este interactua en “tiempo real” al emisor de dicho mensaje.

Con este objetivo de crear webs que se adapten como un guante a la persona detras del dispositivo en que se muestran, es que iniciamos este curso.

Materiales que usaremos

Vamos a comenzar por el principio usando los materiales mas sencillos posibles: un editor de texto y un navegador, asi de facil.

Cada cual deberá usar el editor de texto plano (txt) de su elección o directamente un editor de codigo fuente si somos usuarios un pelin mas avanzados.

La eleccion dependera del gusto personal, de la accesibilidad del editor de texto por lo que cada cual elegira el programa y entorno que mas les convengan.

Tambien necesitamos un navegador , de su elección, evidentemente las ultimas versiones disponibles, vamos a centrarnos en las ultimas tecnologias, lo minimo es tener las ultimas versiones de navegador, a ser posible, de las ramas mas conocidas: Safari , Firefox, Explorer o su equivalente, Chrome , Opera incluso. También nos servirán navegadores que sean un poco menos Mainstream, pero tengan en cuenta que en ese caso podrian ser algo menos compatibles con las ultimas tecnologias.

Asi pues usaremos el navegador de su eleccion y el editor de texto que deseen, pero tengan encuenta que cuanto mas mainstream y moderno sea el navegador mas facil sera que sea compatible cien por cient con todo lo que haremos aqui.

En cualquier caso si hay algun tipo de incompatibilidad la podemos compartir y comentar, a través de los comentarios del post. Estaré encantado de apoyaros en lo que necesiteis.

Como nos organizaremos

Básicamente yo avanzaré investigando a la vez que os cuento cosas, y voy a crear el contenido como si fuera un curso al uso de HTML, de hecho me base en 4 o 5 cursos ya existentes para generar el índice y a partir de ahi redactare el contenido e incorporaré informaciones que crea de interés.

De este modo, podremos abordar la simplicidad de ue HTML no es mas que texto con etiquetas que le indican al navegador que es lo que hay dentro de estas etiquetas, si es un parrafo, si es una cabecera o una imagen.

Vamos a orientar el curso y el desarrollo de paginas a la accesibilidad universal.

Como aproximacion inicial, entenderemos accesibilidad universal como el que la pagina web sea capaz de ser usada por personas que vean y no vean, que oigan o que no oigan , con diferentes capacidades sensoriales, lectores de pantalla o herramientas de apoyo.

Sobre todo, el interfaz lo haremos buscando la maxima sencillez y enfocándolo, de forma que se cumpla la maxima simplicidad de uso por parte del usuario.

Para usar tecnicas de marketing de dudosa etica, confundir y liar al usuario de mala manera obligandole a permanecer en el site dando vueltas inutilmente ya tendreis tiempo despues si es vuestro deseo – espero que no –

El objetivo aqui es no solo abogar por la accesibilidad universal, por unas webs que se adapten al dispositivo y ademas al usuario que esta consumiendo nuestro contenido para hacerlo asi lo mas facil posible y mejorar nuestra proyección.

Ademas pretendo fomentar desde aqui , un nuevo ejercito, en el buen sentido de la palabra , de programadores sensibilizados con la accsibilidad.

Filosofía y Creación

No solo se trata de adaptarte al usuario, sino de que tu mismo como usuario te des cuenta de que incluso si un día no has dormido bien, no tendras las mismas capacidades, según cumplas años tambien perderas capacidades sensoriales y motoras, y también las mentales, ya que tu cerebro no funcionara igual de bien a los 20, 40, 60, 80 y 100 años.

Pero pretendemos que cualquiera de sus usuarios pueda consumir el contenido en las óptimas condiciones respecto de sus capacidades y forma de entender el mundo, incluso la vida. Y no me quiero poner desmasiado filosofico porque nuestro trabajo va a ser principalmente practico pero quiero que tengan en mente que aqui vamos a trabajar para gente que ve, como para geete que no ve. Se trata de crear contenido inclusivo (o traducido al castellano, realmente bien hecho)

Investiguen sobre Accesibilidad

Para todos aquellos que si ven y no estan familiarizados con las herramientas de accesibilidad, vayan investigando al respecto, evaluen que supone una discapcidad sensorial o motora, y observen que herramientras de accesibilidad existen y se utilizan en entornos Apple, Google, Windows … para suplir esas carencias y converstir la web en un entorno realmente inclusivo.

Para aquellos que no ven, especial hincapié en ponerse en el lugar de otros, como ejemplo el huevito de twitter, ya están tardando en pedir unos ojos prestados y poner una foto en condiciones. Los que vemos total o parcialmente, no tenemos la culpa de ver, y esperamos un tratamiento igual que del resto de las personas, un avatar digno. Es mas, hay gente que no oye y si ve, inclusion para TODOS.

No me vale la excusa de “como yo no veo para que” NO, eso es una falta de accesibilidad grave respecto de las personas que si ven, incluso de respeto. Si se pretende ser uno mas de la sociedad, hay que tener el mismo respeto por los demas como pretendemos para nosotros, el mundo es basicamente visual, si pretendemos ser profesionales, debemos aprender a comprender la visión aunque no veamos, y a no discriminar a los videntes por ver, del mismo modo que los que ven habran de comprender el punto de vista de los que no.

Y de ahi en adelante, los que no oyen habran de ponerse en el lugar el resto, todos en el lugar de las personas con problemas de movilidad y estos en la del resto… accesibilidad UNIVERSAL. Como se tiende a afirmar , todos tenemos algun tipo de discapacidad, asi que las excusas lastimeras de “es que yo soy “”loquesea” se las dejan en casa por favor.

 Esto es responsabilidad de todos

Aqui el concepto de “pobrecito mio que no ves” o “pobrecito mio que no te puedes mover” no lo voy a tolerar, es decir, tampoco se trata de que vayamos a machacar a nadie por sus capacidades, pero pretendo desde aqui aplicar el principio de igualdad real.

Vamos a hacer todos las cosas en igualdad de condiciones y vamos a tratar de colaborar entre todos, porque ni yo soy Dios, ni lo se todo, iniciaré un camino con esto de enseñaros lo mucho o lo poco que se. Llevo desde los 8 años programando y desde los 22 profesionalmente y algo mas de 10 años en desarrollo web. Aún así tengo muchísimo que aprender.

Tengo cierta experiencia, pero no lo se todo ni muchisimo menos. Durante este proceso, para poder trasmitiros como hacer las cosas y cual es el metodo que he encontrado mejor para determinadas casuísticas, voy a tener que investigar por mi cuenta con lo cual pretendo que esto sea algo interactivo.

La idea es que no sea yo el único que os trasmita lo que he encontrado o lo que creo que es el mejor modo de hacer algo, sino que estoy abierto a colaboraciones por parte de todos y comentarios, incluso sobre temas en que no esteis de acuerdo conmigo, tratamos la problemátoca y puntos de vista, trazamos un plan y trabajamos juntos para beneficiarnos todos.

Podemos incluso preparar un contenido especifico sobre la cuestion concreta si fuese necesario, la idea es crear no solo un curso que ayude a que el interesado en iniciarse en estas cuitas pueda, sino crear un foro en el que todos nos apoyemos mutuamente con el objetivo final en mente de crear, tanto desde este como desde el curso de programacion, un ejercito de programadores sensibilizados de serie con la accesibilidad universal y que tengan esta como concepto de base.

Con tiempo de sobra para hacerlo bien

Hemos llegado unos años antes, ahora mismo lo que se esta implantando es algo que llevabamos años comentando (como 5 años atras cuan pioneros, siendo tildados de locos en muchos casos), que es la web responsive. A día de hoy hasta en la televisión nos recuerdan “haz tu web responsive o sino vendrá el coco, te comera y no podras ver tu web en la nevera”.

En todo caso, a dia de hoy es cuando se esta implantando esto en serio, y cuando la comunidad en general tanto usuarios como programadores se esta tomando en serio la inclusión.

Desde mi punto de vista amplío el concepto de Responsive ya no es solo que la web se adapte al dispositivo en concreto en función del contenido que va a trasmitir, sino que, además, y es lo que pretendo explorar aqui, es necesario que el concepto responsive se amplie.

¿De que forma? tomando en consideracion el hecho de que además de adaptarse al dispositivo es vital e importante que la web se adapte a la persona que hay detras del dispositivo.

No es lo mismo adaptar una web para movil pensando en una persona que ve perfectamente, que adaptar esa misma web a un dispositivo movil para alguien que no ve bien (como es mi caso) o que no ve. No es lo mismo adaptar una web con sonidos para dar avisos a personas que oyen perfecto que para personas con el oído dañado parcialmente o sin posibilidad de oir.

Incluso si me apuran, no es lo mismo adaptar una web para una persona que “no” tienen ningun tipo de discapacidad que para otra que es sordociega, que tiene que suplir y luchar para superar las dos limitaciones de vista y oido.

Y creedme en esto, se puede hacer, a traves de Braille, usando el tacto, y diferentes herramientas. La previsible aparicion de pantallas en relieve en un futuro no demasiado lejano, no solo va a ser una revolución en el mundo de la accesibilidad, sino muy especialmente para aquellas personas sordociegas, que van a poder acceder a sistemas e interfaces digitales que hasta ahora les eran ajenos.

Fijaos si es complicado obtener herramientas tanto web como de apps accesibles mediante el lector de pantalla correspondiente y bien diseñadas para ser manejadas solo con audio y movimientos de flick , tanto mas si estas manejando ese interfaz tan solo con un monitor/teclado braille que te lee y permite interactuar con esta informacion.

Si ademas de eso lo complementas con poder tocar las formas en la pantalla, va a ser algo grande, pero a dia de hoy todavia no hemos llegado a ese punto, asi que tomando en consideración el amplio abanico de personas que hay desde aquel que no le pasa absolutamente nada hasta el extremo de alguien que este totalmente inmovilizado sea ciego y sordo , pudiendo interactuar con una ceja y un monitor braille que le trasmita las letras directamente mediante tacto a la cara.

 La madriguera de Conejo

Quiero cubrir todo esto mediante esta ampliacion del concepto de responsive, interfaces visualmente atractivo a la vez que interafaces sencillos de utilizar y comprender , de tal forma que incluso una persona que deba usar esta tecnologia en condiciones extremas, tenga oportunidad de disfrutar de nuestro sitio web con normalidad.

Muchas veces pensamos en la accesibilidad y nos centramos solo en la ceguera, pero esto es mucho mas amplio.

Lo dicho herramientas muy sencillas, avanzaremos algo de Javascript y un poquito de CSS, lo justo para aprender , lo potente de javascript estara en el curso de programacion.

Hay que tener en cuenta que, eventualmente, habra un tercer curso (espero que de aui a un par de años) sera el de diseño web accesible , es decir pretendo que una persona sin ver la pantalla diseñe interfaces visuales. Como podreis entender, no solo el proceso va a ser largo sino que aun no domino los conceptos necesarios para hacerlo, por lo que me tomara tiempo.

Quiza no lleguemos al 100%, pero si logro que alguien a ciegas diseñe el 90% de un interfaz atractivo visualmente aunque no sea el mejor del mundo, y solo hubiera que emplear a un diseñador vidente el ultimo 10% del desarrollo de una web profesional, ganariamos mucho camino en la normalizacion profesional.

Por otro lado, disminir la barrera entre personas que ven y no ven, tanto en un sentido como en otro, sera positivo. No sera lo mismo lograr explorar ciertos conceptos visuales si se ha nacido ciego que si se vio alguna vez, pero explorar estas necesidades forma parte del proceso.

Vamos a tratar todos de hacer el esfuerzo de expandir nuestra percepcion del mundo poniendonos en la piel de personas con diferentes tipos de discapacidad y tratar de comprender asi que se precisa para crear las webs correctamente.

De hecho tras ver un Ted Talk he adquirido un libro-curso sobre ecolocalizacion que es mas que interesante. Imaginad detectar obstaculos y formas solo con el sonido, incluso montar en bicicleta. Impresionante.

Esto nos ayudara a ser mejores desarrolladores y ampliaremos nuestra capacidad de empatía, lo que redundara en una mejora general de nuestras capacidades y resultados.

Con todo este conocimiento, sera mas sencillo decidir que codigo escribir usando el HTML que aprenderemos aqui. Asi lograremos acercarnos mas a esta Accesibilidad Universal que no por utopica ha de ser desacartada. Hace no tanto parecia imposible trabajar una pantalla tactil a ciegas y hoy en dia es algo trivial.

Porque Web

Básicamente porque, a dia de hoy creo que es el medio comun a todo tipo de usuarios, independiente de plataforma y que mas iguala a diferentes personas en torno al uso de la tecnologia.

No obstante habra aspectos como suplir las posibles carencias de los dispositivos en cuanto a acesibilida tendra que ser investigada y resuelta en paralelo, quiza mediante un lector de pantalla integrable y ejecutable integramente en nuestro navegaodor sea la clave, veremos.

He localizado un proyecto de sintesis de voz con estas caracteristicas, veremos si podemos integrarlo adecuadamente 🙂

Pero todo esto sera mas bien hacia el final del curso de momento empecemos por la base y veamos donde lleva el camino!. Paso a paso afianzando los conocimientos poco a poco!

Lo dicho ni lo se todo, ni lo que digo es ley, sencillamente voy a tratar de dar lo mejor de mi para apoyar a todos en el proceso mientras trato de enseñar, pero estoy abierto a comentarios, porque yo tambien pretendo aprender en el proceso.

Bueno, me despido no sin antes indicarles que pueden escuchar este mismo contenido en formato audio a través del Podcast específico que, además lleva algunos capítulos de ventaja.

2 Respuestas a “Curso de HTML5 #1: El comienzo”

  1. Leitnez Torres

    Hola, lo intentaré, espero que no haya límite de edad hacia arriba. No diré cuantos cargo, sólo para que te hagas una idea, mis problemas visuales se deben a la radiación provocada por el meteorito que acabó con los dinosaurios.
    Fuera de juego, dejemos lo de las etiquetas para más adelante. Espero poder escribir muy pronto los comentarios colocándolas correctamente.

    • En primer lugar gracias por comentar y no, ningun limite de edad, yo fui el que desvío ese meteorito xDDD

      Espero estar a la altura, para mi es una experiencia nueva. Cualquier cosa que surja lo comentamos.

      Un Abrazo

      Raul

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>