SlideShare una empresa de Scribd logo
1 de 29
TTEECCNNOOLLOOGGÍÍAA 
WWEEBB 
¿QQuuéé eess eell 
DDiisseeññoo WWeebb??
CCoonncceeppttooss BBáássiiccooss:: 
LLaa ppiirráámmiiddee ddeell ddiisseeññoo WWeebb 
Las cuatro características principales del diseño 
Web son: 
1. El contenido 
2. La tecnología 
3. Los aspectos visuales 
4. Los aspectos económicos
CCoonncceeppttooss BBáássiiccooss:: 
LLaa ppiirráámmiiddee ddeell ddiisseeññoo WWeebb 
FINALIDAD 
Usuarios Diseñadores 
FORMA 
(visual) 
CONTENIDO 
FUNCION 
(tecnología)
CCoonncceeppttooss BBáássiiccooss:: 
LLooss ddiivveerrssooss ssiittiiooss WWeebb.. 
Complejo 
Simple 
Sitio creado 
dinámicamente 
Centrado 
en el 
documento 
Aplicación basada en la Web 
Centrado 
en la 
Aplicación 
Sitio Web 
Puramente estático 
Sitio estático con 
Formulario de entrada 
Acceso dinámico a datos 
A través de un sitio Web
Fundamentos ddee ddiisseeññoo WWeebb 
CCoonnssttrruuiirr ppaarraa llooss uussuuaarriiooss 
Un error frecuente en el desarrollo Web es que los 
sitios se construyen mas para los diseñadores y sus 
necesidades que para los verdaderos usuarios 
La clave para obtener el éxito en el diseño de un sitio 
web funcional es pensar siempre teniendo en cuenta 
el punto de vista del usuario
Fundamentos ddee ddiisseeññoo WWeebb 
UUttiilliiddaadd yy ffaacciilliiddaadd ddee eemmpplleeoo 
Los buenos sitios son aquellos realmente 
provechosos para sus usuarios. 
La utilidad comprende todas las funciones del sitio 
que satisfacen las necesidades del usuario 
La facilidad de empleo es la facilidad de la que 
dispone el usuario para manejar las funciones del 
sitio con el fin de conseguir un determinado objetivo. 
Los sitios funcionales serán eficientes, fáciles de 
manejar y ayudaran a los usuarios a conseguir sus 
objetivos de manera satisfactoria y sin errores
Fundamentos ddee ddiisseeññoo WWeebb 
AAtteenncciióónn aall ccoonntteenniiddoo 
Los sitios Web suelen estar mas enfocados al 
contenido que el software tradicional 
El contenido es lo que estructura un sitio web 
Un contenido original y de calidad es el activo mas 
importante de la Web. 
Los usuarios buscan contenidos utiles y cuando los 
encuentran, los consumen con voracidad.
Fundamentos ddee ddiisseeññoo WWeebb 
NNaavveeggaannddoo llooss ccoonntteenniiddooss 
Los usuarios necesitan ayuda para no perderse en un 
sitio. Es necesario asignar nombres claros a los vínculos, 
agrupar de forma lógica los botones, emplear títulos de 
paginas claros y elementos de navegación consistentes 
Estructurar de forma clara el sitio, ayuda, pero una buena 
navegación necesita algo mas que una buena estructura. 
Los mejores diseños Web, son a menudo, aquellos que 
utilizan una navegación sencilla y refinada 
La navegación es solamente un medio para conseguir un 
resultado final
Fundamentos ddee ddiisseeññoo WWeebb 
IImmppoorrttaanncciiaa ddeell AAssppeeccttoo 
Un buen sitio Web tiene que funcionar y tiene que ser 
fácil de navegar. 
Con frecuencia lo primero en que repara el usuario, 
es el aspecto visual. 
El aspecto del sitio puede influir en la opinión que 
tenga el usuario sobre el mismo 
Los elementos visuales influirán en gran medida en la 
percepción inicial del sitio por parte del usuario
Fundamentos ddee ddiisseeññoo WWeebb 
VVaalloorr ppeerrmmaanneennttee 
Aunque, en un principio, el aspecto importa, los usuarios 
se olvidaran poco a poco de ese tema a medida que 
vayan utilizando el sitio. 
Cuando un usuario abandona un sitio se lleva lo que 
podríamos llamar el valor permanente, un sentimiento 
básico de mayor o menor éxito de la visita al sitio. 
El valor permanente esta ligado al hecho de que el usuario 
haya logrado concretar sus objetivos dentro del sitio 
El valor permanente del sitio viene determinado por los 
aspectos visuales, el contenido, la tecnología, la facilidad 
de empleo y la consecución del objetivo.
Fundamentos ddee ddiisseeññoo WWeebb 
EEqquuiilliibbrriioo eennttrree FFoorrmmaa yy FFuunncciióónn 
La función sin la forma seria aburrida; aunque el sitio 
funcione, no inspirara al usuario. 
Si la forma es impresionante y la función es limitada, 
el usuario quedara desconcertado. 
La forma de un sitio debería estar directamente 
relacionada con su finalidad 
La determinación de la forma mas adecuada para un 
sitio presupone que la función del sitio esta 
claramente definida
Fundamentos ddee ddiisseeññoo WWeebb 
LLoo qquuee ssee vvee eess lloo qquuee ssee ddeesseeaa 
EL control debería estar en manos del usuario o, al 
menos, debería parecerlo. 
Lo que se ve es lo que se desea, es una consigna 
centrada en el usuario y cede al usuario el control de 
lo que quiere ver y de cómo quiere verlo. 
El usuario debería ser dueño de sus propias 
acciones, permitiéndosele navegar sin rumbo, realizar 
cualquier tipo de búsqueda, imprimir el contenido 
mostrado….
EEll pprroocceessoo ddee 
DDiisseeññoo WWeebb 
MMeettooddoollooggííaa
Proceso ddee DDiisseeññoo WWeebb 
MMééttooddoo WWeebb aadd hhoocc 
Es un método muy sencillo, consiste en desarrollar el 
sitio, efectuar una inspección visual con un 
explorador, corregir errores y publicar en la Web 
Los sitios desarrollados con este método informal 
presentan numerosos problemas 
Este método se utiliza en proyectos muy pequeños 
cuando solo se cuenta con un solo diseñador / 
programador y cuando el mantenimiento necesario 
en el futuro es de poca entidad.
Proceso ddee DDiisseeññoo WWeebb 
MMooddeelloo ddeell MMééttooddoo WWeebb BBáássiiccoo 
Es un método deductivo, se inicia con una idea del 
conjunto y se va estrechando hasta llegar a los pasos 
necesarios para terminar el sitio. 
En ingenieria de software, a este modelo se le 
denomina “Modelo en Cascada” o “Modelo del ciclo 
de vida del software” 
Este modelo obliga a los diseñadores a planificar 
cada paso desde el principio.
Proceso ddee DDiisseeññoo WWeebb 
MMooddeelloo eenn CCaassccaaddaa 
Definición del problema 
Exploración del concepto 
Análisis de los requisitos 
Especificación 
Diseño de prototipos 
Realización y pruebas 
unitarias 
Integración y ensayo 
Del sistema 
Publicación, explotación 
Y mantenimiento
Planificación ddeell ssiittiioo 
OObbjjeettiivvooss GGeenneerraalleess 
Esta sección debería contener una breve 
argumentación para explicar el propósito global del 
sitio y las medidas básicas adoptadas para alcanzar 
el éxito.
Planificación ddeell ssiittiioo 
OObbjjeettiivvooss EEssppeeccííffiiccooss 
En esta sección se analizarían detalladamente los 
objetivos del sitio y se proporcionarían unos objetivos 
mensurables para verificar la utilidad del sitio
Planificación ddeell ssiittiioo 
AAnnáálliissiiss ddee llaa AAuuddiieenncciiaa 
Esta sección debería contener los perfiles de los 
usuarios que van a visitar el sitio. La sección 
describirá tanto las características de la audiencia 
como las tareas que esta audiencia trata de realizar 
en el sitio. 
¿Donde viven? 
¿Qué edad tienen? 
¿Idioma? 
¿Conocimientos técnicos? 
¿Qué obtienen del sitio? 
¿Qué desean ejecutar? 
¿Cuándo visitaran el sitio? 
¿Duración por visita?
Planificación ddeell ssiittiioo 
AAnnáálliissiiss ddee lloo eesscceennaarriiooss ddee eemmpplleeoo 
En esta sección se analizan los diversos escenarios 
de tareas que realizaran los usuarios del sitio. 
Comience primero analizando como llegara el usuario 
a sitio, y después, continué la visita hasta su 
conclusión. 
En esta sección se pueden incluir también un análisis 
de cómo concluye la visita, por ejemplo, previendo el 
numero de descargas, paginas accedidas, etc… 
siempre que estén relacionados con el análisis 
detallado de los objetivos
Planificación ddeell ssiittiioo 
RReeqquuiissiittooss ddeell ccoonntteenniiddoo 
La sección de requisitos del contenido proporcionara 
una lista de todos los textos, imágenes y otros 
medios de comunicación que se necesita incluir en el 
sitio. 
Elaborar una matriz en la que se presenten el 
contenido, la forma, la existencia y el posible 
propietario o creador resulta de gran utilidad.
Planificación ddeell ssiittiioo 
RReeqquuiissiittooss TTééccnniiccooss 
Esta sección deberá proporcionar una visión general 
de los tipos de tecnologías que se emplearan en el 
sitio, tales como HTML, Javascript, CGI, JAVA, etc. 
Los requisitos tecnológicos deberían estar 
directamente relacionados con las capacidades de 
los usuarios.
Planificación ddeell ssiittiioo 
RReeqquuiissiittooss VViissuuaalleess 
En la sección de requisitos visuales se subrayaran las 
consideraciones básicas para el diseño de la interfaz. 
Esta sección deberá indicar a grandes rasgos como 
se relacionara el sitio con cualquier material de 
marketing existente y definirá las restricciones que 
tendrán los usuarios para emplear gráficos y otros 
elementos multimedia (tamaño de pantalla, colores..) 
Esta sección puede resaltar algunos detalles 
específicos como: tipo de fuente, color
Planificación ddeell ssiittiioo 
RReeqquuiissiittooss ddee DDiissttrriibbuucciióónn 
Esta sección contendrá los requisitos de distribución, 
particularmente cualquier tema relacionado con la 
función como host. 
En esta sección deberá incluirse un análisis básico 
del numero de usuarios que visitaran el sitio, cuantas 
paginas se visitaran en un acceso típico y cual es el 
tamaño de una pagina estándar 
La mayoría de estos datos son estimaciones que nos 
permitirán definir correctamente las funciones que 
debe realizar cada pagina.
Planificación ddeell ssiittiioo 
DDiiaaggrraammaa ddee llaa eessttrruuccttuurraa ddeell ssiittiioo 
Esta sección debe proporcionar la estructura del sitio 
o un diagrama de flujo detallando las diversas 
secciones existentes dentro del sitio y sus relaciones. 
Se desarrollaran etiquetas e ideas generales para 
cada sección basándose en los diversos escenarios 
de usuario analizados en las fases iniciales del 
proyecto 
Es importante la organización de las diversas 
secciones del sitio y puede ser necesario refinar esta 
organización con el tiempo.
Planificación ddeell ssiittiioo 
DDiiaaggrraammaa ddee llaa eessttrruuccttuurraa ddeell ssiittiioo 
Pagina Principal 
Productos Acerca de Noticias 
Cúpula 
Robots 
PSV
Planificación ddeell ssiittiioo 
DDoottaacciióónn ddee ppeerrssoonnaall 
Esta sección recogerá los recursos necesarios para 
el desarrollo y explotación del sitio. 
Estos valores pueden darse como un simple dato de 
horas-hombre y deberán hacer referencia a cada una 
de las cuatro áreas que requieren personal: 
contenido, tecnología, diseño visual y gestión.
Planificación ddeell ssiittiioo 
PPllaazzooss ddee TTiieemmppoo 
Los plazos de tiempo deberán mostrar el progreso de 
proyecto teniendo en cuenta las dotaciones de 
personal estimadas en la sección anterior, combinado 
con el típico proceso en cascada señalado 
anteriormente
Planificación ddeell ssiittiioo 
PPrreessuuppuueessttoo 
El presupuesto deriva principalmente de los requisitos 
de personal y de los requisitos de distribución. 
Los costos de la campaña de marketing, costos de 
licencias de aplicaciones, propiedad intelectual y 
otros, deberán indicarse también en el presupuesto.

