SlideShare una empresa de Scribd logo
1 de 12
UNIVERSIDAD AUTÓNOMA DE CHIRIQUÍ
          FACULTAD DE ECONOMÍA

   ESCUELA DE CIENCIAS COMPUTACIONALES


LICENCIATURA EN GESTIÓN DE LA TECNÓLOGIA DE
              LA INFORMACIÓN

              SEIS CRÉDITOS :

               INTEGRANTES

              MÓNICA CORTÉS
              NELSON AGUIRRE

               FACILITADORA:
             ITZEL CONCEPCIÓN
En un principio era sólo texto, pero a
medida que ha evolucionado la tecnología,
tanto los ordenadores como las redes de
telecomunicaciones, se ha generado nuevas
formas de desarrollar la web. La inclusión
de imágenes fue la más significativa, pero
también debemos mencionar el vídeo y la
animación, o los espacios 3D, lo que aporta
valores estilísticos, de diseño y de
interactividad jamás imaginados antes.
El diseño de páginas web se ha desarrollado
a medida que ha evolucionado Internet. En
1992 sólo había alrededor de 50 sitios web.
Estadísticas (2005) nos afirmaban que la
cantidad de sitios web ronda los 8.000
millones de sitios, a los que diariamente se
les suma a raíz de 4400 por día.
El diseño web es una actividad que consiste en la
planificación, diseño e implementación de sitios web y
páginas web. No es simplemente una aplicación del diseño
convencional, ya que requiere tener en cuenta cuestiones
tales como
       Navegabilidad
       Interactividad
       Usabilidad
       Arquitectura de la información
       Interacción de medios como el audio, texto, imagen,
enlaces y vídeo.
Se lo considera dentro del diseño multimedia.
El diseño de páginas web trata
      básicamente de realizar un documento       Páginas Web
       con información hiperenlazado con
                                                          Pueden ser
        otros documentos y asignarle una
           presentación para diferentes        creadas: creando
              dispositivos de salida.          archivos de texto
                       Como
                                               en
                                                              En


 Pantalla de            Teléfono                                                   Rub
               Papel                    HTML    PHP     Asp        Aspx     JSP
Computador               Móvil                                                      y

                               Utilizando
                              Programa en        JavaScript               Python



                       WYSIWYG      o       WYSIWYM
Para el diseño de páginas web debemos tener
en cuenta tres etapas:

        La primera: En esta etapa se trabaja
        distribuyendo el texto, los gráficos, los
        vínculos a otros documentos y otros objetos
        multimedia que se consideren pertinentes.
La segunda: Es la estructura y relación jerárquica
de las páginas del sitio web, una vez que se tiene
este boceto se pasa a 'escribir' la página web. Para
esto, y fundamentalmente para manejar los
vínculos entre documentos, se creó el lenguaje de
marcación de hipertexto o HTML. Los enlaces
que aparecen subrayados en este documento y
otros de Wikipedía son ejemplos de hipertexto,
puesto que al pulsar sobre ellos conducen a otras
páginas con información relacionada.
La tercera: Etapa consiste en el posicionamiento
en buscadores o SEO. Ésta consiste en optimizar
la estructura del contenido para mejorar la
posición en que aparece la página en
determinada búsqueda.
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 como Internet Explorer,
esta premisa original se ha perdido.
El diseño web debe seguir unos requerimientos
mínimos de accesibilidad web que haga que sus
sitios web o aplicaciones puedan ser visitados por el
mayor número de personas. Para conseguir estos
objetivos de accesibilidad se han desarrollado
pautas como las del W3C: Pautas de accesibilidad al
contenido Web 1.0 WCAG.
La última versión de este
 lenguaje básico corresponde al                  Ejemplo el uso de
  HTML5, donde se introducen                    <Canvas>, <video> o
nuevos elementos que mejoran                         <footer>.
la navegación y la usabilidad de
  los sitios web en los distintos
            navegadores




                          "Canvas" o marcos de trabajo, que sirven para
                          utilizar animaciones sin necesidad de instalar
                          plugins ni usar un reproductor Adobe Flash
                          para videos web, estándar considerado de facto.
                          Esta
Diseño de pagina web

Más contenido relacionado

La actualidad más candente

Refuerzo pag. 33, 34
Refuerzo pag. 33, 34Refuerzo pag. 33, 34
Refuerzo pag. 33, 34Bryan Marinez
 
Evolución del diseño web
Evolución del diseño webEvolución del diseño web
Evolución del diseño webPercy Negrete
 
Programas de la web 2.0
Programas de la web 2.0Programas de la web 2.0
Programas de la web 2.0Liz Farinango
 
Exposición de la pagina web Slideshare por Mini- M.A.ppt
Exposición de la pagina web Slideshare por Mini- M.A.ppt Exposición de la pagina web Slideshare por Mini- M.A.ppt
Exposición de la pagina web Slideshare por Mini- M.A.ppt MPAYERO
 
Sitio web diapositivas
Sitio  web diapositivasSitio  web diapositivas
Sitio web diapositivasflavio
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web Digetech.net
 
Navegadores super
Navegadores superNavegadores super
Navegadores supergissell
 
Html5 Iam the browser, Iam the future
Html5 Iam the browser, Iam the futureHtml5 Iam the browser, Iam the future
Html5 Iam the browser, Iam the futureCamila Rojas
 

La actualidad más candente (18)

La pagina web
La pagina webLa pagina web
La pagina web
 
Tipos de paginas web
Tipos de paginas webTipos de paginas web
Tipos de paginas web
 
Diapositiva Pagina Web
Diapositiva Pagina WebDiapositiva Pagina Web
Diapositiva Pagina Web
 
Refuerzo pag. 33, 34
Refuerzo pag. 33, 34Refuerzo pag. 33, 34
Refuerzo pag. 33, 34
 
Evolución del diseño web
Evolución del diseño webEvolución del diseño web
Evolución del diseño web
 
Programas de la web 2.0
Programas de la web 2.0Programas de la web 2.0
Programas de la web 2.0
 
Exposición de la pagina web Slideshare por Mini- M.A.ppt
Exposición de la pagina web Slideshare por Mini- M.A.ppt Exposición de la pagina web Slideshare por Mini- M.A.ppt
Exposición de la pagina web Slideshare por Mini- M.A.ppt
 
4 ta bitacor aa
4 ta bitacor aa4 ta bitacor aa
4 ta bitacor aa
 
Sitio web diapositivas
Sitio  web diapositivasSitio  web diapositivas
Sitio web diapositivas
 
Alany01
Alany01Alany01
Alany01
 
Creación de pagina web
Creación de pagina webCreación de pagina web
Creación de pagina web
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
El internet
El internetEl internet
El internet
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
Navegadores super
Navegadores superNavegadores super
Navegadores super
 
Paginas web
Paginas webPaginas web
Paginas web
 
4 ta bitacora
4 ta bitacora4 ta bitacora
4 ta bitacora
 
Html5 Iam the browser, Iam the future
Html5 Iam the browser, Iam the futureHtml5 Iam the browser, Iam the future
Html5 Iam the browser, Iam the future
 

Similar a Diseño de pagina web

Similar a Diseño de pagina web (20)

Diseño web
Diseño webDiseño web
Diseño web
 
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
 
Ariel beitia
Ariel beitiaAriel beitia
Ariel beitia
 
Web 6 credito
Web 6 creditoWeb 6 credito
Web 6 credito
 
1.- Introdución Diseño web .pptx
1.- Introdución  Diseño web .pptx1.- Introdución  Diseño web .pptx
1.- Introdución Diseño web .pptx
 
Diseñador Web Carlos D. Baéz
Diseñador Web Carlos D. BaézDiseñador Web Carlos D. Baéz
Diseñador Web Carlos D. Baéz
 
Hist. diseño web
Hist. diseño webHist. diseño web
Hist. diseño web
 
Instituto san antonio
Instituto san antonioInstituto san antonio
Instituto san antonio
 
Diseño de web
Diseño de webDiseño de web
Diseño de web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Curso HTML 5 en Español
Curso HTML 5 en EspañolCurso HTML 5 en Español
Curso HTML 5 en Español
 
Introducción Diseño Web
Introducción Diseño WebIntroducción Diseño Web
Introducción Diseño Web
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
El origen-de-las-paginas-web-final
El origen-de-las-paginas-web-finalEl origen-de-las-paginas-web-final
El origen-de-las-paginas-web-final
 
Presenentacion sobre la historia de diseño web
Presenentacion sobre la historia de diseño webPresenentacion sobre la historia de diseño web
Presenentacion sobre la historia de diseño 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
 
El diseño equipo 2
El diseño equipo 2El diseño equipo 2
El diseño equipo 2
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 

Último

Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfssuser50d1252
 
GUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIA
GUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIAGUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIA
GUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIAELIASPELAEZSARMIENTO1
 
SIMULACROS Y SIMULACIONES DE SISMO 2024.docx
SIMULACROS Y SIMULACIONES DE SISMO 2024.docxSIMULACROS Y SIMULACIONES DE SISMO 2024.docx
SIMULACROS Y SIMULACIONES DE SISMO 2024.docxLudy Ventocilla Napanga
 
Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Rosabel UA
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfDaniel Ángel Corral de la Mata, Ph.D.
 
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTESaraNolasco4
 
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfFichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfssuser50d1252
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOEveliaHernandez8
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesRaquel Martín Contreras
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024gharce
 
Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Angélica Soledad Vega Ramírez
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORGonella
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxRosabel UA
 
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsxJuanpm27
 

Último (20)

Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
 
GUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIA
GUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIAGUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIA
GUIA DE TEXTOS EDUCATIVOS SANTILLANA PARA SECUNDARIA
 
SIMULACROS Y SIMULACIONES DE SISMO 2024.docx
SIMULACROS Y SIMULACIONES DE SISMO 2024.docxSIMULACROS Y SIMULACIONES DE SISMO 2024.docx
SIMULACROS Y SIMULACIONES DE SISMO 2024.docx
 
Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
 
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
 
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfFichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materiales
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
 
Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...
 
PPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptxPPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptx
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIOR
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptx
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
 

Diseño de pagina web

  • 1. UNIVERSIDAD AUTÓNOMA DE CHIRIQUÍ FACULTAD DE ECONOMÍA ESCUELA DE CIENCIAS COMPUTACIONALES LICENCIATURA EN GESTIÓN DE LA TECNÓLOGIA DE LA INFORMACIÓN SEIS CRÉDITOS : INTEGRANTES MÓNICA CORTÉS NELSON AGUIRRE FACILITADORA: ITZEL CONCEPCIÓN
  • 2. En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la más significativa, pero también debemos mencionar el vídeo y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de interactividad jamás imaginados antes.
  • 3. El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web. Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8.000 millones de sitios, a los que diariamente se les suma a raíz de 4400 por día.
  • 4. El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como Navegabilidad Interactividad Usabilidad Arquitectura de la información Interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.
  • 5. El diseño de páginas web trata básicamente de realizar un documento Páginas Web con información hiperenlazado con Pueden ser otros documentos y asignarle una presentación para diferentes creadas: creando dispositivos de salida. archivos de texto Como en En Pantalla de Teléfono Rub Papel HTML PHP Asp Aspx JSP Computador Móvil y Utilizando Programa en JavaScript Python WYSIWYG o WYSIWYM
  • 6. Para el diseño de páginas web debemos tener en cuenta tres etapas: La primera: En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes.
  • 7. La segunda: Es la estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedía son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada.
  • 8. La tercera: Etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda.
  • 9. 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 como Internet Explorer, esta premisa original se ha perdido.
  • 10. El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.
  • 11. La última versión de este lenguaje básico corresponde al Ejemplo el uso de HTML5, donde se introducen <Canvas>, <video> o nuevos elementos que mejoran <footer>. la navegación y la usabilidad de los sitios web en los distintos navegadores "Canvas" o marcos de trabajo, que sirven para utilizar animaciones sin necesidad de instalar plugins ni usar un reproductor Adobe Flash para videos web, estándar considerado de facto. Esta