Introducción Diseño Web

V
VladimirVladimir
Diseño Digital
Universidad Cuahutémoc
 Una página web está compuesta por uno o varios documentos
HTML (HyperText Markup Language) relacionados entre sí
mediante hipervínculos (enlaces).
 Página web:
Documento realizado en HTML y que es parte de un sitio Web.
 Sitio web:
Página principal y sus otras páginas, gráficos, documentos,
multimedia y otros archivos asociados que se almacenan en un
servidor Web o en el disco duro de un equipo.
 Html:
 Lenguaje estándar de marcas empleado para documentos del
World Wide Web.
 Hipervínculo:
Al hipervínculo se le suele llamar “enlace web” o en su
versión anglosajona “link”. Un hipervínculo es una
conexión de una página a otro destino como, por ejemplo,
otra página o una ubicación diferente en la misma página.
 Lenguaje de programación:
Lenguaje con el que está desarrollada una página web.
 Editor:
Programa utilizado para crear páginas web sin la
necesidad de tener que aprender el lenguaje.
 Servidor:
Máquina conectada a Internet que –entre otros servicios-
ofrece albergue para páginas web haciendo que estén
accesibles desde cualquier punto de Internet.
 Cliente FTP:
Programa que permite conectarse al servidor para publicar
páginas web.
 Hosting:
Hospedaje web.
 Dominio:
Dirección web asociada a una página web.
 ISP:
En el ámbito del desarrollo de sitios web, se puede decir que un
ISP es un proveedor de servicios para web. (Internet service
provider)
 URL:
 Cadena que proporciona la dirección de Internet de un sitio Web
o un recurso del World Wide Web, junto con el protocolo
mediante el cual se tiene acceso al sitio o al recurso. (Uniform
Resource Locator)
 Applets:
Programas desarrollados con Java para mejorar la
presentación de las páginas Web que realizan
animaciones, juegos e interacción con el usuario.
 Frames (marcos):
Áreas rectangulares que subdividen las ventanas de
algunas páginas Web, cada una de las cuales contiene un
documento de hipertexto independiente de los demás.
 Webmaster:
Un webmaster es el encargado de crear, diseñar,
estructurar, maquetar, publicar, promocionar y mantener
un sitio web.
 Tablas:
Elemento fundamental para la maquetación y distribución
de contenidos de una página web.
 Banner:
Elemento gráfico con forma rectangular,
normalmente animado, cuyo contenido es
publicidad.
 Imagen:
Archivo gráfico que se puede insertar en una
página Web y mostrar en un explorador de Web.
 Propiedades:
Características de un elemento del Web actual,
como el título y la dirección URL de un Web o el
nombre y el valor inicial de un campo de
formulario.
 El diseño web es una actividad que consiste
en la planificación, diseño e implementación
de sitios web.
 No es simplemente una aplicación de diseño
convencional, ya que requiere tener en cuenta
la navegabilidad, interactividad, usabilidad, ar
quitectura de la información y la interacción
de medios como
el audio, texto, imagen, enlaces y vídeo.
 En un principio era sólo texto, pero a medida que ha
evolucionado la tecnología, tanto los ordenadores como
las redes de telecomunicaciones, se ha generado nuevas
formas de desarrollar la web.
 La inclusión de imágenes fue la más significativa, pero
también debemos mencionar el vídeo y la animación, o los
espacios 3D, lo que aporta valores estilísticos, de diseño y
de interactividad jamás imaginados antes.
 El diseño de páginas web se ha desarrollado a medida que
ha evolucionado Internet. En 1992 sólo había alrededor de
50 sitios web. Estadísticas (2005) nos afirmaban que la
cantidad de sitios web ronda los 8.000 millones de sitios,
a los que diariamente se les suma a raíz de 4400 por día
 La última versión de este lenguaje básico corresponde
al HTML5, donde se introducen nuevos elementos que
mejoran la navegación y la usabilidad de los sitios web en
los distintos navegadores, como por ejemplo el uso de
<canvas>, <video> o <footer>.
 Esta nueva versión no se trata solamente de cambiar y
eliminar etiquetas. Va mucho más allá.
 En todo sitio web hay elementos que se utilizan. El