Más contenido relacionado

La actualidad más candente

Actividad uno
Actividad unoActividad uno
Actividad unoanylj15
 
Diseño e instalación de sitios web
Diseño e instalación de sitios webDiseño e instalación de sitios web
Diseño e instalación de sitios webKareliaRivas
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño webOmar Sosa-Tzec
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadIvan Aguilar
 
Anatomia de una página web
Anatomia de una página webAnatomia de una página web
Anatomia de una página webnoemi3012
 
Tendencias en diseño web 2016: Usabilidad y UX
Tendencias en diseño web 2016: Usabilidad y UXTendencias en diseño web 2016: Usabilidad y UX
Tendencias en diseño web 2016: Usabilidad y UXJavier da Costa
 
Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)alexpulupa
 
Venture capitalists
Venture capitalistsVenture capitalists
Venture capitalistsdanielgs2013
 

La actualidad más candente (17)

Tipos de Sitios Web
Tipos de Sitios WebTipos de Sitios Web
Tipos de Sitios Web
 
Actividad uno
Actividad unoActividad uno
Actividad uno
 
Diseño e instalación de sitios web
Diseño e instalación de sitios webDiseño e instalación de sitios web
Diseño e instalación de sitios web
 
Tipos de sitios web
Tipos de sitios webTipos de sitios web
Tipos de sitios web
 
