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

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
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.José Luis Palma
 
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
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
Movimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en VenezuelaMovimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en Venezuelacocuyelquemao
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
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
 
6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxCeciliaGuerreroGonza1
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfMARIAPAULAMAHECHAMOR
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
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
 
Manual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfManual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfMaryRotonda1
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docxAleParedes11
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticosisabeltrejoros
 

Último (20)

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
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
Movimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en VenezuelaMovimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en Venezuela
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
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
 
6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
6° SEM30 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdf
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
Repaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia GeneralRepaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia General
 
Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
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
 
Manual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfManual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdf
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticos
 

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