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