1. HTML y CSS 2

2. www.fondiu.cl
facebook.com/fondiu.cl

3. y en el capítulo anterior…

4. glosario
HTML: Lenguaje de marcado para pags Web / Contenido
CSS: Lenguaje de estilos / Presentación – Apariencia
Etiqueta: Unidad estructural – delimitador de contenido
Atributo: Datos complementarios para etiquetas
Head: Encabezado (invisible) de página Web
Meta: Información de una página acerca de sí misma
Body: Sección visible de una página Web

5. glosario
Anidación: Etiquetas contenidas dentro de otras
Padre/Hijo: Relación entre contenedor y contenido
Block: Comportamiento visual de "caja" de un elemento
Inline: Comportamiento visual estilo "destacador"
Regla CSS: Atributo a ser modificado por un valor (ej: color)
Declaración CSS: Conjunto de reglas que modifican un
elemento
Selector: Definición del elemento a ser modificado

6. glosario
Class: Atributo HTML que permite agrupar similares
ID: Atributo HTML que permite identificar y diferenciar
Pseudo-clase: Selector que permite tomar estados HTML
especiales

7. Cómo funcionan las páginas web
Petición Servidor
(URL y/o
conjunto de
datos)
Navegador
Usuario
Respuesta
(Usualmente HTML
con referencias a
archivos)

8. Servidores
• Poseen una dirección IP a la que cualquier
equipo puede conectarse y solicitarle
información
• Al decir "servidor" nos podemos referir al
equipo físico (computadores, con carpetas,
disco duro, RAM, etc) o a la aplicación de
servidor.

9. Servidores
• Aplicación de servidor Web: programa que
procesa las peticiones externas y entrega
resultados.
– Apache (la más usada)
– IIS (Microsoft)
– Lighttpd
– nginx

10. hosting
• Servicio de alojamiento en Internet
• Servidor "de arriendo"
• a) Compartido (Shared)
– El más barato
– El más lento y con menos flexibilidad
• b) Dedicado Virtual
– Relación ideal precio/calidad
– Libertad total

11. hosting
• c) Dedicado
– Máxima potencia y flexibilidad, para aplicaciones
complejas y sitios con tráfico enorme
– Caro
• d) CDN (Content Delivery Network)
– Rapidez alrededor del mundo
– Para sitios con visitantes globales
– Información respaldada simultáneamente

12. RSS y FEEDS
• Feed es un formato de datos usado para
proveer contenido que se actualiza
frecuentemente (blogs, sitios de noticias, etc)
• Los usuarios pueden "suscribirse" a un feed a
través de tu navegador, Google Reader, etc y
recibir actualizaciones automáticamente
• El más conocido es RSS (Really Simple
Syndication)

13. URLS
• Uniform Resource Locator
• URLS => URI (Universal Resource Identifier)
• Identificador único para los recursos de
información disponibles en Internet
(Direcciones Web, direcciones de envío de
correos, etc)
• Para efectos de sitios Web, existen dos tipos:
absolutas y relativas

14. URLS ABSOLutAS
Anatomía básica de una URL absoluta
protocolo:máquina/directorio/recurso
protocolo: tipo de conexión usado para obtener el recurso.
http:// Protocolo Web
https:// Protocolo Web seguro (sobre SSL)
ftp:// Conexión FTP de transferencia de archivos
mailto: direcciones de e-mail
file:/// Archivos locales

15. URLS ABSOLutAS
Anatomía básica de una URL absoluta
protocolo:máquina/directorio/recurso
máquina: servidor o computador donde está el recurso.
Puede ser un dominio Web (fondiu.cl)
…una dirección IP (200.12.84.30)
…localhost (un servidor local instalado en el computador,
es equivalente a 127.0.0.1)
En caso de file:///, no hay máquina, sólo directorio.
directorio: carpeta(s)

16. URLS ABSOLutAS
Anatomía básica de una URL absoluta
protocolo:máquina/directorio/recurso
recurso: El archivo o consulta a ser obtenido.
Puede ser un archivo html (contacto.html)
…un script PHP (contacto.php)
…un archivo cualquiera (fotos.zip)
…una consulta dinámica (pronto…)
…o puede no existir (en cuyo caso se puede asumir
que se está viendo un archivo index.html, index.php,
home.html u otros)