Marketing On Line II
Marketing On Line IIMarketing On Line II
Marketing On Line II
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño web
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y Usabilidad
 
Responsive web
Responsive webResponsive web
Responsive web
 
T07 dawebtask
T07 dawebtaskT07 dawebtask
T07 dawebtask
 
Anatomia de una página web
Anatomia de una página webAnatomia de una página web
Anatomia de una página web
 
Disenio Web
Disenio WebDisenio Web
Disenio Web
 
M2 DiseñO Web
M2   DiseñO WebM2   DiseñO Web
M2 DiseñO Web
 
Sitio web gloria
Sitio web gloriaSitio web gloria
Sitio web gloria
 
Tendencias en diseño web 2016: Usabilidad y UX
Tendencias en diseño web 2016: Usabilidad y UXTendencias en diseño web 2016: Usabilidad y UX
Tendencias en diseño web 2016: Usabilidad y UX
 
Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)
 
Venture capitalists
Venture capitalistsVenture capitalists
Venture capitalists
 
Buenas Practicas - Web
Buenas Practicas - WebBuenas Practicas - Web
Buenas Practicas - Web
 

Destacado

Fundamentos de programación en diseño web
Fundamentos de programación en diseño webFundamentos de programación en diseño web
Fundamentos de programación en diseño webAlejandra Quintero
 
