Your SlideShare is downloading. ×
  • Like
Html+css 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html+css 2013

  • 2,544 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,544
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
113
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML+CSS
  • 2. SERGIO NOUVEL@SHESHO
  • 3.          
  • 4.    PETICIÓN      SERVIDOR USUARIO NAVEGADOR  RESPUESTA
  • 5.  “GUARDA MIS    DATOS”     “OK, DUDE” TÚ CHROME  PÁGINA WEB (HTML+CSS +IMÁGENES)
  • 6. HTML = CONTENIDO“QUÉ”CSS = PRESENTACIÓN“CÓMO”
  • 7. HTML = CONTENIDO“HOOOLA, LES QUIERO DECIR QUE BLABLA BLA”CSS = PRESENTACIÓN“OK, ESO VA CON TEXTO ROJO Y 2 PX DEMARGEN”
  • 8. HTML DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a“ESO ES UN TÍTULO 1” vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes“AHÍ TIENE QUE IR UNAIMAGEN” nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing“ESO ES UN PÁRRAFO” elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr“ESO ES UN LISTADO” eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF
  • 9. HTML DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a <H1> vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes <IMG> nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing <P> elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr <UL> eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF
  • 10. CSS DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a “ESO VA CON ARIAL” vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes “ESTA PARTE VA EN NEGRITA Y BORDE ROJO” nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing“ESE LINK VA SUBRAYADO” elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr “ESA CAJA VA A LA IZQUIERDA” eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF
  • 11. CSS DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a font-family: arial; vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes font-weight: bold; border: 1px solid red; nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscingtext-decoration: underline; elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr eget magna. Etiam libero float: left; pellentesque placerat SDFDSFSFSDF SDFFFF
  • 12.  CSS    HTML HTML HTML HTML
  • 13. HTMLESSEMÁNTICO
  • 14. SINTAXIS HTML APERTURA <etiqueta> contenido… CIERRE </etiqueta>
  • 15. <strong>Esto  es  una  negrita</strong>  y  esto  no  lo  es.  <em>Esto  está  en  cursiva</em>  y  esto  no  lo  está.<perro>Esto  es  un  perro</perro>  y  esto  no  lo  es.
  • 16. <strong>Esto  es  una   Esto es una negritanegrita</strong>  y  esto  no  lo  es.   y esto no lo es.<em>Esto  está  en   Esto está en cursivacursiva</em>  y  esto   y esto no lo está.no  lo  está.<perro>Esto  es  un  perro</perro>  y  esto  no  lo  es. y esto no lo es.
  • 17. <ironía>   Qué  bonito  te  queda   ese  vestido!</ironía>
  • 18. ALGUNAS ETIQUETAS SE CIERRANA SÍ MISMAS<p>A  continuación,  un  salto  de  línea:  <br/>  Gracias,  salto  de  línea.</p>
  • 19. ALGUNAS ETIQUETAS SE CIERRANA SÍ MISMAS<p>A  continuación,  una  imagen:  <img  />  Gracias,  imagen.</p>
  • 20. <p> PÁRRAFO <a> VÍNCULO (ANCLA) <strong> NEGRITA <em> CURSIVA<h1>…<h6> TÍTULOS (1 AL 6)
  • 21. ALGUNAS ETIQUETAS PUEDENCONTENER A OTRAS (ANIDACIÓN)<p> Esto  es  un  párrafo   <a>y  esto  es  un  vínculo  dentro   del  párrafo.</a>   Esto  es  sólo  párrafo.</p>Esto  no  es  párrafo  ni  vínculo.
  • 22. Y OTRAS PUEDEN CONTENERSE ASÍ MISMAS<div> Esto  es  una  "div",  y   <div> esto  es  una  sub  "div"   dentro  de  otra </div> y  esto  es  parte  de  la  “div”  grande</div>  
  • 23. ETIQUETA “PARENT” <div> Esto  es  una  "div",  y   ETIQUETA “CHILD” <div> esto  es  una  sub  "div"   dentro  de  otra </div> y  esto  es  parte  de  la   “div”  grande </div>  
  • 24. ...SÍ, EXACTO
  • 25. LA GRACIA DE LAS ETIQUETAS SONSUS ATRIBUTOS<a>Este  vínculo  no  lleva  a  ninguna  parte</a><a  href="http://example.com">Este  vínculo  me  lleva  a  example.com</a>
  • 26. LAS ETIQUETAS PUEDEN TENERMUCHOS ATRIBUTOS<a  href="index.html"  target="_blank">Home</a><img  src="foto.jpg"  title="hover  me!"  width="500"  height="400"/>(OJO, SIEMPRE VAN EN LA ETIQUETA DE APERTURA)
  • 27. href URL DEL LINK src UBICACIÓN DEL RECURSO title LEYENDA AL PASAR EL MOUSEtarget PARA ABRIR EN VENTANA NUEVA type SI ES UN BOTÓN, UN CHECKBOX, UN CAMPO DE TEXTO, ETC.
  • 28. ATRIBUTO VALOR<a  href="http://example.com"><img  src="foto.jpg"  /><p  title="hover  me!"><a  target="_blank"><input  type="button"  />
  • 29. ALGUNOS ATRIBUTOS NONECESITAN UN VALOR<script  async  src="jquery.js"><input  type="text"  required  /><input  type="checkbox"  checked  />
  • 30. LA PÁGINA WEB MÁS BÁSICA DELUNIVERSO ES ASÍ:<html> <head>...</head> <body>...</body></html>
  • 31. <head> <title> TÍTULO DE LA PÁGINA <meta> FORMATO DE CARACTERES E INFO ÚTIL PARA GOOGLE <link> VINCULAR CSS, MOSTRAR FAVICONS, ETC <script> INSERTAR JAVASCRIPT <style> INSERTAR CSS DIRECTAMENTE</head>
  • 32. BLOCKV/SINLINE
  • 33. BLOCK: UNA CAJA QUE OCUPA SUCARRIL PROPIO Block& Block&(predeterminado)& Block&
  • 34. ALGUNAS ETIQUETAS BLOCK <div> "CAJA" NO SEMÁNTICA <p> PÁRRAFO <header> ENCABEZADO DE LA PÁGINA <ul> LISTADO (VIÑETAS) <aside> INFORMACIÓN COMPLEMENTARIA (SIDEBAR)
  • 35. INLINE: FLUYE CON EL TEXTO Y NOTIENE DIMENSIONES Hola, esto es un párrafo, y esto es un elemento inline dentro de este párrafo.
  • 36. <p>Hola,  esto  es  un  párrafo,  <span>  y  esto  es  un  elemento  inline</span>  dentro  de  ese  párrafo.</p>
  • 37. ALGUNAS ETIQUETAS INLINE <span> "FRAGMENTO" NO SEMÁNTICO <a> VÍNCULO <strong> NEGRITA <em> CURSIVA (ÉNFASIS) <time> FECHA/HORA
  • 38. HTML5
  • 39. HTML5 ESHTML.
  • 40. ETIQUETAS HTML5: MEDIA <canvas> LIENZO DE DIBUJO <audio> ADIVINEN <video> ADIVINEN
  • 41. ETIQUETAS HTML5 ESTRUCTURALES <header> ENCABEZADO <aside> INFO COMPLEMENTARIA (SIDEBAR) <footer> PIE DE PÁGINA <hgroup> GRUPO DE ENCABEZADOS <nav> MENÚ DE NAVEGACIÓN
  • 42. ETIQUETAS HTML5 SEMÁNTICAS<article> UNIDAD DE INFORMACIÓN<section> GRUPO DE UNIDADES DE INFORMACIÓN <time> FECHA/HORA
  • 43. CLASS& ID
  • 44. ATRIBUTOS APLICABLES A LO QUE SEA<a  class="button">Home</a><p  id="importante">Párrafo</p><article  class="blog-­‐post"  id="post-­‐528">Hola</article>
  • 45. "MARCAN" EL HTML CON NOMBRESQUE LUEGO USAREMOS EN CSS"A  todos  los  párrafos  con  nombre  de  clase  destacado,  se  les  solicita  usar  fuente  Tahoma  a  la  brevedad  posible." -­‐  CSS
  • 46. CLASS = MUCHAS VECES“PERRO”ID = SÓLO UNA VEZ“FIRULAIS”
  • 47. CLASS = VARIAS A LA VEZ“PERRO COLLIE”ID = SÓLO UNA VEZ“FIRULAIS”
  • 48. CLASS = REUTILIZACIÓN“HEY! USTEDES!”ID = DIFERENCIACIÓN“TÚ, SOLAMENTE TÚ”
  • 49. <a  class="button">Click1</a><a  class="button"  id="submit">Click2</a><a  class="button  small">Click3</a><a  class="button  small"  id="toggle">Click4</a><a  class="button  large">Click5</a>
  • 50. CSSCASCADING STYLE SHEETS
  • 51. SINTAXIS CSS QUÉ SE MODIFICARÁ selector  {  CÓMO SE MODIFICARÁ regla1:valor1; regla2:valor2; ...FIN }
  • 52. SINTAXIS CSS QUÉ SE MODIFICARÁ a  {  CÓMO SE MODIFICARÁ color:green; font:Arial; ...FIN } "A TODAS LAS ETIQUETAS <A>…"
  • 53. SINTAXIS CSS QUÉ SE MODIFICARÁ h1  {  CÓMO SE MODIFICARÁ width:100px; margin:1em; ...FIN } "A TODAS LAS ETIQUETAS <H1>…"
  • 54. CSS TE CAMBIARÁ LA VIDA SIN CSS :(a  {   color:red;}
  • 55. SINTAXIS DE SELECTORES SELECTOR HTML perro <perro> .gris class="gris"#firulais id="firulais"
  • 56. SINTAXIS DE SELECTORES SELECTOR HTMLarticle <article>.button class="button"#toggle id="toggle"
  • 57. SINTAXIS DE SELECTORES SELECTOR HTML perro.gris <perro  class="gris"> perro#firulais <perro   id="firulais">perro.gris.maltes <perro  class="gris   maltes">
  • 58. SELECTOR HTML.form-­‐item <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 59. SELECTOR HTMLdiv.form-­‐item <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 60. SELECTOR HTML .form <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 61. SELECTOR HTML.form.item <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 62. SELECTOR HTML #submit <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 63. SELECTOR HTMLdiv  input <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item">OJO: ESPACIO <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 64. SELECTOR HTML div  div <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 65. SELECTOR HTMLa,  .item,  input <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
  • 66. MODELO DE CAJA OUTLINE
  • 67. header  {   margin-­‐top:100px; margin-­‐right:50px; margin-­‐bottom:40px; margin-­‐left:90px;}
  • 68. header  {   margin:100px  50px   40px  90px; }...LA MAGIA DEL SHORTAND
  • 69. footer  {   padding-­‐top:40px; padding-­‐right:10px; padding-­‐bottom:40px; padding-­‐left:10px;}
  • 70. footer  {   padding:40px  10px; }...LA MAGIA DEL SHORTAND
  • 71. aside  {   border-­‐color:#ffc; border-­‐style:solid; border-­‐width:2px;}
  • 72. aside  {   border:2px  solid  #ffc; }...LA MAGIA DEL SHORTAND
  • 73. FRAME...WORKS?
  • 74. HTML = BOILERPLATECSS = BOOTSTRAPJS = JQUERY
  • 75. LENGUAJES DE ABSTRACCIÓN/PREPROCESADORESHTML = HAMLCSS = SASSJS = COFFEESCRIPT
  • 76. (GRACIAS, RUBY)
  • 77. ABSTRACCIÓNHAML HTML.container <div  class="container"> %strong <strong>  Hola  </strong> Hola <a  href="#"> %a{:href=>"#"} Click  here Click  here </a> #featured <div  id="featured"> %em  Look! <em>Look!  </em> </div> </div>
  • 78. ABSTRACCIÓNSASS CSS.container .container  { width:  300px width:  300px; color:  red color:  red; a } border:  none .container  a  { .item border:  none; cursor:  pointer } .container  .item  { cursor:  pointer; }
  • 79. BORRECÓDIGO.
  • 80. GRACIAS. slideshare.net/fondiuÍCONOS: FORTAWESOME.GITHUB.COM/FONT-AWESOME