SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
www.usat.edu.pe
www.usat.edu.pe
Unidad III
Unidad II
Unidad I
Herramientas para la creación de prototipos para
sitios web
DISEÑO WEB
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
SESIÓN
07
www.usat.edu.pe
• Prender cámara Web (Todas
las clases al inicio)
Presentación inicial
• Marcar asistencia
www.usat.edu.pe
Objetivo de la sesión:
● Conocer las herramientas para la creación de páginas web efectivas.
Propósito de la sesión
Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s)
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
Resultado de Aprendizaje de la Unidad 01:
R1: Realiza diseños web con herramientas de diseño gráfico y maquetado web básico.
Contribuye al logro
Contribuye al logro
3
www.usat.edu.pe
4
Tema 01:
Claves para una pagina web
www.usat.edu.pe
5
Tema02: Editores de texto
WYSIWYG, acrónimo de What You See Is What You Get
(en español, "lo que ves es lo que obtienes")
www.usat.edu.pe
6
Temas 03: Prototipos
www.usat.edu.pe
7
Tema04: Sistema de control de versiones - GIT
www.usat.edu.pe
8
Tema 05: Marcos de desarrollo para diseño web
www.usat.edu.pe
9
Tema06: Alojamiento y Dominios
www.usat.edu.pe
• Formar grupos de trabajo:
–Cada grupo tendrá asignado un tema elegido por el
docente
–Realizar un resumen del tema (en una diapositiva)
–Use PDF otorgado por el docente
–Busque mas información relacionada con el tema
asignado
–Realizar una exposición (15 min) con el tema
asignado.
10
Trabajo Grupal
www.usat.edu.pe
• Grupo 01: (Las claves de una página web efectiva)
• Grupo 02: (Herramientas para trabajar Diseño
Web)
• Grupo 03: (Herramientas de prototipado)
• Grupo 04: (Sistema de control de versiones - Git)
• Grupo 05: Marcos de desarrollo para diseño Web
• Grupo 06: Alojamiento y dominios para sitio web
11
Asignación de temas
www.usat.edu.pe
• Para el desarrollo de nuestro curso necesitaremos las siguientes
herramientas:
12
Instalación de Visual Studio Code y Git
www.usat.edu.pe
• Existen herramientas variadas para el
diseño de prototipos y realización de
páginas Web, cada unos presenta
ventajas y desventajas según el tipo de
proyecto.
13
Conclusiones
www.usat.edu.pe
• Examen Teórico 01 (Cuestionario)
• Manejo de editores HTML
14
Próxima sesión
www.usat.edu.pe
• [1] Git, «Empezando - Fundamentos de Git,» [En línea]. Available: https://git-
scm.com/book/es/v1/Empezando-Fundamentos-de-Git. [Último acceso: 25 Marzo 2019].
• [2] DesarrolloWeb, «Introducción a Git y Github,» 03 Junio 2014. [En línea]. Available:
https://desarrolloweb.com/articulos/introduccion-git-github.html. [Último acceso: 26 Marzo 2019].
• [3] C. Álvarez, «Elegir la herramienta de prototipado más adecuada,» 4 Abril 2017. [En línea].
Available: https://openwebinars.net/blog/elegir-la-herramienta-de-prototipado-mas-adecuada/.
[Último acceso: 23 Marzo 2019].
• [4] Adveischool, «15 Elementos que No Pueden Faltar en tu Página Web,» 14 Abril 2016. [En línea].
Available: https://adveischool.com/elementos-que-no-pueden-faltar-en-tu-pagina-web/. [Último
acceso: 23 Marzo 2019].
• [5] Tiempo de negocios, «8 elementos básicos para un correcto diseño web,» 13 Enero 2018. [En
línea]. Available: https://tiempodenegocios.com/elementos-diseno-web/. [Último acceso: 23 Marzo
2019].
Referencias 01
15
www.usat.edu.pe
• [6] EW360, «Elementos de una página web efectiva,» 13 Diciembre 2017. [En línea]. Available:
https://www.estrategiaweb360.com/diseno-pagina-web-efectiva/. [Último acceso: 23 Marzo 2019].
• [7] M. Acibeiro, «11 elementos que no pueden faltar en tu página web,» Setiembre 2017. [En
línea]. Available: https://www.hosteurope.es/blog/elementos-que-no-pueden-faltar-en-tu-pagina-
web. [Último acceso: 23 Marzo 2019].
• [8] D. Gil, «Para trabajar en diseño web, ¿es mejor un IDE o un editor de código?,» 17 Mayo 2017.
[En línea]. Available: https://es.quora.com/Para-trabajar-en-dise%C3%B1o-web-es-mejor-un-IDE-o-
un-editor-de-c%C3%B3digo. [Último acceso: 25 Marzo 2019].
• [9] L. Mas, «IDES - Herramientas Libres Para Desarrollo Web,» 12 Diciembre 2016. [En línea].
Available: https://luismasdev.com/ides-herramientas-libres-para-desarrollo-web/. [Último acceso: 25
Marzo 2019].
• [10] L. Del Valle, «Consejos sobre IDEs de desarrollo web,» 2016. [En línea]. Available:
https://programarfacil.com/blog/programacion/consejos-sobre-ides-de-desarrollo-web/. [Último
acceso: 25 Marzo 2019].
Referencias 02
16
www.usat.edu.pe
http://www.facebook.com/usat.peru
https://plus.google.com/+usateduperu
https://twitter.com/usatenlinea
https://www.youtube.com/user/tvusat
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe

Más contenido relacionado

Similar a Sesion07_DW.pdf

Programas creacionactividades
Programas creacionactividadesProgramas creacionactividades
Programas creacionactividades
colobor
 
Servicios asociados-la-web-20
Servicios asociados-la-web-20Servicios asociados-la-web-20
Servicios asociados-la-web-20
Andres Milquez
 
Aula digital 1
Aula digital 1Aula digital 1
Aula digital 1
cobayote
 

Similar a Sesion07_DW.pdf (20)

Herramientas web 2.0
Herramientas web 2.0Herramientas web 2.0
Herramientas web 2.0
 
Misión 1
Misión 1Misión 1
Misión 1
 
Programas creacionactividades
Programas creacionactividadesProgramas creacionactividades
Programas creacionactividades
 
Johanna tecnologia
Johanna tecnologiaJohanna tecnologia
Johanna tecnologia
 
Valoracion de los recursos tic
Valoracion de los recursos ticValoracion de los recursos tic
Valoracion de los recursos tic
 
Introduccion nivel ii 2013 2014
Introduccion nivel ii 2013 2014Introduccion nivel ii 2013 2014
Introduccion nivel ii 2013 2014
 
Servicios asociados-la-web-20
Servicios asociados-la-web-20Servicios asociados-la-web-20
Servicios asociados-la-web-20
 
Programacion web 0
Programacion web 0Programacion web 0
Programacion web 0
 
Aula digital 1
Aula digital 1Aula digital 1
Aula digital 1
 
Actividades segundo periosdo
Actividades segundo periosdoActividades segundo periosdo
Actividades segundo periosdo
 
Actividad 1
Actividad 1Actividad 1
Actividad 1
 
Unidad 3-2013 4to. Secretariado
Unidad 3-2013 4to. SecretariadoUnidad 3-2013 4to. Secretariado
Unidad 3-2013 4to. Secretariado
 
logro 1 - 2
logro 1 - 2logro 1 - 2
logro 1 - 2
 
Presentación1
Presentación1Presentación1
Presentación1
 
Formación en estrategias pedagógicas utilizando las tic
Formación en estrategias pedagógicas utilizando las ticFormación en estrategias pedagógicas utilizando las tic
Formación en estrategias pedagógicas utilizando las tic
 