encabezado (header), barras laterales (sidebars), el pie de
página (footer), los menús de navegación, se utilizarán en
esta nueva versión como etiquetas ya establecidas,
brindando una mejora en la intuición para el desarrollo.
 El diseño de páginas web se trata básicamente de
realizar un documento con información
hiperenlazado con otros documentos y asignarle una
presentación para diferentes dispositivos de salida
(en una pantalla de computador, en papel, en
un teléfono móvil, etc).
 Estos documentos o páginas web pueden ser creadas:
◦ Creando archivos de texto en HTML, PHP, Asp, Aspx,
JavaScript, JSP, Python ó Ruby.
◦ Utilizando un programa WYSIWYG de creación de páginas y
utilizando lenguajes de programación del lado servidor,
para generar la página web
 Para el diseño de páginas web debemos tener
en cuenta tres etapas:
 1. El diseño visual de la información que se
desea editar.
◦ En esta etapa se trabaja distribuyendo el texto, los
gráficos, los vínculos a otros documentos y otros
objetos multimedia que se consideren pertinentes.
Es importante que antes de trabajar sobre el
computador se realice un boceto o pre-diseño
sobre el papel. Esto facilitará tener un orden claro
sobre el diseño.
 2. Estructura y relación jerárquica de las páginas del sitio
web.
◦ Una vez que se tiene el boceto se pasa a 'escribir' la página web.
◦ Para esto, y fundamentalmente para manejar los vínculos entre
documentos, se creó el lenguaje de marcación de hipertexto o
HTML. Los enlaces que aparecen subrayados en este documento y
otros de Wikipedia son ejemplos de hipertexto, puesto que al
pulsar sobre ellos conducen a otras páginas con información
relacionada.
◦ La importancia de la estructura y arborescencia web radica en que
los visitantes no siempre entran por la página principal o inicial y
en ese caso el sitio debe darle la respuesta a lo que busca rápido,
además permitirle navegar por el sitio.
 3. Posicionamiento en buscadores o SEO.
◦ Ésta consiste en optimizar la estructura del
contenido para mejorar la posición en que aparece
la página en determinada búsqueda.
◦ Etapa no gustosa por los diseñadores gráficos,
porque a diferencia del texto, no se pueden tener
nuevos resultados en los buscadores con sitios muy
gráficos.
 Un correcto diseño web implica conocer cómo se
deben utilizar cada uno de los elementos permitidos
en el HTML, es decir, hacer un uso correcto de este
lenguaje dentro de los estándares establecidos
 Debido a la permisibilidad de algunos navegadores
web como Internet Explorer, esta premisa original se
ha perdido.
 Por ejemplo, este navegador permite que no sea
necesario cerrar las etiquetas del marcado,
utiliza código propietario, etc. Esto impide que ese
documento web sea universal e independiente del
medio que se utilice para ser mostrado.
 El diseño web debe seguir unos
requerimientos mínimos de accesibilidad
web que haga que sus sitios web o
aplicaciones puedan ser visitados por el
mayor número de personas.
Diseño Digital
Universidad Cuahutémoc
1 sur 16

Recommandé

Presentacion Diseño Web par
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño WebNicida Malca
2.4K vues20 diapositives
Diseño pagina web- html par
Diseño pagina web- html Diseño pagina web- html
Diseño pagina web- html carolina agudelo otero
890 vues24 diapositives
Elementos básicos de un sitio web par
Elementos básicos de un sitio webElementos básicos de un sitio web
Elementos básicos de un sitio webYadith Gomez Nolasco
192 vues6 diapositives
Diseño Web par
Diseño WebDiseño Web
Diseño WebAngelyBarnica
516 vues21 diapositives
Unidad II par
Unidad IIUnidad II
Unidad IIjauanilfabian
753 vues11 diapositives
Pagina web par
Pagina webPagina web
Pagina webkathecorteza9602
218 vues14 diapositives

Contenu connexe

Tendances