Fuxion - Guia de productos
Fuxion - Guia de productosFuxion - Guia de productos
Fuxion - Guia de productosfuxionlatino
 
Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web Alexander
 
Fuxion - Catalogo de productos
Fuxion - Catalogo de productosFuxion - Catalogo de productos
Fuxion - Catalogo de productosfuxionlatino
 
Catalogo de productos FUXION prolife detallado
Catalogo de productos FUXION prolife detalladoCatalogo de productos FUXION prolife detallado
Catalogo de productos FUXION prolife detalladoPaola Suárez
 
Catalogo Fuxion 2015 - Salud total
Catalogo Fuxion 2015 - Salud totalCatalogo Fuxion 2015 - Salud total
Catalogo Fuxion 2015 - Salud totalJenny y Marlon Varal
 
Diseño web slideshare
Diseño web slideshareDiseño web slideshare
Diseño web slideshareCreario
 
Historia De La Web
Historia De La WebHistoria De La Web
Historia De La WebAndrés
 
PRESENTACION DE NEGOCIO FUXION
PRESENTACION DE NEGOCIO FUXION PRESENTACION DE NEGOCIO FUXION
PRESENTACION DE NEGOCIO FUXION EDUARDO PAREDES
 
Evolución del diseño web
Evolución del diseño webEvolución del diseño web
Evolución del diseño webPercy Negrete
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño WebLorena Guerrero
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño WebRebelBangarang
 

Destacado (14)

Fundamentos de programación en diseño web
Fundamentos de programación en diseño webFundamentos de programación en diseño web
Fundamentos de programación en diseño web
 
Fuxion - Guia de productos
Fuxion - Guia de productosFuxion - Guia de productos
Fuxion - Guia de productos
 
Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web Fundamentos de Desarrollo Web
Fundamentos de Desarrollo Web
 
Fuxion - Catalogo de productos
Fuxion - Catalogo de productosFuxion - Catalogo de productos
Fuxion - Catalogo de productos
 
Catalogo de productos FUXION prolife detallado
Catalogo de productos FUXION prolife detalladoCatalogo de productos FUXION prolife detallado
Catalogo de productos FUXION prolife detallado
 
Catalogo Fuxion 2015 - Salud total
Catalogo Fuxion 2015 - Salud totalCatalogo Fuxion 2015 - Salud total
Catalogo Fuxion 2015 - Salud total
 
Diseño web slideshare
Diseño web slideshareDiseño web slideshare
Diseño web slideshare
 
