You are on page 1of 12

HTML 5 y CSS3

HTML CSS JS
ESTRUCTURA TPICA DE UN SITIO WEB:
MySQL + PHP HTML/CSS/JS
MySQL + PHP AJAX/JS
MySQL + PHP XML/SWF
MySQL Postgres (Compite con
Oracle y es ms robusta)
MongoDB (No est relac. con SBDR)
Basada en Objetos
Ms que una BD es una
coleccin de objetos.
(nuevo tipo de base de datos)
Django
Python
Expres.js
Node.js
(Socket.io)
Comm. En
tiempo real
Es el lenguaje
Es el framework
Diferencia entre un framework y un
lenguaje de programacin:
Un lenguaje es la base con la que
se contruye una aplicacin (la
parte bsica). Un framework es un
conjunto de caractersticas en
comn de este lenguaje.
HTML 5 (Jquery)
JavaScript
CSS3(stylus)
Conocimientos Previos: HTML5
No es un lenguaje de programacin; es un
lenguaje de modelado de la informacin
Es decir no se programa.
Nunca se disea en HTML5, el diseo va en
CSS3.
En HTML se recibe la informacin del servidor
y la modelamos con etiquetas. Ejemplo:
Como colocar una lista de usuarios, como
una tabla o con una lista. Una botonera: con
las secciones de mi sitio o con una serie de
etiquetas <div>.
MODELAR es MAQUETAR.

CSS3 (Cascading Style Sheets)
Hoja de Estilos en Cascada.
Si tenemos una organizacin semntica
en HTML; entonces con CSS podemos
pintar a tal caja de color rojo, a la otra
caja con 80% de alto, caja centrada,
texto fuente. (Los filtros de diseo lo
hacemos con CSS3). Stylus: es la forma
ms suave de programar CSS3.
JavaScript
Es el lenguaje de programacin del front-end.
Lenguaje de programacin en el que
manipulamos semnticamente todos los objetos y
hacemos cosas como x ejemplo: En FB cuando
hacemos click en sgte y slo se recarga la foto
(mas no toda la pagina) esto es JS.
Es la forma de manipular de manera interactiva la
parte semntica de nuestra informacin.
JavaScript no se conecta a Bases de Datos.
Se conecta a BD a travs de los lenguajes del
lado del servidor.
Tambin tiene un framework para hacer la
programacin mucho ms sencilla. (JQuery).
HTML 5 :
SEMANTICS
(SEMNTICA DE
HTML 5)
* Responsive Web Design
El diseo web adaptable o adaptativo
(en ingls, Responsive Web Design) es
una filosofa de diseo y desarrollo web
que mediante el uso de estructuras e
imgenes fluidas, as como de media-
queries en la hoja de estilo CSS, consigue
adaptar el sitio web al entorno del
usuario.

*Retina Display
Retina Display es una marca comercial
de Apple para referirse a las pantallas de alta
densidad de pxeles fabricadas y desarrolladas
por Sharp y utilizadas en sus dispositivos, basada
en la tecnologa In-plane switching (IPS). Esta
denominacin est actualmente presente en
el iPhone 4, iPhone 4S, en el iPhone 5, iPhone 5C y
iPhone 5S, en el iPod touch de cuarta y quinta
generacin, en el nuevo iPad de tercera
generacin, cuarta generacin, iPad Mini con
pantalla retina y iPad Air, y en el MacBook Pro con
pantalla Retinapresentado en junio de 2012 como
el primer ordenador con este modelo de pantalla.
Boilerplater (Esqueleto o
Estructura bsica)
Es una plantilla bsica de la que se
pueden derivar todos todos los proyectos
web basados en HTML5.
Ejemplo Bsico