paginas web par
paginas web paginas web
paginas web daniela rodriguez
67 vues19 diapositives
Joomla par
JoomlaJoomla
JoomlaAlejo Trujillo
246 vues4 diapositives
Tipos de paginas web par
Tipos de paginas webTipos de paginas web
Tipos de paginas webCristian Buitrago
9.2K vues8 diapositives
Diapositivas par
DiapositivasDiapositivas
Diapositivasluisaferchi
1.8K vues10 diapositives
TRABAJO DE DAPI par
TRABAJO DE DAPITRABAJO DE DAPI
TRABAJO DE DAPILUNABACH14
229 vues10 diapositives
CARACTERÍSTICAS Y PARTES PARA TENER UN SITIO WEB par
CARACTERÍSTICAS Y PARTES PARA TENER UN SITIO WEBCARACTERÍSTICAS Y PARTES PARA TENER UN SITIO WEB
CARACTERÍSTICAS Y PARTES PARA TENER UN SITIO WEBManuelHernandez480
53 vues11 diapositives

Tendances(19)

Sitio web diapositivas par flavio
Sitio  web diapositivasSitio  web diapositivas
Sitio web diapositivas
flavio 5.6K vues
Que es una pagina web par jorgek47
Que es una pagina webQue es una pagina web
Que es una pagina web
jorgek471.9K vues
Paginas web definicion par guilleespino
Paginas web definicionPaginas web definicion
Paginas web definicion
guilleespino8.1K vues

Similaire à Introducción Diseño Web

Cuales son los elementos de una pagina....... informatica par
Cuales son los elementos de una pagina....... informaticaCuales son los elementos de una pagina....... informatica
Cuales son los elementos de una pagina....... informaticakatherin-vanesa
2.3K vues10 diapositives
Cuales son los elementos de una pagina web par
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina webkatherinviviana
35.2K vues10 diapositives
El origen-de-las-paginas-web-final par
El origen-de-las-paginas-web-finalEl origen-de-las-paginas-web-final
El origen-de-las-paginas-web-finalLuis Wuicho Angeles
1.6K vues27 diapositives
Yeison fabian par
Yeison fabianYeison fabian
Yeison fabianJhohan Cx
674 vues18 diapositives
Qué es el diseño web par
Qué es el diseño webQué es el diseño web
Qué es el diseño webDiseño web Valencia
732 vues17 diapositives
Diseño web par
Diseño webDiseño web
Diseño webRouss Ramirez Jimenez
43 vues3 diapositives

Similaire à Introducción Diseño Web(20)

Cuales son los elementos de una pagina....... informatica par katherin-vanesa
Cuales son los elementos de una pagina....... informaticaCuales son los elementos de una pagina....... informatica
Cuales son los elementos de una pagina....... informatica
katherin-vanesa2.3K vues
Cuales son los elementos de una pagina web par katherinviviana
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
katherinviviana35.2K vues
Yeison fabian par Jhohan Cx
Yeison fabianYeison fabian
Yeison fabian
Jhohan Cx674 vues
Juan sebastian par Jhohan Cx
Juan sebastianJuan sebastian
Juan sebastian
Jhohan Cx241 vues
Jhohan nicolai par Jhohan Cx
Jhohan nicolaiJhohan nicolai
Jhohan nicolai
Jhohan Cx268 vues
Michael steven par Jhohan Cx
Michael stevenMichael steven
Michael steven
Jhohan Cx194 vues
Trabajo 10 par Liz345
Trabajo 10Trabajo 10
Trabajo 10
Liz345145 vues
Diseño de Páginas Web par 8vivi8
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
8vivi8874 vues
Diseño Web: Qué necesitamos para empezar? par Karla Arosemena
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?
Karla Arosemena2.8K vues

Plus de Vladimir

Genero de ficción par
Genero de ficciónGenero de ficción
Genero de ficciónVladimir
201 vues5 diapositives
Genero de opinión par
Genero de opiniónGenero de opinión
Genero de opiniónVladimir
197 vues7 diapositives
La Radio Revista par
La Radio RevistaLa Radio Revista
La Radio RevistaVladimir
199 vues5 diapositives
02. Género Radiofónico Interpretativo par
02. Género Radiofónico Interpretativo02. Género Radiofónico Interpretativo
02. Género Radiofónico InterpretativoVladimir
1.2K vues11 diapositives
Género Radiofónico Informativo par
Género Radiofónico InformativoGénero Radiofónico Informativo
Género Radiofónico InformativoVladimir
1.2K vues12 diapositives
El Book fotográfico par
El Book fotográficoEl Book fotográfico
El Book fotográficoVladimir
157 vues18 diapositives