Formación en estrategias pedagógicas utilizando las tic
Formación en estrategias pedagógicas utilizando las ticFormación en estrategias pedagógicas utilizando las tic
Formación en estrategias pedagógicas utilizando las tic
 
carpeta evidencia sena 2019
carpeta evidencia sena 2019 carpeta evidencia sena 2019
carpeta evidencia sena 2019
 
Grado once segundo periodo
Grado once segundo periodoGrado once segundo periodo
Grado once segundo periodo
 
Herramientas web docentes aipcrt ugel03
Herramientas web docentes aipcrt ugel03Herramientas web docentes aipcrt ugel03
Herramientas web docentes aipcrt ugel03
 
TECNOLOGIA
TECNOLOGIATECNOLOGIA
TECNOLOGIA
 

Último

ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptxADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
clinivalleu
 
encuadre.docx. . . . . . . . . . . .
encuadre.docx.                 . . . . . . . . . . .encuadre.docx.                 . . . . . . . . . . .
encuadre.docx. . . . . . . . . . . .
ramosrodrigo0710
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
EdisonCondesoDelgado1
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
irenecarmona12
 
S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1
eje12345ja
 

Último (20)

ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptxADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
 
Presentación acerca del Design Thinking.pptx
Presentación acerca del Design Thinking.pptxPresentación acerca del Design Thinking.pptx
Presentación acerca del Design Thinking.pptx
 
Metodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometroMetodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometro
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptxLA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
 
que son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tiposque son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tipos
 
Triptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jajaTriptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jaja
 
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdfBlue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
 
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTALLA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
 
Manual de uso Avanzado para Excel 2016.pdf
Manual de uso  Avanzado para Excel 2016.pdfManual de uso  Avanzado para Excel 2016.pdf
Manual de uso Avanzado para Excel 2016.pdf
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
 
Curso Suoervición titulación UAP Ing Civil 2024.pptx
Curso  Suoervición titulación UAP Ing Civil 2024.pptxCurso  Suoervición titulación UAP Ing Civil 2024.pptx
Curso Suoervición titulación UAP Ing Civil 2024.pptx
 
encuadre.docx. . . . . . . . . . . .
encuadre.docx.                 . . . . . . . . . . .encuadre.docx.                 . . . . . . . . . . .
encuadre.docx. . . . . . . . . . . .
 
La Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoLa Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráfico
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
 
S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1
 
Informe de Laboratorio 08 - Capacitores e Inductores.docx
Informe de Laboratorio 08 - Capacitores e Inductores.docxInforme de Laboratorio 08 - Capacitores e Inductores.docx
Informe de Laboratorio 08 - Capacitores e Inductores.docx
 

