Web2013
description
Transcript of Web2013
![Page 1: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/1.jpg)
TRENDS IN WEB TECHNOLOGY ANDDESIGN
2013 EDITION
![Page 2: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/2.jpg)
WHAT IS THE FUTURE?
![Page 3: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/3.jpg)
THE FUTURE IS HERE…IT’S JUST NOT VERY EVENLYDISTRIBUTED
WIL
LIA
M G
IBS
ON
![Page 4: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/4.jpg)
ANY SUFFICIENTLY ADVANCED TECHNOLOGY
IS INDISTINGUISHABLEFROM MAGIC
ARTHUR C. CLARKE
![Page 5: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/5.jpg)
ASYMMETIC INFORMATIONIS FROM THE BAD OLD DAYSTODAY WE LIVE IN A WORLD
OF INFORMATION PARITYor at least we’re getting there…
![Page 6: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/6.jpg)
BEFORE WE LOOK AHEADWE’RE GOING TO LOOK BACK
warning – some trends look larger in retrospect
![Page 7: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/7.jpg)
RESPONSIVEDESIGN
![Page 8: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/8.jpg)
PARALAX
![Page 9: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/9.jpg)
![Page 10: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/10.jpg)
HTML5FINALLY JOINED
THE PARTY
![Page 11: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/11.jpg)
PREDICTION IS VERY DIFFICULT, ESPECIALLYABOUT THE FUTURE
NIELS BOHR
![Page 12: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/12.jpg)
YMMV
![Page 13: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/13.jpg)
THIS IS THE YEAR YOU LEARN TO CODE
![Page 14: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/14.jpg)
IN THE EMERGING, HIGHLY PROGRAMMED
LANDSCAPE AHEAD YOU WILL EITHER
CREATE THE SOFTWARE OR YOU WILL
BE THE SOFTWARE DOUGLAS RUSHKOFF
![Page 15: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/15.jpg)
"Now that much of what Rushkoff has predicted over the years has come to pass, he is uniquely qualified to write what may be one
of the most important and instructive books of our times. Program or be
Programmed: Ten Commands for a Digital Age. Rather than predicting that
the sky is falling, Rushkoff gives practical and actionable advice on
how to turn those biases into advantages.“
- Wired Magazine
![Page 16: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/16.jpg)
he's not telling us about a career change into building websites. He's saying something more profound. He's saying:
“My resolution is to learn to think in a modern way.“
– Tom Armitage, BBC
![Page 17: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/17.jpg)
![Page 18: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/18.jpg)
Judge Alsup told the court he had learned to code in Java for the trial — implying that he knew other languages as well — and he said that he had written some of the infringing code at least a hundred times since Oracle filed its suit in August 2010. “I can doit. You can do it. It’s so simple” He said, adding that it takes Less than five minutes.
![Page 19: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/19.jpg)
The "everyone should learn to code" movement is wrong because it falsely equates coding with essential life skills like reading, writing, and math. Please don't advocate learning to code just for the sake of learning how to code. - Jeff Atwood
![Page 20: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/20.jpg)
THE PAGE IS DEAD*LONG LIVE THE
SCREEN
![Page 21: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/21.jpg)
THE PAGE IS ABAD, AWFUL TERRIBLE METAPHOR FOR THE WEB
![Page 22: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/22.jpg)
NOBODY CARES ABOUT THE FOLD
ANYMORE
![Page 23: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/23.jpg)
![Page 24: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/24.jpg)
LONGVERTICAL SCROLLING
+PURE HORIZONTAL SCROLLING
= AGE OF THE SCREEN, BABY
![Page 25: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/25.jpg)
SMALL PHONES, BIG PHONES, SMALL TABLETS, MEDIUM TABLETS, BIG TABLETS, NETBOOKS, ULTRABOOKS, NOTEBOOKS, MONITORS, FLATSCREENS & PROJECTORS. PAGES DON’T MAKE SENSESCREENS MAKE SENSE
![Page 26: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/26.jpg)
NO BROWSER LEFT BEHIND
MODERN BROWSERS
FOR ALL*
![Page 27: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/27.jpg)
The Web is the most hostile software
engineering environment
imaginable
Douglas C
rockford
![Page 28: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/28.jpg)
![Page 29: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/29.jpg)
IE 10 RELEASE PREVIEW 2012
IE 6 DEMISED 2014
![Page 30: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/30.jpg)
CHROME FRAMEIE PLUG INJS 10X FASTER
![Page 31: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/31.jpg)
THE END* OF FLASHHTML5 IS ALL GROWN UP
![Page 32: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/32.jpg)
![Page 33: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/33.jpg)
HTML5 MAKES RICH MEDIA A FIRST CLASS CITIZEN OF THE WEB
![Page 34: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/34.jpg)
HTML5 HAS SEMANTIC ELEMENTS
<section><article>
<header> <nav>
![Page 35: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/35.jpg)
HTML5 IS BUILT FOR APIS, DOM & JAVASCRIPT
![Page 36: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/36.jpg)
![Page 37: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/37.jpg)
HTML 5 TIMELINE2012.RELEASE
CANDIDATE 2013.CALL FOR
REVIEW 2014.RECOMMENDATION
![Page 38: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/38.jpg)
![Page 39: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/39.jpg)
4,043 software developers surveyed in
Sept 2012 regarding their usage, attitudes
and expectations of HTML5
![Page 40: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/40.jpg)
![Page 41: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/41.jpg)
![Page 42: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/42.jpg)
![Page 43: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/43.jpg)
![Page 44: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/44.jpg)
HTML5 WILL REPLACE FLASH,SILVERLIGHT &NATIVE APPS
PROBABLY NOT THIS YEAR…BUT SOON…SOON…
![Page 45: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/45.jpg)
“HTML5 LETS WEB DEVELOPERS
CREATE ADVANCED GRAPHICS,
TYPOGRAPHY, ANIMATIONS AND
TRANSITIONS WITHOUT RELYING ON
THIRD-PARTY PLUG-INS, LIKE FLASH”
STEVE JOBS
![Page 46: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/46.jpg)
“THE AJAX REVOLUTION WAS A HACK, AND WITH MODERN HTML5 BROWSERS WE FINALLY HAVE A FANTASTIC RUNTIME”
DION ALMAERCO-FOUNDER OF AJAXIAN
![Page 47: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/47.jpg)
CSS3 GETS
DOWN WITH IT’S BAD SELF
![Page 48: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/48.jpg)
“THERE IS NO SUCH THING AS CSS4 THERE HAS NEVER BEEN A CSS4THERE WILL NEVER BE A CSS4CSS4 IS NOT A THING THAT EXISTS
THE TERM ‘CSS3’ REFERS TO EVERYTHING PUBLISHED
AFTER CSS 2.1”
TAB ATKINS JR.CHROME TEAMCSS WORKING GROUP
![Page 49: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/49.jpg)
LAYOUT BECOMES SANE
UNPREFIXED FLEX BOXPREFIXED GRID LAYOUT
NATIVE VERTICAL CENTERING
![Page 50: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/50.jpg)
WE DON’T NEED NO STINKING PREFIX!
GRADIENTSCALC()
TRANSITIONSANIMATIONSTRANSFORMS
![Page 51: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/51.jpg)
ALL YOUR PHOTOSHOP ARE BELONG TO US
CSS FILTERS GET SUPPORT IN NON-WEBKIT BROWSERSGREYSCALEBLURRINGCOLOUR DODGE
![Page 52: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/52.jpg)
CSS GETS IT’S MODERNIZR ON
@SUPPORTS ALLOWS AUTHORS TO TEST FOR CSS SUPPORT & APPLY RULES DEPENDING ON
THE RESULT
![Page 53: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/53.jpg)
CSS GETS IT’S SASS ON
CSS VARIABLES SHOULD UNPREFIX IN WEBKIT
SOON AND ARE BEING IMPLEMENTED IN FIREFOX
RIGHT NOW
![Page 54: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/54.jpg)
CSS GETS IT’S JQUERY ON
SELECTORS NOW HAVE ELEMENT.FIND() TO
COMPLEMENT ELEMENT.QUERYSELECTO
R()
![Page 55: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/55.jpg)
CSS GETS IT’S ANIMATION ON
WEB ANIMATIONS API + JS API
FOR CREATING BROWSER-ANIMATIONS
(LIKE JQUERY'S .ANIMATE()
THAT ARE AS SMOOTH AND JANK-FREE
![Page 56: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/56.jpg)
MULTISCREENIS
THE NEW
MOBILE
![Page 57: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/57.jpg)
GOING MOBILE DOESN’T DIFFERENTIATE ANYMORE. GOING MOBILE IS
TABLE STAKES FOR DOING
BUSINESS ONLINE
![Page 58: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/58.jpg)
![Page 59: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/59.jpg)
![Page 60: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/60.jpg)
![Page 61: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/61.jpg)
![Page 62: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/62.jpg)
YOU NEED
TOGROW MOBILETALENT
YESTERDAY
![Page 63: Web2013](https://reader035.fdocuments.net/reader035/viewer/2022062511/54bb0c2f4a7959800f8b4572/html5/thumbnails/63.jpg)
I used to think the browser was the most hostile programming
environment ever devised,
but then I discovered programming for
mobile
Douglas C
rockford