¿Qué hay detrás de un sitio web?

Formación General del Ciclo Orientado

Tecnologías de laInformación

Actividades para estudiantes

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

2

Jefe de Gobierno

Horacio Rodríguez Larreta

Ministra de educación e innovación

María Soledad Acuña

subsecretario de PlaneaMiento educativo, ciencia y tecnoloGía

Diego Javier Meiriño

directora General de PlaneaMiento educativo

María Constanza Ortiz

Gerente oPerativo de currículuM

Javier Simón

subsecretario de ciudad inteliGente y tecnoloGía educativa

Santiago Andrés

directora General de educación diGital Mercedes Werner

Gerente oPerativo de tecnoloGía e innovación educativa Roberto Tassi

subsecretaria de coordinación PedaGóGica y equidad educativa

Andrea Fernanda Bruzos Bouchet

subsecretario de carrera docente y forMación técnica Profesional

Jorge Javier Tarulla

subsecretario de Gestión econóMico financiera y adMinistración de recursos

Sebastián Tomaghelli

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

3

Subsecretaría de Planeamiento Educativo, Ciencia y Tecnología (SSPECT)

Dirección General de Planeamiento Educativo (DGPLEDU)Gerencia Operativa de Currículum (GOC)Javier Simón

Equipo de generalistas de Nivel Secundario: Bettina Bregman (coordinación), Cecilia Bernardi, Ana Campelo, Cecilia García, Julieta Jakubowicz, Marta Libedinsky, Carolina Lifschitz, Julieta Santos

Especialista: Sebastián Frydman

Subsecretaría de Ciudad Inteligente y Tecnología Educativa (SSCITE) Dirección General de Educación Digital (DGED) Gerencia Operativa de Tecnología e Innovación Educativa (INTEC) Roberto Tassi

Especialistas de Educación Digital: Julia Campos (coordinación), Josefina Gutiérrez

Equipo Editorial de Materiales Digitales (DGPLEDU)Coordinación general de materiales digitales: Mariana Rodríguez Coordinación editorial: Silvia Saucedo Colaboración y gestión editorial: Manuela Luzzani Ovide

Edición y corrección: Marta Lacour Corrección de estilo: Ana Premuzic Diseño gráfico y desarrollo digital: Alejandra Mosconi

© Copyright © 2019 Adobe Systems Software. Todos los derechos reservados. Adobe, el logo de Adobe, Acrobat y el logo de Acrobat son marcas registradas de Adobe Systems Incorporated.

Este material contiene las actividades para estudiantes presentes en Tecnologías de la información: ¿Qué hay detrás de un sitio web?, 4.° año. ISBN 978-987-673-507-0

Se autoriza la reproducción y difusión de este material para fines educativos u otros fines no comerciales, siempre que se especifique claramente la fuente. Se prohíbe la reproducción de este material para reventa u otros fines comerciales.

Las denominaciones empleadas en este material y la forma en que aparecen presentados los datos que contiene no implican, de parte del Ministerio de Educación e Innovación del Gobierno de la Ciudad Autónoma de Buenos Aires, juicio alguno sobre la condición jurídica o nivel de desarrollo de los países, territorios, ciudades o zonas, o de sus autoridades, ni respecto de la delimitación de sus fronteras o límites.

La mención de empresas o productos de fabricantes en particular, estén o no patentados, no implica que el Ministerio de Educación e Innovación del Gobierno de la Ciudad Autónoma de Buenos Aires los apruebe o recomiende de preferencia a otros de naturaleza similar que no se mencionan.

Fecha de consulta de imágenes, videos, textos y otros recursos digitales disponibles en Internet: 15 de agosto de 2019.

© Gobierno de la Ciudad Autónoma de Buenos Aires / Ministerio de Educación e Innovación / Subsecretaría de Planeamiento Educativo, Ciencia y Tecnología. Dirección General de Planeamiento Educativo / Gerencia Operativa de Currículum, 2019. Holmberg 2548/96, 2.° piso–C1430DOV–Ciudad Autónoma de Buenos Aires.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

4

¿Cómo se navegan los textos de esta serie?

Al cliquear regresa a la última página vista.

Ícono que permite imprimir.

Folio, con flechas interactivas que llevan a la página anterior y a la página posterior.

Pie de página

Íconos y enlaces

El color azul y el subrayado indican un vínculo a un sitio/página web o a una actividad o anexo interno del documento.

Los materiales de la serie Profundización de la NES cuentan con elementos interactivos que permiten la lectura hipertextual y optimizan la navegación.

Para visualizar correctamente la interactividad se sugiere bajar el programa Adobe Acrobat Reader que constituye el estándar gratuito para ver e imprimir documentos PDF.

Adobe Reader Copyright © 2019. Todos los derechos reservados.

Itinerario de actividades

Organizador interactivo que presenta la secuencia completa de actividades.

ActividadesNotas al final

1 Símbolo que indica una nota. Al cliquear se direcciona al listado final de notas.

¿Por qué internet es conocida como la “red de redes”?

A la hora de pensar en internet, se suele pensar únicamente en los consumos de información que se realizan (por ejemplo, ver videos, acceder a redes sociales, chatear con amigos/as). Pocas veces surgen interrogantes acerca de qué es internet y por qué se la conoce como la “red de redes”.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

5

¿Por qué internet es conocida como la “red de redes”

Actividad 1

Sitios web accesibles y usables

Actividad 2

Tecnologías web para la creación de un sitio

Actividad 3

Itinerario de actividades

Primera parte

Segunda parte

¿Cómo buscamos en internet?

Actividad 4

Análisis de los usuarios en internet

Actividad 5

Diseño y desarrollo de un proyecto web

Actividad 6

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

6

Actividad 1 ¿Por qué internet es conocida como la “red de redes”?

A la hora de pensar en internet, se suele pensar únicamente en los consumos de informa-ción que se realizan (por ejemplo, ver videos, acceder a redes sociales, chatear con amigos/as). Pocas veces surgen interrogantes acerca de qué es internet y por qué se la conoce como la “red de redes”.

a. Vean los videos “Andrew Blum: ¿Qué es Internet realmente?”, en TED Ideas worth spreading, y “Cómo funciona internet: los cables submarinos que conectan al mundo”, en el canal Un mundo inmenso, y respondan: • ¿Cómo se compone la parte “física” de la red de internet?• ¿Cómo viaja la información en ella?• ¿Cómo se comunican puntos distantes en diversos continentes?• ¿Quiénes son los dueños de los cables submarinos?

b. Accedan al mapa “Submarine Cable Map” (Mapa de cables submarinos), del sitio Telegeography, y tomen nota de aquellos puntos con los que está conectada Argentina de forma física.

c. Lean las siguientes notas acerca del acceso a la información en internet:• “De Las Toninas al mundo: cómo funciona el sistema que conecta a internet a toda la

Argentina”, en Infobae, 2 de agosto de 2017.

En estas imágenes podemos ver la interconexión global que representa internet, y su implicancia en diversas actividades de la vida cotidiana.

Primera parte

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

7

• “Google extenderá un cable submarino para mejorar la disponibilidad de sus servicios en Argentina” en Infobae, 28 de junio de 2019.

• “Internet y la web no son lo mismo, te explicamos por qué”, en Blogthinkbig, 7 de agosto de 2014.

• “¿Qué es Internet?”, en el sitio NIC Argentina, mayo de 2018.

A partir de lo leído, resuelvan el desafío "La información en internet" en la plataforma Educaplay.

d. Cuando acceden a sitios web para buscar información, lo hacen desde el rol de usuarios/as. Investiguen qué se requiere para poder generar un sitio web y que esté disponible en inter-net. Pueden guiarse por las siguientes preguntas:

• ¿Se necesita crear o tener nombre de usuario/a?• ¿Dónde se aloja la información?• ¿Qué tecnologías y servicios se usan para guardar los datos?• ¿Tiene algún costo?• ¿Los servidores son iguales a las computadoras hogareñas?

Para realizar la búsqueda, será importante que establezcan ciertos criterios, por ejemplo: ¿En qué sitios buscarán? Si trabajan con un buscador, ¿qué palabras clave o filtros de bús-queda utilizarán? ¿Cómo evaluarán la fiabilidad de los sitios consultados? En este sentido, pueden ser de utilidad el tutorial “¿Cómo hago para validar una página Web?” y el tutorial “¿Cómo hago para verificar si la información en una página web está actualizada?”, disponi-bles en el Campus Virtual de Educación Digital.

e. Observen el video “Diseño Web. Lo básico para programar webs”, en el canal ULLmedia – Universidad de La Laguna, para comprender qué se requiere para comenzar a diseñar y desarrollar un sitio web.G

.C.A

.B.A

. | M

inis

teri

o d

e E

duc

ació

n e

Inno

vaci

ón

| Sub

secr

etar

ía d

e P

lane

amie

nto

e In

nova

ció

n E

duc

ativ

a.G

.C.A

.B.A

. | M

inis

teri

o d

e E

duc

ació

n e

Inno

vaci

ón

| Sub

secr

etar

ía d

e P

lane

amie

nto

Ed

ucat

ivo,

Cie

ncia

y T

ecno

log

ía.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

8

Actividad 2 Sitios web accesibles y usables

a. En la actividad 1 han analizado la infraestructura de internet como red física. A continua-ción, lean las siguientes notas para conocer cómo se estructuran los sitios web y cómo se piensa su diseño de acuerdo a los estándares acordados para generar sitios accesibles e inclusivos:• “¿Qué es una página Web?”, en Concepto.de.• “Diseño de la estructura de una página web de 0 a 100”, en La webera.es.• “El árbol web: qué es y para qué sirve”, en Inboudcycle.

b. Observen el video “Usabilidad web: ¿Qué es y qué aporta al usuario? / Masterclass”, en el canal INESEM Business School y, de acuerdo a los criterios de Jakob Nielsen, identifiquen tres sitios web que ustedes valoren positivamente en relación con su diseño y con la usabi-lidad, y tres que no. Piensen qué aspectos contribuyen a que esos sitios sean valorados de ese modo.

c. Resuelvan el test de usabilidad "Modelo de Test de Usuario", para el caso del sitio LingCars.d. Apliquen el mismo test a un caso sugerido por un compañero o una compañera.e. ¿Es lo mismo hablar de usabilidad que de accesibilidad? Observen los videos “Introduction

to Web Accessibility and W3C Standars” (“Introducción a la accesibilidad Web y a los están-dares W3C”), en el canal W3C Web Accessibility Initiative (WAI), que cuenta con subtítulos en español, y “¿Cómo sabemos que una página web es accesible para personas con discapaci-dad?”, en el canal Conapred México, y respondan las siguientes preguntas:• ¿Qué diferencias encuentran entre la usabilidad y la accesibilidad web?• Testeen, en los siguientes enlaces, algunos de los sitios seleccionados en el punto a.,

para comprobar y realizar el test de accesibilidad (TAW), pensando en sitios que sean verdaderamente inclusivos y que respeten los estándares de la W3C WCAG 2.0 con sus cuatro criterios principales, de forma que resulten perceptibles, operables, com-prensibles y robustos:

- Enlace1: Web accessibility. - Enlace 2: Taw. - Enlace 3: AChecker.

• Construyan una tabla para explicitar el test de accesibilidad generando una columna para cada uno de los criterios mencionados en los videos (uso de textos alternativos, contrastes de colores, tamaño del texto, estructura jerárquica de html bien desarro-llada para lectores de pantalla, entre otros) y una fila para cada sitio web que se anali-zará. Pueden realizarla en un procesador de textos como Documentos de Google (ver el tutorial de Google Docs Documentos en el Campus Virtual de Educación Digital) o en una planilla de cálculo (ver el tutorial de Google Drive Hoja de cálculo en el Campus Virtual de Educación Digital).

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

9

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

Actividad 3 Tecnologías web para la creación de un sitio

Los sitios web se desarrollan sobre la base de diferentes lenguajes. En esta actividad van a empezar a codificar para crear su sitio web desde cero. Trabajarán principalmente con tres lenguajes: HTML, CSS y JavaScript. A través de ellos, el sitio web poseerá estruc-tura, la información se organizará jerárquicamente (títulos, subtítulos, párrafos, imágenes, etc.) y contendrá la estética deseada (colores, tipografías, tamaños, separaciones y márge-nes). A su vez, podrá contar con elementos dinámicos y con movimientos, animaciones o interacciones.

a. Investiguen en grupo acerca de qué tipos de lenguajes son HTML, CSS y JavaScript e indi-quen para qué sirve cada uno. Armen un muro digital con Padlet para presentar en él esta información. Pueden consultar el tutorial de Padlet en el Campus Virtual de Educación Digital y tomar como ejemplo base el muro digital en Padlet “Tecnologías para crear un sitio web”.

b. Observen los siguientes videos, donde se explica cómo comenzar con cada lenguaje:• HTML: “¿Qué es HTML y cómo funciona?”, en el canal Platzi, 4 de agosto de 2014

(hasta el minuto 4:30).• CSS: “¿Qué es CSS? Bien explicado”, en el canal Bitech Studio, 16 de noviembre de

2017.• JavaScript: “¿Qué es JavaScript?”, en el canal Bitech Studio, 22 de septiembre de 2016.

Comenzar a codificar en HTMLc. Para comenzar con HTML, abran Tryit Editor v3.6. Este es un espacio de prueba (no es un

editor completo), pero les permitirá comenzar a entender este lenguaje.d. Agreguen una nueva línea con la etiqueta “subtítulo h2” debajo de la línea de “título h1”, y

presionen “run” para probar el código. Observen el estilo que se aplica automáticamente (color y estilo negrita). Modifiquen el contenido de las tres etiquetas para personalizarlo, guarden el ejemplo y agréguenlo en el muro de Padlet que crearon en el punto a. bajo la columna “proyectos realizados”, con el título “Ejemplo HTML N.º 1”.

e. Copien el código de su ejemplo en el bloc de notas de su computadora y guárdenlo como un archivo llamado “index.html”, que será su sitio principal. Presten atención a la ubicación donde guardan el archivo, para poder recuperarlo fácilmente (por ejemplo, pueden crear una nueva carpeta en el escritorio o en “Mis Documentos”). Abran el archivo con su nave-gador para ver el sitio que han creado.

f. Analicen los siguientes ejemplos en Tryit Editor v3.6 y comparen los diferentes elementos que figuran dentro de ellos: • Imágenes en HTML• Creación de botones en HTML

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

10

• Lista no numerada• Agregando links ¿Qué atributos han cambiado en cada caso?

g. Exploren la etiqueta “div” e identifiquen para qué sirve.

Aplicar estilo con CSSh. Observen el ejemplo con la integración de CSS dentro del documento HTML de forma

embebida, en Tryit Editor v3.6. Próximamente, separarán ambos lenguajes en diferentes archivos del mismo proyecto, incorporando el CSS de forma externa. Apliquen diferentes estilos a su ejemplo.

i. En el siguiente ejemplo, en Tryit Editor v3.6, podrán ver cómo identificar diferentes ele-mentos de HTML mediante la definición de identificadores y clases.

j. Este ejemplo, en Tryit Editor v3.6, integra CSS, pero de forma externa al documento HTML. Generen su propio archivo CSS externo y apliquen diferentes estilos a su proyecto. Para ello, pueden usar cualquiera de los siguientes entornos de desarrollo web: Brackets, Sublime Text, Visual Studio Code, Atom, Komodo Edit, bloc de notas, etcétera. Pueden encontrar referencias a diferentes propiedades de CSS en el sitio W3schools. Para crear un sitio con varias páginas web, deberán generar diferentes archivos con extensión “.html” y enlazarlos a través de hipervínculos.

Aplicar interacciones con JavaScriptk. Analicen este ejemplo de cómo aplicar una interacción básica a un botón mediante

JavaScript, en Tryit Editor v3.6.l. Agreguen a su proyecto alguna función en JavaScript, incorporando los elementos vis-

tos hasta el momento. Agreguen el acceso al proyecto en el muro de Padlet de su grupo. Se sugiere, también, investigar frameworks o marcos de trabajo como Materialize o Bootstrap, entre otros (pueden acceder al video “Comienza a usar Materialize CSS”, en el canal DesarrolloWeb.com, o al video “Cómo usar Bootstrap en HTML”, en el canal Bread Gaming). Sintéticamente, un framework es un esquema (un esqueleto, un patrón) para el desarrollo o para la implementación de soluciones informáticas. En este caso, estos fra-meworks web permiten desarrollar sitios web haciendo uso de librerías y definiciones que facilitan la codificación.

Generar un sitio web a través de plantillasm. Ingresen a Wix y elaboren un nuevo sitio web basándose en plantillas (pueden acceder al

tutorial de Wix en el Campus Virtual de Educación Digital). También, pueden ver las dife-rentes plantillas en “Elige la plantilla web que más te guste”, en Wix, y los videos tutoriales de Wix en “Tutoriales sobre Diseño y Estilo”, en el canal Wix español. Agreguen el enlace a su sitio web hecho en Wix al Padlet.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

11

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

n. Observen el código que genera el sitio de Wix accediendo a las herramientas de desarro-llador del navegador (acceso directo presionando “Ctrl + Shift + I”). Naveguen a través del menú lateral hasta acceder al sombreado individual de los elementos que hayan colocado en el sitio. ¿Cuánto código es generado automáticamente?

o. Analicen qué aspectos (positivos y negativos) encuentran entre el uso de plantillas (por ejemplo, Wix) en relación con el desarrollo de sitios web desde cero (codificando sin el uso de plantillas gráficas) en HTML y CSS. Agreguen un breve texto en el que expongan su análisis a su muro de Padlet.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

12

Segunda parte

Actividad 4 ¿Cómo buscamos en internet?

Como han estudiado en la actividad 1, se concibe internet como una red de interconexión pública, que acerca lugares físicamente remotos y aporta información relevante a los inte-reses de los consumidores digitales. Ahora bien, ¿existe una autoridad que regule la infor-mación en internet? ¿Quién garantiza que las conversaciones o los mensajes enviados no serán leídos por terceros? ¿Qué pasa con los datos personales en internet? ¿Cómo sabe Google qué es lo que se quiere o lo que se necesita?

Para ello, se divide la actividad en dos partes. La primera parte aborda aspectos vinculados a la autoridad y a la propiedad de la información en internet y al rol de las grandes empresas. La segunda parte propone trabajar sobre la temática de las búsquedas de información en la web y cómo el ecosistema digital predispone información en relación con nuestras prefe-rencias, y realiza así un recorte parcial de la realidad.

Primera parte

La información de las interacciones realizadas en internet se aloja en grandes conjuntos de servidores (computadoras) llamados datacenters.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

13

Mensaje sobre cookies.

Las cookiesA la hora de acceder a diferentes sitios web, suele aparecer un cartel que indica: “Este sitio utiliza cookies” (o similar).

¿Qué son las cookies? Una cookie es un archivo que se genera automáticamente en la computadora de los usuarios/as, y guarda sus preferencias e interacciones en ese sitio. Pueden leer más sobre el tema en el artículo “Qué ocurre cuando aceptas las cookies y por qué es conveniente borrarlas del navegador de vez en cuando”, en BBC News / Mundo.

Las compañías que venden productos y servicios en internet necesitan conocer a su audiencia, por lo que demandan y necesitan recabar esta información. De allí se des-prende un segmento de negocio vinculado al análisis del consumo de datos, donde ciertas empresas brindan sus servicios para permitir filtrar y acercar los productos o servicios de terceros a una determinada población.

Internet es una construcción colectiva donde se conectan y participan diferentes per-sonas e instituciones para armar una gran red global, pero ¿quién administra y regula esas interacciones?

a. Lean el artículo denominado “¿Qué es Gobernanza de Internet?”, en NIC Argentina, y vean el video “Una Carta Magna para la Web”, de Tim Berners-Lee, creador de la web (o también llamada World Wide Web o www), en TED Ideas worth spreading, donde habla acerca de qué internet se quiere tener y cuál es su futuro. Luego, resuelvan la siguiente consigna:• Si hubiera que crear una nueva versión de internet y se les solicitara escribir esos linea-

mientos o definiciones de la carta magna, ¿qué deberían contemplar? Escriban al menos cinco puntos de la nueva web, por ejemplo, qué derechos contemplaría y cómo serían la propiedad y la administración de los datos en la red. Para pensar aspectos de cómo fue cambiando la web, pueden ver el video “Cómo necesitamos rehacer internet” de Jaron Lanier, en TED Ideas worth spreading.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

14

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

Segunda parte

Filtro “burbuja”Tim Berners-Lee menciona en su video un término conocido como “Filtro burbuja”.

El esquema de filtro burbuja supone que grandes empresas preseleccionan información de la web en lugar del usuario final, acotando qué información es la que se percibe.

b. Vean el video “Eli Pariser: cuidado con la ‘burbuja de filtros’ en la red”, en TED Ideas worth spreading, para comprender en detalle cómo esta estrategia afecta a los usuarios a nivel global. En ese sentido, respondan las siguientes preguntas:• ¿Qué noticias o novedades suelen recibir en las redes sociales? ¿Pertenecen a las perso-

nas “más cercanas”? Busquen e identifiquen, en su lista de amigos/amigas/contactos, a algunas personas que no hayan visto o con quienes no hayan interactuado en el último tiempo. Busquen si esas personas han tenido actividad reciente (si han subido noticias, fotos, textos). Chequeen si esas novedades han aparecido en su muro. ¿Quién define qué novedades o artículos se quiere ver?

c. De la misma manera que la oferta de información que se recibe es parcial, también lo son los resultados de búsquedas. Vean el video “Google knowledge, Google money, Google power: Andreas Ekström at TEDxLundUniversity” (“Conocimiento, dinero y poder de Google”), en el canal TEDx Talks (tiene la opción de habilitar la traducción automática al español), y respondan las siguientes preguntas:• ¿Qué anuncios suelen aparecer en los sitios a los que acceden habitualmente o alrede-

dor de ellos? ¿Tienen que ver con lo que buscan o con lo que consultan en la web?• ¿Qué distinción hace Eli Pariser entre la información que se desea encontrar y lo que

verdaderamente se encuentra al buscar? ¿Cómo se da ese proceso de redifusión de la información? ¿Cómo nuestras preferencias afectan esa oferta de información?

• ¿Es posible que se vincule lo que se conversa en whatsapp con los anuncios que nos apa-recen en el navegador o con las amistades sugeridas de las redes sociales?

En la imagen se puede observar el filtro aplicado por diferentes instituciones y empresas, de forma tal que percibimos y estamos en contacto solo con aquella información que esas entidades nos ofrecen.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

15

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

• ¿A qué se refiere Andreas Ekström cuando dice “La transacción de información más interesante no viaja de Google hacia los usuarios cuando buscan, sino que va de los usuarios a Google”?

d. Realicen un esquema o mapa conceptual en el que relacionen, con sus palabras, los tér-minos relevantes y los que fueron mencionados y desconocen. Incorporen este cuadro al muro de Padlet. Pueden realizar el mapa a través de la herramienta MindMeister (consul-ten el tutorial MindMeister en el Campus Virtual de Educación Digital).

Actividad 5 Análisis de los usuarios en internet

En esta actividad deberán trabajar con interacciones en la web, desde otra perspectiva. Abordarán aspectos vinculados con el análisis de datos y preferencias en internet, y definirán audiencias, identificando a esas personas en función de cómo prefieren buscar en internet. Para ello, analizarán tres herramientas: Google Trends, Google Analytics y Google Ads.

a. Accedan a Google Trends (tendencias de Google) para analizar qué buscan los/las usua-rios/as. Ingresen términos de búsqueda vinculados a un tema que les gustaría investigar. Podrán encontrar indicadores de interés (de 0 a 100) para ver cronológicamente cómo varió el interés, y también filtrando por diferentes regiones de la Argentina.

b. Por otro lado, observen también en Google Trends las “Tendencias de búsquedas en tiempo real” en Argentina.

c. Observen el video “Tutorial audiencia - Google Analytics”, en el canal de Álvaro Mariscal, acerca de cómo se puede analizar a los/las usuarios/as de un sitio web a través de la herra-mienta gratuita Google Analytics. Tomen nota de los campos de personalización y el nivel de detalle acerca del público usuario del sitio.

d. Observen la siguiente imagen de una búsqueda de Google. ¿Cuáles fueron los términos de búsqueda? ¿Qué pueden decir de los espacios de publicación gratuita y de los pagos (anuncios)? ¿Dónde se ubican?

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

16

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

e. Accedan a la plataforma de Google Ads. Para ello deberán crear una cuenta gratuita. Quienes ya tengan una cuenta de Google podrán acceder con ella.

f. Observen las diferentes herramientas que ofrece la plataforma.

g. Accedan a la opción “Planificador de palabras claves”.

¿Qué es una palabra clave? Las palabras claves (keywords) son términos utilizados para establecer el intercambio de información entre usuarios y sitios web a partir de los buscadores.

h. Una vez dentro del planificador, figuran dos cuadros donde se indica si se desea descubrir palabras o consultar volumen de búsquedas y previsiones. Ingresen en el cuadro de la dere-cha (búsquedas y previsiones).

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

17

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

i. Ingresen palabras claves (separadas por comas) vinculadas a la temática que quieran inves-tigar. El sitio les arrojará una estimación de cuántos clics podrán obtener en una potencial campaña donde se generen anuncios con esas palabras. A continuación se proporciona un ejemplo. En este caso, se han ingresado las siguientes palabras claves: “independencia”, “9 de julio”, “independencia argentina”, “declaración de la independencia”.

El sistema arroja la cantidad posible de clics, cuánto sale cada clic que se presiona en el anuncio y un presupuesto estimado mensual (y también diario).

La tabla indica cómo rendiría cada término de búsqueda, cuántos clics podría recibir (y su costo por clic – CPC sigla que deviene del inglés Cost Per Click) y cuántas veces aparecería como resultado de una búsqueda (impresiones).

j. Observen, en la barra superior, la personalización de nuestra audiencia. Está dirigida a ubi-caciones en la República Argentina. Si realizan un clic sobre la opción “ubicaciones”, podrán redefinir a quién está dirigido el anuncio y cuántos posibles usuarios/as podrán acceder a él.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

18

k. Analicen el costo por clic de las palabras vinculadas a la temática elegida.

Actividad 6 Diseño y desarrollo de un proyecto web

Para concluir este proceso de trabajo, deberán desarrollar un sitio web cuyo contenido hayan acordado en clase. Debe tener una página principal descriptiva o informativa del tema elegido, y otra página asociada con un análisis de qué usuarios/as podrían buscar la información contenida en el sitio y cómo (quiénes acceden, en qué horario, qué términos de búsqueda utilizan, desde qué dispositivo, etcétera).

Para ello, pueden hacer uso de las herramientas indicadas en la actividad anterior.

Incorporen el enlace al sitio en su muro de Padlet como trabajo final. Pueden optar por desarrollar el sitio desde cero o mediante plantillas.

Esta actividad tiene por objetivo integrar lo visto en las dos partes de la secuencia. Los/las estu-diantes deberán generar un sitio, dando cuenta de lo aprendido en materia de diseño y desarrollo web, e incorporando una mirada vinculada al análisis de datos y audiencias en internet.

Para ello, se propone una consigna amplia, que permita la elección del tema de trabajo por parte del docente o de la docente, como también de los/las estudiantes. Se sugiere no cen-trar la investigación y la construcción del sitio en temáticas comerciales, sino más bien en aspectos académicos e informativos.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o e

Inno

vaci

ón

Ed

ucat

iva.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.

¿Qué hay detrás de un sitio web?Tecnologías de la Información |

19

Imágenes

Página 6 Applications-internet, en Wikipedia, https://bit.ly/2YCwhUn. Kommunikation-Internet, en Pixabay, https://bit.ly/2YvKCTm.

Página 11 Menú Herramientas Desarrollador. Aporte de Sebastián Frydman. Vista Herramientas Desarrollador. Aporte de Sebastián Frydman.

Página 12 Data Center, en Flickr, https://bit.ly/31dQYn0. Datacenter de Arsat, en Wikimedia, https://bit.ly/2M1jlBw.

Página 13 Captura mensaje sobre cookies. Aporte de Sebastián Frydman.

Página 14 Filterbubble, en Flickr, https://bit.ly/2YrythS.

Páginas 15, 16, 17, 18 Capturas de pantalla. Aportes de Sebastián Frydman.

G.C

.A.B

.A. |

Min

iste

rio

de

Ed

ucac

ión

e In

nova

ció

n | S

ubse

cret

aría

de

Pla

neam

ient

o E

duc

ativ

o, C

ienc

ia y

Tec

nolo

gía

.