Sesion07_DW.pdf

  • 1. www.usat.edu.pe www.usat.edu.pe Unidad III Unidad II Unidad I Herramientas para la creación de prototipos para sitios web DISEÑO WEB Ing. Ernesto Nicho Córdova ncordova@usat.edu.pe SESIÓN 07
  • 2. www.usat.edu.pe • Prender cámara Web (Todas las clases al inicio) Presentación inicial • Marcar asistencia
  • 3. www.usat.edu.pe Objetivo de la sesión: ● Conocer las herramientas para la creación de páginas web efectivas. Propósito de la sesión Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s) competencia(s): - CE3: DESARROLLO DE SOFTWARE - CG4: COMUNICACIÓN ORAL Y ESCRITA Resultado de Aprendizaje de la Unidad 01: R1: Realiza diseños web con herramientas de diseño gráfico y maquetado web básico. Contribuye al logro Contribuye al logro 3
  • 5. www.usat.edu.pe 5 Tema02: Editores de texto WYSIWYG, acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes")
  • 7. www.usat.edu.pe 7 Tema04: Sistema de control de versiones - GIT
  • 8. www.usat.edu.pe 8 Tema 05: Marcos de desarrollo para diseño web
  • 10. www.usat.edu.pe • Formar grupos de trabajo: –Cada grupo tendrá asignado un tema elegido por el docente –Realizar un resumen del tema (en una diapositiva) –Use PDF otorgado por el docente –Busque mas información relacionada con el tema asignado –Realizar una exposición (15 min) con el tema asignado. 10 Trabajo Grupal
  • 11. www.usat.edu.pe • Grupo 01: (Las claves de una página web efectiva) • Grupo 02: (Herramientas para trabajar Diseño Web) • Grupo 03: (Herramientas de prototipado) • Grupo 04: (Sistema de control de versiones - Git) • Grupo 05: Marcos de desarrollo para diseño Web • Grupo 06: Alojamiento y dominios para sitio web 11 Asignación de temas
  • 12. www.usat.edu.pe • Para el desarrollo de nuestro curso necesitaremos las siguientes herramientas: 12 Instalación de Visual Studio Code y Git
  • 13. www.usat.edu.pe • Existen herramientas variadas para el diseño de prototipos y realización de páginas Web, cada unos presenta ventajas y desventajas según el tipo de proyecto. 13 Conclusiones
  • 14. www.usat.edu.pe • Examen Teórico 01 (Cuestionario) • Manejo de editores HTML 14 Próxima sesión
  • 15. www.usat.edu.pe • [1] Git, «Empezando - Fundamentos de Git,» [En línea]. Available: https://git- scm.com/book/es/v1/Empezando-Fundamentos-de-Git. [Último acceso: 25 Marzo 2019]. • [2] DesarrolloWeb, «Introducción a Git y Github,» 03 Junio 2014. [En línea]. Available: https://desarrolloweb.com/articulos/introduccion-git-github.html. [Último acceso: 26 Marzo 2019]. • [3] C. Álvarez, «Elegir la herramienta de prototipado más adecuada,» 4 Abril 2017. [En línea]. Available: https://openwebinars.net/blog/elegir-la-herramienta-de-prototipado-mas-adecuada/. [Último acceso: 23 Marzo 2019]. • [4] Adveischool, «15 Elementos que No Pueden Faltar en tu Página Web,» 14 Abril 2016. [En línea]. Available: https://adveischool.com/elementos-que-no-pueden-faltar-en-tu-pagina-web/. [Último acceso: 23 Marzo 2019]. • [5] Tiempo de negocios, «8 elementos básicos para un correcto diseño web,» 13 Enero 2018. [En línea]. Available: https://tiempodenegocios.com/elementos-diseno-web/. [Último acceso: 23 Marzo 2019]. Referencias 01 15
  • 16. www.usat.edu.pe • [6] EW360, «Elementos de una página web efectiva,» 13 Diciembre 2017. [En línea]. Available: https://www.estrategiaweb360.com/diseno-pagina-web-efectiva/. [Último acceso: 23 Marzo 2019]. • [7] M. Acibeiro, «11 elementos que no pueden faltar en tu página web,» Setiembre 2017. [En línea]. Available: https://www.hosteurope.es/blog/elementos-que-no-pueden-faltar-en-tu-pagina- web. [Último acceso: 23 Marzo 2019]. • [8] D. Gil, «Para trabajar en diseño web, ¿es mejor un IDE o un editor de código?,» 17 Mayo 2017. [En línea]. Available: https://es.quora.com/Para-trabajar-en-dise%C3%B1o-web-es-mejor-un-IDE-o- un-editor-de-c%C3%B3digo. [Último acceso: 25 Marzo 2019]. • [9] L. Mas, «IDES - Herramientas Libres Para Desarrollo Web,» 12 Diciembre 2016. [En línea]. Available: https://luismasdev.com/ides-herramientas-libres-para-desarrollo-web/. [Último acceso: 25 Marzo 2019]. • [10] L. Del Valle, «Consejos sobre IDEs de desarrollo web,» 2016. [En línea]. Available: https://programarfacil.com/blog/programacion/consejos-sobre-ides-de-desarrollo-web/. [Último acceso: 25 Marzo 2019]. Referencias 02 16