Desarrollo web

Vista previa del material en texto

D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollo web 
Sergio Luján Mora 
Departamento de Lenguajes y Sistemas Informáticos 
Universidad de Alicante (España) 
IDW-DesWeb-01 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Contacto 
• http://gplsi.dlsi.ua.es/~slujan/ 
• http://accesibilidadenlaweb.blogspot.com.es/ 
• http://accesibilidadweb.dlsi.ua.es/ 
• http://desarrolloweb.dlsi.ua.es/ 
• http://www.youtube.com/user/sergiolujanmora 
• sergio.lujan@ua.es 
• @sergiolujanmora 
http://gplsi.dlsi.ua.es/~slujan/
http://accesibilidadenlaweb.blogspot.com.es/
http://accesibilidadweb.dlsi.ua.es/
http://accesibilidadweb.dlsi.ua.es/
http://www.youtube.com/user/sergiolujanmora
http://www.youtube.com/user/sergiolujanmora
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollo web = Diseño web X 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollo web 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Diseño web 
• Diseño visual (look and feel)  Elementos 
gráficos 
• Herramientas gráficas (Adobe Photoshop, GIMP) 
• Diseño (sin código)  Trozos: 
– HTML+CSS 
– Elementos gráficos 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Diseñador 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollo web 
• Parte cliente 
• Parte servidor 
• Parte cliente-servidor 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollo web 
• Parte cliente: 
– HTML y CSS 
– JavaScript y DOM 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollo web 
• Programación servidor: 
– Lenguajes de script (PHP, ASP, ASP.NET, JSP, Perl y 
Coldfusion) 
– Diseño y desarrollo de bases de datos 
– Seguridad 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Desarrollador 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/ 
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/ 
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
http://www.simplesquare.com/blog/infographics/a-web-site-designed/ 
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ ¿Qué fase no se puede eliminar de este diagrama? 
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Steve Ballmer – Developers (0:20) 
http://www.youtube.com/watch?v=8To-6VIJZRE 
http://www.youtube.com/watch?v=8To-6VIJZRE
http://www.youtube.com/watch?v=8To-6VIJZRE
http://www.youtube.com/watch?v=8To-6VIJZRE
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Steve Ballmer – Web Developers (1:04) 
http://www.youtube.com/watch?v=spwU2P5U_1U 
http://www.youtube.com/watch?v=spwU2P5U_1U
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
http://idesweb.es/ 
 
idw@idesweb.es 
@idesweb 
http://idesweb.es/
D
ES
A
R
R
O
LL
O
 W
EB
 
Introducción al desarrollo web 
http://idesweb.es/ 
Créditos de las imágenes y fotografías 
• http://en.wikipedia.org/wiki/File:Web_development_timeline.png 
• http://sixrevisions.com/infographics/web-designers-vs-web-developers-
infographic/ 
• http://www.downgraf.com/inspiration/web-designer-vs-web-developer-
infographic/ 
• http://www.simplesquare.com/blog/infographics/a-web-site-designed/ 
http://en.wikipedia.org/wiki/File:Web_development_timeline.png
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.downgraf.com/inspiration/web-designer-vs-web-developer-infographic/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/
http://www.simplesquare.com/blog/infographics/a-web-site-designed/