Date post: | 04-Jul-2015 |
Category: |
Documents |
Upload: | sergio-lozano-garcia |
View: | 207 times |
Download: | 0 times |
DESARROLLO DE WEBAPPS
Sesión 1
HTML & CSS Fundamentals
¿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
¿PAGINAS WEB, SITIOS WEB O APLICACIONES WEB?
¿Qué diferencia hay entre una Website y una WebApp?
SITIO WEB = WEBSITE = * PAGINAS WEB
APLICACIONES WEB = WEBAPPS
APPS VS WEBAPPS
¿Cuál ES LA DIFERENCIA ENTRE UNA APLICACIÓN WEB Y UNA APLICACIÓN NATIVA?
SE EJECUTAN SOBRE…
ZherefSergio Daniel Lozano Garcia
APLICACIÓN
NATIVA
APLICACIÓN
WEB
Navegador
Sistema Operativo
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%
¿Por que ser
Desarrollador
Web?
Incremento critico en la demanda de
desarrolladores debido a la necesidad
de tener presencia Web.
Debido a la creciente
demanda habrán
muchas ofertas
laborales disponibles
para nosotros, sobre
todo como Freelancers.
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.
Puedes trabajar como Freelancer hasta
que te sientas con los suficientes
contactos para formar tu iniciativa
empresarial
Puedes implantar tus propias ideas en
proyectos Web y monetizarlas de
manera que puedas ganar mucho dinero
con ellas.
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.
NAVEGADO
R
MOVILES ESCRITORIO VIDEOJUEGO
S
FIREFOX CHROME SAFARI EXPLORER
ANDROID IPHONE WINDOWS
PHONE
WINDOWS MAC OS LINUX
¿QUE ES LA WEB?
CLIENTE - SERVIDOR
ResponseRequest
HTTP
Client
Web BrowserHTTP
Server
Web Server
HTTP Pro toco l
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
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
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
THE SERVER-THE WEBSERVER-
The server process the request and send a response to the client.
HTTP Response…
Hypertext The WebServer
IIS
¿COMO DESARROLLAR PARA LA WEB?
ARQUITECTURA MINIMA DE UNA APLICACION WEB
Cliente
Runtime:
Navegador
Tecnologia:
ZherefSergio Daniel Lozano Garcia
ARQUITECTURA ELEMENTAL DE UNA APLICACION WEB
ClienteRuntime:
Navegador
Tecnologia:
ServidorRuntime:
Chrome V8.NET Framework
Tecnologia:
ARQUITECTURA RECOMENDADA DE UNA APLICACION WEB
PresentaciónTecnologia(s):
Negocios DatosTecnologia(s): Tecnologia(s):
Se puede desarrollar usando unaúnica tecnología de
desarrollo, famosamente conocidacomo…
FRONT-END
ClienteZheref
Sergio Daniel Lozano Garcia
Consta de 3 lenguajes
HTML
CSS
JavaScript
HTML 5
ZherefSergio Daniel Lozano Garcia
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
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
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
CONTINUA…
PROXIMA SESION
<Preguntas>
Gracias