Curso de HTML5 #3: Sintaxis Básica

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

Somtaxis Básica de HTML

Aprender los fundamentos de HTML en unos minutos es realmente sencillo, vamos a hacerlo en el dia de hoy, así que prepara tu editor de texto favorito y ¡vamos alla!

Nota Importante: Aquellos que usen Mac y TextEdit, deben crear un nuevo fichero y a continuacion punsar SHITF + COMMAND + T, y aceptar para convertir el fichero en texto sin formato.

Lo primero, abramos un nuevo fichero de texto con nuestro editor. Es imporante asegurarse de que el editor elegido es capaz de trabajar con texto txt plano, sin formato.

Antes de seguir debo destacar algo: un fichero HTML es simple y llanamente un fichero de texto txt, con extension .htm o .html, que sera interpretado por el navegador correspondiente. Ni mas ni menos.

Cada vez que editemos el fichero, y guardemos los cambios, podremos ir a nuestro navegador y refrescar la pagina, podras ver como se dibuja la web y los cambios que hayas realizado.

Empecemos por lo basico

Hablemos de sintaxis. HTML significa “HyperText Markup Language” (Lenguaje de Marcado de Hipertexto). ¿Qué significa esto?, tan sencillo como que usaremos etiquetas para marcar el contenido de la pagina, identificando cada tipo de contenido y permitiendo asi que el navegador dibuje la página apropiadamente.

Hagamos la prueba, en el documento de texto, escribid una frase, la que se os ocurra, grabad el fichero como prueba.html y, a continuación, abrirdla con vuestro navegador de elección.

Veremos que se muestra nuestra frase, si editamos nuevamente el fichero cambiando la frase, guardamos y refrescamos el navegador, veremos que los cambios se reflejan sin problemas.

Habras notado que no le hemos dicho al navegador en ningun momento que nuestra frase es un parrafo y , sin embargo, nos la muestra como tal. Esto es debido a ue por defecto, cualquier texto no etiquetado se considera como tal.

Creando nuestro primer parrafo

Lo primero que vamos a hacer es indicar al navegador que nuestra frase es un parrafo. Aquellos de vosotros que useis lectores de pantalla, aseguraos de activar todos los signos de puntuacion y/o activar la linea braille.

En html, indicamos a traves de etiquetas que tipo de objeto tenemos entre manos, para ello situamos una etiqueta de apertura antes del texto a marcar, y una etiqueta de cierre justo al final.

Situemonos al principio de nuestra frase y escribamos:

<p>

(simbolo menor que, la letra p y el símbolo mayor que). Estos elementos forman una etiqueta de apertura, el menor que indicando donde comienza la etiqueta, la letra identificando el tipo de elemento (en este caso un Parrafo) y un simbolo mayor que indicando donde acaba esta etiqueta de apertura.

Sigamos

Pero aun no hemos terminado, para completar el proceso hemos de cerrar la etiqueta. Nos situamos al final de la frase y escribimos lo siguiente:

</p>

Como podemos observar, exactamente igual a la etiqueta de apertura, con la particularidad de que incluye una barra justo despues del simbolo de apertura de la etiqueta. De este modo incidamos que lo que se encuentra entre ambas etiquetas, ha de ser interpretdo como un parrafo.

No todos los elementos html precisan una etiqueta de cierre, pero en general si, e iremos viendo en cada caso cuales llevan y cuales no, asi que , no os preocupeis demasiado ahora en ello.

Elementos y atributos HTML

Cuado hablamos de un elemento HTML, nos referimos al conjunto de las etiquetas de apertura y cierre, y lo que aparece entre ambas. Sin embargo, la etiqueta de apertura puede contener adicionalmente atributos que dan informacion adicional sobre el elemento en si.

Algunos de los atributos que asociamos a un eleento html son especificos de este, mientras que otros pueden ser usados en varias etiquetas diferentes, dependiendo del contexto.

Para incorporar un atributo a nuestra etiqueta de apertura, lo haremos justo tras la letra (o palabra) que identifica el tipo de etiqueta, agregando un espacio “y empezando a escribir tras este.

