Curso HTML y CSS, parte 2

3,542
-1

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,542
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
324
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Curso HTML y CSS, parte 2

  1. 1. HTML y CSS 2
  2. 2. www.fondiu.clfacebook.com/fondiu.cl
  3. 3. y en el capítulo anterior…
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. URLS ABSOLutASAnatomía básica de una URL absolutaprotocolo:máquina/directorio/recursoprotocolo: 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. 15. URLS ABSOLutASAnatomía básica de una URL absolutaprotocolo:máquina/directorio/recursomá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. 16. URLS ABSOLutASAnatomía básica de una URL absolutaprotocolo:máquina/directorio/recursorecurso: 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. 17. URLS ABSOLutASEjemplos de URLs absolutas básicasprotocolo:máquina/directorio/recursohttp://fondiu.cl/http://fondiu.cl/index.htmlhttp://fondiu.cl/images/foto.jpghttp://www.fondiu.cl/images/foto.jpg (OJO!!)http://pruebas.fondiu.cl/otros/images/foto.jpgftp://miservidor.com/images/2008/10/foto.jpghttp://212.120.14.3/music/un_verano_naranja.mp3http://localhost/music/greatest-hits/pachipachi.mp3file:///C:/temp/files/foto.htmlmailto:snouvel@fondiu.cl
  18. 18. URLS ABSOLutASSubdominioshttp://www.fondiu.cl/http://www.pruebas.trabajos.fondiu.cl/http://www.mibanco.cl/http://www.mibanco.cl.login-acceso-clientes.info/
  19. 19. QUERIESAnatomía básica de una URL absouta con queries protocolo:máquina/directorio/recurso?param=valorUna 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 serusadas para obtener una cierta información (similar a enviar unformulario con GET)
  20. 20. QUERIESEjemplos http://google.com/search?q=html+css http://google.com/search?q=html+css&lr=lang_es http://unblogdewordpress.com/?orderby=rand
  21. 21. URLS RELATIVASToman el contexto donde está la página paradeducir 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. 22. URLS RELATIVASSi la URL es El directorio raíz es http://fondiu.cl/clases http://fondiu.cl/ http://clases.fondiu.cl http://clases.fondiu.cl/
  23. 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. 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. 25. Html: tablas• Información "Tabular" (matrices, cuadros comparativos, cruzas de datos)• Antiguamente utilizadas como método de diagramación
  26. 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. 27. Html: tablas
  28. 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. 29. Html: tablas Fusión de celdas (colspan y rowspan)
  30. 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. 31. Html: tablasAtributos de <table>• cellspacing: espacio entre celdas• background: imagen de fondo• bgcolor: color de fondo
  32. 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. 33. Html: Entidades &nbsp; &trade; ™ &lt; < &copy; © &gt; > &ccedil; ç &raquo; » &Ccedil; Ç &laquo; « &ntilde; ñ &quot; " &Aacute; Á &amp; & &mdash; — &hellip; … &hearts; ♥ &euro; € &spades; ♠
  34. 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. 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. 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. 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. 38. CSS: Modelo de caja … que se aplica a elementos BLOCK outline
  39. 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. 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. 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. 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. 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. 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. 45. CSS: float Vuelta a lo predeterminado…
  46. 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. 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. 48. CSS: float
  49. 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. 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. 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. 52. CSS: clearClear soluciona el clásico problema de la columna larga con float…
  53. 53. CSS: clearClear soluciona el clásico problema de la columna larga con float…
  54. 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. 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. 56. CSS: overflow overflow:auto muestra scrollbars donde sea necesario.
  57. 57. CSS: overflow overflow:scroll fuerza a mostrar scrollbars, se necesiten o no.
  58. 58. CSS: visibility Cuando visibility es hidden, el elemento sigue ocupando su espacio, pero se oculta.
  59. 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. 60. CSS: unidades de MEDIDa px % em
  61. 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. 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. 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. 64. css: cascada • La excepción !important tiene prioridad por sobre todas las demás. div { font-family: Georgia; font: Verdana !important; }
  65. 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. 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. 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. 68. Javascript Un detalle sobre JavaScript…
  69. 69. Javascript No confundir con Java. (gracias)
  70. 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. 71. Javascript: <script>• ¿Cómo se inserta Javascript?• Tal como CSS, existen 3 modos: Vinculado, incrustado e inline.
  72. 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. 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. 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. 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. 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. 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. 78. ajax: frameworksModos sencillos de usar Ajax. Algunos son:• jQuery• Moo Tools• YUI• Prototype/Scriptaculous• Spry
  79. 79. css: Códigos de color • Los colores CSS pueden escribirse con notación hexadecimal… #rrggbb
  80. 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. 81. css: Códigos de color • … todos los colores con números iguales son grises: #444444= #bbbbbb=
  82. 82. css: Códigos de color #ff0000= #00ff00= #0000ff =
  83. 83. css: Códigos de color #ffff00= amarillo #ff00ff= #00ffff =
  84. 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. 85. www.fondiu.cltwitter: @_fondiu

×