SlideShare una empresa de Scribd logo
DISEÑO WEB
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, ARQUITECTURA DE LA
INFORMACIÓN Y LA INTERACCIÓN DE MEDIOS COMO EL AUDIO, TEXTO, IMAGEN, ENLACES Y VIDEO.
LA UNIÓN DE UN BUEN DISEÑO CON UNA JERARQUÍA BIEN ELABORADADE CONTENIDOS, AUMENTA LA
EFICIENCIA DE LA WEB COMO CANAL DECOMUNICACIÓN E INTERCAMBIO DE DATOS, QUE BRINDA
POSIBILIDADES COMO EL CONTACTO DIRECTO ENTRE EL PRODUCTOR Y ELCONSUMIDOR DE
CONTENIDOS.
APLICACIONES
EL DISEÑO WEB HA VISTO AMPLIA APLICACIÓN EN LOS SECTORES COMERCIALES DE INTERNET
ESPECIALMENTE EN LA WORLD WIDE WEB. A MENUDO LA WEB SE UTILIZA COMO MEDIO DE EXPRESIÓN
PLÁSTICA EN SÍ. ARTISTAS Y CREADORES HACEN DE LAS PÁGINAS EN INTERNET UN MEDIO MÁS PARA
OFRECER SUS PRODUCCIONES Y UTILIZARLAS COMO UN CANAL MÁS DE DIFUSIÓN DE SU OBRA.
EL DISEÑO DE PÁGINAS WEB SE TRATA BÁSICAMENTE DE REALIZAR UNDOCUMENTO CON INFORMACIÓN
HIPERENLAZADO CON OTROS DOCUMENTOS Y ASIGNARLE UNA PRESENTACIÓN PARA DIFERENTES
DISPOSITIVOS DE SALIDA (EN UNA PANTALLA DECOMPUTADOR, EN PAPEL, EN UN TELÉFONO MÓVIL, ETC).
ETAPAS DEL DISEÑO WEB
PARA EL DISEÑO DE PÁGINAS WEB DEBEMOS TENER EN CUENTA TRES ETAPAS:
• EL DISEÑO VISUAL DE LA INFORMACIÓN QUE SE DESEA EDITAR. EN ESTAETAPA SE TRABAJA
DISTRIBUYENDO EL TEXTO, LOS GRÁFICOS, LOSVÍ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 OPREDISEÑO SOBRE EL PAPEL. ESTO FACILITARÁ TENER UN ORDEN
CLARO SOBRE EL DISEÑO.
• 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 DEHIPERTEXTO 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 WEBRADICA EN QUE LOS
VISITANTES NO SIEMPRE ENTRAN POR LA PÁGINA PRINCIPAL O INICIAL YEN ESE CASO EL SITIO DEBE
DARLE LA RESPUESTA A LO QUE BUSCA RÁPIDO, ADEMÁS PERMITIRLE NAVEGAR POR EL SITIO.
• 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 DEHIPERTEXTO 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 WEBRADICA EN QUE LOS
VISITANTES NO SIEMPRE ENTRAN POR LA PÁGINA PRINCIPAL O INICIAL YEN ESE CASO EL SITIO DEBE
DARLE LA RESPUESTA A LO QUE BUSCA RÁPIDO, ADEMÁS PERMITIRLE NAVEGAR POR EL SITIO.
EL HTML CONSTA DE UNA SERIE DE ELEMENTOS QUE ESTRUCTURAN EL TEXTO Y SON PRESENTADOS EN FORMA DE
HIPERTEXTO POR AGENTE DE USUARIO O NAVEGADORES. ESTO SE PUEDE HACER CON UN SIMPLE EDITOR DE
TEXTOS (DEBE GUARDARSE COMO TEXTO PLANO, SIN NINGÚN TIPO DE FORMATO Y CON
EXTENSIÓN .HTML O .HTM). APRENDER HTML ES RELATIVAMENTE FÁCIL, ASÍ QUE ES SENCILLO CREAR PÁGINAS
WEB DE ESTE MODO. ESTA ERA LA ÚNICA MANERA DE GENERARLAS HASTA QUE APARECIERON, A MEDIADOS
DE 1996, ALGUNOS EDITORES VISUALES DE HTML, COMO MS FRONTPAGE Y ADOBE DREAMWEAVER. CON ESTAS
HERRAMIENTAS NO ES NECESARIO APRENDER HTML (AUNQUE SÍ ACONSEJABLE), CON LO CUAL EL
DESARROLLADOR SE CONCENTRA EN LO MÁS IMPORTANTE, EL DISEÑO DEL DOCUMENTO.
TODO ESTO TENIENDO EN CUENTA EL NIVEL DE PROGRAMACIÓN EN ELDISEÑO DE LAS APLICACIONES Y DEL
IMPACTO VISUAL QUE SE QUIERE GENERAR EN EL USUARIO.
FUNDAMENTOS DEL DISEÑO WEB
• 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 POR LA W3C Y EN LO REFERENTE A LA WEB SEMÁNTICA. DEBIDO A LA
PERMISIBILIDAD DE ALGUNOS NAVEGADORES WEB COMOINTERNET 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 SERMOSTRADO
VIDEO DISEÑO WEB
• HTTPS://HTTPS://WWW.YOUTUBE.COM/WATCH?V=IJR64GTOHEY
Diseño web exposición

