SlideShare una empresa de Scribd logo
Tecnologías de la información
y la comunicación

El hipertexto
¿Qué es el hipertexto?


Cuando usamos el término “hipertexto”
solemos referirnos:

A una página web.
 A un CD ROM o DVD.
 A programas informáticos.


Estamos pensando tanto en las herramientas
como en los documentos creados con ellas.
¿Qué es el hipertexto?


¿Qué tienen en común?



La forma de organizar la información de manera
no lineal, sino mediante nexos que conectan
fragmentos de texto, imagen, audio, video, etc.
El usuario puede acceder a esa información de
manera directa o según sus intereses, sin tener
que recorrer el texto secuencialmente.
Esto es posible gracias al uso de un medio
digital.




¿Qué es el hipertexto?


Precisión terminológica:



Hipertexto: modelo teórico de organización de
la información.
Sistema de gestión de hipertextos:
herramientas informáticas que permiten crear,
gestionar y llevar a la práctica ese modelo
conceptual.
Hiperdocumento: documento generado con
esas herramientas.




¿Qué es el hipertexto?


Una definición de hipertexto:

"Técnicamente un hipertexto es un conjunto de nudos ligados por
conexiones. Los nudos pueden ser palabras, imágenes, gráficos o
partes de gráficos, secuencias sonoras, documentos completos
que a vez pueden ser hipertextos. Los ítems de información no
están conectados linealmente, como los nudos de una cuerda, sino
en modo que cada uno de ellos, o la mayor parte, extienden sus
conexiones en forma de estrella, según un modelo reticular.
Navegar en un hipertexto es diseñar un recorrido en una red que
puede ser tan compleja como se quiera. Porque cada nudo puede
contener a su vez toda una red".

Pièrre Lévy. Les technologies del'intelligence
Estructura de un hipertexto


Para generar una estructura no lineal hay que definir tanto la
arquitectura formal que subyace a la presentación
hipertextual como la arquitectura navegacional que se le
presenta al usuario:
Estructura de un hipertexto




Arquitectura estructural: el modo en que se organizan los
directorios, archivos y documentos que conforman el
hipertexto y permiten establecer relaciones entre ellos.
Se vincula con la estructura del conocimiento y permite
combinar una organización secuencial, jerárquica o
reticulada de la información:
Estructura de un hipertexto


Arquitectura navegacional: las formas y herramientas de
acceso a la información y navegación por parte del usuario.



Se relaciona con una estructura conceptual o temática.
Estructura de un hipertexto


Arquitectura funcional: los componentes, mecanismos y



herramientas que permiten establecer la arquitectura
estructural y navegacional del hipertexto.
Se relaciona con el almacenamiento de la información,
el software para organizar la información, las
aplicaciones necesarias para navegar, etc.
Elementos de un hipertexto


Nodos: Son las unidades básicas de un hipertexto, que
pueden contener texto, imágenes, sonidos, video, etc.
Se trata de lo que podemos visualizar en una pantalla:
Elementos de un hipertexto




Anclajes: Son el punto de activación o de destino de un
enlace. Pueden ser internos: dentro del mismo
documento, o externos: en otro documento del mismo
hipertexto, en un sitio web, etc.
Al activarlo, se produce un enlace por conmutación, el
nodo activado sustituye o se superpone al anterior.
Organización de un hipertexto
 Condiciones iniciales:

 Que haya un cuerpo de información
organizada en fragmentos.
 Que los fragmentos estén relacionados
entre sí.
 Que los usuarios necesiten ver sólo una
parte de un fragmento cada vez.
Organización de un hipertexto
 Tener en cuenta:

 Un número demasiado amplio de enlaces en
cada fragmento abruma al lector.
 Los fragmentos demasiado largos hacen la
lectura pesada y anulan la interactividad.
 El tener que recorrer demasiados enlaces para
llegar a la información buscada desorienta al
lector.
 Un índice pobre o mal construido dificulta la
elección del camino correcto para determinar
qué información contiene el documento y para
encontrarla.
Organización de un hipertexto


Partiendo de un conjunto de documentos, se establecen los
nodos y los enlaces entre ellos, se fijan los distintos tipos
de enlaces marcando los anclajes de origen y los de
destino, y se desarrollan mapas de navegación que ayuden
al usuario en la orientación, búsqueda y recuperación de la
información.
Problemas de navegación

1.

2.

Existen dos grades problemas en la navegación por un
hipertexto:
Desbordamiento cognitivo: La gran cantidad de información
almacenada puede causar en el usuario la sensación de
que hay mucha más información de la que puede llegar a
leer. Tiene la sensación de estar perdiéndose algo
importante. No estamos acostumbrados a la lógica
aleatoria, aún conservamos la lógica escritural.
Desorientación: Al no haber un único camino o hilo
conductor de lectura, es posible desviarnos de nuestra
intención inicial y dispersarnos en otros asuntos. Podemos
olvidar cómo accedimos a ese nodo y por qué. No sabemos
dónde nos encontramos, no sabemos cómo volver, no
sabemos cómo buscar información.
Herramientas de navegación


Estos problemas han sido bautizados como “Perdidos en el
hiperespacio”. Para resolverlos es necesario desarrollar un
sistema de navegación que nos permita:





Determinar dónde estamos.
Volver al punto de partida.
Tener noción de la relación de ese lugar con el resto
del material.
Explorar materiales no directamente vinculados al
que uno está mirando en ese momento.
Herramientas de navegación


Mapas de navegación: Se trata de una representación
completa o resumida del sitio web, que sirve para orientar
al usuario durante el recorrido, o facilitarle el acceso directo
al lugar que le interese.
Herramientas de navegación




Visitas guiadas: Ofrecer una secuencia de vínculos (o
varias posibles) predeterminada que muestre un recorrido
posible por el hipertexto, y que ayude al usuario a
familiarizarse con él. Debe contar con mecanismos de
salida y la posibilidad de retomar la visita donde se la dejó.
Vuelta atrás: La posibilidad de volver al nodo anterior desde
la perspectiva del usuario, o bien de volver al nodo inicial
del sitio. La posibilidad de contar con un historial que
permita acceder a los nodos previamente visitados.
Herramientas de navegación





Etiquetado y vista previa de enlaces: Permite que el usuario
tenga información previa de hacia donde conduce el enlace
o qué tipo de información contiene, cuando se pasa el
mouse por encima del anclaje.
Búsqueda y recuperación de la información: Mecanismos o
motores de búsqueda que permiten acceder a la
información deseada.
Metáforas: Conceptos y modelos del mundo real con los
que los usuarios están familiarizados para representar
información digital y hacer que el documento sea más
comprensible.
Escritura hipertextual
 A la hora de elaborar un material en soporte
hipertextual tenemos que tener en cuenta que
los usuarios no leen de la misma forma en que
leerían un diario, un libro o un artículo.
 Cuando alguien entra a un hipertexto tiene un
objetivo o una necesidad y va a hacer clic
sobre el primer anclaje que crea que puede
llevarlo a lo que busca, aunque no haya leído
de principio a fin toda la información contenida
en el nodo.
Escritura hipertextual


El usuario ojea a saltos la información contenida
en el nodo. No es posible predecir qué camino va
a seguir en su exploración visual, pero sí a qué
zonas le prestará más atención.
La zona que tiene el 1 es la más
llamativa, y luego el resto se
organiza
en importancia
decreciente en
relación inversa
a los números.
Escritura hipertextual






Síntesis: Dado que leer en pantalla es mucho más
incómodo que en papel, a la hora de escribir para la
web, el texto deberá tener una extensión entre un 25 y
un 35% menos que uno impreso. Es más cómodo leer
un texto con varios párrafos cortos que uno con pocos
párrafos largos.
Resumen: Además, es bueno incluir al principio de los
textos digitales un resumen de su contenido, para que
el usario decida si le interesa la información que
contiene o no.
Glosario: También es bueno incluir pequeñas
explicaciones de los términos más importates al final
del texto, con enlaces a dichas palabras en el
desarrollo del texto.
Escritura hipertextual