Historia De La Web
Historia De La WebHistoria De La Web
Historia De La Web
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
PRESENTACION DE NEGOCIO FUXION
PRESENTACION DE NEGOCIO FUXION PRESENTACION DE NEGOCIO FUXION
PRESENTACION DE NEGOCIO FUXION
 
Evolución del diseño web
Evolución del diseño webEvolución del diseño web
Evolución del diseño web
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 

Similar a Diseño Web Conceptos Básicos

Tema 3. usabilidad version 2011
Tema 3. usabilidad version 2011Tema 3. usabilidad version 2011
Tema 3. usabilidad version 2011Angelito Maik
 
Principios bsicos
Principios bsicosPrincipios bsicos
Principios bsicoslopzrobrt
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicoslopzrobrt
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicoslopzrobrt
 
3 procesos web
3 procesos web3 procesos web
3 procesos webUVM
 
PLANIFICACION WEB.pptx
PLANIFICACION WEB.pptxPLANIFICACION WEB.pptx
PLANIFICACION WEB.pptxjuanancka
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitecturajavier0510
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitecturajavier0510
 
Presentación
PresentaciónPresentación
Presentaciónhola11112
 
Metodologiaa daniela workss
Metodologiaa daniela workssMetodologiaa daniela workss
Metodologiaa daniela worksssarmiento81
 
Metodologiaa daniela workss
Metodologiaa daniela workssMetodologiaa daniela workss
Metodologiaa daniela worksssarmiento81
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBMario Martinez
 
Buenas prácticas para crear tu página web - Nominalia
Buenas prácticas para crear tu página web - NominaliaBuenas prácticas para crear tu página web - Nominalia
Buenas prácticas para crear tu página web - NominaliaNominalia
 

Similar a Diseño Web Conceptos Básicos (20)

Tema 3. usabilidad version 2011
Tema 3. usabilidad version 2011Tema 3. usabilidad version 2011
Tema 3. usabilidad version 2011
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Principios bsicos
Principios bsicosPrincipios bsicos
Principios bsicos
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 
3 procesos web
3 procesos web3 procesos web
3 procesos web
 
PLANIFICACION WEB.pptx
PLANIFICACION WEB.pptxPLANIFICACION WEB.pptx
PLANIFICACION WEB.pptx
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitectura
 
Pagina web arquitectura
Pagina web arquitecturaPagina web arquitectura
Pagina web arquitectura
 
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
 
precentacion
precentacionprecentacion
precentacion
 
Presentación
PresentaciónPresentación
Presentación
 
Presentación
PresentaciónPresentación
Presentación
 
computación
computación computación
computación
 
Metodologiaa daniela workss
Metodologiaa daniela workssMetodologiaa daniela workss
Metodologiaa daniela workss
 
Metodologiaa daniela workss
Metodologiaa daniela workssMetodologiaa daniela workss
Metodologiaa daniela workss
 
Fase1 g301122 81
Fase1 g301122 81Fase1 g301122 81
Fase1 g301122 81
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
Buenas prácticas para crear tu página web - Nominalia
Buenas prácticas para crear tu página web - NominaliaBuenas prácticas para crear tu página web - Nominalia
Buenas prácticas para crear tu página web - Nominalia
 

Más de Yancy Cruz

BLOQUE 1 TEMA 3.pdf
BLOQUE 1 TEMA 3.pdfBLOQUE 1 TEMA 3.pdf
BLOQUE 1 TEMA 3.pdfYancy Cruz
 
BLOQUE 1 TEMA 2.pdf
BLOQUE 1 TEMA 2.pdfBLOQUE 1 TEMA 2.pdf
BLOQUE 1 TEMA 2.pdfYancy Cruz
 
BLOQUE 1 TEMA 1.pdf
BLOQUE 1 TEMA 1.pdfBLOQUE 1 TEMA 1.pdf
BLOQUE 1 TEMA 1.pdfYancy Cruz
 
C2-DEVA-Separata Semana 1.pdf
C2-DEVA-Separata Semana 1.pdfC2-DEVA-Separata Semana 1.pdf
C2-DEVA-Separata Semana 1.pdfYancy Cruz
 
S1 - Conoce Google Meet.pdf
S1 - Conoce Google Meet.pdfS1 - Conoce Google Meet.pdf
S1 - Conoce Google Meet.pdfYancy Cruz
 
SSR para docentes.pptx
SSR para docentes.pptxSSR para docentes.pptx
SSR para docentes.pptxYancy Cruz
 

Más de Yancy Cruz (7)

BLOQUE 1 .pdf
BLOQUE 1 .pdfBLOQUE 1 .pdf
BLOQUE 1 .pdf
 
