Este documento describe los pasos para crear un sitio web, incluyendo estructurar el contenido, diseñar la interfaz, crear páginas con texto e imágenes, agregar hipervínculos, probar el sitio, subirlo a la web, agregarlo a buscadores, y monitorear usuarios para actualizaciones. También discute formatos de imágenes, editores de HTML, y herramientas de análisis web.
Clase Edicion de Sitios Web - TGD 31/05/11imdbredanini
El documento describe las principales tareas involucradas en el desarrollo de un sitio web, incluyendo estructurar el sitio, organizar la estructura de archivos y el diseño de la interfaz, editar gráficos, crear páginas e hipervínculos, probar el sitio, subirlo a la web, agregarlo a los buscadores, estudiar el perfil de usuarios y realizar actualizaciones periódicas.
Este documento habla sobre las Tecnologías de la Información y la Comunicación (TIC's). Explica conceptos clave como:
1. La World Wide Web (WWW) es una red de alcance mundial formada por miles de servidores interconectados.
2. Las páginas web contienen hipervínculos que permiten el desplazamiento entre documentos almacenados en diferentes servidores a través del hipertexto.
3. Se requiere de un explorador web, una conexión a internet y servidores para acc
Este documento describe las herramientas de diseño web y sus principales características. Explica que el diseño web involucra factores como la navegabilidad, usabilidad e interacción con medios como audio, texto, imágenes y video. También cubre las etapas clave del diseño web como el diseño visual, la estructura de la información y el posicionamiento en buscadores. Finalmente, menciona algunas herramientas comunes como HTML y programas WYSIWYG para crear páginas web.
Este documento define Social Media/Web 2.0 y explica algunos de sus formatos más relevantes. Social Media se refiere a medios de comunicación donde los usuarios crean y comparten contenido fácilmente a través de nuevas tecnologías. Algunos formatos populares son blogs, redes sociales, microblogs, foros, documentos compartidos, mensajería instantánea y geolocalización. La Web 2.0 también permite la colaboración a través de wikis, marcadores sociales y noticias votadas por usuarios.
El documento describe varias herramientas y técnicas de la Web 2.0 que pueden utilizarse para gestionar y buscar información, así como para crear y compartir recursos educativos, incluyendo motores de búsqueda, bases de datos, portales educativos, aplicaciones ofimáticas, herramientas de comunicación y publicación de documentos.
Main Words es una herramienta propuesta para permitir la indización automática y recuperación del conocimiento generado por los usuarios en las redes sociales de manera sencilla e intuitiva. La herramienta analizaría los posts de los usuarios de un grupo para crear automáticamente un tesauro en lenguaje natural con los términos más usados, facilitando la visualización y comprensión de los temas de conversación del grupo. El objetivo es que los usuarios puedan gestionar y clasificar su conocimiento compartido para poder recuperarlo fácilmente en el
Este documento trata sobre el diseño y edición de páginas web. Explica conceptos clave como HTML, lenguajes del lado del cliente como JavaScript, y lenguajes del lado del servidor como PHP. También cubre temas como el diseño web accesible siguiendo las pautas WCAG del W3C y editores web como Dreamweaver. El documento proporciona ejemplos prácticos de código HTML, CSS y JavaScript.
Este documento describe varios conceptos clave relacionados con la comunicación digital. Explica cómo las nuevas tecnologías han permitido nuevas formas de expresión más allá de lo escrito como imágenes, videos y más. También describe conceptos como la interactividad en la comunicación, la evolución de la Web y características de Internet como hipervínculos y multimedia.
Clase Edicion de Sitios Web - TGD 31/05/11imdbredanini
El documento describe las principales tareas involucradas en el desarrollo de un sitio web, incluyendo estructurar el sitio, organizar la estructura de archivos y el diseño de la interfaz, editar gráficos, crear páginas e hipervínculos, probar el sitio, subirlo a la web, agregarlo a los buscadores, estudiar el perfil de usuarios y realizar actualizaciones periódicas.
Este documento habla sobre las Tecnologías de la Información y la Comunicación (TIC's). Explica conceptos clave como:
1. La World Wide Web (WWW) es una red de alcance mundial formada por miles de servidores interconectados.
2. Las páginas web contienen hipervínculos que permiten el desplazamiento entre documentos almacenados en diferentes servidores a través del hipertexto.
3. Se requiere de un explorador web, una conexión a internet y servidores para acc
Este documento describe las herramientas de diseño web y sus principales características. Explica que el diseño web involucra factores como la navegabilidad, usabilidad e interacción con medios como audio, texto, imágenes y video. También cubre las etapas clave del diseño web como el diseño visual, la estructura de la información y el posicionamiento en buscadores. Finalmente, menciona algunas herramientas comunes como HTML y programas WYSIWYG para crear páginas web.
Este documento define Social Media/Web 2.0 y explica algunos de sus formatos más relevantes. Social Media se refiere a medios de comunicación donde los usuarios crean y comparten contenido fácilmente a través de nuevas tecnologías. Algunos formatos populares son blogs, redes sociales, microblogs, foros, documentos compartidos, mensajería instantánea y geolocalización. La Web 2.0 también permite la colaboración a través de wikis, marcadores sociales y noticias votadas por usuarios.
El documento describe varias herramientas y técnicas de la Web 2.0 que pueden utilizarse para gestionar y buscar información, así como para crear y compartir recursos educativos, incluyendo motores de búsqueda, bases de datos, portales educativos, aplicaciones ofimáticas, herramientas de comunicación y publicación de documentos.
Main Words es una herramienta propuesta para permitir la indización automática y recuperación del conocimiento generado por los usuarios en las redes sociales de manera sencilla e intuitiva. La herramienta analizaría los posts de los usuarios de un grupo para crear automáticamente un tesauro en lenguaje natural con los términos más usados, facilitando la visualización y comprensión de los temas de conversación del grupo. El objetivo es que los usuarios puedan gestionar y clasificar su conocimiento compartido para poder recuperarlo fácilmente en el
Este documento trata sobre el diseño y edición de páginas web. Explica conceptos clave como HTML, lenguajes del lado del cliente como JavaScript, y lenguajes del lado del servidor como PHP. También cubre temas como el diseño web accesible siguiendo las pautas WCAG del W3C y editores web como Dreamweaver. El documento proporciona ejemplos prácticos de código HTML, CSS y JavaScript.
Este documento describe varios conceptos clave relacionados con la comunicación digital. Explica cómo las nuevas tecnologías han permitido nuevas formas de expresión más allá de lo escrito como imágenes, videos y más. También describe conceptos como la interactividad en la comunicación, la evolución de la Web y características de Internet como hipervínculos y multimedia.
Una página web está compuesta principalmente por información como texto o multimedia e hipervínculos. Para tener una página web se requiere registrar un dominio, contratar hosting, diseñar el sitio web, y programar el código. Existen diferentes tipos de navegadores web que tienen capacidades diferentes, por lo que al crear una página web es importante considerar la compatibilidad entre navegadores.
El documento habla sobre la comunicación y sus características. Explica que la comunicación es un proceso social que implica transmitir información entre seres vivos. También distingue entre lenguaje digital y lenguaje analógico como vehículos de comunicación. Por último, describe la evolución de la Web 1.0 a la Web 2.0 y 3.0 en términos de interactividad e integración de usuarios.
El documento explica los pasos fundamentales para publicar contenidos en la web. Primero, el usuario ejecuta un navegador web e introduce la dirección URL de una página. Luego, el servidor DNS localiza la dirección IP del servidor y este envía el documento web solicitado. Finalmente, el navegador compone la página con los textos e imágenes.
Este documento describe conceptos clave relacionados con el diseño de páginas web, incluyendo páginas web, sitios web, HTML, hipervínculos, lenguajes de programación, editores, servidores, clientes FTP, hosting, dominios, ISP, URL, applets, frames, webmasters, tablas, banners, imágenes y propiedades. También describe elementos comunes de páginas web como texto, imágenes, audio, Adobe Flash, scripts, meta tags, hojas de estilo y plantillas. Finalmente, menciona algunos portales y
El documento define varios conceptos clave relacionados con el diseño web, incluyendo páginas web, sitios web, HTML, hipervínculos, lenguajes de programación, editores, servidores y más. Explica que el diseño web implica planificar, diseñar e implementar sitios web teniendo en cuenta factores como la navegabilidad, interactividad y usabilidad. También describe las tres etapas clave del diseño de páginas web: diseño visual, estructura y relaciones entre páginas, y posicionamiento en buscadores
Este documento resume las características básicas de Internet y la comunicación interactiva. Define conceptos como hipertexto, interactividad, multimedia, comunicación digital y comunicación interactiva. También explica brevemente contenido web, buscadores, chat, periodismo digital, podcasts, hipervínculos, blogs, redes sociales, URL y las diferentes generaciones de la web.
Este documento trata sobre conceptos relacionados con la comunicación digital. Define e introduce conceptos como chat, videoconferencia, Skype, WiFi y otros medios de comunicación en línea. Explica las características y diferencias entre ellos, como que el chat permite conversaciones escritas en tiempo real, mientras que la videoconferencia añade video e imagen, y Skype permite llamadas de voz a bajo costo entre usuarios.
El documento describe los mecanismos de autoría y las herramientas de autor para crear contenido multimedia e hipermedia. Explica que las herramientas de autor permiten combinar diferentes medios como audio, video y animación para crear sistemas multimedia interactivos. También describe el proceso de conversión de un texto escrito a un hipertexto, incluyendo la estructuración del conocimiento de forma no lineal y la interrelación de la información a través de enlaces.
Este documento describe los mecanismos de autoría y el proceso de conversión de un texto escrito a hipertexto. Explica que las herramientas de autor permiten combinar diferentes medios y ofrecen entornos de trabajo visuales. También describe el proceso de conversión, que implica estructurar la información del texto original, determinar palabras clave y vincularlas con recursos en línea para enriquecer el contenido. Finalmente, discute algunas experiencias con el hipertexto, como la no linealidad y mayor control que le da al lector.
Este documento define y explica varios términos relacionados con la comunicación digital e internet. Define conceptos como comunicación digital, comunicación interactiva, hipertexto, multimedia, web 1.0, web 2.0, buscadores, hipervínculos, páginas web, sitios web, URLs, HTML, embed, periodismo digital, blogs, contenido web, contenido multimedia, formatos de imágenes, podcasts, videocast, redes sociales digitales, chat y wikis.
Este documento define y explica varios términos relacionados con la comunicación digital e internet. Define conceptos como comunicación digital, comunicación interactiva, hipertexto, multimedia, web 1.0, web 2.0, buscadores, hipervínculos, páginas web, sitios web, URLs, HTML, embed, periodismo digital, blogs, contenido web, contenido multimedia, formatos de imágenes, podcasts, videocast, redes sociales digitales, chat y wikis.
El documento describe la historia y evolución de la World Wide Web desde sus orígenes en la década de 1940 hasta la actualidad. Comenzó como una propuesta de un sistema de hipertexto distribuido en los años 40 y fue desarrollado por Tim Berners-Lee en el CERN en la década de 1980. En los años 90 se popularizó el uso de HTML, HTTP y los navegadores, lo que permitió el crecimiento exponencial de la web. Desde entonces, la web ha evolucionado gracias a nuevas tecnologías y estándares.
El documento resume los conceptos clave de la comunicación digital, incluyendo la comunicación interactiva, las características de la Web 1.0, 2.0 y 3.0, y conceptos como hipertexto, multimedia, periodismo digital, blogs, y contenido web. También explica términos como URL, HTML, medios digitales, podcasts, redes sociales, chats y wikis.
Este documento presenta algunas consideraciones clave para la construcción de sitios web. Inicialmente, introduce brevemente las etapas de desarrollo de un proyecto web y aspectos importantes del diseño web como la navegación intuitiva y la presentación agradable para el usuario. Luego, describe herramientas básicas como editores HTML y FTP, y conceptos fundamentales como HTML, CSS y sistemas de gestión de contenido que permiten crear y administrar sitios web de manera flexible. Finalmente, proporciona recursos adicionales para profundizar en
El documento trata sobre la comunicación interactiva y sus características en Internet. Describe el hipertexto, multimedia e interactividad como características clave de la comunicación en Internet. También define y explica conceptos como hipertexto, wiki, periodismo digital, navegación, formatos de imágenes, hipervínculos, contenido web, páginas web, blogs, comunicación digital, redes sociales digitales, URL, chat y podcast.
Este documento describe los aspectos fundamentales de las páginas web. Explica que una página web es una colección de información como texto, imágenes y videos vinculados entre sí para comunicar información a los visitantes. Detalla los tipos comunes de páginas web como las páginas HTML estáticas y las páginas dinámicas creadas con Flash, y los lenguajes de programación como PHP y ASP. Además, cubre las etapas de creación de una página web como el diseño, estructura, programación y optimización SE
Este documento define una página web, la World Wide Web (WWW) y la Web 2.0. Una página web es un documento electrónico adaptado para la WWW que se puede acceder mediante un navegador. La WWW es un sistema de distribución de información basado en hiperenlaces e hipermedios accesibles a través de Internet. La Web 2.0 representa la evolución de aplicaciones tradicionales a aplicaciones web enfocadas en los usuarios que permiten la colaboración.
El documento define conceptos básicos relacionados con las páginas web como documentos organizados que se pueden consultar en Internet usando un navegador. Explica que las páginas web contienen archivos como documentos, imágenes, videos y sonidos y se conectan a través del protocolo HTTP. También describe elementos comunes de las páginas web como etiquetas HTML, URLs, cookies e iconos de navegadores populares.
Clase de Edición de Video IMD - FADU UNLimdbredanini
Este documento discute las técnicas cinematográficas para las animaciones arquitectónicas. Examina tres niveles del lenguaje cinematográfico aplicados a producciones fílmicas destacadas por sus ambientes arquitectónicos: encuadre, movimiento de cámara y montaje. Luego describe cómo estas técnicas pueden usarse para crear animaciones arquitectónicas dinámicas y atractivas visualmente.
El documento introduce los elementos básicos de la composición como el punto, la línea, el plano y el volumen. Explica que el punto se convierte en línea, la línea en plano y el plano en volumen a medida que se extienden. Describe las propiedades de cada elemento y cómo se relacionan entre sí para crear formas tridimensionales. También presenta algunos principios ordenadores de la forma como la simetría, la yuxtaposición y la interpenetración.
Una página web está compuesta principalmente por información como texto o multimedia e hipervínculos. Para tener una página web se requiere registrar un dominio, contratar hosting, diseñar el sitio web, y programar el código. Existen diferentes tipos de navegadores web que tienen capacidades diferentes, por lo que al crear una página web es importante considerar la compatibilidad entre navegadores.
El documento habla sobre la comunicación y sus características. Explica que la comunicación es un proceso social que implica transmitir información entre seres vivos. También distingue entre lenguaje digital y lenguaje analógico como vehículos de comunicación. Por último, describe la evolución de la Web 1.0 a la Web 2.0 y 3.0 en términos de interactividad e integración de usuarios.
El documento explica los pasos fundamentales para publicar contenidos en la web. Primero, el usuario ejecuta un navegador web e introduce la dirección URL de una página. Luego, el servidor DNS localiza la dirección IP del servidor y este envía el documento web solicitado. Finalmente, el navegador compone la página con los textos e imágenes.
Este documento describe conceptos clave relacionados con el diseño de páginas web, incluyendo páginas web, sitios web, HTML, hipervínculos, lenguajes de programación, editores, servidores, clientes FTP, hosting, dominios, ISP, URL, applets, frames, webmasters, tablas, banners, imágenes y propiedades. También describe elementos comunes de páginas web como texto, imágenes, audio, Adobe Flash, scripts, meta tags, hojas de estilo y plantillas. Finalmente, menciona algunos portales y
El documento define varios conceptos clave relacionados con el diseño web, incluyendo páginas web, sitios web, HTML, hipervínculos, lenguajes de programación, editores, servidores y más. Explica que el diseño web implica planificar, diseñar e implementar sitios web teniendo en cuenta factores como la navegabilidad, interactividad y usabilidad. También describe las tres etapas clave del diseño de páginas web: diseño visual, estructura y relaciones entre páginas, y posicionamiento en buscadores
Este documento resume las características básicas de Internet y la comunicación interactiva. Define conceptos como hipertexto, interactividad, multimedia, comunicación digital y comunicación interactiva. También explica brevemente contenido web, buscadores, chat, periodismo digital, podcasts, hipervínculos, blogs, redes sociales, URL y las diferentes generaciones de la web.
Este documento trata sobre conceptos relacionados con la comunicación digital. Define e introduce conceptos como chat, videoconferencia, Skype, WiFi y otros medios de comunicación en línea. Explica las características y diferencias entre ellos, como que el chat permite conversaciones escritas en tiempo real, mientras que la videoconferencia añade video e imagen, y Skype permite llamadas de voz a bajo costo entre usuarios.
El documento describe los mecanismos de autoría y las herramientas de autor para crear contenido multimedia e hipermedia. Explica que las herramientas de autor permiten combinar diferentes medios como audio, video y animación para crear sistemas multimedia interactivos. También describe el proceso de conversión de un texto escrito a un hipertexto, incluyendo la estructuración del conocimiento de forma no lineal y la interrelación de la información a través de enlaces.
Este documento describe los mecanismos de autoría y el proceso de conversión de un texto escrito a hipertexto. Explica que las herramientas de autor permiten combinar diferentes medios y ofrecen entornos de trabajo visuales. También describe el proceso de conversión, que implica estructurar la información del texto original, determinar palabras clave y vincularlas con recursos en línea para enriquecer el contenido. Finalmente, discute algunas experiencias con el hipertexto, como la no linealidad y mayor control que le da al lector.
Este documento define y explica varios términos relacionados con la comunicación digital e internet. Define conceptos como comunicación digital, comunicación interactiva, hipertexto, multimedia, web 1.0, web 2.0, buscadores, hipervínculos, páginas web, sitios web, URLs, HTML, embed, periodismo digital, blogs, contenido web, contenido multimedia, formatos de imágenes, podcasts, videocast, redes sociales digitales, chat y wikis.
Este documento define y explica varios términos relacionados con la comunicación digital e internet. Define conceptos como comunicación digital, comunicación interactiva, hipertexto, multimedia, web 1.0, web 2.0, buscadores, hipervínculos, páginas web, sitios web, URLs, HTML, embed, periodismo digital, blogs, contenido web, contenido multimedia, formatos de imágenes, podcasts, videocast, redes sociales digitales, chat y wikis.
El documento describe la historia y evolución de la World Wide Web desde sus orígenes en la década de 1940 hasta la actualidad. Comenzó como una propuesta de un sistema de hipertexto distribuido en los años 40 y fue desarrollado por Tim Berners-Lee en el CERN en la década de 1980. En los años 90 se popularizó el uso de HTML, HTTP y los navegadores, lo que permitió el crecimiento exponencial de la web. Desde entonces, la web ha evolucionado gracias a nuevas tecnologías y estándares.
El documento resume los conceptos clave de la comunicación digital, incluyendo la comunicación interactiva, las características de la Web 1.0, 2.0 y 3.0, y conceptos como hipertexto, multimedia, periodismo digital, blogs, y contenido web. También explica términos como URL, HTML, medios digitales, podcasts, redes sociales, chats y wikis.
Este documento presenta algunas consideraciones clave para la construcción de sitios web. Inicialmente, introduce brevemente las etapas de desarrollo de un proyecto web y aspectos importantes del diseño web como la navegación intuitiva y la presentación agradable para el usuario. Luego, describe herramientas básicas como editores HTML y FTP, y conceptos fundamentales como HTML, CSS y sistemas de gestión de contenido que permiten crear y administrar sitios web de manera flexible. Finalmente, proporciona recursos adicionales para profundizar en
El documento trata sobre la comunicación interactiva y sus características en Internet. Describe el hipertexto, multimedia e interactividad como características clave de la comunicación en Internet. También define y explica conceptos como hipertexto, wiki, periodismo digital, navegación, formatos de imágenes, hipervínculos, contenido web, páginas web, blogs, comunicación digital, redes sociales digitales, URL, chat y podcast.
Este documento describe los aspectos fundamentales de las páginas web. Explica que una página web es una colección de información como texto, imágenes y videos vinculados entre sí para comunicar información a los visitantes. Detalla los tipos comunes de páginas web como las páginas HTML estáticas y las páginas dinámicas creadas con Flash, y los lenguajes de programación como PHP y ASP. Además, cubre las etapas de creación de una página web como el diseño, estructura, programación y optimización SE
Este documento define una página web, la World Wide Web (WWW) y la Web 2.0. Una página web es un documento electrónico adaptado para la WWW que se puede acceder mediante un navegador. La WWW es un sistema de distribución de información basado en hiperenlaces e hipermedios accesibles a través de Internet. La Web 2.0 representa la evolución de aplicaciones tradicionales a aplicaciones web enfocadas en los usuarios que permiten la colaboración.
El documento define conceptos básicos relacionados con las páginas web como documentos organizados que se pueden consultar en Internet usando un navegador. Explica que las páginas web contienen archivos como documentos, imágenes, videos y sonidos y se conectan a través del protocolo HTTP. También describe elementos comunes de las páginas web como etiquetas HTML, URLs, cookies e iconos de navegadores populares.
Clase de Edición de Video IMD - FADU UNLimdbredanini
Este documento discute las técnicas cinematográficas para las animaciones arquitectónicas. Examina tres niveles del lenguaje cinematográfico aplicados a producciones fílmicas destacadas por sus ambientes arquitectónicos: encuadre, movimiento de cámara y montaje. Luego describe cómo estas técnicas pueden usarse para crear animaciones arquitectónicas dinámicas y atractivas visualmente.
El documento introduce los elementos básicos de la composición como el punto, la línea, el plano y el volumen. Explica que el punto se convierte en línea, la línea en plano y el plano en volumen a medida que se extienden. Describe las propiedades de cada elemento y cómo se relacionan entre sí para crear formas tridimensionales. También presenta algunos principios ordenadores de la forma como la simetría, la yuxtaposición y la interpenetración.
El documento describe los hipermedios lúdicos y la transformación en la forma de habitar espacios virtuales. Explica que los territorios virtuales son ambientes interactivos con características propias que ofrecen experiencias mediante la interacción. También señala que los videojuegos pueden intensificar la motivación de los estudiantes y activar capacidades del aprendizaje. Finalmente, propone como trabajo práctico diseñar un hipermedio lúdico exploratorio basado en una narrativa interactiva que vincule una interfaz a elementos multimedia.
Este documento presenta las 9 etapas para completar el Trabajo Práctico 3 sobre la construcción en 3 dimensiones. La tarea involucra la representación del plano al espacio y viceversa, incluyendo la generación, transformación y edición de formas digitales en 3D, el tratamiento perceptivo utilizando imágenes del concepto, la exportación de la construcción individual y colectiva a formatos 2D y 3D, la composición y exploración del proceso de generación digital, y la presentación y publicación del trabajo completo.
Portfolios Web de Estudios de Diseño, Arquitectura y Publicidadimdbredanini
Este documento lista numerosos sitios web de estudios de diseño, arquitectura, publicidad y agencias creativas. Incluye enlaces a portafolios y trabajos de estudios y diseñadores de diferentes países, con énfasis en ejemplos de Argentina, Estados Unidos y Europa. La mayoría de los sitios web datan de 2011 y 2012 y muestran proyectos digitales, multimedia e interactivos.
José Luis Jiménez Rodríguez
Junio 2024.
“La pedagogía es la metodología de la educación. Constituye una problemática de medios y fines, y en esa problemática estudia las situaciones educativas, las selecciona y luego organiza y asegura su explotación situacional”. Louis Not. 1993.
1. tgd2012
Rizoma, hipertexto e
interactividad
edición de páginas web
2. TPN2
Rizoma, interfaz e hipermedio
1. Desarrollo de contenidos hipermediales.
INTERFAZ
2. Diseño de la interfaz.
Estética de la imagen buscada.
3. Diseño de la navegación. Interactividad. NAVEGACIÓN
ESPACIALIZACIÓN
4. Administración de la información.
Estructura de Archivos y Base de Datos.
BASE DE DATOS
3. Hipertexto
“… estructura de información, conformando un documento
de naturaleza digital, asociado a un nombre y formalizado en un
archivo digital, integrado por información de distinta naturaleza
(predominantemente textual, visual y sonora), organizada en nodos
de información conceptualmente interconectados entre sí por
medio de nexos, estructurado de forma no lineal y no
secuencial, y vinculado a redes que son recorridas en
direcciones multilineales en el ciberespacio.”
Rodríguez Barros, Diana. 2004.
Hipermedios y Modelos Virtuales de Fragmentos Urbanos.
4. Hipertexto
Documento digital hipertextual
1. 2.
Contenidos o Estructura de
nodos de
información + enlaces entre los
nodos
Página Web Hipervínculos (links): Esquema de un
Puede contener elementos binarios, sitio web
textos, gráficos, bidireccionales, con
sonidos, imágenes... nombre y tipo
determinado.
5. Hipertexto
Red de nodos entre los cuales existen vínculos.
Texto tradicional En síntesis,
un hipertexto es,
a diferencia de un texto
escrito, un documento
no secuencial.
Lineal Multidireccional
Estático Dinámico
Secuencial Múltiples puntos de acceso
y enlace
(comienzo, desarrollo, fin)
Cada uno construye su
Construido por el emisor
propia información
“…disolución de la frontera escritor – lector entendida como
textualidad dinámica, por la fusión de la palabra y de la imagen…”
“…modificación en el modo de leer y también de producir sentido.”
6. HTML
El lenguaje más utilizado para
codificar las páginas web es el Código
"Lenguaje de marcación de
Hipertexto", conocido por sus
siglas HTML (Hypertext
Markup Language).
Éste serepresenta con
texto puro respetando una
estructura que define su
presentación y contenido.
Otros: XML – XHTML
(vinculados a web semántica) Cómo la muestra
el Navegador...
9. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
10. 1 Estructurar el Sitio
Será importante en primer lugar, la
organización de la información que
queremos mostrar, definir la estructura
de archivos, vínculos y jerarquías.....
http://www.fadu.unl.edu.ar/imd
11. Diseño de la interfaz
Simultáneamente a la organización de los archivos que se integrarán a nuestro
sitio, es importante definir el diseño del entorno de navegación que le
daremos al mismo.
Encabezado
Barra de navegación de 1º Nivel
Barra de Menú
Título <Nav. Horizontal >
Barra de
navegación Contenidos
de 2º Nivel
<< Barra de Navegación >> < Nav. Horizontal >
Debemos pensar, por ejemplo, si tendremos una barra de menús superior o
lateral, dónde se ubicarán los “botones” de los vínculos, dónde se mostrarán los
contenidos principales de la página, qué proporción tendrá cada una de estas
áreas, imágenes y diseños de fondo que utilizaremos, etc.
15. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
16. 2 Editar gráficos e imágenes
Existen numerosas diferencias en cuanto a la edición de
imágenes destinadas a ser impresas y aquellas que deseamos
publicar en la web....
Imágenes Publicación Impresa Publicación Web
.BMP / . TIFF /
• Formatos .JPG / .GIF / . PNG / .SWF
.JPG / . GIF / .TGA
CYMK
• Modo Color RGB (Red, Green, Blue)
(Cyan, Yellow, Magenta, Black)
• Resolución 250 / 300 dpi 72 / 96 dpi
• Medidas en... centímetros píxeles
GIF Animados
• Animación -----
SWF (películas de Flash)
17. > Formatos
Archivos GIF (Formato de Intercambio Gráfico)
• imágenes pixelares.
• máximo de 256 colores.
• buen formato para imágenes de colores planos,
(barras de navegación, botones, iconos, logotipos)
• permiten crear imágenes con fondos transparentes
• permiten crear imágenes animadas.
Archivos JPEG (Grupo Conjunto de Expertos Fotográficos)
• imágenes pixelares.
• pueden contener millones de colores.
• es el mejor formato para imágenes fotográficas
• suelen ser más grandes que los archivos GIF
• Cuando aumenta la calidad de un archivo JPEG, también
aumenta su tamaño y el tiempo que tarda en descargarse.
Archivos SWF
• gráficos vectoriales
• no pierden definición cuando se redimensionan
• alta calidad gráfica, bajo tamaño de archivo.
• permiten crear imágenes animadas
• permiten incluir música. Ampliación (zoom) de imagen
vectorial
18. > Softwares para la edición de imágenes
Softwares de edición de mapas de
bits o de retoque fotográfico.
Softwares de edición de
gráficos vectoriales
19. > Medidas / Resolución
Definir siempre en
Píxeles
20. Importante
!
Al insertar una imagen en un archivo HTML, el programa genera
automáticamente una referencia al archivo gráfico en el código HTML.
> La imagen en
sí NO es
ingresada en
el documento.
Siempre es aconsejable organizar los archivos de imágenes en una carpeta
“imagenes” dentro de nuestro sitio local, para facilitar su búsqueda y mantener
organizado el sitio.
21. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
22. 3 Crear las páginas
Existen múltiples programas que nos permiten producir
presentaciones web, combinar y manipular textos, e insertar
gráficos, videos y animaciones, trabajando en entornos de edición
totalmente gráficos, sin la necesidad de escribir una sola línea de
código html.
Entre los editores de Html:
Microsoft Front Page fue
uno de los primeros editores
de Html en alcanzar gran
difusión debido a su
distribución como parte del
paquete de Microsoft Office.
En la actualidad, sin embargo,
Adobe Dreamweaver es el
editor de HTML profesional
más difundido para el diseño y
administración visual de
páginas y sitios Web.
23. > Otros softwares
Existen otros programas que nos permiten exportar
nuestros diseños como presentaciones web, trabajando
en entornos de edición totalmente gráficos (como ser
Corel), o bien en el mismo entorno de edición de texto
que utilizamos habitualmente, en el caso de Word.
24. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
25. 4 Crear los hipervínculos
El objetivo de los HIPERVINCULOS es establecer conexiones desde su
documento hasta otro documento o tipo de archivo. Brindan el elemento
de navegación.
DESDE: HACIA:
• texto • páginas web
• imágenes • imágenes
• partes de imágenes • todo tipo de documentos
Es fundamental conocer la ruta de archivo entre el documento de origen
del enlace y el documento de destino.
Cada página Web tiene una dirección exclusiva, denominada URL
(Localizador Uniforme de Recursos), a donde podemos hacer el link:
• Rutas absolutas (como http://www.yahoo.com.ar).
Si se crea un enlace local (un enlace desde un documento hasta otro
documento del mismo sitio), se especifica una ruta relativa desde el
documento actual.
• Rutas relativas al documento (como imd/tutorial.htm).
26. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
27. 5 Probar el sitio
Debemos establecer como regla básica el
ir probando y verificando que el sitio funcione
correctamente.
• No debemos esperar al final del diseño del sitio para
probarlo con más de un navegador
o más de una resolución gráfica de monitor.
verificar que la
• Por otra parte hay que
estructura del sitio es efectiva y la
navegación brinda el servicio esperado, es aconsejable
hacerlo con otra persona que nunca haya navegado el sitio.
• Comprobar que los vínculos
28. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
29. 6 Subir el sitio a la web
Existen sitios y empresas que ofrecen servicios de Hosting
(alojamiento de sitios web), pagos o gratuitos.
http://web.tgdfadu.com.ar/tp3.html
http://www.freeservers.com/
http://www.multimania.es/
30. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
31. 7 Agregar el sitio en los buscadores
Existen sitios y empresas que ofrecen servicios
para suscribir el sitio en los buscadores.
Pueden ser pagos o gratuitos.
http://www.google.es/webmasters/#
utm_medium=et&utm_source=bizso
ls&utm_campaign=sitemaps
http://www.addme.com/
32. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.
33. 8 Estudio de los usuarios. Actualización
Una herramienta muy importante para definir las modificaciones y
actualizaciones necesarias en el sitio es el estudio del perfil de los usuarios.
https://www.google.com/analytics/home/login?reset=1
44. Navegador
76.126 visitas han usado 17 navegadores / 51,5% ha usado Internet Explorer
45. Dispositivos móviles
68 visitas por dispositivos móviles (0,09%) / 47% con sist. operativo Android
46. Resolución de pantalla
Se han usado 244 resoluciones de pantalla / 44% ha usado 1024 x 768 pixeles
47. Importante
!
“DISEÑAR el entorno de navegación significa SUGERIR
la forma en que deseamos que se vea"
Es una de las grandes diferencias con otras ramas del diseño. La
web fue pensada para la transmisión de contenidos en una estructura
estándar que pueda ser visualizada en todas las computadoras con
un navegador web.
Por lo tanto, el producto final puede DIFERIR de usuario a
usuario. Depende de:
• los sistemas operativos,
• software de navegación,
• capacidades gráficas de las computadoras,
• tamaño del monitor o configuración de la pantalla....
48. Monitor 14’ / Configuración de Pantalla 800 x 600
800 píxeles
600
píxeles
8,50% de los usuarios
49. Monitor 17’ / Configuración de Pantalla 1024 x 768
1024 píxeles
768
píxeles
47,71% de los usuarios
50. Monitor 19’ / Configuración de Pantalla 1280 x 1024
1280 píxeles
1024
píxeles
43,79% de los usuarios
51. Crear un Sitio Web...
Las tareas comprometidas en el desarrollo de un sitio web son:
• Estructurar el sitio. Dar algún tipo de estructura lógica a los
textos e imágenes. Organizar la Estructura de Archivos y el
Diseño del Entorno de navegación.
• Editar gráficos (imágenes, botones, etc.) que serán insertados.
• Crear páginas, incorporando texto y gráficos.
• Crear Hipervínculos (Links) que relacionen las distintas
páginas.
• Probar el sitio en un navegador.
• Subir el sitio a la Web.
• Agregar el sitio en los buscadores.
• Estudio del perfil de usuarios. Actualización permanente.