Sitúate en la etiqueta de apertura, inserta un espacio y escribe lo siguiente: lang=”es”, esto es, tras el espacio el texto “lang”, un signo igual, y, entre comillas dobles, el texto “es”

Esto le indicara al navegador que el parrafo esta en idioma español. No es habitual usar este atributo concreto en un parrafo, pero es un ejemplo magnifico de como crear uno de estos atributos.

Tipos de Atributos

Hay atributos que solo consisten en una palabra, pero, la inmensa mayoria, contienen un nombre (en nuestro caso lang), un signo igual, y , entre comillas, el valor que se asigna a ese atributo (“es” en nuestro caso.)

Los atributos son algo asi como las configuraciones de los elementos html, de todos modos iremos viendo mas elementos y atributos poco a poco, por ahora, quedense con como es la estructura. El codigo debe haber quedado similar a este:

<p lang="es">Texto del Parrafo</p>

Seguiremos en proximos capítulos. ¡Adelante!


Curso de Programación #2 : ¿Qué es programar?

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

¿Qué es programar?

Comencemos por el principio: ¿Qué es programar? Bien, programar es ¡crear un programa!… ¿Y que es un programa? bueno, un programa es sencillamente un conjunto de instrucciones. Emmm … esto … me explico.

Un programa, desde el editor de texto mas sencillo, hasta el juego de ultima generación que imagines, pasando por cualquier programa que utilices en tus dispositivos, no es mas que un conjunto de instrucciones que le indican a tu ordenador o movil correspondiente que hacer, y como interactuar con la persona que sostiene el dispositivo.

Pero … ¡esto es imposible! ¿como va a ser algo tan complejo como un juego sólo un conjunto de instrucciones? pues si, efectivamente , lo es, un conjunto de miles, incluso millones de instrucciones cada una de ellas por separado muy sencilla, pero que funcionando en conjunto, forman algo tan complejo como un juego.

Como el cuerpo humano

El cuerpo humano es muy complejo, y sin embargo esta formado por miles de elementos mas pequeños y especializados, como las células, que trabajando en equipo forman lo que identificamos como “cuerpo humano”, igual funciona un programa.

Cualquier programa que imaginemos consiste en una secuencia de instrucciones , divididas en mutiples comandos pequeños, uno tras otro. Cada uno de ellos se encarga de una parte pequeña de la tarea, el conjunto forma nuestro programa. Puede que hagan falta millones de instrucciones para construir algo tan completo como un juego, pero es eso, una coleccion de instruciones.

Construyendo programas

Para construir un programa, su diseñador ha tenido que interpretar y estudiar las funciones que desaeaba para dicho software, y ha dividido esas funciones en bloques, que a su vez se dividen en funciones , cada una de las cuelaes se compone de varias instrucciones individuales.

Un ejemplo muy sencillo

Si queremos obtener una idea mas aproximada de lo que es un programa, imaginemos que invitamos a un amigo querido a nuestra casa, pero este nos llama por telefono porque se ha perdido. Le pedimos nos indique que es lo que ve a su alrededor para hacernos una idea de donde esta.

Es facil suponer que, a partir de la información de donde se encuentra, de donde queremos que llegue y nuestro conocimiento del lugar, podemos darle una serie de instrucciones que le permitan llegar a nuestra casa.

“Programando” a nuestro amigo

Le diremos, por ejemplo, “Toma la carretare al sur, en el segundo cruce gira a la derecha y continua medio kilómetro, cuando veas una casa con una fachada verde esmeralda, y oigas el sonido del mar, habras llegado a mi casa.”

Si nos fijamos bien, las instrucciones que le hemos propocionado, constituyen un “programa” tal que, si nuestro amigo ejecuta esas instrucciones en secuencia, llegara a nuestra casa. Tan sencillo como eso.

Una cuestión de orden

Es preciso señalar la enorme importancia del orden en las instrucciones de un programa. Si a nuestro amigo le decimos en primer lugar avanza medio kiloentro y luego que gire a la derecha, nuestro amigo aparecerá en cualquier lugar, menos en nuestra casa. Del mismo modo, al escribir un progama, hay que tener en cuenta, tanto las instrucciones que damos a la maquina, como el orden de estas.

