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
exposicion

Más contenido relacionado

La actualidad más candente

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

上海地鐵房選購指南
上海地鐵房選購指南上海地鐵房選購指南
上海地鐵房選購指南Tequila Wu
 
咪蒙 網紅文章擴散影響力
咪蒙 網紅文章擴散影響力咪蒙 網紅文章擴散影響力
咪蒙 網紅文章擴散影響力Tequila Wu
 
Resume Pradeep
Resume PradeepResume Pradeep
Resume PradeepPradeep Ji
 
Zaiavlenie v upravlenie
Zaiavlenie v upravlenieZaiavlenie v upravlenie
Zaiavlenie v upravleniex1ravaganZa
 
Steel frame home collection adeliade
Steel frame home collection adeliadeSteel frame home collection adeliade
Steel frame home collection adeliadeFormat Homes
 
Top 7 Home Buying Myths & Misconception
Top 7 Home Buying Myths & MisconceptionTop 7 Home Buying Myths & Misconception
Top 7 Home Buying Myths & MisconceptionFormat Homes
 
Sharjeel Bajwa (Resume)
Sharjeel Bajwa (Resume)Sharjeel Bajwa (Resume)
Sharjeel Bajwa (Resume)Sharjeel Bajwa
 

Destacado (11)

上海地鐵房選購指南
上海地鐵房選購指南上海地鐵房選購指南
上海地鐵房選購指南
 
咪蒙 網紅文章擴散影響力
咪蒙 網紅文章擴散影響力咪蒙 網紅文章擴散影響力
咪蒙 網紅文章擴散影響力
 
Resume Pradeep
Resume PradeepResume Pradeep
Resume Pradeep
 
Final Portfolio 4520
Final Portfolio 4520Final Portfolio 4520
Final Portfolio 4520
 
Zaiavlenie v upravlenie
Zaiavlenie v upravlenieZaiavlenie v upravlenie
Zaiavlenie v upravlenie
 
Steel frame home collection adeliade
Steel frame home collection adeliadeSteel frame home collection adeliade
Steel frame home collection adeliade
 
BE
BEBE
BE
 
Sample web pdm binder
Sample web pdm binderSample web pdm binder
Sample web pdm binder
 
Top 7 Home Buying Myths & Misconception
Top 7 Home Buying Myths & MisconceptionTop 7 Home Buying Myths & Misconception
Top 7 Home Buying Myths & Misconception
 
Sharjeel Bajwa (Resume)
Sharjeel Bajwa (Resume)Sharjeel Bajwa (Resume)
Sharjeel Bajwa (Resume)
 
Sample WebPDM binder
Sample WebPDM binderSample WebPDM binder
Sample WebPDM binder
 

Similar a exposicion (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

Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADauxsoporte
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxPryhaSalam
 
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
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscaeliseo91
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 

Último (20)

Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
CALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDADCALENDARIZACION DE MAYO / RESPONSABILIDAD
CALENDARIZACION DE MAYO / RESPONSABILIDAD
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.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
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fisca
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 

exposicion

  • 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