17. URLS ABSOLutAS
Ejemplos de URLs absolutas básicas
protocolo:máquina/directorio/recurso
http://fondiu.cl/
http://fondiu.cl/index.html
http://fondiu.cl/images/foto.jpg
http://www.fondiu.cl/images/foto.jpg (OJO!!)
http://pruebas.fondiu.cl/otros/images/foto.jpg
ftp://miservidor.com/images/2008/10/foto.jpg
http://212.120.14.3/music/un_verano_naranja.mp3
http://localhost/music/greatest-hits/pachipachi.mp3
file:///C:/temp/files/foto.html
mailto:snouvel@fondiu.cl

18. URLS ABSOLutAS
Subdominios
http://www.fondiu.cl/
http://www.pruebas.trabajos.fondiu.cl/
http://www.mibanco.cl/
http://www.mibanco.cl.login-acceso-clientes.info/

19. QUERIES
Anatomía básica de una URL absouta con queries
protocolo:máquina/directorio/recurso?param=valor
Una query permite consultar ciertos datos al sitio que se está
visitando.
OJO: Esto no es automático.
OJO2: Sólo funciona con páginas dinámicas (PHP, Ruby, ASP, etc)
El programador del sitio define ciertas queries que pueden ser
usadas para obtener una cierta información (similar a enviar un
formulario con GET)

20. QUERIES
Ejemplos
http://google.com/search?q=html+css
http://google.com/search?q=html+css&lr=lang_es
http://unblogdewordpress.com/?orderby=rand

21. URLS RELATIVAS
Toman el contexto donde está la página para
deducir la ubicación de la URL
Archivo en el mismo directorio index.html
Dentro de un sub-directorio images/foto.jpg
En el directorio padre ../archivos/fuentes.zip
En dos directorios padre ../../musica.mp3
En el directorio raíz /contacto

22. URLS RELATIVAS
Si la URL es El directorio raíz es
http://fondiu.cl/clases http://fondiu.cl/
http://clases.fondiu.cl http://clases.fondiu.cl/

23. URLS RELATIVAS
• Ventajas:
– Ahorran mucho espacio
– Permiten mover un sitio entero con facilidad,
– Son independientes de la ubicación
Si estoy en http://fondiu.cl/contacto
Y quiero linkear a http://fondiu.cl/images/all/
Sólo necesito como href ../images/all

24. URLS RELATIVAS
• Desventajas:
– O mueves todo el sitio o pierdes los links
– Si cambias la estructura de directorios pierdes
todos los links
Si estoy en http://fondiu.cl/
Y tengo una <a> con href foto.jpg
El navegador interpreta http://fondiu.cl/foto.jpg
Pero si muevo SÓLO la página a http://hola.com
El navegador buscará http://hola.com/foto.jpg

25. Html: tablas
• Información "Tabular" (matrices, cuadros
comparativos, cruzas de datos)
• Antiguamente utilizadas como método de
diagramación

26. Html: tablas
Etiquetas de tabla
<table> Definición de tabla
<tr> Fila de tabla (horiz)
<td> Celda de tabla
<th> Encabezado de tabla

27. Html: tablas

28. Html: tablas
<table>
<tr>
<th>Frutas</th>
<th>Verduras</th>
<th>Lácteos</th>
</tr>
<tr>
<td>Manzana</td>
<td>Apio</td>
<td>Yogurt</td>
</tr>
<tr>
<td>Naranja</td>
<td>Brócoli</td>
<td>Queso</td>
</tr>
</table>

29. Html: tablas
Fusión de celdas (colspan y rowspan)

30. Html: tablas
<table>
<tr>
<th colspan="2">Reino Vegetal</th>
<th>Lácteos</th>
</tr>
<tr>
<td>Manzana</td>
<td>Apio</td>
<td>Yogurt</td>
</tr>
<tr>
<td>Naranja</td>
<td>Brócoli</td>
<td>Queso</td>
</tr>
</table>

31. Html: tablas
Atributos de <table>
• cellspacing: espacio entre celdas
• background: imagen de fondo
• bgcolor: color de fondo

32. Html: Entidades
• Representan caracteres especiales
• Realizan "escape" del texto que no puede ser
literalmente escrito (por ejemplo, para
representar el carácter "<" sin abrir una
etiqueta)
• Siempre comienzan con & y terminan con ;

33. Html: Entidades
&nbsp; &trade; ™
&lt; < &copy; ©
&gt; > &ccedil; ç
&raquo; » &Ccedil; Ç
&laquo; « &ntilde; ñ
&quot; " &Aacute; Á
&amp; & &mdash; —
&hellip; … &hearts; ♥
&euro; € &spades; ♠

34. insertar css
3 Formas de usar CSS
1. Vinculado: mediante una etiqueta <link>
2. Incrustado: mediante etiquetas <style>
3. Inline: mediante el atributo "style" en
cualquier etiqueta

35. insertar css
1. Vinculado
• Método recomendado
• Ventajas: escalabilidad, reutilización
• Se usa un archivo externo .css (o varios), que
se vincula a todas las páginas necesarias
<link rel="stylesheet" href="css/style.css"
type="text/css"/>

36. insertar css
2. Incrustado
• Inserta el código CSS en una etiqueta <style>
• Recomendado sólo cuando se necesitan
incluir excepciones al CSS vinculado
<style type="text/css">
a:hover {
color:red;
position:relative;
}
</style>

37. insertar css
3. Inline
• Inserta reglas CSS en un atributo "style" de
un elemento
• Sólo funciona para ese elemento
• Tiene la máxima prioridad, pero es
absolutamente inescalable
<blockquote style="border-left:5px solid
red;font-style:italic"> </blockquote>

38. CSS: Modelo de caja
… que se aplica a elementos BLOCK
outline

39. CSS: Posicionamiento
Static: Posición normal
Relative: El objeto se desplaza
los px especificados en top,
right, bottom y left.
Absolute: El objeto flota en la
pantalla, y se orienta de acuerdo
al contenedor no estático más
próximo, o a <body> en su
defecto, según top, right,
bottom y left.

40. CSS: Posicionamiento
Fixed: El elemento se orienta según la ventana
del navegador, y permanece ahí sin importar el
scroll. También usa las reglas top, right, bottom
y left.
* Los atributos top, right, bottom y left no
hacen nada por sí solos: su comportamiento
dependerá del valor de position.

41. CSS: z-index
• Los elementos que están
posicionados (sea relative,
absolute o fixed) se apilan
unos sobre otros mediante
un número.
• Este número es el z-index:
mientras más alto, más por
encima estará el elemento
• z-index:0 es el valor del fondo
• Valores negativos se pondrán
bajo el fondo

42. CSS: float
De manera
predeterminada, todos
los elementos block
usan su propio "carril",
independiente de sus
dimensiones.
El tercer elemento
(morado) no tiene
dimensiones
especificadas.

43. CSS: float
Si un elemento flota
hacia la izquierda, se
mueve hacia ese
extremo, y el elemento
que lo sigue pasa a
ocupar su carril

44. CSS: float
Si un elemento flota
hacia la derecha, se
mueve hacia ese
extremo, y el elemento
que lo sigue pasa a
ocupar su carril.
EL ORDEN DE LOS
ELEMENTOS NO HA
SIDO ALTERADO.

45. CSS: float
Vuelta a lo
predeterminado…

46. CSS: float
En el caso del elemento
morado, al no tener
dimensiones, float:left
hace que se comprima
a su mínima expresión.
El elemento naranja
pasa a ocupar su carril.

47. CSS: float
Cuando todos flotan a
la derecha, los
elementos que no
caben en un carril
pasan a ocupar el
extremo derecho del
carril siguiente.

48. CSS: float

49. CSS: clear
Clear fuerza a un
left elemento a usar su
propio carril,
independiente de si le
precede o no un
elemento con float.
Es left o right
dependiendo del float
que ignorará. Si ignora
ambos, es both.

50. CSS: clear
Clear fuerza a un
elemento a usar su
propio carril,
independiente de si le
precede o no un
elemento con float.
Es left o right
dependiendo del float
que ignorará. Si ignora
ambos, es both.

51. CSS: clear
Clear fuerza a un
elemento a usar su
propio carril,
independiente de si le
precede o no un
elemento con float.
Es left o right
dependiendo del float
que ignorará. Si ignora
ambos, es both.

52. CSS: clear
Clear soluciona el clásico problema de la columna larga con float…

53. CSS: clear
Clear soluciona el clásico problema de la columna larga con float…

54. CSS: overflow
Overflow determina
qué hace un
contenedor si su
contenido es más
grande que él.
Por defecto es
overflow:visible,
que obliga al
contenedor (verde) a
mostrar el contenido
(naranja).

55. CSS: overflow
overflow:hidden
esconde todo lo que se
salga del contenedor,
similar a una máscara.
(Truco: además sirve
para contener floats)

56. CSS: overflow
overflow:auto muestra
scrollbars donde sea
necesario.

57. CSS: overflow
overflow:scroll fuerza a
mostrar scrollbars, se
necesiten o no.

58. CSS: visibility
Cuando visibility es hidden, el elemento sigue
ocupando su espacio, pero se oculta.

59. CSS: display
Display puede cambiar el comportamiento de un elemento de
block a inline, o hacerlo desaparecer completamente.
(El elemento
del medio tiene
display:none)

60. CSS: unidades de MEDIDa
px
%
em

61. CSS: reglas
Tipografía
font-family: Verdana, "Lucida Grande", sans-serif;
font-size: 20px;
font-weight:bold;
font-style:italic;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: underline;
color: black;
letter-spacing:-0.01em;
line-height: 1.5;
text-align: justify;

62. CSS: reglas
Fondo
background-color: #ffad05;
background-image: url("images/fondo.jpg");
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top;

63. css: cascada
• Los estilos se aplican unos sobre otros,
siguiendo una jerarquía.
• Lo particular tiene prioridad sobre lo
general.
div {
font-family: Arial, Helvetica, sans-serif;
}
div#contenido {
font-family: Georgia;
}

64. css: cascada
• La excepción !important tiene prioridad por
sobre todas las demás.
div {
font-family: Georgia;
font: Verdana !important;
}

65. css: cascada
• Si todas las demás condiciones son idénticas,
la regla que va después tiene prioridad sobre
la que va antes.
div {
color: black;
color: blue;
}

66. css: cascada
• ID tiene prioridad sobre class.
• Class tiene prioridad sobre etiqueta.
• Si todo lo demás está igual, el selector que
especifica más elementos tiene prioridad

67. Códigos de error http
• 401: No fue correctamente autorizado
• 403: Prohibido
• 404: No encontrado
• 500: Error de servidor no especificado
• 503: Servicio no disponible

68. Javascript
Un detalle sobre JavaScript…

69. Javascript
No confundir con Java.
(gracias)

70. Javascript
• Lenguaje de programación (y no de "marcado"
o de "presentación")
• Permite expandir las características del
navegador y controlarlo
• Su principal "gracia" es que se ejecuta del lado
del navegador, por ende realiza cálculos,
operaciones y acciones sin necesidad de un
servidor

71. Javascript: <script>
• ¿Cómo se inserta Javascript?
• Tal como CSS, existen 3 modos: Vinculado,
incrustado e inline.

72. Javascript: <script>
1. Vinculado
• Se crea una etiqueta <script> con un atributo
"src" que dirige al archivo .js
<script type="text/javascript" src="js/hola.js">
</script>

73. Javascript: <script>
2. Incrustado
• Se usa la misma etiqueta <script>, pero sin el
atributo "src" e insertando el script
directamente:
<script type="text/javascript">
alert("Hello World");
</script>

74. Javascript: <script>
3. Inline
• Inline posee dos formas:
• a) Se activa mediante ciertos eventos, que son
llamados como atributos.
<a onclick="alert('Hello World');">
Clickea y verás
</a>

75. Javascript: <script>
3. Inline
• (Algunos) eventos:
onmouseover Mouse por encima
onmouseout Mouse saliendo
onclick Click
onload Cuando se carga el elemento (<body>)
onchange Cuando un <select> cambia de opción

76. Javascript: <script>
3. Inline
• b) Mediante la palabra clave "javascript" en
los href de <a> (en desuso):
<a href="javascript:alert('Hello World');">
Clickea y verás
</a>

77. ajax
• "Asynchronous Javascript And Xml"
• Permite comunicarse con el servidor sin
recargar una página (p. ej., al usar un chat)
• Una de las primeras aplicaciones Web en
usarlo fue Gmail

78. ajax: frameworks
Modos sencillos de usar Ajax. Algunos son:
• jQuery
• Moo Tools
• YUI
• Prototype/Scriptaculous
• Spry

79. css: Códigos de color
• Los colores CSS pueden escribirse con
notación hexadecimal…
#rrggbb

80. css: Códigos de color
• … en valores que van del 0 al 9 y de A a F (en
total, 256 tonalidades por color):
#000000 =
#ffffff = blanco

81. css: Códigos de color
• … todos los colores con números iguales son
grises:
#444444=
#bbbbbb=

82. css: Códigos de color
#ff0000=
#00ff00=
#0000ff =

83. css: Códigos de color
#ffff00= amarillo
#ff00ff=
#00ffff =

84. css: Códigos de color
Los colores pueden abreviarse cuando cada
par tiene números exactamente iguales
#ff0000= #f00
#ff66aa= #f6a
#5566dd= #56d

85. www.fondiu.cl
twitter: @_fondiu