Ancho:Es más fácil, cómodo y rápido leer un texto con un
ancho moderado que leer líneas que van de lado a lado de
la pantalla. También es más legible un texto alineado a la
izquierda.
Colores: Es más legible un texto oscuro sobre un fondo
claro que a la inversa.
Fuente: Los tipos de fuente que mejor se leen en pantalla
son las sans-serif como Arial o Verdana. Las fuentes serif
como Times New Roman son recomendables sólo para
documentos impresos. Para enfatizar términos no es
recomendable usar el subrayado, porque puede
confundirse con un anclaje. Tampoco es bueno usar
cursiva, por la baja resolución de las pantallas. Puede
usarse negrita o un cuerpo más grande.
Escritura hipertextual


Anclajes: Cuando introduzcamos un anclaje, es importante
que el usuario lo reconoca. Los más habituales son estos:
Haga clic aquí para comprar este producto
Comprar este producto
Haga clic aquí para leer las opiniones de los usuarios
Leer las opiniones de los usuarios
 También pueden usarse anclajes icónicos, que suelen
resultar más intuitivos para el usuario:

Más contenido relacionado

La actualidad más candente

Sistemas multimedia
Sistemas multimediaSistemas multimedia
Sistemas multimedia
Jomicast
 
Presentación Hipertexto
Presentación HipertextoPresentación Hipertexto
Presentación Hipertexto
Ximena Orellana
 
Sitios Web Educativos
Sitios Web EducativosSitios Web Educativos
Sitios Web Educativos
Raymond Marquina
 
Cuadro comparativo de la web 1.0, web 2.0, web 3.0, web 4.0
Cuadro comparativo de  la web 1.0, web 2.0, web 3.0, web 4.0Cuadro comparativo de  la web 1.0, web 2.0, web 3.0, web 4.0
Cuadro comparativo de la web 1.0, web 2.0, web 3.0, web 4.0
Nombre Apellidos
 
Web 1.0, 2.0, 3.0.4.0
Web  1.0, 2.0, 3.0.4.0Web  1.0, 2.0, 3.0.4.0
Web 1.0, 2.0, 3.0.4.0
jairosuarezrojas
 
Herramientas web 2.0 y web 3.0
Herramientas web 2.0 y web 3.0Herramientas web 2.0 y web 3.0
Herramientas web 2.0 y web 3.0
Danieldaguni
 
Presentaciones Electronicas
Presentaciones ElectronicasPresentaciones Electronicas
Presentaciones ElectronicasMike Coral
 
Las tics en la educación
Las tics en la educaciónLas tics en la educación
Las tics en la educación
Leidysluciell
 
Textos escritos (comunicación) literatura
Textos escritos (comunicación)   literaturaTextos escritos (comunicación)   literatura
Textos escritos (comunicación) literatura
lezny cruz alvarez
 
Herramientas web 3.0
Herramientas web 3.0Herramientas web 3.0
Herramientas web 3.0
Colegio Roberto Rodas
 
ELEMENTOS DE LA MULTIMEDIA
ELEMENTOS DE LA MULTIMEDIAELEMENTOS DE LA MULTIMEDIA
ELEMENTOS DE LA MULTIMEDIAOlga Carvajal
 
Multimedia educativa
Multimedia educativaMultimedia educativa
Multimedia educativa
Pablo Andrés Castell Rodriguez
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
Marcelo Freitas
 
Introduccion escritura
Introduccion  escrituraIntroduccion  escritura
Introduccion escrituraD1Evan
 
Elaboración del guión multimedia.
Elaboración del guión multimedia.Elaboración del guión multimedia.
Elaboración del guión multimedia.roberto_27tepa
 
Entornos digitales
Entornos digitalesEntornos digitales
Entornos digitales
Perdomo06
 
Conclusiones- evolucion de la web
Conclusiones- evolucion de la webConclusiones- evolucion de la web
Conclusiones- evolucion de la web
Dyana Cordovez
 
Presentación sobre el párrafo, su estructura y tipos de párrafos
Presentación sobre el párrafo, su estructura y tipos de párrafosPresentación sobre el párrafo, su estructura y tipos de párrafos
Presentación sobre el párrafo, su estructura y tipos de párrafos
Mileidyp
 

La actualidad más candente (20)

Sistemas multimedia
Sistemas multimediaSistemas multimedia
Sistemas multimedia
 
Presentación Hipertexto
Presentación HipertextoPresentación Hipertexto
Presentación Hipertexto
 
