viernes, 12 de febrero de 2021

¿De que hablamos hoy?. CO2, definición, origen, usos y consecuencias.

Objetivo.

   Esta microfromación tiene por objetivo dar a conocer este compuesto químico: CO2, junto con su definición, origen, usos y consecuencias para con el Medio Ambiente.

Definición.

   El dióxido de carbono (fórmula química CO2) es un gas incoloro. Antes de las normas de la IUPAC de 2005, era también conocido como anhídrido carbónico. Este compuesto químico está compuesto de un átomo de carbono unido con enlaces covalentes dobles a dos átomos de oxígeno. El CO2 existe naturalmente en la atmósfera de la Tierra como gas traza en una fracción molar de alrededor de 400 ppm. La concentración actual es de alrededor 0,04 % (420 ppm) en volumen, un 45 % mayor a los niveles preindustriales de 280 ppm.

Origen.

   Fuentes naturales incluyen volcanes, aguas termales, géiseres y es liberado por rocas carbonatadas al diluirse en agua y ácidos.

   Dado que el CO2 es soluble en agua, ocurre naturalmente en aguas subterráneas, ríos, lagos, campos de hielo, glaciares y mares.

   Está presente en yacimientos de petróleo y gas natural.

   El CO2 atmosférico, es la principal fuente de carbono para la vida en la Tierra y su concentración preindustrial desde el Precámbrico tardío era regulada por los organismos fotosintéticos y fenómenos geológicos. Como parte del ciclo del carbono, las plantas, algas y cyanobacterias usan la energía solar para fotosintetizar carbohidratos a partir de CO2 y agua, mientras que el O2 es liberado como desecho.​ Las plantas producen CO2 durante la respiración.​

   Es un producto de la respiración de todos los organismos aerobios. Regresa a las aguas gracias a las branquias de los peces y al aire mediante los pulmones de los animales terrestres respiradores, incluidos los humanos. Se produce CO2 durante los procesos de descomposición de materiales orgánicos y la fermentación de azúcares en la fabricación de vino, cerveza y pan. También se produce por la combustión de madera (leña), carbohidratos y combustibles fósiles como el carbón, la turba, el petróleo y el gas natural.

Usos.

   Es un material industrial versátil usado, por ejemplo, como un gas inerte en soldadura y extintores de incendio, como presurizador de gas en armas de aire comprimido y recuperador de petróleo, como materia prima química y en forma líquida como solvente en la descafeinización y secador supercrítico. 

   Se agrega a las bebidas y en gaseosas incluidas la cerveza y el champán para agregar efervescencia. Su forma sólida es conocida como "hielo seco" y se usa como refrigerante y abrasivo en ráfagas a presión.


Consecuencias del aumento de su concentración en la atmósfera.

El dióxido de carbono es un importante gas de efecto invernadero. La quema de combustibles de carbono desde la Revolución Industrial ha aumentado rápidamente su concentración en la atmósfera, lo que ha llevado a un calentamiento global.

   La paralización que ha supuesto para la actividad humana la pandemia por Covid-19, ha influido en su ritmo de crecimiento, siendo una buena muestra de nuestra influencia en el fenómeno.

Infografía: ¿Cuánto han disminuido las emisiones de CO2 en 2020? | Statista


Detección y cuantificación.

   El dióxido de carbono puede ser detectado cualitativamente en la forma de gas por la reacción con agua de barita (Ba(OH)2) con la cual reacciona formando carbonato de bario, un precipitado blanco insoluble en exceso de reactivo pero soluble en soluciones ácidas. La cuantificación de dióxido de carbono se hace por métodos ácido-base en forma indirecta y por métodos instrumentales mediante infrarrojo.

Unidades de medida, definiciones, equivalente de CO2, Índice GWP.

   Repasemos algunas de las unidades y formulas que son de interés para comprender el estudio que queremos hacer.

   Partes por millón (ppm) es una unidad de medida con la que se mide la concentración. Determina un rango de tolerancia. Se refiere a la cantidad de unidades de una determinada sustancia (agente, etc.) que hay por cada millón de unidades del conjunto.

   Es un concepto homólogo al de porcentaje, solo que en este caso no es partes por ciento sino por millón.

1 ppm = 1 ml/m³