Más contenido relacionado

La actualidad más candente

Estandarización de paginas web
Estandarización de paginas webEstandarización de paginas web
Estandarización de paginas webLuis Álamo
 
Diapositiva Pagina Web
Diapositiva Pagina WebDiapositiva Pagina Web
Diapositiva Pagina Web
Alejandro Contreras
 
TRABAJO SOBRE EL INTERNET
TRABAJO SOBRE EL INTERNETTRABAJO SOBRE EL INTERNET
TRABAJO SOBRE EL INTERNET
KarolHerrera3101
 
Cuadro comparativo
Cuadro comparativoCuadro comparativo
Cuadro comparativo
LaurasofiaTrejosGarc
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas webformatecDokeos
 
Páginas web
Páginas webPáginas web
Páginas web
Páginas webPáginas web
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página web
rociobetty
 
Usabilidad Web 2.0
Usabilidad Web 2.0Usabilidad Web 2.0
Usabilidad Web 2.0dwebslide
 
Accesibilidad en la web 2.0
Accesibilidad en la web 2.0Accesibilidad en la web 2.0
Accesibilidad en la web 2.0
dwebslide
 
Páginas web
Páginas webPáginas web
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
kleiverk
 
902
902902
Informe de informatica osuany Y YASMELI
Informe de informatica osuany Y YASMELIInforme de informatica osuany Y YASMELI
Informe de informatica osuany Y YASMELI
osiyasm
 

La actualidad más candente (17)

pagina
paginapagina
pagina
 
Estandarización de paginas web
Estandarización de paginas webEstandarización de paginas web
Estandarización de paginas web
 
Diapositiva Pagina Web
Diapositiva Pagina WebDiapositiva Pagina Web
Diapositiva Pagina Web
 
TRABAJO SOBRE EL INTERNET
TRABAJO SOBRE EL INTERNETTRABAJO SOBRE EL INTERNET
TRABAJO SOBRE EL INTERNET
 
Cuadro comparativo
Cuadro comparativoCuadro comparativo
Cuadro comparativo
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina web
 
Páginas web
Páginas webPáginas web
Páginas web
 
Páginas web
Páginas webPáginas web
Páginas web
 
PPT: Internet y página web
PPT: Internet y página webPPT: Internet y página web
PPT: Internet y página web
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina web
 
Usabilidad Web 2.0
Usabilidad Web 2.0Usabilidad Web 2.0
Usabilidad Web 2.0
 
Accesibilidad en la web 2.0
Accesibilidad en la web 2.0Accesibilidad en la web 2.0
Accesibilidad en la web 2.0
 
Páginas web
Páginas webPáginas web
Páginas web
 
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
 
902
902902
902
 
Informe de informatica osuany Y YASMELI
Informe de informatica osuany Y YASMELIInforme de informatica osuany Y YASMELI
Informe de informatica osuany Y YASMELI
 

Destacado

Contract fsmc-2 years
Contract fsmc-2 yearsContract fsmc-2 years
Contract fsmc-2 years
WMfood
 
[C] giao trinh c dhbk - viet nhat
[C] giao trinh c   dhbk - viet nhat[C] giao trinh c   dhbk - viet nhat
[C] giao trinh c dhbk - viet nhatHoang Nguyen
 
Pomptonian response to RFP 2010-11
Pomptonian response to RFP 2010-11Pomptonian response to RFP 2010-11
Pomptonian response to RFP 2010-11WMfood
 
Cafeteria outsourcing recommendation for BOE 30607
Cafeteria outsourcing recommendation for BOE 30607Cafeteria outsourcing recommendation for BOE 30607
Cafeteria outsourcing recommendation for BOE 30607WMfood
 
RFP 2010-11 for Food Services
RFP 2010-11 for Food ServicesRFP 2010-11 for Food Services
RFP 2010-11 for Food ServicesWMfood
 
Cafe revenue disbursement reports-2 years
Cafe revenue disbursement reports-2 yearsCafe revenue disbursement reports-2 years
Cafe revenue disbursement reports-2 years
WMfood
 
Cafeteria outsourcing analysis for BOE 30521
Cafeteria outsourcing analysis for BOE 30521Cafeteria outsourcing analysis for BOE 30521
Cafeteria outsourcing analysis for BOE 30521
WMfood
 

Destacado (7)

Contract fsmc-2 years
Contract fsmc-2 yearsContract fsmc-2 years
Contract fsmc-2 years
 
[C] giao trinh c dhbk - viet nhat
[C] giao trinh c   dhbk - viet nhat[C] giao trinh c   dhbk - viet nhat
[C] giao trinh c dhbk - viet nhat
 
Pomptonian response to RFP 2010-11
Pomptonian response to RFP 2010-11Pomptonian response to RFP 2010-11
Pomptonian response to RFP 2010-11
 
Cafeteria outsourcing recommendation for BOE 30607
Cafeteria outsourcing recommendation for BOE 30607Cafeteria outsourcing recommendation for BOE 30607
Cafeteria outsourcing recommendation for BOE 30607
 
RFP 2010-11 for Food Services
RFP 2010-11 for Food ServicesRFP 2010-11 for Food Services
RFP 2010-11 for Food Services
 
Cafe revenue disbursement reports-2 years
Cafe revenue disbursement reports-2 yearsCafe revenue disbursement reports-2 years
Cafe revenue disbursement reports-2 years
 
Cafeteria outsourcing analysis for BOE 30521
Cafeteria outsourcing analysis for BOE 30521Cafeteria outsourcing analysis for BOE 30521
Cafeteria outsourcing analysis for BOE 30521
 

Similar a Diseño web exposición

Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
Diseño web Valencia
 
Diseno web
Diseno webDiseno web
Diseno web
ifajardouniandesr
 
Tipos de plataforma web
Tipos de plataforma webTipos de plataforma web
Tipos de plataforma web
Gustavo Quintero
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDsaidi-12barcelo
 
Diseño web
Diseño webDiseño web
Diseño web
erika_1177
 
Ariel beitia
Ariel beitiaAriel beitia
Ariel beitia
arielito1785
 
Web 6 credito
Web 6 creditoWeb 6 credito
Web 6 credito
Jose Garay
 
Presentacion
Presentacion Presentacion
Presentacion
Katherin Pazmiño
 
DISEÑO WEB
DISEÑO WEBDISEÑO WEB
DISEÑO WEB
karenblancos
 
Un navegador o navegador web
Un navegador o navegador webUn navegador o navegador web
Un navegador o navegador webhmasalemarosa
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
stefany79841964
 
La web alejandra acevedo 10-2
La web   alejandra acevedo 10-2La web   alejandra acevedo 10-2
La web alejandra acevedo 10-2Alejandracevedo
 
ENSAYO DREANWAVER
ENSAYO DREANWAVERENSAYO DREANWAVER
ENSAYO DREANWAVERguest803786
 
Pagina web
Pagina webPagina web
Pagina web
kathecorteza9602
 
Herramientas de Desarrollo de Software Bajo Web
Herramientas de Desarrollo de Software Bajo WebHerramientas de Desarrollo de Software Bajo Web
Herramientas de Desarrollo de Software Bajo Web
José Medina
 
Diseño web.pptx
Diseño web.pptxDiseño web.pptx
Diseño web.pptx
Victor Manuel Diaz Suarez
 
Instituto san antonio
Instituto san antonioInstituto san antonio
Instituto san antonio
Esling Madrid
 

Similar a Diseño web exposición (20)

Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 
Diseno web
Diseno webDiseno web
Diseno web
 
Tipos de plataforma web
Tipos de plataforma webTipos de plataforma web
Tipos de plataforma web
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WED
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño de web
Diseño de webDiseño de web
Diseño de web
 
Ariel beitia
Ariel beitiaAriel beitia
Ariel beitia
 
Web 6 credito
Web 6 creditoWeb 6 credito
Web 6 credito
 
Presentacion
Presentacion Presentacion
Presentacion
 
DISEÑO WEB
DISEÑO WEBDISEÑO WEB
DISEÑO WEB
 
Un navegador o navegador web
Un navegador o navegador webUn navegador o navegador web
Un navegador o navegador web
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
La web alejandra acevedo 10-2
La web   alejandra acevedo 10-2La web   alejandra acevedo 10-2
La web alejandra acevedo 10-2
 
Presentación1
Presentación1Presentación1
Presentación1
 
ENSAYO DREANWAVER
ENSAYO DREANWAVERENSAYO DREANWAVER
ENSAYO DREANWAVER
 
Pagina web
Pagina webPagina web
Pagina web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Herramientas de Desarrollo de Software Bajo Web
Herramientas de Desarrollo de Software Bajo WebHerramientas de Desarrollo de Software Bajo Web
Herramientas de Desarrollo de Software Bajo Web
 
Diseño web.pptx
Diseño web.pptxDiseño web.pptx
Diseño web.pptx
 
Instituto san antonio
Instituto san antonioInstituto san antonio
Instituto san antonio
 

Último

biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
Luis Enrique Zafra Haro
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
CrystalRomero18
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
ItsSofi
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
Fernando Villares
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
JimmyTejadaSalizar
 
Ventajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloroVentajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloro
durangense277
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
coloradxmaria
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
sarasofiamontezuma
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
DiegoCampos433849
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
ManuelCampos464987
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
cdraco
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
marianabz2403
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
Emilio Casbas
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
zoecaicedosalazar
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
ValeriaAyala48
 
Desarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdfDesarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdf
samuelvideos
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
CesarPazosQuispe
 
Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5
JulyMuoz18
 
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
espinozaernesto427
 

Último (20)

biogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectosbiogas industrial para guiarse en proyectos
biogas industrial para guiarse en proyectos
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
 
Ventajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloroVentajas y desventajas de la desinfección con cloro
Ventajas y desventajas de la desinfección con cloro
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Diagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestreDiagrama de flujo - ingenieria de sistemas 5to semestre
Diagrama de flujo - ingenieria de sistemas 5to semestre
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
 
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
trabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6ftrabajo de tecnologia, segundo periodo 9-6f
trabajo de tecnologia, segundo periodo 9-6f
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
 
Desarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdfDesarrollo de habilidades de pensamiento (2).pdf
Desarrollo de habilidades de pensamiento (2).pdf
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
 
Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5Conceptos Básicos de Programación L.D 10-5
Conceptos Básicos de Programación L.D 10-5
 
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...
 