No obstante, crear un programa para que un computador lo ejecute es algo que requiere algo mas de tiempo, hemos de tomar un problema complejo y dividirlo en procesos mas sencillos, y estos a su vez en tareas esenciales, de forma que la union de los diferentes elementos individuales, trabajando en equipo, den como resultado nuestro programa.

¿Tengo que aprender Swahili?

En el caso de nuestro amigo, utilizamos nuestro idioma para indicarle, la direccion, pero, si nunca has programado antes, te estaras preguntando que idioma comprende una maquina.

Las instrucciones que podemos dar a una maquina, en muchas ocasiones son tan simples como sumar dos numeros o mostrar una letra en pantalla. Parece poco y extremadamente básico, pero es la unión de miles de estas instrucciones que podemos indicar a la máquina lo que nos permite crear programas.

En equipo

Os preguntareis como es posible crear un programa como un videojuego con solo instrucciones muy simples. Bien, aqui es donde podemos observar hasta donde llega la madriguera de conejos. Para crear un programa de ese tamaño, es posible que cien programadores hayan tenidoq que trabajar en el codigo ocho (o mas) horas al dia durante varios años. Pero no se asusten, nosotros empezaremos por el principio y veran que se pueden lograr objetivos interesantes en poco tiempo 🙂

Precisión, precisión, precisión

Ahora centremos nuestra atencion en la importancia de la precisión en las instrucciones que demos a la maquina. Un programa contendra un gran numero de instrucciones ejecutadas a una gran velocidad.

Si a nuestro amigo le indicamos tan solo una instruccion incorrectamente, puede acabar en cualquier lugar excepto en nuestra casa, ademas, entre tantos miles de instrucciones, no es trivial localizar la que causa el problema, por lo que deberemos ser extremadamente cautelosos.

Comandos

En programacion usamos diferentes lenguajes para escribir estas instrucciones, a traves de lo que llamamos comandos, un comando en programacion es algo asi como una frase en ingles, se usan palabras, numeros y signos de puntuacion para expresar ideas que explican a la computadora que hacer en cada momento.

Algunos comandos son muy cortos, otros contienen mas informacion, pero en esencia, todo se basa en secuencias de comandos que describen de forma precisa un proceso y las posibles variaciones que existen en este. En algunos lenguajes, cada comando se termina con un punto y coma, de forma similar a como finalizamos nuestras frases con un punto. En otros esta diferenciacion se realiza mediante un salto de linea. Esto dependera del lenguaje, pero os preocupeis ahora mismo por esto, lo iremos viendo poco a poco.

No todos son iguales

Cada lenguaje es unico, los hay expresados en mayusculas, otros todo en minusculas, otros no toman en cuenta esto y otros son extremadamente estrictos en este punto, sin embargo, lo principal es entender la sintaxis, es decir la gramática de dichos lenguajes. Lo veremos poco a poco, pero tómese en cuenta que dependiendo de la situación, el entorno o la máquina puede hacer falta usar diferentes lenguajes.

No se asusten, comenzaremos por comprender uno bien, y, una vez hecho, no les resultara especialmente complicado utilizar otros.

Finalizando

Un pequeño consejo, si no sabeis mecanografía, es el momento de aboradar su estudio a la vez que el presente curso. Pensad que la programacion se basa integramente en texto, y creedme, se acaban pasando muchas horas delante del un teclado. Por tanto, maximicen su velicidad editando texto, sea cual sea el metodo o herramienta que utilicen para ello, incluso si es un sistema basado en switch.

Por último, tomen en cuenta que programar es el arte de tomar un problema complejo, dividirlo en tareas mas sencillas y crear programas de forma que la maquina, siguiendo estas instrucciones que le hemos indicado, sea capaz de resolver el problema inicial de forma eficiente.


Curso de HTML5 #2: Contexto

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

Un poco de contexto