Plus de Vladimir(20)

Genero de ficción par Vladimir
Genero de ficciónGenero de ficción
Genero de ficción
Vladimir201 vues
Genero de opinión par Vladimir
Genero de opiniónGenero de opinión
Genero de opinión
Vladimir197 vues
La Radio Revista par Vladimir
La Radio RevistaLa Radio Revista
La Radio Revista
Vladimir199 vues
02. Género Radiofónico Interpretativo par Vladimir
02. Género Radiofónico Interpretativo02. Género Radiofónico Interpretativo
02. Género Radiofónico Interpretativo
Vladimir1.2K vues
Género Radiofónico Informativo par Vladimir
Género Radiofónico InformativoGénero Radiofónico Informativo
Género Radiofónico Informativo
Vladimir1.2K vues
El Book fotográfico par Vladimir
El Book fotográficoEl Book fotográfico
El Book fotográfico
Vladimir157 vues
Fotografia publicitaria par Vladimir
Fotografia publicitariaFotografia publicitaria
Fotografia publicitaria
Vladimir227 vues
Fotografía de moda par Vladimir
Fotografía de modaFotografía de moda
Fotografía de moda
Vladimir279 vues
Teorías de la Comunicación par Vladimir
Teorías de la ComunicaciónTeorías de la Comunicación
Teorías de la Comunicación
Vladimir223 vues
Shanon, Weaver y Schram par Vladimir
Shanon, Weaver y SchramShanon, Weaver y Schram
Shanon, Weaver y Schram
Vladimir166 vues
La Comunicación par Vladimir
La ComunicaciónLa Comunicación
La Comunicación
Vladimir168 vues
Social Media MKT par Vladimir
Social Media MKTSocial Media MKT
Social Media MKT
Vladimir615 vues
El Community Manager par Vladimir
El Community ManagerEl Community Manager
El Community Manager
Vladimir739 vues
Cómo usar blogger par Vladimir
Cómo usar bloggerCómo usar blogger
Cómo usar blogger
Vladimir295 vues
¿Qué es un blog? par Vladimir
¿Qué es un blog?¿Qué es un blog?
¿Qué es un blog?
Vladimir297 vues
La infografía par Vladimir
La infografíaLa infografía
La infografía
Vladimir193 vues
El reportaje par Vladimir
El reportajeEl reportaje
El reportaje
Vladimir436 vues
Inicios del fotoperiodismo par Vladimir
Inicios del fotoperiodismoInicios del fotoperiodismo
Inicios del fotoperiodismo
Vladimir280 vues
El nuevo Hollywood par Vladimir
El nuevo HollywoodEl nuevo Hollywood
El nuevo Hollywood
Vladimir353 vues

Dernier

GUIA SERVICIO COMUNITARIO par
GUIA SERVICIO COMUNITARIOGUIA SERVICIO COMUNITARIO
GUIA SERVICIO COMUNITARIOJULIANELOYCARNEIROMA1
53 vues43 diapositives
Funciones, límites y continuidad par
Funciones, límites y continuidadFunciones, límites y continuidad
Funciones, límites y continuidadAngel Vázquez Patiño
141 vues340 diapositives
receta.pdf par
receta.pdfreceta.pdf
receta.pdfcarmenhuallpa45
221 vues1 diapositive
DEPORTES DE RAQUETA .pdf par
DEPORTES DE RAQUETA .pdfDEPORTES DE RAQUETA .pdf
DEPORTES DE RAQUETA .pdfMiguel Lopez Marin
29 vues11 diapositives
Tema 1 Modulo IV Redacción de Articulo UPTVT.pdf par
Tema 1 Modulo IV Redacción de Articulo UPTVT.pdfTema 1 Modulo IV Redacción de Articulo UPTVT.pdf
Tema 1 Modulo IV Redacción de Articulo UPTVT.pdfRevista Crítica con Ciencia (e-ISSN: 2958-9495)
81 vues11 diapositives
Ficha sesión discapacidad visual.doc par
Ficha sesión discapacidad visual.docFicha sesión discapacidad visual.doc
Ficha sesión discapacidad visual.docricardo2010colegio
77 vues2 diapositives