Sitios Web Educativos
Sitios Web EducativosSitios Web Educativos
Sitios Web Educativos
 
Cuadro comparativo de la web 1.0, web 2.0, web 3.0, web 4.0
Cuadro comparativo de  la web 1.0, web 2.0, web 3.0, web 4.0Cuadro comparativo de  la web 1.0, web 2.0, web 3.0, web 4.0
Cuadro comparativo de la web 1.0, web 2.0, web 3.0, web 4.0
 
Web 1.0, 2.0, 3.0.4.0
Web  1.0, 2.0, 3.0.4.0Web  1.0, 2.0, 3.0.4.0
Web 1.0, 2.0, 3.0.4.0
 
Hipermedia
HipermediaHipermedia
Hipermedia
 
Herramientas web 2.0 y web 3.0
Herramientas web 2.0 y web 3.0Herramientas web 2.0 y web 3.0
Herramientas web 2.0 y web 3.0
 
Presentaciones Electronicas
Presentaciones ElectronicasPresentaciones Electronicas
Presentaciones Electronicas
 
Herramientas web 1.0
Herramientas web 1.0Herramientas web 1.0
Herramientas web 1.0
 
Las tics en la educación
Las tics en la educaciónLas tics en la educación
Las tics en la educación
 
Textos escritos (comunicación) literatura
Textos escritos (comunicación)   literaturaTextos escritos (comunicación)   literatura
Textos escritos (comunicación) literatura
 
Herramientas web 3.0
Herramientas web 3.0Herramientas web 3.0
Herramientas web 3.0
 
ELEMENTOS DE LA MULTIMEDIA
ELEMENTOS DE LA MULTIMEDIAELEMENTOS DE LA MULTIMEDIA
ELEMENTOS DE LA MULTIMEDIA
 
Multimedia educativa
Multimedia educativaMultimedia educativa
Multimedia educativa
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
 
Introduccion escritura
Introduccion  escrituraIntroduccion  escritura
Introduccion escritura
 
Elaboración del guión multimedia.
Elaboración del guión multimedia.Elaboración del guión multimedia.
Elaboración del guión multimedia.
 
Entornos digitales
Entornos digitalesEntornos digitales
Entornos digitales
 
Conclusiones- evolucion de la web
Conclusiones- evolucion de la webConclusiones- evolucion de la web
Conclusiones- evolucion de la web
 
Presentación sobre el párrafo, su estructura y tipos de párrafos
Presentación sobre el párrafo, su estructura y tipos de párrafosPresentación sobre el párrafo, su estructura y tipos de párrafos
Presentación sobre el párrafo, su estructura y tipos de párrafos
 

Similar a El Hipertexto: Características y elementos que lo componen

El Hipertexto
El HipertextoEl Hipertexto
Hipertexto
HipertextoHipertexto
Hipertexto
stalinbarrera10
 
Nuevas formas de leer
Nuevas formas de leerNuevas formas de leer
Nuevas formas de leer
Diana Rodríguez
 
Hipertexto e hipermedia
Hipertexto e hipermediaHipertexto e hipermedia
Hipertexto e hipermedia
camiloob2
 
Hipertexto
HipertextoHipertexto
Hipertexto
guestb06af3bf
 
Hipertextos e Hipermedia
Hipertextos e Hipermedia Hipertextos e Hipermedia
Hipertextos e Hipermedia
marijaramilloo
 
Hipertextos e hipermedia
Hipertextos e hipermedia Hipertextos e hipermedia
Hipertextos e hipermedia
marijaramilloo
 
Uso de Hipertexto y Multimedia
Uso de Hipertexto y MultimediaUso de Hipertexto y Multimedia
Uso de Hipertexto y MultimediaMiguel Diliegros
 
Comunicación Interactiva (Definición de Términos)
Comunicación Interactiva (Definición de Términos)Comunicación Interactiva (Definición de Términos)
Comunicación Interactiva (Definición de Términos)MJOPE
 
Comunicación interactiva mt
Comunicación interactiva mtComunicación interactiva mt
Comunicación interactiva mtsmariateresa
 
Torres y Frontuto
Torres y FrontutoTorres y Frontuto
Torres y FrontutoDamian
 
Dulce
DulceDulce
Comunicación interactiva lismary medina 21.144.349 m 716
Comunicación interactiva lismary medina 21.144.349 m 716Comunicación interactiva lismary medina 21.144.349 m 716
Comunicación interactiva lismary medina 21.144.349 m 716lismary19
 
hipertextos
hipertextoshipertextos
hipertextos
guest786360
 
U3 mecanismos de auditoria
U3 mecanismos de auditoriaU3 mecanismos de auditoria
U3 mecanismos de auditoria
Silvia Castañeda Quiroz
 
Hipertexto
HipertextoHipertexto
Multi,
Multi,Multi,
Multi,
leidy gomez
 

Similar a El Hipertexto: Características y elementos que lo componen (20)

El Hipertexto
El HipertextoEl Hipertexto
El Hipertexto
 
Hipertexto
HipertextoHipertexto
Hipertexto
 
Nuevas formas de leer
Nuevas formas de leerNuevas formas de leer
Nuevas formas de leer
 
Hipertexto e hipermedia
Hipertexto e hipermediaHipertexto e hipermedia
Hipertexto e hipermedia
 
Hipertexto En La Educacion Me
Hipertexto En La Educacion MeHipertexto En La Educacion Me
Hipertexto En La Educacion Me
 
Hipertexto
HipertextoHipertexto
Hipertexto
 
Hipertextos e Hipermedia
Hipertextos e Hipermedia Hipertextos e Hipermedia
Hipertextos e Hipermedia
 
Hipertextos e hipermedia
Hipertextos e hipermedia Hipertextos e hipermedia
Hipertextos e hipermedia
 
Uso de Hipertexto y Multimedia
Uso de Hipertexto y MultimediaUso de Hipertexto y Multimedia
Uso de Hipertexto y Multimedia
 
Comunicación Interactiva (Definición de Términos)
Comunicación Interactiva (Definición de Términos)Comunicación Interactiva (Definición de Términos)
Comunicación Interactiva (Definición de Términos)
 
Comunicación interactiva mt
Comunicación interactiva mtComunicación interactiva mt
Comunicación interactiva mt
 
Torres y Frontuto
Torres y FrontutoTorres y Frontuto
Torres y Frontuto
 
Dulce
DulceDulce
Dulce
 
Comunicación interactiva lismary medina 21.144.349 m 716
Comunicación interactiva lismary medina 21.144.349 m 716Comunicación interactiva lismary medina 21.144.349 m 716
Comunicación interactiva lismary medina 21.144.349 m 716
 
hipertextos
hipertextoshipertextos
hipertextos
 
U3 mecanismos de auditoria
U3 mecanismos de auditoriaU3 mecanismos de auditoria
U3 mecanismos de auditoria
 
Hipertexto
HipertextoHipertexto
Hipertexto
 
Multi,
Multi,Multi,
Multi,
 
comunicación interactiva
comunicación interactivacomunicación interactiva
comunicación interactiva
 
Sebastian estrada laura sanchez
Sebastian estrada laura sanchezSebastian estrada laura sanchez
Sebastian estrada laura sanchez
 

Más de María Isabel Zapata Cárdenas

Futuro digital latinoamerica_2013_informe
Futuro digital latinoamerica_2013_informeFuturo digital latinoamerica_2013_informe
Futuro digital latinoamerica_2013_informe
María Isabel Zapata Cárdenas
 
Cine en las redes sociales
Cine en las redes socialesCine en las redes sociales
Cine en las redes sociales
María Isabel Zapata Cárdenas
 
Uso de las tic en la organización social
Uso de las tic en la organización socialUso de las tic en la organización social
Uso de las tic en la organización social
María Isabel Zapata Cárdenas
 
Historia de las redes sociales
Historia de las redes socialesHistoria de las redes sociales
Historia de las redes sociales
María Isabel Zapata Cárdenas
 
Modelos de comunicacion
Modelos de comunicacionModelos de comunicacion
Modelos de comunicacion
María Isabel Zapata Cárdenas
 
Búsquedas en Internet: Uso de Boleanos
Búsquedas en Internet: Uso de BoleanosBúsquedas en Internet: Uso de Boleanos
Búsquedas en Internet: Uso de Boleanos
María Isabel Zapata Cárdenas
 
Encuesta: Futuro Digital Colombia 2012
Encuesta: Futuro Digital Colombia 2012Encuesta: Futuro Digital Colombia 2012
Encuesta: Futuro Digital Colombia 2012
María Isabel Zapata Cárdenas
 
Qué es internet
Qué es internetQué es internet

Más de María Isabel Zapata Cárdenas (17)

Guía de herramientas WEB para comunicadores
Guía de herramientas WEB para comunicadoresGuía de herramientas WEB para comunicadores
Guía de herramientas WEB para comunicadores
 
Social media-tools-2012
Social media-tools-2012Social media-tools-2012
Social media-tools-2012
 
Paso a paso_comunicacion_2.0
Paso a paso_comunicacion_2.0Paso a paso_comunicacion_2.0
Paso a paso_comunicacion_2.0
 
Servicios generales de Internet
Servicios generales de InternetServicios generales de Internet
Servicios generales de Internet
 
Internet y sus_servicios
Internet y sus_serviciosInternet y sus_servicios
Internet y sus_servicios
 
Futuro digital latinoamerica_2013_informe
Futuro digital latinoamerica_2013_informeFuturo digital latinoamerica_2013_informe
Futuro digital latinoamerica_2013_informe
 
Directorio de redes sociales para el Cine
Directorio de redes sociales para el CineDirectorio de redes sociales para el Cine
Directorio de redes sociales para el Cine
 
Cine en las redes sociales
Cine en las redes socialesCine en las redes sociales
Cine en las redes sociales
 
Uso de las tic en la organización social
Uso de las tic en la organización socialUso de las tic en la organización social
Uso de las tic en la organización social
 
Historia de las redes sociales
Historia de las redes socialesHistoria de las redes sociales
Historia de las redes sociales
 
Social media: Plan de Comunicación
Social media: Plan de ComunicaciónSocial media: Plan de Comunicación
Social media: Plan de Comunicación
 
Modelos de comunicacion
Modelos de comunicacionModelos de comunicacion
Modelos de comunicacion
 
Los nativos digitales
Los nativos digitalesLos nativos digitales
Los nativos digitales
 
Búsquedas en Internet: Uso de Boleanos
Búsquedas en Internet: Uso de BoleanosBúsquedas en Internet: Uso de Boleanos
Búsquedas en Internet: Uso de Boleanos
 
Presentación General
Presentación GeneralPresentación General
Presentación General
 
Encuesta: Futuro Digital Colombia 2012
Encuesta: Futuro Digital Colombia 2012Encuesta: Futuro Digital Colombia 2012
Encuesta: Futuro Digital Colombia 2012
 
Qué es internet
Qué es internetQué es internet
Qué es internet
 

Último

Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
DiegoCampos433849
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
CrystalRomero18
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
ManuelCampos464987
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
Luis Enrique Zafra Haro
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
Fernando Villares
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
cdraco
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
Leidyfuentes19
 
Diagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestreDiagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestre
rafaelsalazar0615
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
marianabz2403
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
cofferub
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
thomasdcroz38
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
cj3806354
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
zoecaicedosalazar
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
PABLOCESARGARZONBENI
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
SamuelRamirez83524
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
IsabellaRubio6
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
ItsSofi
 

Último (20)

Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
 
biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
 
Diagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestreDiagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestre
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
 
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfTRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
TRABAJO DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
 
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdfEstructuras Básicas_ Conceptos Basicos De Programacion.pdf
Estructuras Básicas_ Conceptos Basicos De Programacion.pdf
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
 