Antes de que comiences a aprender lo específico de HTML quiero que te tomes un momento para comprender la importancia del HTML y porqué es tán crítico conocerlo bien para llegar a ser un desarrollador competente.

Como nuevo desarrollador web que necesitas conocer, al menos, los tres lenguajes principales que constituyen la web HTML, CSS y JavaScript

HTML, técnicamente hablando no es un lenguaje de programación, es un lenguaje de marcado, un conjunto de etiquetas que nos permiten indicar que es cada cosa en un documento web, este será interpretado por el navegador para mostrar la pagina web.

Todo esto se sustenta en la base: HTML que se que verdaderamente definen la estructura de un documento web tanto CSS como JavaScript son elementos que acompañan este contenido. El primero de ellos para darle un aspecto apropiado y el segundo para aportar dinamismo y funciones extra.

HTML tiene todo el peso estructural, y por tanto nos vamos a centrar en el inicialmente para crear nuestras páginas web. Si eliminamos el CSS de una página web perderá su aspecto y diseño visual, si quitamos el JavaScript dejará de ser dinámica, pero sin HTML la pagina web no tendrá sentido alguno.

Sin embargo, el HTML no puede ni debe ser escrito de cualquier manera: debemos generar estructura bien definida y una adecuada semántica. ¿porque semántica? porque básicamente un documento HTML consiste en un texto en el cual vamos a incorporar etiquetas que le indicarán al navegador qué contiene el texto y cual es su papel dentro de la estructura de la información.

Un documento HTML correctamente escrito no sólo va ser legible por el usuario sino que además va aportar una estructura al documento y una relación entre los elementos del contenido y de estos entre sí que nos va a permitir incluso enlazar otras páginas y sitios.

Existen muchos tipos de etiquetas, desde indicadores de titulos, parrafos y enlaces, hasta imagenes, la mayoría de ellos totalmente compatibles con los principales Navegadores del mercado, aunque con ciertas restricciones en algunos casos.

Sera, sin embargo, trabajo de del programador determinar que etiquetas debe asociar a determinado elemento del contenido, en qué condiciones y en que momento se debera usar cada una de ellas.

Existen una serie de indicaciones y condiciones estándar en las cuales se incluyen cada una de las etiquetas y en que momentos el uso de cada una son apropiadas pero, finalmente, la decisión dependera del desarrollador, de ti.

Es bastante importante también aprender en paralelo los elementos apropiados respecto de la accesibilidad y estructurar el documento de forma legible por un lector de pantalla. Esto no solo nos va a aportar el formato requerido para que un usuario pueda consumir contenido de forma independiente sino que va a potenciar enormemente el SEO , el posicionamiento en buscadores, ya que , en esencia, un buscador lee nuestra pagina de modo casi identico a una persona ciega. Si nuestra pagina no es 100% accesible, los buscadores nos penalizarán.

Es importante conocer las etiquetas y saber aplicarlas. A lo largo del curso veremos diferentes etiquetas y su uso común en el desarrollo web, pero deberemos ser proactivos con esta parte, pues existen mas etiquetas y casos de los que probablemente podamos cubrir finalmente en este foro.

Suena fácil y complicado a la vez y en realidad es bastante sencillo la mayoría de las personas pueden aprender las bases de HTML en apenas quince minutos, no obstante para hacerlo bien y con garantías hay que dedicarle horas.

En el proximo capitulo comenzaremos a trabajar con un documento html basico, por ahora, asimilemos esto.


Curso de Programación #1: Inicio

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

Bienvenidos al Curso de Programación.

Hoy vamos a realizar una pequeña introduccion sobre lo que haremos antes de pasar al contenido.

Comenzamos.

Lo que pretendemos hacer aqui es iniciar un camino en el que no solo se trata de enseñar a todo aquel dispuesto a aprender o interesarse por este mundo de la programacion, es algo más amplio.

No es solo poder echar una manita a todo aquel dispuesto, a través de este curso, sino que ademas pretendo aumentar la base de programadores que, de serie, tienen en cuenta la inclusión.

