• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Od jQuery do HTML5 i CSS3
 

Od jQuery do HTML5 i CSS3

on

  • 4,559 views

 

Statistics

Views

Total Views
4,559
Views on SlideShare
3,266
Embed Views
1,293

Actions

Likes
3
Downloads
0
Comments
0

7 Embeds 1,293

http://ferrante.pl 1207
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 Od jQuery do HTML5 i CSS3 Presentation Transcript

  • OD JQUERYDO HTML5 i CSS3
  • HTML5PANTS
  • web 2.0?
  • Ajax?
  • jQuery?
  • to już przeszłość...
  • CSS2HTML JavaScript Flash
  • HTML5 JavaScript CSS3
  • <marquee /> -> JavaScript -> CSS3
  • CSS3 > Flash/JavaScript
  • http://www.flickr.com/photos/red5standingby/975389672/sizes/l/
  • $.animate?
  • $.animate? flickr.com/photos/athomeinscottsdale/3279949186/sizes/l/
  • CSS3 Transitions
  • Working Draft
  • p { [-moz,-webkit,-o]transition: własność czas_trwania typ_opóźnienia}
  • 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 { -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;}
  • 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;}
  • 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;}
  • 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;}
  • CSS3 Animations
  • Working Draft
  • @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;}
  • @-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;}
  • @-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;}
  • @-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;}
  • @-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;}
  • @-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;}
  • Czy ktoś widział JavaScript?
  • Formularze
  • <input placeholder="Szukaj">
  • <input placeholder="Szukaj">
  • Więcej?
  • <input required="true"><input autofocus><input type="number" min="0"max="10" step="2" value="6"><input type=”range”><input type=”email”>
  • <input type="search"><input type=”date”>
  • http://articles.sitepoint.com/article/html-5-snapshot-2009/3
  • Moja aplikacja potrafi wybierać kolorki i jestem z niej dumny („ ”) Ty, nie uwierzysz, znalazłem fajny plugin do jQuery, no bez kitu, tylko 15kb!
  • Moja aplikacja potrafi wybierać kolorki i jestem z niej dumny („ ”) Ty, nie uwierzysz, znalazłem fajny plugin do jQuery, no bez kitu, tylko 15kb!
  • <input type=”color”>
  • Wybieranie kolorków w najnowszej Operze 11, sprawdź!
  • Bez pluginów, pełna satysfakcja
  • Bez pluginów, pełna satysfakcja
  • jQuery!
  • co?!
  • HTML5 i CSS3!
  • Jest tego więcej!
  • kilka obrazków jako tło elementu gradienty contenteditable=”true” <audio> <video> <canvas> querySelectorAll @font-face border-radius border-image
  • Czego nie wymieniłem?
  • caniuse.com
  • diveintohtml5.org
  • css3.pl
  • Dzięki!
  • Damian Wielgosik ferrante.pl varjs.com