Od jQuery do HTML5 i CSS3

5,180 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,180
On SlideShare
0
From Embeds
0
Number of Embeds
1,387
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Od jQuery do HTML5 i CSS3

    1. 1. OD JQUERYDO HTML5 i CSS3
    2. 2. HTML5PANTS
    3. 3. web 2.0?
    4. 4. Ajax?
    5. 5. jQuery?
    6. 6. to już przeszłość...
    7. 7. CSS2HTML JavaScript Flash
    8. 8. HTML5 JavaScript CSS3
    9. 9. <marquee /> -> JavaScript -> CSS3
    10. 10. CSS3 > Flash/JavaScript
    11. 11. http://www.flickr.com/photos/red5standingby/975389672/sizes/l/
    12. 12. $.animate?
    13. 13. $.animate? flickr.com/photos/athomeinscottsdale/3279949186/sizes/l/
    14. 14. CSS3 Transitions
    15. 15. Working Draft
    16. 16. p { [-moz,-webkit,-o]transition: własność czas_trwania typ_opóźnienia}
    17. 17. p { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;}
    18. 18. p { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;}p:hover { opacity: 0.2;}
    19. 19. p { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;}p:hover { opacity: 0.2;}
    20. 20. p { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;}p:hover { opacity: 0.2;}
    21. 21. p { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out;}p:hover { opacity: 0.2;}
    22. 22. CSS3 Animations
    23. 23. Working Draft
    24. 24. @keyframes nazwa_animacji { [klatka]% { własność: wartość; } [klatka]% { własność: wartość; }}.foobar:hover { animation-name: nazwa_animacji; animation-duration: 2.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-delay: 2s;}
    25. 25. @-webkit-keyframes nazwa_animacji { 0% { left: 10px; } 30% { left: 50px; } 60% { left: 90px; } 100% { left: 130px; }}.foobar:hover { -webkit-animation-name: nazwa_animacji; -webkit-animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
    26. 26. @-webkit-keyframes nazwa_animacji { 0% { left: 10px; } 30% { left: 50px; } 60% { left: 90px; } 100% { left: 130px; }}.foobar:hover { -webkit-animation-name: nazwa_animacji; -webkit-animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
    27. 27. @-webkit-keyframes nazwa_animacji { 0% { left: 10px; } 30% { left: 50px; } 60% { left: 90px; } 100% { left: 130px; }}.foobar:hover { -webkit-animation-name: nazwa_animacji; -webkit-animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
    28. 28. @-webkit-keyframes nazwa_animacji { 0% { left: 10px; } 30% { left: 50px; } 60% { left: 90px; } 100% { left: 130px; }}.foobar:hover { -webkit-animation-name: nazwa_animacji; -webkit-animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
    29. 29. @-webkit-keyframes nazwa_animacji { 0% { left: 10px; } 30% { left: 50px; } 60% { left: 90px; } 100% { left: 130px; }}.foobar:hover { -webkit-animation-name: nazwa_animacji; -webkit-animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
    30. 30. Czy ktoś widział JavaScript?
    31. 31. Formularze
    32. 32. <input placeholder="Szukaj">
    33. 33. <input placeholder="Szukaj">
    34. 34. Więcej?
    35. 35. <input required="true"><input autofocus><input type="number" min="0"max="10" step="2" value="6"><input type=”range”><input type=”email”>
    36. 36. <input type="search"><input type=”date”>
    37. 37. http://articles.sitepoint.com/article/html-5-snapshot-2009/3
    38. 38. Moja aplikacja potrafi wybierać kolorki i jestem z niej dumny („ ”) Ty, nie uwierzysz, znalazłem fajny plugin do jQuery, no bez kitu, tylko 15kb!
    39. 39. Moja aplikacja potrafi wybierać kolorki i jestem z niej dumny („ ”) Ty, nie uwierzysz, znalazłem fajny plugin do jQuery, no bez kitu, tylko 15kb!
    40. 40. <input type=”color”>
    41. 41. Wybieranie kolorków w najnowszej Operze 11, sprawdź!
    42. 42. Bez pluginów, pełna satysfakcja
    43. 43. Bez pluginów, pełna satysfakcja
    44. 44. jQuery!
    45. 45. co?!
    46. 46. HTML5 i CSS3!
    47. 47. Jest tego więcej!
    48. 48. kilka obrazków jako tło elementu gradienty contenteditable=”true” <audio> <video> <canvas> querySelectorAll @font-face border-radius border-image
    49. 49. Czego nie wymieniłem?
    50. 50. caniuse.com
    51. 51. diveintohtml5.org
    52. 52. css3.pl
    53. 53. Dzięki!
    54. 54. Damian Wielgosik ferrante.pl varjs.com

    ×