• Save
Od jQuery do HTML5 i CSS3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Od jQuery do HTML5 i CSS3

on

  • 4,739 views

 

Statistics

Views

Total Views
4,739
Views on SlideShare
3,399
Embed Views
1,340

Actions

Likes
3
Downloads
0
Comments
0

7 Embeds 1,340

http://ferrante.pl 1254
http://speakerrate.com 68
http://www.linkedin.com 10
http://grprojekt.com 4
http://www.netvibes.com 2
http://static.slidesharecdn.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. OD JQUERYDO HTML5 i CSS3
  • 2. HTML5PANTS
  • 3. web 2.0?
  • 4. Ajax?
  • 5. jQuery?
  • 6. to już przeszłość...
  • 7. CSS2HTML JavaScript Flash
  • 8. HTML5 JavaScript CSS3
  • 9. <marquee /> -> JavaScript -> CSS3
  • 10. CSS3 > Flash/JavaScript
  • 11. http://www.flickr.com/photos/red5standingby/975389672/sizes/l/
  • 12. $.animate?
  • 13. $.animate? flickr.com/photos/athomeinscottsdale/3279949186/sizes/l/
  • 14. CSS3 Transitions
  • 15. Working Draft
  • 16. p { [-moz,-webkit,-o]transition: własność czas_trwania typ_opóźnienia}
  • 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. 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. 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. 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. 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. CSS3 Animations
  • 23. Working Draft
  • 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. @-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. @-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. @-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. @-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. @-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. Czy ktoś widział JavaScript?
  • 31. Formularze
  • 32. <input placeholder="Szukaj">
  • 33. <input placeholder="Szukaj">
  • 34. Więcej?
  • 35. <input required="true"><input autofocus><input type="number" min="0"max="10" step="2" value="6"><input type=”range”><input type=”email”>
  • 36. <input type="search"><input type=”date”>
  • 37. http://articles.sitepoint.com/article/html-5-snapshot-2009/3
  • 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. 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. <input type=”color”>
  • 41. Wybieranie kolorków w najnowszej Operze 11, sprawdź!
  • 42. Bez pluginów, pełna satysfakcja
  • 43. Bez pluginów, pełna satysfakcja
  • 44. jQuery!
  • 45. co?!
  • 46. HTML5 i CSS3!
  • 47. Jest tego więcej!
  • 48. kilka obrazków jako tło elementu gradienty contenteditable=”true” <audio> <video> <canvas> querySelectorAll @font-face border-radius border-image
  • 49. Czego nie wymieniłem?
  • 50. caniuse.com
  • 51. diveintohtml5.org
  • 52. css3.pl
  • 53. Dzięki!
  • 54. Damian Wielgosik ferrante.pl varjs.com