El Hipertexto: Características y elementos que lo componen

  • 1. Tecnologías de la información y la comunicación El hipertexto
  • 2. ¿Qué es el hipertexto?  Cuando usamos el término “hipertexto” solemos referirnos: A una página web.  A un CD ROM o DVD.  A programas informáticos.  Estamos pensando tanto en las herramientas como en los documentos creados con ellas.
  • 3. ¿Qué es el hipertexto?  ¿Qué tienen en común?  La forma de organizar la información de manera no lineal, sino mediante nexos que conectan fragmentos de texto, imagen, audio, video, etc. El usuario puede acceder a esa información de manera directa o según sus intereses, sin tener que recorrer el texto secuencialmente. Esto es posible gracias al uso de un medio digital.  
  • 4. ¿Qué es el hipertexto?  Precisión terminológica:  Hipertexto: modelo teórico de organización de la información. Sistema de gestión de hipertextos: herramientas informáticas que permiten crear, gestionar y llevar a la práctica ese modelo conceptual. Hiperdocumento: documento generado con esas herramientas.  
  • 5. ¿Qué es el hipertexto?  Una definición de hipertexto: "Técnicamente un hipertexto es un conjunto de nudos ligados por conexiones. Los nudos pueden ser palabras, imágenes, gráficos o partes de gráficos, secuencias sonoras, documentos completos que a vez pueden ser hipertextos. Los ítems de información no están conectados linealmente, como los nudos de una cuerda, sino en modo que cada uno de ellos, o la mayor parte, extienden sus conexiones en forma de estrella, según un modelo reticular. Navegar en un hipertexto es diseñar un recorrido en una red que puede ser tan compleja como se quiera. Porque cada nudo puede contener a su vez toda una red". Pièrre Lévy. Les technologies del'intelligence
  • 6. Estructura de un hipertexto  Para generar una estructura no lineal hay que definir tanto la arquitectura formal que subyace a la presentación hipertextual como la arquitectura navegacional que se le presenta al usuario:
  • 7. Estructura de un hipertexto   Arquitectura estructural: el modo en que se organizan los directorios, archivos y documentos que conforman el hipertexto y permiten establecer relaciones entre ellos. Se vincula con la estructura del conocimiento y permite combinar una organización secuencial, jerárquica o reticulada de la información:
  • 8. Estructura de un hipertexto  Arquitectura navegacional: las formas y herramientas de acceso a la información y navegación por parte del usuario.  Se relaciona con una estructura conceptual o temática.
  • 9. Estructura de un hipertexto  Arquitectura funcional: los componentes, mecanismos y  herramientas que permiten establecer la arquitectura estructural y navegacional del hipertexto. Se relaciona con el almacenamiento de la información, el software para organizar la información, las aplicaciones necesarias para navegar, etc.
  • 10. Elementos de un hipertexto  Nodos: Son las unidades básicas de un hipertexto, que pueden contener texto, imágenes, sonidos, video, etc. Se trata de lo que podemos visualizar en una pantalla:
  • 11. Elementos de un hipertexto   Anclajes: Son el punto de activación o de destino de un enlace. Pueden ser internos: dentro del mismo documento, o externos: en otro documento del mismo hipertexto, en un sitio web, etc. Al activarlo, se produce un enlace por conmutación, el nodo activado sustituye o se superpone al anterior.
  • 12. Organización de un hipertexto  Condiciones iniciales:  Que haya un cuerpo de información organizada en fragmentos.  Que los fragmentos estén relacionados entre sí.  Que los usuarios necesiten ver sólo una parte de un fragmento cada vez.
  • 13. Organización de un hipertexto  Tener en cuenta:  Un número demasiado amplio de enlaces en cada fragmento abruma al lector.  Los fragmentos demasiado largos hacen la lectura pesada y anulan la interactividad.  El tener que recorrer demasiados enlaces para llegar a la información buscada desorienta al lector.  Un índice pobre o mal construido dificulta la elección del camino correcto para determinar qué información contiene el documento y para encontrarla.
  • 14. Organización de un hipertexto  Partiendo de un conjunto de documentos, se establecen los nodos y los enlaces entre ellos, se fijan los distintos tipos de enlaces marcando los anclajes de origen y los de destino, y se desarrollan mapas de navegación que ayuden al usuario en la orientación, búsqueda y recuperación de la información.
  • 15. Problemas de navegación  1. 2. Existen dos grades problemas en la navegación por un hipertexto: Desbordamiento cognitivo: La gran cantidad de información almacenada puede causar en el usuario la sensación de que hay mucha más información de la que puede llegar a leer. Tiene la sensación de estar perdiéndose algo importante. No estamos acostumbrados a la lógica aleatoria, aún conservamos la lógica escritural. Desorientación: Al no haber un único camino o hilo conductor de lectura, es posible desviarnos de nuestra intención inicial y dispersarnos en otros asuntos. Podemos olvidar cómo accedimos a ese nodo y por qué. No sabemos dónde nos encontramos, no sabemos cómo volver, no sabemos cómo buscar información.
  • 16. Herramientas de navegación  Estos problemas han sido bautizados como “Perdidos en el hiperespacio”. Para resolverlos es necesario desarrollar un sistema de navegación que nos permita:     Determinar dónde estamos. Volver al punto de partida. Tener noción de la relación de ese lugar con el resto del material. Explorar materiales no directamente vinculados al que uno está mirando en ese momento.
  • 17. Herramientas de navegación  Mapas de navegación: Se trata de una representación completa o resumida del sitio web, que sirve para orientar al usuario durante el recorrido, o facilitarle el acceso directo al lugar que le interese.
  • 18. Herramientas de navegación   Visitas guiadas: Ofrecer una secuencia de vínculos (o varias posibles) predeterminada que muestre un recorrido posible por el hipertexto, y que ayude al usuario a familiarizarse con él. Debe contar con mecanismos de salida y la posibilidad de retomar la visita donde se la dejó. Vuelta atrás: La posibilidad de volver al nodo anterior desde la perspectiva del usuario, o bien de volver al nodo inicial del sitio. La posibilidad de contar con un historial que permita acceder a los nodos previamente visitados.
  • 19. Herramientas de navegación    Etiquetado y vista previa de enlaces: Permite que el usuario tenga información previa de hacia donde conduce el enlace o qué tipo de información contiene, cuando se pasa el mouse por encima del anclaje. Búsqueda y recuperación de la información: Mecanismos o motores de búsqueda que permiten acceder a la información deseada. Metáforas: Conceptos y modelos del mundo real con los que los usuarios están familiarizados para representar información digital y hacer que el documento sea más comprensible.
  • 20. Escritura hipertextual  A la hora de elaborar un material en soporte hipertextual tenemos que tener en cuenta que los usuarios no leen de la misma forma en que leerían un diario, un libro o un artículo.  Cuando alguien entra a un hipertexto tiene un objetivo o una necesidad y va a hacer clic sobre el primer anclaje que crea que puede llevarlo a lo que busca, aunque no haya leído de principio a fin toda la información contenida en el nodo.
  • 21. Escritura hipertextual  El usuario ojea a saltos la información contenida en el nodo. No es posible predecir qué camino va a seguir en su exploración visual, pero sí a qué zonas le prestará más atención. La zona que tiene el 1 es la más llamativa, y luego el resto se organiza en importancia decreciente en relación inversa a los números.
  • 22. Escritura hipertextual    Síntesis: Dado que leer en pantalla es mucho más incómodo que en papel, a la hora de escribir para la web, el texto deberá tener una extensión entre un 25 y un 35% menos que uno impreso. Es más cómodo leer un texto con varios párrafos cortos que uno con pocos párrafos largos. Resumen: Además, es bueno incluir al principio de los textos digitales un resumen de su contenido, para que el usario decida si le interesa la información que contiene o no. Glosario: También es bueno incluir pequeñas explicaciones de los términos más importates al final del texto, con enlaces a dichas palabras en el desarrollo del texto.
  • 23. Escritura hipertextual    Ancho:Es más fácil, cómodo y rápido leer un texto con un ancho moderado que leer líneas que van de lado a lado de la pantalla. También es más legible un texto alineado a la izquierda. Colores: Es más legible un texto oscuro sobre un fondo claro que a la inversa. Fuente: Los tipos de fuente que mejor se leen en pantalla son las sans-serif como Arial o Verdana. Las fuentes serif como Times New Roman son recomendables sólo para documentos impresos. Para enfatizar términos no es recomendable usar el subrayado, porque puede confundirse con un anclaje. Tampoco es bueno usar cursiva, por la baja resolución de las pantallas. Puede usarse negrita o un cuerpo más grande.
  • 24. Escritura hipertextual  Anclajes: Cuando introduzcamos un anclaje, es importante que el usuario lo reconoca. Los más habituales son estos: Haga clic aquí para comprar este producto Comprar este producto Haga clic aquí para leer las opiniones de los usuarios Leer las opiniones de los usuarios  También pueden usarse anclajes icónicos, que suelen resultar más intuitivos para el usuario: