Desarrollo de webapps 1

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