BLOQUE 1 TEMA 3.pdf
BLOQUE 1 TEMA 3.pdfBLOQUE 1 TEMA 3.pdf
BLOQUE 1 TEMA 3.pdf
 
BLOQUE 1 TEMA 2.pdf
BLOQUE 1 TEMA 2.pdfBLOQUE 1 TEMA 2.pdf
BLOQUE 1 TEMA 2.pdf
 
BLOQUE 1 TEMA 1.pdf
BLOQUE 1 TEMA 1.pdfBLOQUE 1 TEMA 1.pdf
BLOQUE 1 TEMA 1.pdf
 
C2-DEVA-Separata Semana 1.pdf
C2-DEVA-Separata Semana 1.pdfC2-DEVA-Separata Semana 1.pdf
C2-DEVA-Separata Semana 1.pdf
 
S1 - Conoce Google Meet.pdf
S1 - Conoce Google Meet.pdfS1 - Conoce Google Meet.pdf
S1 - Conoce Google Meet.pdf
 
SSR para docentes.pptx
SSR para docentes.pptxSSR para docentes.pptx
SSR para docentes.pptx
 

Último

EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPANEP - DETP
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFlor Idalia Espinoza Ortega
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteJuan Hernandez
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxjosetrinidadchavez
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinavergarakarina022
 

Último (20)

Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
Marketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETPMarketing y servicios 2ºBTP Cocina DGETP
Marketing y servicios 2ºBTP Cocina DGETP
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
Unidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parteUnidad II Doctrina de la Iglesia 1 parte
Unidad II Doctrina de la Iglesia 1 parte
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karina
 

