SESION 4

CURSO DE HTML5

CURSO DE HTML5

CSS3 Posicionamiento y Visualizacin.

Cuando los navegadores descargan el contenido HTML y CSS de las pginas web, aplican un
procesamiento muy complejo antes de mostrar las pginas en la pantalla del usuario.
Para cumplir con el modelo de cajas presentado en el captulo anterior, los navegadores
crean una caja para representar a cada elemento de la pgina HTML. Los factores que se
tienen en cuenta para generar cada caja son:
Las propiedades width y height de la caja (si estn establecidas).
El tipo de cada elemento HTML(elemento de bloque o elemento de lnea).
Posicionamiento de la caja(normal, relativo, absoluto, fijo o flotante).
Las relaciones entre elementos (donde se encuentra cada elemento, elementos
decendientes, etc.).
Otro tipo de informacin, como por ejemplo el tamao de las imgenes y el tamao de la
ventana del navegador.

CURSO DE HTML5

CSS3

Tipos de Elementos
El estndar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en
lnea y elementos de bloque.

CURSO DE HTML5

CSS3

CURSO DE HTML5

CSS3

Posicionamiento:
Los navegadores crean y posicionan de forma automtica todas las cajas que forman cada pgina
HTML. No obstante, CSS permite al diseador modificar la posicin en la que se muestra cada caja.
CSS permite 5 maneras de posicionar las cajas:
Posicionamiento normal o esttico: se trata del posicionamiento que utilizan los navegadores si
no se indica lo contrario.
Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una
caja segn el posicionamiento normal y despus desplazarla respecto de su posicin original.
Posicionamiento absoluto: la posicin de una caja se establece de forma absoluta respecto de su
elemento contenedor y el resto de elementos de la pgina ignoran la nueva posicin del
elemento.
Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un
elemento inamovible, de forma que su posicin en la pantalla siempre es la misma
independientemente del resto de elementos e independientemente de si el usuario sube o baja la
pgina en la ventana del navegador.
Posicionamiento flotante: se trata del modelo ms especial de posicionamiento, ya que desplaza
las cajas todo lo posible hacia la izquierda o hacia la derecha de la lnea en la que se encuentran.

CURSO DE HTML5

CSS3

Posicionamiento:

Propiedades:
Position
Float
Clear
Overflow
Top
Bottom
Right
Left

CURSO DE HTML5

CSS3

Visualizacin:

Propiedades:

Display

Visibility

Z-Index

Opacity

CURSO DE HTML5

CSS3

Relacin entre Posicionamiento y Visualizacin:

Cuando se establecen las propiedades display, float y position sobre una misma caja, su
interpretacin es la siguiente:
Si display vale none, se ignoran las propiedades float y position y la caja no se muestra
en la pgina.
Si position vale absolute o fixed, la caja se posiciona de forma absoluta, se considera
que float vale none y la propiedad display vale block tanto para los elementos en lnea
como para los elementos de bloque. La posicin de la caja se determina mediante el
valor de las propiedades top, right, bottom y left.
En cualquier otro caso, si float tiene un valor distinto de none, la caja se posiciona de
forma flotante y la propiedad display vale block tanto para los elementos en lnea como
para los elementos de bloque.

EJERCICIOS

CURSO DE HTML5

Tipografas:
Declaracin de fuentes

- text-align

- @font-face

- line-height

- font-family

- text-decoration

- src

- text-transform

Propiedades:

- vertical-align

- Color

- text-indent

- font-family

- letter-spacing

- font-size

- word-spacing

- font-style
- font-weight
- font-variant

CURSO DE HTML5

Transformaciones:
Propiedad Transform: Es una propiedad implementada en CSS3 que aplica una
transformacin en 2d o 3d a un elemento.
referencias: http://www.w3schools.com/cssref/css3_pr_transform.asp

Transiciones:
Propiedad Transform: Es una propiedad implementada en CSS3 que aplica una
transformacin en 2d o 3d a un elemento.
referencias: http://www.w3schools.com/cssref/css3_pr_transition.asp

Animaciones:
Propiedad Transform: Es una propiedad implementada en CSS3 que aplica una
transformacin en 2d o 3d a un elemento.
referencias: http://www.w3schools.com/cssref/css3_pr_animation.asp

CURSO DE HTML5

Colores:

Palabras Clave:
Son 140: http://www.w3schools.com/colors/colors_names.asp
Ejemplo: color: Tomato;

RGB Decimal y RGBA Decimal:

Todos los RGB son 16 777 216:

Ejemplo: color: rgba(0,255,152,0.5);

RGB Porcentual:
Ejemplo: color: rgb(90%,80%,11%);

RGB Hexadecimal:
Ejemplo: color: #ff00d4;

Colores del sistema:

Son 28: https://www.w3.org/TR/CSS21/ui.html#system-colors
Ejemplo: color: Window;

Colores Web Safe:

Son 256: https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors
Ejemplo: color: #303;

EJERCICIOS

CURSO DE HTML5

CURSO DE HTML5

Qu es JavaScript?
JavaScript es un lenguaje de programacin, al igual que PHP, si bien tiene
diferencias importantes con ste. JavaScript se utiliza principalmente del lado del
cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo
crear efectos atractivos y dinmicos en las pginas web. Los navegadores
modernos interpretan el cdigo JavaScript integrado en las pginas web.

Qu es un framework?
Tambien llamados libreras.
Los frameworks tienen como objetivo principal ofrecer una funcionalidad definida,
auto contenida, siendo construidos usando patrones de diseo, y su caracterstica
principal es su alta cohesin y bajo acoplamiento.

CURSO DE HTML5

Qu es DOM y que es BOM?

El Modelo de Objetos del Documento (DOM) es una interfaz de programacin de
aplicaciones (API) para documentos HTML y XML. Define la estructura lgica de los
documentos y el modo en que se accede y manipula un documento.

Las versiones 3.0 de los navegadores Internet Explorer y Netscape Navigator

introdujeron el concepto deBrowser Object Modelo BOM, que permite
acceder y
modificar las propiedades de las ventanas del propio navegador.
Mediante BOM, es posible redimensionar y mover la ventana del navegador, modificar
el texto que se muestra en la barra de estado y realizar muchas otras manipulaciones
no relacionadas con el contenido de la pgina HTML.

Qu son eventos?

Qu es programacin web Front-End?

CURSO DE HTML5

CURSO DE HTML5
Selectores y Funciones Bsicas de JQUERY:
- .html
- .text
- .not
- .has
- .firts
- .eq
- .lenght

PREGUNTAS Y
RECOMENDACIONES
- Joel Cauti Rojas
https://facebook.com/joel.cautirojas
Joel.cauti@gmail.com