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)
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)
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
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 ;
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.
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.
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.
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)
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
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