Es algo conocido que nos centramos mucho en la parte visual a la hora de definir como deben de funcionar los interfaces de usuario y aunque no será en este curso donde trataré directamente cuestion del diseño accesible, es interesante tener estas cuestiones en cuenta mientras exploramos la base de la programación.

Una vez hayamos completado el curso de programación, y el de html que se publicar en paralelo avanzaremos juntos en esa direccion pero lo primero es lo primero.

El objetivo prioritario no es solo aprender a programar, sino hacerlo a ciegas. Y no solo a ciegas en el sentido de utilizar medios de apoyo para suplir lo que no tenemos de vista, no, se trata de ser capaces de programar a ciegas usando nuestra mente de un modo mucho mas potente que la media de programadores actuale.

Todo esto, seamos o no videntes, y no de los de las pelotas (bolas) de cristal, sino de aquellos que ven o no ven. Esto va a ser independiente en este caso, vamos a aprovechar para aprender a hacer las cosas razonandolas y posteriormente poniendonos en nuestro ordenador con nuestro editor de texto y demas manteriales.

¿Que materiales vamos a necesitar?

Pues algo muy sencillo, y que ya les adelanto desde aquí, voy a basar el programa, el curso, el viaje que predendo realizar con ustedes, porque no solo van a apdender, o trato de que aprendan ustedes, sino que yo mismo voy a aprender muchisimas cosas en el proceso, no solo de accesibilidad, sino de la misma programación y de como debe ser, por tanto, usemos los materiales mas asequibles que sean posibles.

Tras analiar varias perspectivas y varias opciones, aunque Python (paizon/piton), es un lenguaje muy atractivo en este sentido por su amplia variedad de entornos, pienso que debo ir a algo aún mas sencillo y ubícuo.

Teniendo en cuenta todas las argumentaciones que he ido tomando en este tiempo vamos a centrarnos en usar:

  • Un Navegador Web , el que sea, de su elección (a ser posible moderno)
  • Un editor de texto plano, no un word, algo del estilo de TextEdit, UltraEdit, IAWriter, Coda, cualquier editor de texto puro y duro, incluso el NotePad de Windows sirve.

Evidentemente si alguno de vosotros tiene un editor de texto puro y duro mas avanzado, o que le guste utilizar , es libre de usarlo , incluso editores de texto de código fuente.

No voy a imponer ninguna barrera en este sentido, ya que creo que el mejor medio de enseñar la base sin complicar la vida a nadie, con entorno ni otras cuestiones es usar una mínima base de HTML sobre la cual podamos ejecutar Javascript y utilizarndo nuestro navegador, para aprender los fundamentos de la programación.

Así pues los materiales a utilizar son tan sencillos como un editor de texto y un navegador.

En principio esto está muy pensado para hacerlo en un ordenador, pero no veo la razon por la cual no podamos usar un editor de texto sobre una carpeta de Dropbox y abrir los ficheros con Safari (u otro navegador web).

Así que cada cual puede crearse su entorno de una forma muy sencilla, porque todo lo que haremos seran ficheros de texto y ejecución en un navegador. Todo muy sencillo, muy limpio y accesible de tal manera que cada cual puede elegir el entorno que tenga accesbilizado o de uso diario si no utiliza herramientas de accesibilidad.

Aquellos de vosotros que nunca han utilizado una herramienta de apoyo, que nunca ha utilizado VoiceOver y que nunca ha utilizado nada relativo a herramientas que suplen discapacidades sensoriales, les insto a que vayan investigando sobre la materia.

Que es un lector de pantalla, si usan ios VoiceOver … o Mac, si usan Windows puede ser Jaws o les recomiendo mejor NVDA que es software libre, en el caso de Linux hay otros lectores (Orca por ejemplo), pero investiguen un poquito sobre lo que supone utilizar un ordenador a ciegas, porque muchos de los aspectos que vamos a tratar en este curso tienen que ver con hacer las cosas sin ver la pantalla, independientemente de que luego podamos usar los ojos.

Accesibilidad Universal

No quiero decir que aquellos de vosotros que veais no utiliceis los ojos, pero si quiero que aquellos que no ven se aproximen un poquito a lo que supone ver y que aquellos que ven se acerquen un poquito a lo que supone no hacerlo.

