UNIDAD DIDÁCTICA
“ARQUITECTURA Y DISEÑO WEB”
TERMINOLOGÍA WEB
E INTERNET
SESIÓN 01
APSTI – V SEMESTRE
¿QUÉ ES INTERNET?
Internet es un conjunto descentralizado de redes de comunicación
interconectadas que utilizan la familia de protocolos TCP/IP, lo cual garantiza
que las diferentes redes físicas que la componen funcionen como una red lógica
única, de alcance mundial.
1
¿QUÉ ES UNA PÁGINA WEB?
Una página web, página electrónica, página digital o ciberpágina, es un
documento o información electrónica capaz de contener texto, sonido,
vídeo, programas, enlaces, imágenes, hipervínculos y muchas otras
cosas, adaptada para la llamada World Wide Web (WWW), y que puede
ser accedida mediante un navegador web.
¿DÓNDE SE ALMACENA UNA PÁGINA WEB?
Las páginas web pueden estar almacenadas en un computador o en un
servidor web remoto. El servidor web puede restringir el acceso
únicamente a redes privadas, por ejemplo, en una intranet corporativa,
o puede publicar las páginas en la World Wide Web. El acceso a las
páginas web es realizado mediante una transferencia desde servidores,
utilizando el protocolo de transferencia de hipertexto (HTTP).
2
PREGUNTAS …
¿Qué páginas web conoces?
¿Cuál crees que es la diferencia entre página web y portal web?
¿Cuál crees que es la página web más importante?
¿En qué se diferencia una página web de un sistema de información?
¿Cuál crees que deberían ser las etapas para el desarrollo de una
página web?
ETAPAS DEL DESAROLLO DE PÁGINAS WEB
El desarrollo de páginas web comprende las siguientes fase:
Análisis
Planificación
Contenido
Diseño
Programación
Testeo
Mercadeo y publicidad
3
¿QUÉ ES EL DISEÑO WEB?
El diseño web es un área enfocada en el desarrollo de interfaces
digitales, como el diseño de sitios y aplicaciones para web. Para ello,
los diseñadores web crean las páginas utilizando lenguajes de
marcado como HTML.
¿QUÉ ES EL DISEÑO WEB?
Se centra en la configuración visible del sitio y en la experiencia del
usuario. Planifica y plasma la imagen de una empresa o de un
proyecto por medio de la implementación y actualización periódica de
conceptos visuales.
4
EXPERIENCIA DEL USUARIO
¿Alguna vez has estado navegando en un sitio web, pero pensaste en
irte porque el diseño no te atrajo, como la tipografía y la forma en
que se distribuyó el contenido?
¿Y qué pasa con los sitios web lentos que no se cargan en tu teléfono o
tablet justo cuando más necesita acceder rápidamente al contenido?
EXPERIENCIA DEL USUARIO
Hay ciertas consideraciones que se deben tener en cuenta a la hora de diseñar
una web, como son:
NAVEGABILIDAD. Es la facilidad con la que un usuario puede desplazarse por
todas las páginas que componen un sitio web.
INTERACTIVIDAD. La relación de participación entre el usuario y la página o
aplicación web.
USABILIDAD. La facilidad con la que las personas pueden utilizar una
herramienta en particular.
ARQUITECTURA DE LA INFORMACIÓN. Trata sobre la organización, disposición
y estructuración de la información en los diferentes espacios de la página o
aplicación web.
5
ACCIONES PARA EL Perfil del
DISEÑO WEB
1. Selección de colores.
2. Selección de logos.
3. Selección del tipo de menús.
4. Selección del tipo de botones.
5. Selección de la tipografía.
6. Selección de imágenes.
7. Tomar en cuenta la navegabilidad para
determinar cuantas páginas web formarán el
portal web.
8. Tomar en cuenta la usabilidad e interacción
para determinar los componentes web a
utilizar y los módulos a desarrollar.
9. Tomar en cuenta la arquitectura de la
información e intuitividad para determinar la
cantidad y posición de secciones en el front-
end y páginas internas.
10. Entre otros
HERRAMIENTAS PARA EL DISEÑO GRÁFICO
Son aplicaciones o listado de software que permiten interactuar entre
diferentes tipos de imágenes (recortarlas, ampliarlas, mejorarlas, agregarle
efectos, etc) con colores y diversos recursos digitales, a fin de contar con el
diseño gráfico que el cliente requiere.
Corel Draw.
Adobe Photoshop.
Adobe Illustrator.
Macromedia Firework.
Vectr.
Krita.
GIMP.
Canva.
6
HTML
HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas
de hipertexto’)
Es un estándar que sirve de referencia del software que conecta con la
elaboración de páginas web en sus diferentes versiones, define una estructura
básica y un código (denominado código HTML) para la definición de contenido
de una página web, como texto, imágenes, videos, juegos, entre otros.
HOJAS DE ESTILO – CSS
CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo
en cascada»
es un lenguaje de diseño gráfico para definir y crear la presentación de un
documento estructurado escrito en un lenguaje de marcado
Es muy usado para establecer el diseño visual de los documentos web, e
interfaces de usuario escritas en HTML
7
JAVASCRIPT
JavaScript es el único lenguaje de programación que funciona en los navegadores de
forma nativa (lenguaje interpretado sin necesidad de compilación). Por tanto se
utiliza como complemento de HTML y CSS para crear páginas webs.
Con este lenguaje de programación del lado del cliente (no en el servidor) podemos
crear efectos y animaciones sin ninguna interacción, o respondiendo a eventos
causados por el propio usuario tales como botones pulsados y modificaciones del DOM
(document object model).