Dernier(20)

PPT TECNOLOGIAS PARA LA ENSEÑANZA VIRTUAL.pptx par CarlaFuentesMuoz
PPT TECNOLOGIAS PARA LA ENSEÑANZA VIRTUAL.pptxPPT TECNOLOGIAS PARA LA ENSEÑANZA VIRTUAL.pptx
PPT TECNOLOGIAS PARA LA ENSEÑANZA VIRTUAL.pptx
Muestra Anual de Literatura Clásica y Latín.pptx par María Roxana
Muestra Anual de Literatura Clásica y Latín.pptxMuestra Anual de Literatura Clásica y Latín.pptx
Muestra Anual de Literatura Clásica y Latín.pptx
María Roxana114 vues

Introducción Diseño Web

  • 2.  Una página web está compuesta por uno o varios documentos HTML (HyperText Markup Language) relacionados entre sí mediante hipervínculos (enlaces).  Página web: Documento realizado en HTML y que es parte de un sitio Web.  Sitio web: Página principal y sus otras páginas, gráficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo.  Html:  Lenguaje estándar de marcas empleado para documentos del World Wide Web.
  • 3.  Hipervínculo: Al hipervínculo se le suele llamar “enlace web” o en su versión anglosajona “link”. Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o una ubicación diferente en la misma página.  Lenguaje de programación: Lenguaje con el que está desarrollada una página web.  Editor: Programa utilizado para crear páginas web sin la necesidad de tener que aprender el lenguaje.  Servidor: Máquina conectada a Internet que –entre otros servicios- ofrece albergue para páginas web haciendo que estén accesibles desde cualquier punto de Internet.
  • 4.  Cliente FTP: Programa que permite conectarse al servidor para publicar páginas web.  Hosting: Hospedaje web.  Dominio: Dirección web asociada a una página web.  ISP: En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. (Internet service provider)  URL:  Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. (Uniform Resource Locator)
  • 5.  Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web que realizan animaciones, juegos e interacción con el usuario.  Frames (marcos): Áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada una de las cuales contiene un documento de hipertexto independiente de los demás.  Webmaster: Un webmaster es el encargado de crear, diseñar, estructurar, maquetar, publicar, promocionar y mantener un sitio web.  Tablas: Elemento fundamental para la maquetación y distribución de contenidos de una página web.
  • 6.  Banner: Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es publicidad.  Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web.  Propiedades: Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario.
  • 7.  El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web.  No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, ar quitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo.
  • 8.  En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web.  La inclusión de imágenes fue la más significativa, pero también debemos mencionar el vídeo y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de interactividad jamás imaginados antes.  El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web. Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8.000 millones de sitios, a los que diariamente se les suma a raíz de 4400 por día
  • 9.  La última versión de este lenguaje básico corresponde al HTML5, donde se introducen nuevos elementos que mejoran la navegación y la usabilidad de los sitios web en los distintos navegadores, como por ejemplo el uso de <canvas>, <video> o <footer>.  Esta nueva versión no se trata solamente de cambiar y eliminar etiquetas. Va mucho más allá.  En todo sitio web hay elementos que se utilizan. El encabezado (header), barras laterales (sidebars), el pie de página (footer), los menús de navegación, se utilizarán en esta nueva versión como etiquetas ya establecidas, brindando una mejora en la intuición para el desarrollo.
  • 10.  El diseño de páginas web se trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).  Estos documentos o páginas web pueden ser creadas: ◦ Creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python ó Ruby. ◦ Utilizando un programa WYSIWYG de creación de páginas y utilizando lenguajes de programación del lado servidor, para generar la página web
  • 11.  Para el diseño de páginas web debemos tener en cuenta tres etapas:  1. El diseño visual de la información que se desea editar. ◦ En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o pre-diseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
  • 12.  2. Estructura y relación jerárquica de las páginas del sitio web. ◦ Una vez que se tiene el boceto se pasa a 'escribir' la página web. ◦ Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. ◦ La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.
  • 13.  3. Posicionamiento en buscadores o SEO. ◦ Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. ◦ Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
  • 14.  Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos  Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido.  Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.
  • 15.  El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas.