SlideShare una empresa de Scribd logo
1 de 10
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 wed

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 web
Luis Álamo
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
formatecDokeos
 
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.0
dwebslide
 
902
902902

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
 
Accesibilidad en la web 2.0
Accesibilidad en la web 2.0Accesibilidad en la web 2.0
Accesibilidad en la web 2.0
 
Usabilidad Web 2.0
Usabilidad Web 2.0Usabilidad Web 2.0
Usabilidad 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

Salinan permen diknas no. 58 th.2014
Salinan permen diknas no. 58 th.2014Salinan permen diknas no. 58 th.2014
Salinan permen diknas no. 58 th.2014
amunib
 
Diseño web exposición
Diseño web exposiciónDiseño web exposición
Diseño web exposición
cami_234
 
Resolución de la webquest autos clasicos
Resolución de la webquest autos clasicosResolución de la webquest autos clasicos
Resolución de la webquest autos clasicos
mamaue98
 

Destacado (20)

LIÇÃO 05 - APOSTASIA, FIDELIDADE E DILIGÊNCIA NO MINISTÉRIO
LIÇÃO 05 - APOSTASIA, FIDELIDADE E DILIGÊNCIA NO MINISTÉRIO LIÇÃO 05 - APOSTASIA, FIDELIDADE E DILIGÊNCIA NO MINISTÉRIO
LIÇÃO 05 - APOSTASIA, FIDELIDADE E DILIGÊNCIA NO MINISTÉRIO
 
Evaluacion y metodo de la antomia patologica
Evaluacion y metodo de la antomia patologicaEvaluacion y metodo de la antomia patologica
Evaluacion y metodo de la antomia patologica
 
Presentación CAS(metodología)
Presentación CAS(metodología)Presentación CAS(metodología)
Presentación CAS(metodología)
 
Salinan permen diknas no. 58 th.2014
Salinan permen diknas no. 58 th.2014Salinan permen diknas no. 58 th.2014
Salinan permen diknas no. 58 th.2014
 
E-books
E-booksE-books
E-books
 
Soal pm stm
Soal pm stmSoal pm stm
Soal pm stm
 
Catalogo1
Catalogo1Catalogo1
Catalogo1
 
PUBLICATIONS
PUBLICATIONSPUBLICATIONS
PUBLICATIONS
 
Britenet - Salesforce Consulting Partner
Britenet - Salesforce Consulting Partner Britenet - Salesforce Consulting Partner
Britenet - Salesforce Consulting Partner
 
Diseño web exposición
Diseño web exposiciónDiseño web exposición
Diseño web exposición
 
R&M Company Profife
R&M Company ProfifeR&M Company Profife
R&M Company Profife
 
Resolución de la webquest autos clasicos
Resolución de la webquest autos clasicosResolución de la webquest autos clasicos
Resolución de la webquest autos clasicos
 
Integrales Procesos Industriales
Integrales Procesos IndustrialesIntegrales Procesos Industriales
Integrales Procesos Industriales
 
Опыт работы Шишкиной Е.А.
Опыт работы Шишкиной Е.А.Опыт работы Шишкиной Е.А.
Опыт работы Шишкиной Е.А.
 
CONTABILIDAD FINANCIERA (NIF)
CONTABILIDAD FINANCIERA (NIF)CONTABILIDAD FINANCIERA (NIF)
CONTABILIDAD FINANCIERA (NIF)
 
PROYECTO PARROQUIA CRUCITA
PROYECTO PARROQUIA CRUCITA PROYECTO PARROQUIA CRUCITA
PROYECTO PARROQUIA CRUCITA
 
TP Teconología Wink
TP Teconología WinkTP Teconología Wink
TP Teconología Wink
 
e-book Inovação em Logística 2013 Vol1 - LALT / FEC / Unicamp
e-book Inovação em Logística 2013 Vol1 - LALT / FEC / Unicampe-book Inovação em Logística 2013 Vol1 - LALT / FEC / Unicamp
e-book Inovação em Logística 2013 Vol1 - LALT / FEC / Unicamp
 
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
 
อริยสัจ ๔
 อริยสัจ ๔ อริยสัจ ๔
อริยสัจ ๔
 

Similar a diseño wed

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
saidi-12barcelo
 
Un navegador o navegador web
Un navegador o navegador webUn navegador o navegador web
Un navegador o navegador web
hmasalemarosa
 
La web alejandra acevedo 10-2
La web   alejandra acevedo 10-2La web   alejandra acevedo 10-2
La web alejandra acevedo 10-2
Alejandracevedo
 
ENSAYO DREANWAVER
ENSAYO DREANWAVERENSAYO DREANWAVER
ENSAYO DREANWAVER
guest803786
 

Similar a diseño wed (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
 
Presentación1
Presentación1Presentación1
Presentación1
 
La web alejandra acevedo 10-2
La web   alejandra acevedo 10-2La web   alejandra acevedo 10-2
La web alejandra acevedo 10-2
 
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

Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdfLas Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Demetrio Ccesa Rayme
 
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdfEdiciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Demetrio Ccesa Rayme
 
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
Lineamientos de la Escuela de la Confianza  SJA  Ccesa.pptxLineamientos de la Escuela de la Confianza  SJA  Ccesa.pptx
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
Demetrio Ccesa Rayme
 
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdfEscucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
Demetrio Ccesa Rayme
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
Gonella
 

Último (20)

04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx
04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx
04.UNIDAD DE APRENDIZAJE III CICLO-Cuidamos nuestro medioambiente (1).docx
 
Sesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdfSesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdf
 
Revista Faro Normalista 6, 18 de mayo 2024
Revista Faro Normalista 6, 18 de mayo 2024Revista Faro Normalista 6, 18 de mayo 2024
Revista Faro Normalista 6, 18 de mayo 2024
 
Los caminos del saber matematicas 7°.pdf
Los caminos del saber matematicas 7°.pdfLos caminos del saber matematicas 7°.pdf
Los caminos del saber matematicas 7°.pdf
 
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdfLas Preguntas Educativas entran a las Aulas CIAESA  Ccesa007.pdf
Las Preguntas Educativas entran a las Aulas CIAESA Ccesa007.pdf
 
3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
3. ELEMENTOS QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
 
Síndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuaniSíndrome piramidal 2024 según alvarez, farrera y wuani
Síndrome piramidal 2024 según alvarez, farrera y wuani
 
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdfEdiciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D  Ccesa007.pdf
Ediciones Previas Proyecto de Innovacion Pedagogica ORIGAMI 3D Ccesa007.pdf
 
novelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesis
novelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesisnovelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesis
novelas-cortas--3.pdf Analisis introspectivo y retrospectivo, sintesis
 
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLAACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
ACERTIJO CÁLCULOS MATEMÁGICOS EN LA CARRERA OLÍMPICA. Por JAVIER SOLIS NOYOLA
 
POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...
POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...
POEMAS ILUSTRADOS DE LUÍSA VILLALTA. Elaborados polos alumnos de 4º PDC do IE...
 
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
Lineamientos de la Escuela de la Confianza  SJA  Ccesa.pptxLineamientos de la Escuela de la Confianza  SJA  Ccesa.pptx
Lineamientos de la Escuela de la Confianza SJA Ccesa.pptx
 
Lecciones 07 Esc. Sabática. Motivados por la esperanza
Lecciones 07 Esc. Sabática. Motivados por la esperanzaLecciones 07 Esc. Sabática. Motivados por la esperanza
Lecciones 07 Esc. Sabática. Motivados por la esperanza
 
4ª SESION la misión santificadora del Espíritu Santo en la vida de la Iglesi...
4ª SESION  la misión santificadora del Espíritu Santo en la vida de la Iglesi...4ª SESION  la misión santificadora del Espíritu Santo en la vida de la Iglesi...
4ª SESION la misión santificadora del Espíritu Santo en la vida de la Iglesi...
 
ciclos biogeoquimicas y flujo de materia ecosistemas
ciclos biogeoquimicas y flujo de materia ecosistemasciclos biogeoquimicas y flujo de materia ecosistemas
ciclos biogeoquimicas y flujo de materia ecosistemas
 
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdfEscucha tu Cerebro en Nuevos Escenarios  PE3  Ccesa007.pdf
Escucha tu Cerebro en Nuevos Escenarios PE3 Ccesa007.pdf
 
Apunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdfApunte clase teorica propiedades de la Madera.pdf
Apunte clase teorica propiedades de la Madera.pdf
 
4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
4. MATERIALES QUE SE EMPLEAN EN LAS ESTRUCTURAS.pptx
 
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdfREGLAMENTO  FINAL DE EVALUACIÓN 2024 pdf.pdf
REGLAMENTO FINAL DE EVALUACIÓN 2024 pdf.pdf
 
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
tema 6 2eso 2024. Ciencias Sociales. El final de la Edad Media en la Penínsul...
 

diseño wed

  • 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