Diseño Web Conceptos Básicos

  • 1. TTEECCNNOOLLOOGGÍÍAA WWEEBB ¿QQuuéé eess eell DDiisseeññoo WWeebb??
  • 2. CCoonncceeppttooss BBáássiiccooss:: LLaa ppiirráámmiiddee ddeell ddiisseeññoo WWeebb Las cuatro características principales del diseño Web son: 1. El contenido 2. La tecnología 3. Los aspectos visuales 4. Los aspectos económicos
  • 3. CCoonncceeppttooss BBáássiiccooss:: LLaa ppiirráámmiiddee ddeell ddiisseeññoo WWeebb FINALIDAD Usuarios Diseñadores FORMA (visual) CONTENIDO FUNCION (tecnología)
  • 4. CCoonncceeppttooss BBáássiiccooss:: LLooss ddiivveerrssooss ssiittiiooss WWeebb.. Complejo Simple Sitio creado dinámicamente Centrado en el documento Aplicación basada en la Web Centrado en la Aplicación Sitio Web Puramente estático Sitio estático con Formulario de entrada Acceso dinámico a datos A través de un sitio Web
  • 5. Fundamentos ddee ddiisseeññoo WWeebb CCoonnssttrruuiirr ppaarraa llooss uussuuaarriiooss Un error frecuente en el desarrollo Web es que los sitios se construyen mas para los diseñadores y sus necesidades que para los verdaderos usuarios La clave para obtener el éxito en el diseño de un sitio web funcional es pensar siempre teniendo en cuenta el punto de vista del usuario
  • 6. Fundamentos ddee ddiisseeññoo WWeebb UUttiilliiddaadd yy ffaacciilliiddaadd ddee eemmpplleeoo Los buenos sitios son aquellos realmente provechosos para sus usuarios. La utilidad comprende todas las funciones del sitio que satisfacen las necesidades del usuario La facilidad de empleo es la facilidad de la que dispone el usuario para manejar las funciones del sitio con el fin de conseguir un determinado objetivo. Los sitios funcionales serán eficientes, fáciles de manejar y ayudaran a los usuarios a conseguir sus objetivos de manera satisfactoria y sin errores
  • 7. Fundamentos ddee ddiisseeññoo WWeebb AAtteenncciióónn aall ccoonntteenniiddoo Los sitios Web suelen estar mas enfocados al contenido que el software tradicional El contenido es lo que estructura un sitio web Un contenido original y de calidad es el activo mas importante de la Web. Los usuarios buscan contenidos utiles y cuando los encuentran, los consumen con voracidad.
  • 8. Fundamentos ddee ddiisseeññoo WWeebb NNaavveeggaannddoo llooss ccoonntteenniiddooss Los usuarios necesitan ayuda para no perderse en un sitio. Es necesario asignar nombres claros a los vínculos, agrupar de forma lógica los botones, emplear títulos de paginas claros y elementos de navegación consistentes Estructurar de forma clara el sitio, ayuda, pero una buena navegación necesita algo mas que una buena estructura. Los mejores diseños Web, son a menudo, aquellos que utilizan una navegación sencilla y refinada La navegación es solamente un medio para conseguir un resultado final
  • 9. Fundamentos ddee ddiisseeññoo WWeebb IImmppoorrttaanncciiaa ddeell AAssppeeccttoo Un buen sitio Web tiene que funcionar y tiene que ser fácil de navegar. Con frecuencia lo primero en que repara el usuario, es el aspecto visual. El aspecto del sitio puede influir en la opinión que tenga el usuario sobre el mismo Los elementos visuales influirán en gran medida en la percepción inicial del sitio por parte del usuario
  • 10. Fundamentos ddee ddiisseeññoo WWeebb VVaalloorr ppeerrmmaanneennttee Aunque, en un principio, el aspecto importa, los usuarios se olvidaran poco a poco de ese tema a medida que vayan utilizando el sitio. Cuando un usuario abandona un sitio se lleva lo que podríamos llamar el valor permanente, un sentimiento básico de mayor o menor éxito de la visita al sitio. El valor permanente esta ligado al hecho de que el usuario haya logrado concretar sus objetivos dentro del sitio El valor permanente del sitio viene determinado por los aspectos visuales, el contenido, la tecnología, la facilidad de empleo y la consecución del objetivo.
  • 11. Fundamentos ddee ddiisseeññoo WWeebb EEqquuiilliibbrriioo eennttrree FFoorrmmaa yy FFuunncciióónn La función sin la forma seria aburrida; aunque el sitio funcione, no inspirara al usuario. Si la forma es impresionante y la función es limitada, el usuario quedara desconcertado. La forma de un sitio debería estar directamente relacionada con su finalidad La determinación de la forma mas adecuada para un sitio presupone que la función del sitio esta claramente definida
  • 12. Fundamentos ddee ddiisseeññoo WWeebb LLoo qquuee ssee vvee eess lloo qquuee ssee ddeesseeaa EL control debería estar en manos del usuario o, al menos, debería parecerlo. Lo que se ve es lo que se desea, es una consigna centrada en el usuario y cede al usuario el control de lo que quiere ver y de cómo quiere verlo. El usuario debería ser dueño de sus propias acciones, permitiéndosele navegar sin rumbo, realizar cualquier tipo de búsqueda, imprimir el contenido mostrado….
  • 13. EEll pprroocceessoo ddee DDiisseeññoo WWeebb MMeettooddoollooggííaa
  • 14. Proceso ddee DDiisseeññoo WWeebb MMééttooddoo WWeebb aadd hhoocc Es un método muy sencillo, consiste en desarrollar el sitio, efectuar una inspección visual con un explorador, corregir errores y publicar en la Web Los sitios desarrollados con este método informal presentan numerosos problemas Este método se utiliza en proyectos muy pequeños cuando solo se cuenta con un solo diseñador / programador y cuando el mantenimiento necesario en el futuro es de poca entidad.
  • 15. Proceso ddee DDiisseeññoo WWeebb MMooddeelloo ddeell MMééttooddoo WWeebb BBáássiiccoo Es un método deductivo, se inicia con una idea del conjunto y se va estrechando hasta llegar a los pasos necesarios para terminar el sitio. En ingenieria de software, a este modelo se le denomina “Modelo en Cascada” o “Modelo del ciclo de vida del software” Este modelo obliga a los diseñadores a planificar cada paso desde el principio.
  • 16. Proceso ddee DDiisseeññoo WWeebb MMooddeelloo eenn CCaassccaaddaa Definición del problema Exploración del concepto Análisis de los requisitos Especificación Diseño de prototipos Realización y pruebas unitarias Integración y ensayo Del sistema Publicación, explotación Y mantenimiento
  • 17. Planificación ddeell ssiittiioo OObbjjeettiivvooss GGeenneerraalleess Esta sección debería contener una breve argumentación para explicar el propósito global del sitio y las medidas básicas adoptadas para alcanzar el éxito.
  • 18. Planificación ddeell ssiittiioo OObbjjeettiivvooss EEssppeeccííffiiccooss En esta sección se analizarían detalladamente los objetivos del sitio y se proporcionarían unos objetivos mensurables para verificar la utilidad del sitio
  • 19. Planificación ddeell ssiittiioo AAnnáálliissiiss ddee llaa AAuuddiieenncciiaa Esta sección debería contener los perfiles de los usuarios que van a visitar el sitio. La sección describirá tanto las características de la audiencia como las tareas que esta audiencia trata de realizar en el sitio. ¿Donde viven? ¿Qué edad tienen? ¿Idioma? ¿Conocimientos técnicos? ¿Qué obtienen del sitio? ¿Qué desean ejecutar? ¿Cuándo visitaran el sitio? ¿Duración por visita?
  • 20. Planificación ddeell ssiittiioo AAnnáálliissiiss ddee lloo eesscceennaarriiooss ddee eemmpplleeoo En esta sección se analizan los diversos escenarios de tareas que realizaran los usuarios del sitio. Comience primero analizando como llegara el usuario a sitio, y después, continué la visita hasta su conclusión. En esta sección se pueden incluir también un análisis de cómo concluye la visita, por ejemplo, previendo el numero de descargas, paginas accedidas, etc… siempre que estén relacionados con el análisis detallado de los objetivos
  • 21. Planificación ddeell ssiittiioo RReeqquuiissiittooss ddeell ccoonntteenniiddoo La sección de requisitos del contenido proporcionara una lista de todos los textos, imágenes y otros medios de comunicación que se necesita incluir en el sitio. Elaborar una matriz en la que se presenten el contenido, la forma, la existencia y el posible propietario o creador resulta de gran utilidad.
  • 22. Planificación ddeell ssiittiioo RReeqquuiissiittooss TTééccnniiccooss Esta sección deberá proporcionar una visión general de los tipos de tecnologías que se emplearan en el sitio, tales como HTML, Javascript, CGI, JAVA, etc. Los requisitos tecnológicos deberían estar directamente relacionados con las capacidades de los usuarios.
  • 23. Planificación ddeell ssiittiioo RReeqquuiissiittooss VViissuuaalleess En la sección de requisitos visuales se subrayaran las consideraciones básicas para el diseño de la interfaz. Esta sección deberá indicar a grandes rasgos como se relacionara el sitio con cualquier material de marketing existente y definirá las restricciones que tendrán los usuarios para emplear gráficos y otros elementos multimedia (tamaño de pantalla, colores..) Esta sección puede resaltar algunos detalles específicos como: tipo de fuente, color
  • 24. Planificación ddeell ssiittiioo RReeqquuiissiittooss ddee DDiissttrriibbuucciióónn Esta sección contendrá los requisitos de distribución, particularmente cualquier tema relacionado con la función como host. En esta sección deberá incluirse un análisis básico del numero de usuarios que visitaran el sitio, cuantas paginas se visitaran en un acceso típico y cual es el tamaño de una pagina estándar La mayoría de estos datos son estimaciones que nos permitirán definir correctamente las funciones que debe realizar cada pagina.
  • 25. Planificación ddeell ssiittiioo DDiiaaggrraammaa ddee llaa eessttrruuccttuurraa ddeell ssiittiioo Esta sección debe proporcionar la estructura del sitio o un diagrama de flujo detallando las diversas secciones existentes dentro del sitio y sus relaciones. Se desarrollaran etiquetas e ideas generales para cada sección basándose en los diversos escenarios de usuario analizados en las fases iniciales del proyecto Es importante la organización de las diversas secciones del sitio y puede ser necesario refinar esta organización con el tiempo.
  • 26. Planificación ddeell ssiittiioo DDiiaaggrraammaa ddee llaa eessttrruuccttuurraa ddeell ssiittiioo Pagina Principal Productos Acerca de Noticias Cúpula Robots PSV
  • 27. Planificación ddeell ssiittiioo DDoottaacciióónn ddee ppeerrssoonnaall Esta sección recogerá los recursos necesarios para el desarrollo y explotación del sitio. Estos valores pueden darse como un simple dato de horas-hombre y deberán hacer referencia a cada una de las cuatro áreas que requieren personal: contenido, tecnología, diseño visual y gestión.
  • 28. Planificación ddeell ssiittiioo PPllaazzooss ddee TTiieemmppoo Los plazos de tiempo deberán mostrar el progreso de proyecto teniendo en cuenta las dotaciones de personal estimadas en la sección anterior, combinado con el típico proceso en cascada señalado anteriormente
  • 29. Planificación ddeell ssiittiioo PPrreessuuppuueessttoo El presupuesto deriva principalmente de los requisitos de personal y de los requisitos de distribución. Los costos de la campaña de marketing, costos de licencias de aplicaciones, propiedad intelectual y otros, deberán indicarse también en el presupuesto.