1.000.000 ppm = 100% en volumen, p.e.: 420 ppm = 0,042% en volumen

   El volumen molar de una sustancia, simbolizado Vm, es el volumen de un mol de esta. La unidad del Sistema Internacional de Unidades es el metro cúbico por mol: m³/mol.

   Un mol de cualquier sustancia contiene partículas. En el caso de sustancias gaseosas moleculares un mol contiene NA moléculas. De aquí resulta, teniendo en cuenta la ley de Avogadro, que un mol de cualquier sustancia gaseosa ocupará siempre el mismo volumen (medido en las mismas condiciones de presión y temperatura).

   La ecuación que describe normalmente la relación entre la presión, el volumen, la temperatura y la cantidad (en moles) de un gas ideal es: P V = n R T , donde Presión absoluta (P), Volumen (V), moles del gas (n), constante universal de los gases ideales ( R), temperatura absoluta (T).

Volumen molar (Vm) = V/n = (R T)/P

   Experimentalmente y mediante la ley de los gases ideales, se ha podido comprobar que el volumen que ocupa un mol de cualquier gas ideal en condiciones estándar (Presión de 105 pascales (1 bar), Temperatura de 273,15 K, 0 °C) es de 22,7 litros. Si se utiliza como presión 1 Atm (101325 Pa) en vez de 1 bar, este valor cambia y es 22,4 L (22.3983 L para ser más específicos). Este valor se conoce como volumen molar normal de un gas. También por tanto para el CO2 = 22,4 L.

   La masa atómica del carbono (C) es 12 g/mol; para el oxígeno (O) es de 16 g/mol. Esto significa que 6.022 x 1023 átomos de carbono pesan 12 gramos.

   Según esto, el peso molecular del CO2 es: 12 g/mol [C] + 2 x 16 g/mol [O2] = 44 g/mol.

Relación ppm (x) y mg/m³ (y)

(CO2 a 25º y 1 atm) => Vm = 24,4 [L/mol] , x [ppm] = (y [mg/m³] x 24,4 [L/mol]) / 44 [g/mol] CO2

   Así podríamos determinar y escenificar, ¿Qué volumen ocupa una tonelada (1.000.000 g) de CO2 en condiciones normales?. Tiene un volumen de 509.400 L (1.000.000 [g] x 22,4 [L/mol])/ 44 [g/mol]. 

   Esto corresponde aproximadamente al volumen de una piscina de 10 m x 25 m x 2 m.

   El equivalente de CO2 o equivalente de dióxido de carbono (CO2eq o Carbon Dioxide Equivalent, en inglés), es una medida en toneladas de la huella de carbono. Huella de carbono es el nombre dado a la totalidad de la emisión de gases de efecto invernadero.

   La masa de los gases emitidos es medida por su equivalencia en CO2 (dióxido de carbono).

   El CO2 es el más conocido y es también la referencia del resto de los gases de efecto invernadero, a los que se considera causantes del calentamiento del planeta. Como unidad se utiliza tCO2eq que supone un volumen de emisión de gas de efecto invernadero equivalente a una tonelada de CO2.

   Se elige el CO2 como el equivalente al total de los gases de efecto invernadero porque, a pesar de tener un potencial de calentamiento mucho menor que el de otros gases, como el metano o los óxidos nitrosos, es el que más crecimiento ha experimentado en la atmósfera terrestre y el más abundante en porcentaje de todos ellos.

   Dicha medida de CO2 equivalente es usada para calcular la Huella de Carbono de un individuo, producto, actividad o servicio. De esta manera se puede cuantificar un impacto ambiental atendiendo a la categoría de calentamiento global provocado por la emisión de gases de efecto invernadero.

   Los gases de efecto invernadero distintos del dióxido de carbono (metano, óxido nitroso, hidrofluorocarburos, etc.) son convertidos a su valor equivalente en dióxido de carbono, multiplicando la masa del gas en cuestión por su Potencial de calentamiento global (GWP).

   P.e.: El metano es un gas con efecto invernadero potente que contribuye al calentamiento global del planeta Tierra, ya que tiene un potencial de calentamiento global (GWP) de 28, según la última evaluación (Fifth Assessment Report, AR5). Esto significa que en una media de tiempo de 100 años, cada kg de CH4 calienta el planeta Tierra 28 veces más que la misma masa de CO2.

   Se ha calculado que la emisión de gases efecto invernadero de la India al año supone 1 tCO2eq per cápita, la de Europa 10 tCO2eq y un estadounidense más de 20 tCO2eq per cápita.

   Índice GWP (acrónimo del inglés Global-warming potential - GWP = Potencial de calentamiento global) es una medida relativa de cuánto calor puede ser atrapado por un determinado gas de efecto invernadero, en comparación con un gas de referencia, por lo general dióxido de carbono.

   El potencial de calentamiento GWP para otros gases, puede ser calculado para periodos de 20, 100 o 500 años, siendo 100 años el valor más frecuente. Así, el dióxido de carbono tiene un valor GWP de 1.