Diseño web exposición

  • 1.
  • 2. DISEÑO WEB 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, ARQUITECTURA DE LA INFORMACIÓN Y LA INTERACCIÓN DE MEDIOS COMO EL AUDIO, TEXTO, IMAGEN, ENLACES Y VIDEO. LA UNIÓN DE UN BUEN DISEÑO CON UNA JERARQUÍA BIEN ELABORADADE CONTENIDOS, AUMENTA LA EFICIENCIA DE LA WEB COMO CANAL DECOMUNICACIÓN E INTERCAMBIO DE DATOS, QUE BRINDA POSIBILIDADES COMO EL CONTACTO DIRECTO ENTRE EL PRODUCTOR Y ELCONSUMIDOR DE CONTENIDOS.
  • 3. APLICACIONES EL DISEÑO WEB HA VISTO AMPLIA APLICACIÓN EN LOS SECTORES COMERCIALES DE INTERNET ESPECIALMENTE EN LA WORLD WIDE WEB. A MENUDO LA WEB SE UTILIZA COMO MEDIO DE EXPRESIÓN PLÁSTICA EN SÍ. ARTISTAS Y CREADORES HACEN DE LAS PÁGINAS EN INTERNET UN MEDIO MÁS PARA OFRECER SUS PRODUCCIONES Y UTILIZARLAS COMO UN CANAL MÁS DE DIFUSIÓN DE SU OBRA. EL DISEÑO DE PÁGINAS WEB SE TRATA BÁSICAMENTE DE REALIZAR UNDOCUMENTO CON INFORMACIÓN HIPERENLAZADO CON OTROS DOCUMENTOS Y ASIGNARLE UNA PRESENTACIÓN PARA DIFERENTES DISPOSITIVOS DE SALIDA (EN UNA PANTALLA DECOMPUTADOR, EN PAPEL, EN UN TELÉFONO MÓVIL, ETC).
  • 4. ETAPAS DEL DISEÑO WEB PARA EL DISEÑO DE PÁGINAS WEB DEBEMOS TENER EN CUENTA TRES ETAPAS: • EL DISEÑO VISUAL DE LA INFORMACIÓN QUE SE DESEA EDITAR. EN ESTAETAPA SE TRABAJA DISTRIBUYENDO EL TEXTO, LOS GRÁFICOS, LOSVÍ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 OPREDISEÑO SOBRE EL PAPEL. ESTO FACILITARÁ TENER UN ORDEN CLARO SOBRE EL DISEÑO.
  • 5. • 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 DEHIPERTEXTO 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 WEBRADICA EN QUE LOS VISITANTES NO SIEMPRE ENTRAN POR LA PÁGINA PRINCIPAL O INICIAL YEN ESE CASO EL SITIO DEBE DARLE LA RESPUESTA A LO QUE BUSCA RÁPIDO, ADEMÁS PERMITIRLE NAVEGAR POR EL SITIO.
  • 6. • 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 DEHIPERTEXTO 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 WEBRADICA EN QUE LOS VISITANTES NO SIEMPRE ENTRAN POR LA PÁGINA PRINCIPAL O INICIAL YEN ESE CASO EL SITIO DEBE DARLE LA RESPUESTA A LO QUE BUSCA RÁPIDO, ADEMÁS PERMITIRLE NAVEGAR POR EL SITIO.
  • 7. EL HTML CONSTA DE UNA SERIE DE ELEMENTOS QUE ESTRUCTURAN EL TEXTO Y SON PRESENTADOS EN FORMA DE HIPERTEXTO POR AGENTE DE USUARIO O NAVEGADORES. ESTO SE PUEDE HACER CON UN SIMPLE EDITOR DE TEXTOS (DEBE GUARDARSE COMO TEXTO PLANO, SIN NINGÚN TIPO DE FORMATO Y CON EXTENSIÓN .HTML O .HTM). APRENDER HTML ES RELATIVAMENTE FÁCIL, ASÍ QUE ES SENCILLO CREAR PÁGINAS WEB DE ESTE MODO. ESTA ERA LA ÚNICA MANERA DE GENERARLAS HASTA QUE APARECIERON, A MEDIADOS DE 1996, ALGUNOS EDITORES VISUALES DE HTML, COMO MS FRONTPAGE Y ADOBE DREAMWEAVER. CON ESTAS HERRAMIENTAS NO ES NECESARIO APRENDER HTML (AUNQUE SÍ ACONSEJABLE), CON LO CUAL EL DESARROLLADOR SE CONCENTRA EN LO MÁS IMPORTANTE, EL DISEÑO DEL DOCUMENTO. TODO ESTO TENIENDO EN CUENTA EL NIVEL DE PROGRAMACIÓN EN ELDISEÑO DE LAS APLICACIONES Y DEL IMPACTO VISUAL QUE SE QUIERE GENERAR EN EL USUARIO.
  • 8. FUNDAMENTOS DEL DISEÑO WEB • 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 POR LA W3C Y EN LO REFERENTE A LA WEB SEMÁNTICA. DEBIDO A LA PERMISIBILIDAD DE ALGUNOS NAVEGADORES WEB COMOINTERNET 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 SERMOSTRADO
  • 9. VIDEO DISEÑO WEB • HTTPS://HTTPS://WWW.YOUTUBE.COM/WATCH?V=IJR64GTOHEY