Date post: | 06-May-2015 |
Category: |
Design |
Upload: | harvard-web-working-group |
View: | 3,193 times |
Download: | 0 times |
PROTOTYPINGHELPING TO TAKE THE SUCK AWAY
MIKE KIVIKOSKIDECEMBER 8, 2010HARVARD WEB WORKING GROUP
WHAT IS PROTOTYPING?WHY DON’T ALL COMPANIES PROTOTYPE?MYTHS.BENEFITS.TIPS ON BEGINNING TO PROTOTYPE.DEVELOPMENT SUGGESTIONS.QUESTIONS.HIGH FIVES.*
TODAYWHAT WE WILL BE DISCUSSING
*FOR ALL PARTIES INTERESTED.
PROTOTYPING?WHAT IS
A PROTOTYPE IS AN ORIGINAL TYPE, FORM, OR INSTANCE OF SOMETHING SERVING AS A TYPICAL EXAMPLE, BASIS OR STANDARD FOR OTHER THINGS OF THE SAME CATEGORY.
HTTP://EN.WIKIPEDIA.ORG/WIKI/PROTOTYPING
PROTOTYPING?WHAT IS
A QUICK & EFFICIENT WAY TO USE, DEMO AND TEST OUR SITES AND APPLICATIONS.
HOW WE’LL BE USING THE TERM TODAY.
PROTOTYPING?WHAT IS
PROTOTYPE?WHY DON’T ALL COMPANIES
PROJECTS MAY BE TOO SMALL.PROTOTYPE?WHY DON’T ALL COMPANIES
PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.DON’T REALIZE THE BENEFITS.
PROTOTYPE?WHY DON’T ALL COMPANIES
PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.THINK THE PROCESS IS COMPLICATED.
PROTOTYPE?WHY DON’T ALL COMPANIES
PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.
PROTOTYPE?WHY DON’T ALL COMPANIES
MYTHS
WRITING THE SAME CODE TWICE.MYTHS
WRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.COSTS TOO MUCH MONEY.
MYTHS
WRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.PROJECT SCHEDULE WILL BE TOO LONG.PROJECT SCHEDULE WILL BE TOO LONG.
MYTHS
WRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.PROJECT SCHEDULE WILL BE TOO LONG.
MYTHS
BENEFITS
TEST FEATURES QUICKER.BENEFITS
TEST FEATURES QUICKER.DEMO IN BROWSER.DEMO IN BROWSER.
BENEFITS
TEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.CLEANER CODE.
BENEFITS
TEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT. ABILITY TO EXPERIMENT.
BENEFITS
TEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT. IMPROVES TEAM MORALE.IMPROVES TEAM MORALE.
BENEFITS
TEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT. IMPROVES TEAM MORALE.
BENEFITS
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*
*NOT AN EXCUSE TO BE SLOPPY!
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.
*NOT AN EXCUSE TO BE SLOPPY!
IF EASIER, BUILD STUFF ON CLIENT SIDE.
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).
*NOT AN EXCUSE TO BE SLOPPY!
USE REAL DATA (NOT THE IPSUM).
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).
*NOT AN EXCUSE TO BE SLOPPY!
BUILD IN 1 BROWSER (WEBKIT).
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.
*NOT AN EXCUSE TO BE SLOPPY!
NO ATTACHMENTS, BE HEARTLESS.
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.CREATE GLOBAL CLASSES (.right, .left).
*NOT AN EXCUSE TO BE SLOPPY!
CREATE GLOBAL CLASSES (.right, .left).
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.CREATE GLOBAL CLASSES (.right, .left).START BUILDING.
*NOT AN EXCUSE TO BE SLOPPY!
START BUILDING.
PROTOTYPEHOW YOU CAN BEGIN TO
CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.CREATE GLOBAL CLASSES (.right, .left).START BUILDING.
*NOT AN EXCUSE TO BE SLOPPY!
PROTOTYPEHOW YOU CAN BEGIN TO
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;
RGBabackground-color: RGBa(200,0,200,0.5);
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);
TRANSITIONStransition: color 0.5s linear;
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;
BOX-SHADOWbox-shadow: 0 0 3px #ccc;
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;
COLUMNScolumn-count:3; column-gap:20px;
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;COLUMNScolumn-count:3; column-gap:20px;
MULTIPLE BACKGROUNDSbackground: url(img1.jpg), url(img2.jpg);
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;COLUMNScolumn-count:3; column-gap:20px;MULTIPLE BACKGROUNDSbackground: url(img1.jpg), url(img2.jpg);
CHECK OUT MARC AMOS’S CSS3 PRESENTATION FOR MORE INFO.
DEVELOPMENTSUGGESTIONS TO HELP WITH
TYPEDEVELOPMENTSUGGESTIONS TO HELP WITH
TYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
DEVELOPMENTSUGGESTIONS TO HELP WITH
TYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
TYPEKITSUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.
DEVELOPMENTSUGGESTIONS TO HELP WITH
TYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
TYPEKITSUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.
CHECK OUT KYLE FIEDLER’S AND/OR PAUL IRISH’S WEB TYPOGRAPHY PRESENTATIONS FOR MORE INFO.
DEVELOPMENTSUGGESTIONS TO HELP WITH
JQUERYDEVELOPMENTSUGGESTIONS TO HELP WITH
JQUERYMANIPULATE THE DOM.
DEVELOPMENTSUGGESTIONS TO HELP WITH
JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.
DEVELOPMENTSUGGESTIONS TO HELP WITH
MIMIC SERVER SIDE FUNCTIONALITY.
JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.
DEVELOPMENTSUGGESTIONS TO HELP WITH
PARSE ANY DATA FILES.
JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF PLUGINS TO USE.
DEVELOPMENTSUGGESTIONS TO HELP WITH
TONS OF PLUGINS TO USE.
JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF PLUGINS TO USE.
DEVELOPMENTSUGGESTIONS TO HELP WITH
FRAMEWORKDEVELOPMENTSUGGESTIONS TO HELP WITH
FRAMEWORKBEGIN TO BUILD YOUR OWN.
DEVELOPMENTSUGGESTIONS TO HELP WITH
FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.
DEVELOPMENTSUGGESTIONS TO HELP WITH
REUSE A LOT OF YOUR GLOBAL CSS.
FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.
DEVELOPMENTSUGGESTIONS TO HELP WITH
GATHER YOUR JQUERY PLUGINS.
FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.LINK COMMON FILES AHEAD OF TIME.
DEVELOPMENTSUGGESTIONS TO HELP WITH
LINK COMMON FILES AHEAD OF TIME.
FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.LINK COMMON FILES AHEAD OF TIME.
DEVELOPMENTSUGGESTIONS TO HELP WITH
PIECE OF THE PIEDEVELOPMENTSUGGESTIONS TO HELP WITH
PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.
DEVELOPMENTSUGGESTIONS TO HELP WITH
PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.
DEVELOPMENTSUGGESTIONS TO HELP WITH
DEMO IT WITH SCREENSHOT BACKGROUND.
PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEADLINES FOR QUICK FEEDBACK.
DEVELOPMENTSUGGESTIONS TO HELP WITH
SHORT DEADLINES FOR QUICK FEEDBACK.
PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEADLINES FOR QUICK FEEDBACK.
DEVELOPMENTSUGGESTIONS TO HELP WITH
DEVELOPMENTSUGGESTIONS TO HELP WITH
CSS3TYPEJQUERYFRAMEWORKPIECE OF THE PIE
THANK YOU!TO CONCLUDE, I’D LIKE TO
MIKE KIVIKOSKI@MKIVIKOSKI | MIKEKIVIKOSKI.COM
ATEDRAKE@ATEDRAKE | ATEDRAKE.COM
QUESTIONS.NOW TIME FOR
QUESTIONS.NOW TIME FOR
YES.THE BEARD IS REAL.
HIGH FIVE.COME GET YOUR FREE