Casos prácticos de utilización del CO2.

   Ahora que ya conocemos algo mas sobre este compuesto, vamos a ver como participa en dos casos prácticos diferentes, en el primero mostraremos como la medición del CO2 puede darnos información sobre la calidad del aire en el interior de las salas y el segundo veremos que es la reacción de Sabatier y cual es su papel en la generación de oxigeno en la ISS (Estación Espacial Internacional).


Primer caso, calidad del aire en ambientes interiores, medición concentración de CO2.

   Todos sabemos que el riesgo de contagio de Covid-19 en ambientes interiores es superior al riesgo en el exterior. Por tanto, las actividades en exterior son siempre preferibles.

   En ambientes interiores, las partículas en suspensión, también llamadas aerosoles, susceptibles de contener virus, se pueden acumular. De la exposición a este aire pueden resultar infecciones. La reducción del riesgo de contagio se consigue reduciendo emisión y exposición.

   La emisión se puede reducir mediante:

  • Disminución del número de personas.
  • Silencio o volumen de habla bajo (al hablar fuerte o gritar la emisión es 30 veces superior).
  • Actividad física relajada (al aumentar intensidad de actividad se aumenta la emisión).
  • Uso de mascarilla bien ajustada.

   La exposición se puede reducir mediante:

  • Uso de mascarilla bien ajustada, incluso en ausencia de otras personas si estas han abandonado la sala muy recientemente.
  • Reducción del tiempo de exposición.
  • Aumento de la distancia interpersonal.
  • Ventilación o purificación del aire, para eliminar o reducir la concentración de virus en el aire.
   Y en esta última se basa el estudio de este primer caso.

   La renovación de aire se puede denominar por sus siglas en inglés ACH, Air Changes per Hour. Si un espacio tiene 1 ACH (1 renovación de aire por hora) significa que en una hora entra en la sala un volumen de aire exterior igual al volumen de la sala y debido a la mezcla continua del aire, esto resulta en que el 63% del aire interior ha sido reemplazado por aire exterior. Con 2 renovaciones se reemplaza el 86% y con 3 renovaciones el 95%.

   La ventilación necesaria para reducir el riesgo de contagio depende del volumen de la sala, el número y la edad de los ocupantes, la actividad realizada, la incidencia de casos en la región y el riesgo que se quiera asumir.

   La guía de Harvard recomienda 5-6 renovaciones de aire por hora para aulas de 100 m², con 25 estudiantes de 5-8 años, y establece esta clasificación:

6 IDEAL, 5-6 EXCELENTE, 4-5 BUENO, 3-4 MÍNIMO, menos de 3 BAJO.

Otra forma de medir la ventilación necesaria es con una estimación de litros de aire por persona y segundo que se requieren del exterior.

   Un valor adecuado para reducir riesgo de contagio es 14 litros por persona y segundo.

   La relación entre ambos parámetros es: 

ACH = (litros por persona y segundo * número personas * 3600 segundos/hora * 0.001 m³/litro) / volumen sala en m³

   Estos valores de ACH se pueden ajustar según el riesgo que se quiera o se pueda asumir. El riesgo cero no existe. Cuanto mayor sea la ventilación, menor es el riesgo de contagio.

   En el aire exterior, las concentraciones de CO2 son de aproximadamente 420 ppm. En interiores, en espacios ocupados, las concentraciones de CO2 son elevadas por el CO2 exhalado por los ocupantes.

   Dichas concentraciones se pueden medir para verificar si la renovación de aire en un espacio determinado es la adecuada. La ventilación de espacios y por tanto la disminución de la concentración de CO2, podemos conseguirla por medios naturales, mecánicos o mixtos.

   Por cualquiera de los métodos descritos podremos calcular la ventilación necesaria (m3/h) y en función de esta determinar el número de elementos mecánicos requeridos.

Caudal (m3/h) =ACH ventilación calculada * volumen aula

   En resumen, en un espacio interior ventilado podemos conocer la calidad del aire que respiramos mediante la medición y control de la concentración de CO2.


Segundo caso, reacción de Sabatier y cual es su papel en la generación de oxigeno en la ISS (Estación Espacial Internacional)..

¿Qué es la reacción de Sabatier?.

La reacción de Sabatier es un proceso mediante el cual, se hacen reaccionar hidrógeno (H2) y dióxido de carbono (CO2) a altas temperaturas y presiones para transformarlos, con ayuda de un catalizador de níquel, en agua (H2O) y metano (CH4).

   Opcionalmente se puede optar por rutenio en alúmina que constituyen un mejor catalizador.

CO2 + 4H2 → CH4 + 2H2O

   Fue descubierta por el químico francés Paul Sabatier, ha sido propuesto como un paso clave en el envío de misiones tripuladas a Marte.

   En estas misiones se podrían llevar tanques llenos de hidrógeno de la tierra, o bien producirlo a partir de agua marciana mediante un proceso de electrólisis, consiguiendo además oxígeno. Aparte se tomaría el dióxido de carbono de la atmósfera de Marte, consiguiendo así un considerable ahorro de peso.

   La reacción es exotérmica y produce una energía de aproximadamente 165 kJ (aunque este valor es referencial, ya que varía según las condiciones). La reacción se lleva a cabo en un reactor, cuyas paredes están revestidas de níquel que actúa como catalizador.

   Conocemos un caso interesante, entre otros donde se utiliza esta reacción.

¿De dónde sacan los astronautas el oxígeno para respirar en el espacio? 

   Algunos astronautas pueden llegar a pasar meses o incluso años en la Estación Espacial Internacional (ISS por sus siglas en inglés o EEI por sus siglas en español). Y, como es obvio, no se puede almacenar tanta cantidad de oxígeno (el tamaño es reducido), igual que tampoco se puede estar constantemente llevándolo (esto supondría que lo astronautas estarían respirando un oxígeno que tendría un valor de 500 000 dólares diarios.

   La solución está en un sistema diseñado por la NASA y que fue enviado en 2007. Este sistema recibe el nombre de Oxygen Generation System (OGS por sus siglas en inglés), que en español significa Sistema Generador de Oxígeno y consiste básicamente en una máquina que mediante procesos químicos convierte agua que ya no es útil en la ISS en el tan preciado oxígeno.

   Estas aguas (aproximadamente de forma diaria se usan unos 23 litros), por medio de la electrólisis (un proceso químico en el que se inyecta electricidad proveniente, en este caso, de las energías renovables de la estación; concretamente se inyectan 50 A), se separan en Oxígeno (O2) e Hidrógeno (H).

   Para que el proceso sea más efectivo, se usa Hidróxido de potasio en una proporción de 30%.

   Posteriormente el oxígeno se libera a la atmósfera para que sea respirado por los astronautas y el hidrógeno (que es nocivo para los humanos, además de altamente inflamable) no se libera al espacio, como mucha gente piensa, sino que, mediante otra reacción química, la reacción de Sabatier y junto con CO2, se produce agua (H2O) y metano (CH4). El agua entra de nuevo en el circuito de la OGS y el metano sí que se ‘flota’ al espacio.

   El sistema genera entre 2,3 y 9 kg de oxígeno diarios, lo que es suficiente para mantener a los 6 astronautas que viven allí de forma semipermanente. Diariamente se consume 5 kg de oxígeno (unos 840 gramos por persona por día), por lo que en ocasiones se produce un excedente.

   De esta forma, los astronautas son capaces de vivir allí sin la necesidad de estar preocupándose por el oxígeno y por cuándo llegará más (además de que sería carísimo recibir oxígeno regularmente).

   En resumen, acabamos de ver como participa el CO2 en las reacciones necesarias para su utilización en el Sistema Generador de Oxigeno de la ISS.


Propuesta para el alumnado.

   Hemos visto algunos casos concretos. Existen multitud de proyectos de investigación y desarrollo relacionados con el CO2 y con la disminución de la emisión de gases de efecto invernadero.

   La propuesta es recopilar información acerca de aquellos, de iniciativa pública, privada o de ambas, de vuestra preferencia o que conozcáis de vuestro entorno cercano, que se hayan iniciado, en proceso o ya materializado y que sirvan de base para el desarrollo de vuestro trabajo.

   Se rellenará una breve cuestionario para generar el índice de todos los trabajos que son de vuestro interés, se pueden indicar varios, pero al menos uno debe servir para el desarrollo del trabajo. El trabajo se subirá a la plataforma habitual en respuesta a la tarea o bien si se ha utilizado p.e., un blog personal, también se indicaría su URL.

   El trabajo que mayor interés haya despertado será expuesto por el grupo y su autor. 

   Será elegido por todos mediante votación mediante formulario de Google y presentado por composición de breves videos hilados (cada uno de entre uno y tres minutos de duración), que traten conceptos o cuestiones concretas.

   El tiempo necesario para la realización del trabajo será de una semana, más una sesión para el visionado y debate.


Temporalización.

Una semana de microformación y una semana para la realización del trabajo.


Herramientas digitales.

   En esta ocasión recomendamos la utilización de Blogger, documentos o presentaciones de Google, para el desarrollo de los trabajos individuales.

   Usaremos la conexión de formularios con hojas de cálculo de Google, para enumerar los proyectos propuestos por el alumnado y también para recoger los resultados de la votación.

   Utilizaremos Spark Camera, InShot, Tik Tok, Screenity para explicaciones con compartición de escritorio o cualquier otra herramienta digital para la creación de videos y presentaciones.

   El formulario siguiente servirá para recoger las propuestas y estas se irán reflejando en la hoja de cálculo.

   De un modo similar se recogerán las propuestas elegidas, las cuales se someterán a votación, para transformarla por el grupo, en una presentación mediante videos hilados.




Evaluación con Rúbrica.

   Documento para el alumnado, de forma que aporte claridad y que este conozca los principales puntos donde se incidirá a la hora de evaluar el trabajo realizado, ya sea por coevaluación o por evaluación por docente. Se puede utilizar con el complemento CoRubrics, para facilitar la evaluación y la comunicación de resultados.

Enlace a rúbrica proyecto CO2, en nueva ventana.


Catalogación

    Curso recomendado: ESO, Bachillerato.

    Asignatura: FyQ, TIC.

    Competencias clave trabajadas: 

  • Competencia en Comunicación Lingüística.
  • Competencia Matemática y Competencias básicas en Ciencia y Tecnología.
  • Aprender a Aprender.
  • Competencias Sociales y Cívicas.
  • Sentido de la iniciativa y Espíritu emprendedor.
  • Competencia Digital.


Agradecimientos

   Gracias por tu interés en esta recopilación de material educativo. Si lo usas y compartes, no olvides mencionarme por Instagram (@jmcaneda), Twitter (@CanedaPernas) o en mi blog, me hará muchísima ilusión.

   También puedes comentar cual ha sido tu experiencia respecto de su contenido o utilización. Recuerda que el contenido pertenece a sus autores y que mi trabajo se limita a pequeñas aportaciones y una nueva composición, que facilite la comprensión del tema elegido, junto con algunas herramientas digitales que considero apropiadas y de utilidad para la mejora en las competencias digitales.


Términos de uso

    Puedes usar este material para uso personal o como inspiración para crear el tuyo personal.

    NO ESTÁ PERMITIDO: vender, comercializar o redistribuir este material.


Atribución, Créditos, Referencias, Notas bibliográficas, Herramientas digitales

DIGITAL.CSIC: Guía para ventilación de las aulas CSIC - Desde https://digital.csic.es/handle/10261/221538

Ministerio para la Transición Ecológica, guia_huella_carbono_tcm30-479093.pdf (miteco.gob.es) - Desde https://www.miteco.gob.es/es/cambio-climatico/temas/mitigacion-politicas-y-medidas/guia_huella_carbono_tcm30-479093.pdf

¿Cuánto es una tonelada de CO2? (miteco.gob.es) - Desde https://www.miteco.gob.es/es/ceneam/recursos/mini-portales-tematicos/cuanto_es_1t_co2_tcm30-70715.pdf

Educación y Comunicación frente al Cambio Climático (miteco.gob.es) - Desde https://www.miteco.gob.es/es/ceneam/recursos/mini-portales-tematicos/cambio-climatico.aspx

Global-Warming-Potential-Values.docx (ghgprotocol.org) - Desde https://ghgprotocol.org/sites/default/files/ghgp/Global-Warming-Potential-Values%20(Feb%2016%202016)_1.pdf

El oxígeno de los astronautas de la Estación Espacial, ¿de dónde proviene? (elespanol.com) - Desde - https://www.elespanol.com/omicrono/tecnologia/20180224/oxigeno-astronautas-estacion-espacial-proviene/287472119_0.html

Wikipedia Desde

https://es.wikipedia.org/wiki/Di%C3%B3xido_de_carbono https://es.wikipedia.org/wiki/Huella_de_carbono https://es.wikipedia.org/wiki/Partes_por_mill%C3%B3n https://es.wikipedia.org/wiki/Volumen_molar https://es.wikipedia.org/wiki/Ley_de_los_gases_ideales https://es.wikipedia.org/wiki/CO%E2%82%82_equivalente https://es.wikipedia.org/wiki/%C3%8Dndice_GWP https://es.wikipedia.org/wiki/Reacci%C3%B3n_de_Sabatier

OneNote - Preparación, esquema y contenidos.

Imagen huella de carbono CO2, desde el banco de imágenes de Adobe Stock.

Infografía CO2 - Desde Statista - https://es.statista.com

Hojas de cálculo de Google - https://docs.google.com/spreadsheets

Formularios de Google - https://docs.google.com/forms

Rúbrica para evaluar una página web” de CeDeC - Desde Banco de rúbricas y otros documentos | Cedec (intef.es) - Desde https://cedec.intef.es/banco-de-rubricas-y-otros-documentos/


miércoles, 20 de enero de 2021

¿De que hablamos hoy?. Lenguaje HTML, conceptos generales.

 

Lenguaje programación HTML


Orígenes del Navegador y del lenguaje HTML.

   El primer navegador fue desarrollado por Tim Berners-Lee, en la CERN, en 1990; el navegador web llamado WorldWideWeb era bastante sofisticado y gráfico, pero solo funcionaba en estaciones NeXT.

    El origen del lenguaje se remonta a 1991, cuando Tim Berners-Lee lo publicó por primera vez en internet en un documento al que llamó Etiquetas HTML. En ese documento se describen 22 etiquetas que mostraban un diseño inicial y sencillo de este lenguaje. Aún se conservan algunos de estos elementos y muchos otros se han ido incorporando con el paso de los años.

   Son varias las versiones que han existido de HTML desde que se introdujo en Internet. En cada una de ellas se van ampliando y desarrollando nuevas funcionalidades.


Definiciones.

   HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

   Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

   Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser vistos.

   La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.

   Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

   Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

    El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés, browser, aunque su uso es minoritario.

      Los navegadores web se han convertido en las herramientas más populares de acceso a Internet. Por esa razón explotar sus vulnerabilidades se han convertido en un objetivo muy interesante para atacar los sistemas informáticos en los que se instalan. Es tal el interés, que se han desarrollado herramientas automáticas para explotar vulnerabilidades en los navegadores.


Funcionamiento de los navegadores.

La comunicación entre el servidor web y el navegador se realiza mediante el protocolo de comunicaciones Hypertext Transfer Protocol (HTTP), aunque la mayoría de los navegadores soportan otros protocolos como File Transfer Protocol (FTP), Gopher y Hypertext Transfer Protocol Secure (HTTPS, una versión cifrada de HTTP basada en Secure Socket Layer —SSL— o Capa de Conexión Segura).

La función principal del navegador es descargar documentos HTML y mostrarlos en pantalla. En la actualidad, no solamente descargan este tipo de documentos sino que muestran con el documento sus imágenes, sonidos e incluso vídeos en transmisión en diferentes formatos y protocolos. Además, permiten almacenar la información en el disco o crear marcadores (bookmarks) de las páginas más visitadas.

Los primeros navegadores web solo soportaban una versión muy simple de HTML. El rápido desarrollo de los navegadores web propietarios condujo al desarrollo de dialectos no estándares de HTML y a problemas de interoperabilidad en la web.

Los más modernos (como Chrome, Amaya, Firefox, Netscape, Opera, Edge e Internet Explorer 9.0) soportan los estándares HTML y XHTML (comenzando con HTML 4.01, los cuales deberían visualizarse de la misma manera en todos ellos).

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en la web. Su objetivo es crear una web que trabaje mejor para todos, con sitios accesibles a más personas y que funcionen en cualquier dispositivo de acceso a Internet.


¿Qué es una etiqueta?.

   Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares (símbolo < >), cuyo uso es el de escribir código HTML.

   Se diferencian dos tipos de etiquetas:

  1. Etiquetas de apertura <etiqueta>.
  2. Etiquetas de cierre </etiqueta>.


Elementos del lenguaje HTML

Se distinguen varios componentes: elementos y atributos.

  • Elementos: Desarrollan la estructura de las páginas webs. Por ejemplo los elementos h1, h2, h3, h4, h5 y h6 se utilizan para crear encabezados. Por orden jerárquico h1 representa el primer nivel y, normalmente, el texto más grande, h2 es el segundo nivel con un texto algo más pequeño, así hasta llegar al h6 que es el texto más pequeño de todos.
  • Atributos: Los atributos de las etiquetas HTML definen detalles de comportamiento o presentación de la etiqueta donde van colocados. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas, por ejemplo en la siguiente línea <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>, indica al navegador del tipo que sea móvil o de escritorio, que debe mostrar el contenido, adaptado a la pantalla del dispositivo y a pantalla completa.


Etiquetas básicas (elementos, atributos y valores) y su estructura.


<!DOCTYPE html>

<html>

<head> 

<title> … </title> 

<meta charset=UTF-8"> 

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

<link href="style.css" rel="stylesheet" type="text/css" /> 

</head> 

<body bgcolor=#5d0000 text=#f9e783> 

<script src="script.js"> … </script> 

<font color=#4ff3ff size=16> ... </font> 

<!--...--> 

<b> … </b> 

<s> … </s> 

<u> … </u> 

<i> … </i> 

<a href="URL o #ancla"> … </a> 

<strong> … </strong> 

<br> … </br> 

<h1> </h1> …. <h6> </h6> 

<img src ="img.jpg" title="Nom" align="center" width="120" height="100" border="4" > 

<embed type="video/webm" src="video.mp4" width="400" height="300"> 

<ol type="1"> 

<li> … </li> 

</ol> 

<ul type="circle"> 

<li> … </li> 

</ul> 

<p id="ancla" bgcolor="#0101DF"> … </p> 

<table border="1" width="75%" bgcolor="#0101DF"> 

<caption> … </caption> 

<tr style="color:#2EFEF7" bgcolor="#2E9AFE"> 

<td rowspan="2" colspan="2" align="center"> … </td> 

</tr> 

</table> 

<span> … </span> 

<iframe src="URL" ></iframe> 

<div> … </div> 

</body> 

</html>


Representación del color.

   El color lo representamos en HTML mediante la combinación de dos elementos de los 16 disponibles en el código hexadecimal (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) y para cada uno de los colores fundamentales; 2 para el rojo (rr), 2 para el verde (gg) y 2 para el azul (bb) y escrito con el siguiente formato: #rrggbb, por ejemplo #2EFEF7.

   Existen páginas que te facilitan el código de color hexadecimal, mediante la elección visual en una paleta de colores.


¿Qué es un editor web?.

   Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.

   WYSIWYG, acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes"), es una frase aplicada a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento mostrando directamente el resultado final, frecuentemente el resultado impreso.

   En el caso de editores de HTML, este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento.


¿Qué es un IDE?.

   Un entorno de desarrollo integrado o entorno de desarrollo interactivo, en inglés Integrated Development Environment (IDE), es una aplicación informática que proporciona servicios integrales para facilitarle al desarrollador o programador el desarrollo de software. Normalmente, un IDE consiste de un editor de código fuente, herramientas de construcción automáticas y un depurador.

La mayoría de los IDE tienen auto-completado inteligente de código (IntelliSense). Algunos IDE contienen un compilador, un intérprete, o ambos, tales como NetBeans y Eclipse; otros no, tales como SharpDevelop y Lazarus.

   El límite entre un IDE y otras partes del entorno de desarrollo de software más amplio no está bien definido. Muchas veces, a los efectos de simplificar la construcción de la interfaz gráfica de usuario (GUI, por sus siglas en inglés) se integran un sistema controlador de versión y varias herramientas.

   Muchos IDE modernos también cuentan con un navegador de clases, un buscador de objetos y un diagrama de jerarquía de clases, para su uso con el desarrollo de software orientado a objetos.


Herramientas digitales propuestas.


   Existen en el mercado multitud de editores web, desde los mas simples (opción prácticamente utilizada por pioneros, profesores, nostálgicos o las tres cosas a la vez), como pueden ser los editores de texto planos p. e.: el editor de texto de Windows, cuya ventaja fundamental es que la de tener el control absoluto sobre lo que escribes, sin ayudas, a otros muchos mas complejos y de funcionalidad mencionadas en el artículo, que proporciona asistencia de código y ftp, control visual y consola para depuración, como puede ser Dreamweaver de Adobe.

   Para el caso que nos ocupa y teniendo en cuenta que queremos mostrar los principios básicos de un lenguaje y dirigido a principiantes, optaremos por las siguientes herramientas: el editor de texto de Windows, herramienta digital básica y el IDE Repl.it, en su versión gratuita, para entender lo que es trabajar en un entorno de desarrollo integrado, a la vez que podemos mostrar nuestro trabajo, alojado en servidores web con carácter publico y por lo tanto accesible.


Propuesta didáctica para el alumnado.

   La propuesta para hoy es la realización de un ejercicio libre (cuyo texto gire entorno a la figura de Tim Berners-Lee, lo que ha supuesto la implementación del lenguaje HTML en la difusión de la WWW y el alcance actual en nuestra sociedad, así como la descripción y uso de las etiquetas básicas mencionadas en este artículo, mediante tablas.

   Para ello se realizará un ejercicio con las herramientas descritas en el apartado anterior, proporcionando el código en un documento HTML, imágenes y enlace al trabajo alojado en el servidor web que nos proporciona Repl.it, subiéndolas a la plataforma habitual, Google Classroom o Moodle, en respuesta a la tarea lanzada.

   La página web deberá contener obligatoriamente en su código fuente:

La mayoría de las etiquetas básicas mencionadas, elementos y atributos, salvo la que tienen que ver con los Script y hojas de estilo CSS, que tiene carácter voluntario (en este caso se deberán entregar los archivos, como parte de la documentación).

Fuente de texto de diferente tipo y tamaño, según requiera por el texto inscrito. 

Listas ordenadas y no ordenadas. 

Inserción de imágenes o vídeos. 

Hipervínculos o enlaces para navegación, tanto en el propio documento como a páginas externas en nueva ventana. 

Tabla con la relación de etiquetas, elementos y atributos, junto con una breve descripción.

 

    El tiempo necesario para la realización del trabajo será de una semana.


Temporalización.

   Entre dos o tres semanas de formación y una semana para la realización del trabajo.


Rúbrica y evaluación.

   Documento para el alumnado, de forma que aporte claridad y que este conozca los principales puntos donde se incidirá a la hora de evaluar el trabajo realizado, ya sea por coevaluación o por evaluación por docente. Se puede utilizar con el complemento CoRubrics, para facilitar la evaluación y la comunicación de resultados.

Enlace a rúbrica , en nueva ventana.


Catalogación

    Curso recomendado: ESO, Bachillerato.

    Asignatura: TIC.

    Competencias clave trabajadas: 

  • Competencia en Comunicación Lingüística.
  • Competencia Matemática y Competencias básicas en Ciencia y Tecnología.
  • Aprender a Aprender.
  • Sentido de la iniciativa y Espíritu emprendedor.
  • Competencia Digital.


Agradecimientos

    Gracias por tu interés en esta recopilación de material educativo. Si lo usas y compartes, no olvides mencionarme por Instagram (@jmcaneda), Twitter (@CanedaPernas) o en mi blog, me hará muchísima ilusión.

   También puedes comentar cual ha sido tu experiencia respecto de su contenido o utilización.

   Recuerda que el contenido pertenece a sus autores y que mi aportación se limita a una reedición de contenidos, estructura, composición y algo de contenido, para presentarlo de forma que sea, en mi opinión, mas entendible y de aplicación con algunas herramientas digitales que considero apropiadas y de utilidad para la mejora en las competencias digitales.


Términos de uso

    Puedes usar este material para uso personal o como inspiración para crear el tuyo personal.

    NO ESTÁ PERMITIDO: vender, comercializar o redistribuir este material.


Atribución, Créditos, Referencias, Notas bibliográficas, Herramientas digitales

Diccionario económico y financiero | Economipedia - Desde https://economipedia.com/definiciones/lenguaje-html.html

Wikipedia - Desde https://es.wikipedia.org/wiki/HTML

Wikipedia - Desde https://es.wikipedia.org/wiki/Navegador_web

Wikipedia - Desde https://es.wikipedia.org/wiki/Editor_de_p%C3%A1ginas_web

Wikipedia - Desde https://es.wikipedia.org/wiki/WYSIWYG

Wikipedia - Desde https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado

W3schools.com - Conocimiento sobre HTML Desde https://www.w3schools.com/

OneNote - Preparación, esquema y contenidos.

Repl.it Entorno de Desarrollo Integrado (IDE) OnLine, Multilenguaje y Colaborativo -repl.it

Rúbrica para evaluar una página web” de CeDeC - Desde Banco de rúbricas y otros documentos | Cedec (intef.es) - Desde https://cedec.intef.es/banco-de-rubricas-y-otros-documentos/

Códigos de colores HTML (html-color-codes.info) - Desde https://html-color-codes.info/codigos-de-colores-hexadecimales/