Desarrollo de webapps 1
-
Upload
sergio-lozano-garcia -
Category
Documents
-
view
207 -
download
0
Transcript of Desarrollo de webapps 1
![Page 1: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/1.jpg)
DESARROLLO DE WEBAPPS
Sesión 1
HTML & CSS Fundamentals
![Page 2: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/2.jpg)
¿QUIÉN SOY?
Freelancer, emprendedor
Fundador de la Startup Instartius
Próximo Ingeniero de Sistemas
Evangelista de tecnologías Web
abiertas y tecnologías Microsoft
Programador:
Desarrollador:
Sergio Daniel Lozano García
@zheref
![Page 3: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/3.jpg)
¿PAGINAS WEB, SITIOS WEB O APLICACIONES WEB?
¿Qué diferencia hay entre una Website y una WebApp?
![Page 4: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/4.jpg)
SITIO WEB = WEBSITE = * PAGINAS WEB
![Page 5: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/5.jpg)
APLICACIONES WEB = WEBAPPS
![Page 6: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/6.jpg)
APPS VS WEBAPPS
¿Cuál ES LA DIFERENCIA ENTRE UNA APLICACIÓN WEB Y UNA APLICACIÓN NATIVA?
![Page 7: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/7.jpg)
SE EJECUTAN SOBRE…
ZherefSergio Daniel Lozano Garcia
APLICACIÓN
NATIVA
APLICACIÓN
WEB
Navegador
Sistema Operativo
![Page 8: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/8.jpg)
DIFERENCIA ENTRE UNA APLICACION WEB Y UNA APLICACION NATIVA
Tipo de Aplicacion Aplicacion Nativa Aplicacion Web
Se ejecutan sobre: Sistema Operativo Navegador Web
Son multiplataforma: Nunca Siempre
Tecnologias de desarrollo:
XAML, MXML, Java, C#,
ActionScript, C++, C, Python, Ruby,
Scala, Objective-C, Erlang, Perl,
Delphi, Lisp, Pascal, PHP, XUL,
etc….
HTML 5HTML + css + JS
Rendimiento: 100% 80%
![Page 9: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/9.jpg)
¿Por que ser
Desarrollador
Web?
![Page 10: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/10.jpg)
Incremento critico en la demanda de
desarrolladores debido a la necesidad
de tener presencia Web.
![Page 11: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/11.jpg)
Debido a la creciente
demanda habrán
muchas ofertas
laborales disponibles
para nosotros, sobre
todo como Freelancers.
![Page 12: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/12.jpg)
Hay múltiples perfiles para desarrollador
Web: Desde simples instalaciones de
CMS, diseños y maquetados de sitios
Web, hasta desarrollo de aplicaciones Web
robustas de alta escala.
![Page 13: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/13.jpg)
Puedes trabajar como Freelancer hasta
que te sientas con los suficientes
contactos para formar tu iniciativa
empresarial
![Page 14: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/14.jpg)
Puedes implantar tus propias ideas en
proyectos Web y monetizarlas de
manera que puedas ganar mucho dinero
con ellas.
![Page 15: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/15.jpg)
![Page 16: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/16.jpg)
HTML 5 es lo suficientemente poderoso para permitirnos llevar nuestras aplicaciones a móviles, a nuestro sistema operativo e incluso a
consolas de 7ma generación.
![Page 17: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/17.jpg)
NAVEGADO
R
MOVILES ESCRITORIO VIDEOJUEGO
S
![Page 18: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/18.jpg)
FIREFOX CHROME SAFARI EXPLORER
![Page 19: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/19.jpg)
ANDROID IPHONE WINDOWS
PHONE
![Page 20: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/20.jpg)
WINDOWS MAC OS LINUX
![Page 21: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/21.jpg)
¿QUE ES LA WEB?
![Page 22: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/22.jpg)
CLIENTE - SERVIDOR
ResponseRequest
HTTP
Client
Web BrowserHTTP
Server
Web Server
HTTP Pro toco l
![Page 23: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/23.jpg)
FUNCIONALIDAD ELEMENTAL DE ARQUITECTURA DE HTTP
HTTP
Client
Web Browser
HTTP
Server
Web ServerH T T P
P r o t o c o l
Resources
programs, files, d
atabases
![Page 24: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/24.jpg)
THE CLIENT-THE BROWSER-
Sends request to the HTTP Server best called as Web Server.
Not referring to IE
Just as the generic
Browser symbol
HTTP Request…
HTTP Message
![Page 25: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/25.jpg)
THE REQUEST-THE MESSAGE STRUCTURE-
The request carries a message with a dueformatted structure.
Any client
HTTP Request…
HTTP Message• An initial line CRLF
• Zero or more header lines
CRLF
• A blank line i.e. a CRLF
• An optional message body
like file, query data or
query output
Any server
![Page 26: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/26.jpg)
THE SERVER-THE WEBSERVER-
The server process the request and send a response to the client.
HTTP Response…
Hypertext The WebServer
IIS
![Page 27: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/27.jpg)
¿COMO DESARROLLAR PARA LA WEB?
![Page 28: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/28.jpg)
ARQUITECTURA MINIMA DE UNA APLICACION WEB
Cliente
Runtime:
Navegador
Tecnologia:
ZherefSergio Daniel Lozano Garcia
![Page 29: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/29.jpg)
ARQUITECTURA ELEMENTAL DE UNA APLICACION WEB
ClienteRuntime:
Navegador
Tecnologia:
ServidorRuntime:
Chrome V8.NET Framework
Tecnologia:
![Page 30: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/30.jpg)
ARQUITECTURA RECOMENDADA DE UNA APLICACION WEB
PresentaciónTecnologia(s):
Negocios DatosTecnologia(s): Tecnologia(s):
![Page 31: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/31.jpg)
Se puede desarrollar usando unaúnica tecnología de
desarrollo, famosamente conocidacomo…
FRONT-END
ClienteZheref
Sergio Daniel Lozano Garcia
![Page 32: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/32.jpg)
Consta de 3 lenguajes
HTML
CSS
JavaScript
HTML 5
ZherefSergio Daniel Lozano Garcia
![Page 33: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/33.jpg)
HyperText Markup Language
Permite declarar los elementos visuales y semánticos que va a tener nuestra página Web, como por ejemplo: texto, párrafos, títulos, listas, tablas, navbars, m
enus, controles, botones, campos de texto, imágenes, audio, video y más…Lenguaje
Declarativo
![Page 34: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/34.jpg)
Cascading StyleSheets
Permite definir los estilos (como: colores, tamaños, márgenes, fuentes, s
ombras, formas, transiciones y
animaciones) de los elementos visuales declarados en el HTML.Lenguaje
de Estilos
![Page 35: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/35.jpg)
JavaScript
Permite mediante programación manipular el estado de los elementosdeclarados en el HTML, crear nuevos elementos y programar una lógica de negocios, en caso de ser necesario,
TODO en tiempo de ejecución.Lenguaje de
Programación
![Page 36: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/36.jpg)
CONTINUA…
PROXIMA SESION
![Page 37: Desarrollo de webapps 1](https://reader033.fdocuments.ec/reader033/viewer/2022052412/559734d81a28ab90338b469a/html5/thumbnails/37.jpg)
<Preguntas>
Gracias