Web2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Web2013

  • 617 views
Uploaded on

 

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

Views

Total Views
617
On Slideshare
613
From Embeds
4
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
1
Likes
0

Embeds 4

https://twitter.com 4

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
  • http://game-icons.net/icons/lorc/originals/png/vintage-robot.pnghttp://game-icons.net/icons/lorc/originals/png/jetpack.png
  • http://en.wikiquote.org/wiki/William_Gibson
  • http://en.wikipedia.org/wiki/Clarke's_three_laws
  • http://www.cbc.ca/books/2013/01/birth-of-a-salesman-daniel-pink-on-why-everyones-a-salesperson.html
  • http://th07.deviantart.net/fs9/PRE/i/2006/004/a/9/TARDIS_by_Ambient_Lullaby.jpg
  • http://www.webdesignshock.com/wp-content/uploads/2012/03/responsive_web_design.png
  • http://www.zensorium.com/tinke/
  • http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png
  • http://designbyash.com/images/notebook/EP-gas-gauge.png
  • http://game-icons.net/icons/lorc/originals/png/crystal-ball.png
  • http://eatagency.com/files/2012/about_doug_rushkoff.png
  • http://www.bbc.co.uk/news/technology-20764273
  • http://www.codeyear.com/
  • http://www.wired.com/wiredenterprise/2012/05/google-schmidt-page-damages/
  • http://www.codinghorror.com/blog/2012/05/please-dont-learn-to-code.html
  • http://www.ribbonfarm.com/2009/07/01/the-rhetoric-of-the-hyperlink/
  • http://www.ribbonfarm.com/2009/07/01/the-rhetoric-of-the-hyperlink/
  • http://www.ribbonfarm.com/2009/07/01/the-rhetoric-of-the-hyperlink/
  • http://i645.photobucket.com/albums/uu177/cyberlarry7/1-20000-Folded-Newspaper.jpg?t=1262507646https://www.drugfreeactionalliance.org/files/f1-not-equal-sign.jpghttp://app.e.intellog.com/image/overview-gallery3-20090828.png
  • http://mashable.com/2010/01/13/conceptual-metaphors/http://www.ribbonfarm.com/2009/07/01/the-rhetoric-of-the-hyperlink/
  • http://shop.oreilly.com/product/9780596517748/ViewLarger.do?sortby=publicationDate
  • http://thenounproject.com/noun/headphones/#icon-No7213http://thenounproject.com/noun/video/#icon-No5068http://thenounproject.com/noun/picture/#icon-No8183http://thenounproject.com/noun/calculator/#icon-No3389http://en.wikipedia.org/wiki/File:SVG-logo.svg#filehistory
  • http://thenounproject.com/noun/headphones/#icon-No7213http://thenounproject.com/noun/video/#icon-No5068http://thenounproject.com/noun/picture/#icon-No8183http://thenounproject.com/noun/calculator/#icon-No3389http://en.wikipedia.org/wiki/File:SVG-logo.svg#filehistory
  • http://thenounproject.com/noun/headphones/#icon-No7213http://thenounproject.com/noun/video/#icon-No5068http://thenounproject.com/noun/picture/#icon-No8183http://thenounproject.com/noun/calculator/#icon-No3389http://en.wikipedia.org/wiki/File:SVG-logo.svg#filehistory
  • http://thenounproject.com/noun/headphones/#icon-No7213http://thenounproject.com/noun/video/#icon-No5068http://thenounproject.com/noun/picture/#icon-No8183http://thenounproject.com/noun/calculator/#icon-No3389http://en.wikipedia.org/wiki/File:SVG-logo.svg#filehistory
  • http://www.digitaltrends.com/wp-content/uploads/2012/10/steve-jobs-1.jpg
  • http://readwrite.com/files/files/files/images/Dion%252520Almaer.jpg
  • http://www.xanthir.com/b4Ko0https://lh3.googleusercontent.com/-wDptUY9_0j8/AAAAAAAAAAI/AAAAAAAAAKE/1AIj0HEKQsI/s250-c-k/photo.jpg
  • http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  • http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  • http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  • http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Transcript

  • 1. 2013 EDITIONTRENDS IN WEBTECHNOLOGY ANDDESIGN
  • 2. WHAT ISTHE FUTURE?
  • 3. WILLIAM GIBSON THE FUTURE IS HERE… IT‘S JUST NOT VERY EVENLY DISTRIBUTED
  • 4. ANY SUFFICIENTLYADVANCED TECHNOLOGY IS INDISTINGUISHABLE FROM MAGIC ARTHUR C. CLARKE
  • 5. ASYMMETIC INFORMATIONIS FROM THE BAD OLD DAYS TODAY WE LIVE IN A WORLD OF INFORMATION PARITY or at least we‘re getting there…
  • 6. BEFORE WE LOOK AHEADWE‘RE trends look largerTO LOOK BACKwarning – some GOING in retrospect
  • 7. RESP O NSIV EDES
  • 8. PARA LAX
  • 9. HTML5FINALLY JOINED THE PARTY
  • 10. PREDICTION IS VERYDIFFICULT,ESPECIALLYABOUTTHE FUTURE NIELS BOHR
  • 11. YMMV
  • 12. THIS IS THE YEARYOU LEARN TOCODE
  • 13. IN THE EMERGING, HIGHLY PROGRAMMEDLANDSCAPE AHEAD YOU WILL EITHERCREATE THE SOFTWARE DOUGLAS RUSHKOFF OR YOU WILL BE THE SOFTWARE
  • 14. "Now that much of what Rushkoff has predicted overthe years has come to pass, he is uniquely qualified to most write what may be one of theimportant and instructivebooks of our times. Program or be Programmed: Ten Commands for aDigital Age. Rather than predicting that the sky Rushkoff gives is falling, practical and actionable advice on how to turn those biases into advantages.― - Wired Magazine
  • 15. hes not telling us about a career change into building websites.Hes saying something more profound. Hes saying: ―My resolution is to learn to think in a modern way.― – Tom Armitage, BBC
  • 16. Judge Alsup told the court he hadlearned to code in Java for the trial —implying that he knew other languagesas well — and he said that he hadwritten some of the infringing code atleast a hundred times since Oraclefiled its suit in August 2010. ―I can doit. You can do it. It‘s so simple‖He said, adding that it takesLess than five minutes.
  • 17. The "everyone should learn to code" movement is wrongbecause it falsely equates coding with essential life skills likereading, writing, and math. Please dont advocate learning tocode just for the sake of learning how to code. - Jeff Atwood
  • 18. THE PAGE IS DEAD* LONG LIVE THESCREEN
  • 19. THE PAGE IS ABAD, AWFULTERRIBLEM E TA P H O RFOR THE
  • 20. NOBODY CARES ABOUT THEFOLD
  • 21. LONGVERTICAL SCROLLING+PUREHORIZONTAL SCROLLING= AGE OF THE
  • 22. SMALL PHONES, BIGPHONES, SMALLTABLETS, MEDIUM TABLETS, BIGTABLETS, NETBOOKS, ULTRABOOKS, NOTEBOOKS, MONITORS, FLATSCREENS & PROJECTORS.PAGES DON‘T MAKE SENSESCREENS MAKE SENSE
  • 23. NO BROWSER LEFT BEHIND MODERN BROWSERS FOR ALL*
  • 24. The Web is the most Douglas Crockford hostile softwareengineering environment imaginable
  • 25. IE 10 RELEASE PREVIEW 2012 IE 6 DEMISED 2014
  • 26. CHROME FRAMEIE PLUG INJS 10X FASTER
  • 27. THE END* OF FLASHHTML5 IS ALL GROWN UP
  • 28. HTML5 MAKESRICH MEDIAA FIRST CLASSCITIZEN OF THE WEB
  • 29. HTML5 HASSEMANTIC ELEMENTS <section> <article> <header> <nav>
  • 30. HTML5 IS BUILTFOR APIS, DOM& JAVASCRIPT
  • 31. HTML 5 TIMELINE 2012.RELEASECANDIDATE 2013.CALL FORREVIEW 2014.RECOMMENDATION
  • 32. 4,043 software developers surveyed in Sept 2012 regarding their usage, attitudes and expectations of HTML5
  • 33. HTML5 WILLREPLACEFLASH,SILVERLIGHT &NATIVE APPSPROBABLY NOT THIS YEAR…BUT SOON…SOON…
  • 34. ―HTML5 LETS WEB DEVELOPERS CREATE ADVANCEDGRAPHICS, TYPOGRAP HY, ANIMATIONS AND TRANSITIONSWITHOUT RELYING ON THIRD-PARTY PLUG-STEVE JOBS INS, LIKE FLASH‖
  • 35. ―THE AJAXREVOLUTION WAS AHACK, AND WITHMODERN HTML5BROWSERS WEFINALLY HAVE AFANTASTIC RUNTIME‖ DION ALMAER CO-FOUNDER OF AJAXIAN
  • 36. CSS3 GETS DOWNWITH IT‘SBAD SELF
  • 37. ―THERE IS NO SUCH THING ASCSS4 THERE HAS NEVER BEENA CSS4THERE WILL NEVER BE A CSS4CSS4 IS NOT A THING THATEXISTS TAB ‗CSS3‘ THE TERM ATKINS JR. REFERS TO CHROME TEAM EVERYTHING PUBLISHED CSS WORKING GROUP AFTER CSS 2.1‖
  • 38. LAYOUT BECOMES SANE UNPREFIXED FLEX BOX PREFIXED GRID LAYOUT NATIVE VERTICAL
  • 39. WE DON‘T NEEDNO STINKING PREFIX! GRADIENTS CALC() TRANSITIONS ANIMATIONS TRANSFORMS
  • 40. ALL YOUR PHOTOSHOPARE BELONG TO USCSS FILTERS GETSUPPORT INNON-WEBKIT BROWSERSGREYSCALEBLURRING
  • 41. CSS GETS IT‘SMODERNIZR ON @SUPPORTS ALLOWS AUTHORS TO TEST FOR CSS SUPPORT & APPLY RULES DEPENDING ON THE RESULT
  • 42. CSS GETS IT‘S SASS ON CSS VARIABLES SHOULD UNPREFIX IN WEBKIT SOON AND ARE BEING IMPLEMENTED IN FIREFOX RIGHT NOW
  • 43. CSS GETS IT‘S JQUERYON SELECTORS NOW HAVE ELEMENT.FIND() TO COMPLEMENT ELEMENT.QUERYSELECT OR()
  • 44. CSS GETS IT‘S ANIMATIONONWEB ANIMATIONS API + JS API FOR CREATING BROWSER-ANIMATIONS (LIKE JQUERYS
  • 45. MULTISCREEN IS THE NEW MOBILE
  • 46. GOING MOBILEDOESN‘T DIFFERENTIATEANYMORE. GOINGMOBILE IS TABLE STAKES FOR DOING BUSINESS ONLINE
  • 47. YOU NEED TO GROW MOBILE TALENTYESTERDAY
  • 48. I used to think the browser Douglas Crockford was the most hostileprogramming environment ever devised, but then I discovered programming for mobile
  • 49. Sean Yo @seanyo Seanyo.came@seanyo.ca