Yo estoy a medio camino , no me considero maestro ni de un lado ni del otro , sencillamente hare lo que pueda para que, entre todos, avancemos en el camino.

No obstante si intento integrar estas ideas, no, los videntes tienen la culpa de ver, ni los ciegos de no ver. Esta es una barrera que hemos de romper y encontrarnos en el centro.

Los que no ven pondiendose en el lugar y tratando de comprender los conceptos como los que ven para , eventualmente, poder llegar a diseñar a ciegas, que sera el tercer curso que avanzare en un futuro, una vez termine de aprender lo necesario para comenzar a contarlo.

Por otra parte para sentar las bases comunes que compartimos todos los que participamos en este proyecto y de este modo llegar al compromiso de la accesibilidad universal, un solo interfaz, que se adapte no solo al dispositivo, como trata el concepto de “Responsive” sino a la persona que tiene delante.

Llamemoslo “accesibilidad universal” hasta que acuñemos un termino mas apropiado, o incluyamoslo directamnete dentro del concepto de responsive.

Para mi “Responsive” deberia significar adaptarse al dispositivo, al mensaje y al receptor, incluso al emisor si este está implicado en el proceso de interacción.

Pero bueno, esto son conceptos mas filosoficos que quiza trataremos mas adelante, aqui y ahora vamos a centrarnos en programar y hacer que el navegador, a través de Javascript, realice ejercicios por nosotros y adquirir una base suficiente de programación que nos permita lograr que la maquina haga por nosotros aquello que le pedimos.

Vamos a comenzar por el principio, que es programar, pero nunca perdamos de vista, y no perdamos la perspectiva de que el objetivo a largo plazo no es solo programar, no es solo hacerlo sin depender de nuestra vista, de nuestro oido, de nuestro olfato y de nuestro tacto, sino supliendo aquello que no tengamos y optimizando el metodo para hacerlo todo lo rapido que seamos capaces, y todo lo bien que podamos pero tomando siempre en consideracion el hecho de que es la maquina la que debe adaptarse a la persona y no alreves.

Sentando las Bases

Lo dicho, esto ha sido el primer capitulo del Curso de Programacion introductorio en el que pretendo sentar ciertas bases filosoficas en torno al proyecto y quiero hacer constar aqui que, aunque tengo amplia experiencia en programacion, ()llevo haciendolo desde los 8 años y profesionalmente desde los 22) esto no quiere decir que yo sea el mejor programador del mundo ni lo que yo diga vaya a misa.

Lo que yo proporcione aqui sera mi punto de vista, lo mejor que haya encontrado, la forma que perciba mejor de explicarlo, pero en cualquier caso busco que todos los que participemos en el proyecto interactuemos a fin de llevar a cabo el objetivo de formar a mas programadores sensibilizados con la accesibilidad de serie y que tomen en cuenta estos conceptos de que no solo se trata de discapacidad, sino de las capacidades de las personas mayores y de las diferentes capacidades y formas de entender el mundo de diferentes personas.

¿Porque?

Por que a dia de hoy acabamos de aterrizar en dispositivos, incluido Android que cada vez mas nos proveen de herramientas de accesibilidad más básicas ya includas mas o menos, si el proveedor no las destruye, ios ya viene muy accesibilizado aun con sus fallos, inclusve en Windows a traves de NVDA se puede montar un sistema accesible con una inversion economica razonable … pero.

Pero, aunque estamos entendiendo muy bien que hemos de crear interfaces que respondan perfectamente al dispositivo del usuario, todavia no hemos comprendido que el objetivo final de nuestro interfaz de usuario es que la persona que hay detras de ese dispositivo sea capaz de manejarlo de la forma más optima respecto de sus capacidades y de su forma de entender el mundo.

Y esto es lo que vamos a trabajar aqui, o lo que pretendo trabajar aqui no solo la programación, sino el pensar mas alla a la hora de hacer las cosas.

Este curso funciona en consonancia … o en paralelo, con el curso de HTML. Os recomiendo seguir ambos.


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.