advertisement

Frontend Workshop

0 %
100 %
advertisement
Information about Frontend Workshop
Education

Published on January 23, 2009

Author: wnas

Source: slideshare.net

Description

The slides from a whole day workshop I gave the 19th of januari 2009 for some dozen java developers. the goal was to teach them some basics for proper front end development...
advertisement

Client Side Development Introductory Workshop Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Introduction Hi, Iʼm Wilfred Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Introduction I do HTML, CSS and some Javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Application html, css and javascript. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

HTML itʼs easy. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

NOT if you do it right. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Structure Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Doctypes Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

quirksmode Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

boxmodel Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

HTML itʼs more than tables. much more Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Tables Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Tables are evil? Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

nope Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Tables are beautiful Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Caption Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Thead Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

tfoot Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

tbody Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

tr Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

td Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

th Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

colspan Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

colgroup Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

rowspan Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

rowgroup Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

scope Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

HTML Itʼs more than divʼs and spanʼs Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

div Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

span Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

p Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

h1 > h6 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

em Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

strong Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

abbr Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

q Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

blockquote Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

id Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

class Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

validator.w3.org Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

HTML Itʼs about structure, NOT presentation. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

<div class=quot;spacer-wquot;><!-- this empty spacer is used to make a space between vertical holding blocks --></div> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Do more with less focus on the information, not the presentation. that is what css is for. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Exercise nu.nl ing.nl postbank.nl Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

If you thought html was bad, I give you... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

CSS Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

selector { property : value; } Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

CSS 2.1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

float : left; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Explorer 6 Duplicate Characters Bug Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

The IE5/6 Doubled Float-Margin Bug Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

http://positioniseverything.net/explorer.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Cascading http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

padding: 2px padding: 2px 2px 2px 2px; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Shorthand Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

CSS 3 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

power Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Unlimited power Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

e[att^=”val”] Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

E:empty Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

E~F Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

CSS 3 ? Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

dojo Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

jQuery Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Exercise Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

http://wnas.nl/fronteers/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Exercise Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript part 1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript === evil Do not rely on it. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Donʼt rely on it HTML is a rely accessible platform. Use JavaScript to enhance it. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Progressive Enhancement !== Graceful degradation. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

HIJAX vs AJAX Plan ajax from the beginning and build it in the end. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

ns.nl with javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

ns.nl without javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Politie with javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Politie without javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript !== java Really not. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript Is not a toy language. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

The World's Most Misunderstood Programming Language ‘Douglas Crockford’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript part 2 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Closures one of javascript most devious concepts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

where a function remembers what happens around it ‘Stuart Langridge’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

http://tinyurl.com/jsclosures Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

If all you have is a everything looks like a nail Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Patterns Smatterns Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Read a lot this day is too short for patterns... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

XML vs JSON Use the best possible solution Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Not the available one XML vs JSON Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Memory And the garbage collector Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

So what changed ? Ajax and Rich Internet Applications. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Ajax Asynchronous Javascript and XML Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

The solution think of history Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Ajax origins Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Clean up That is what Ajax stood for anyway... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Pick up after yourself Leave a clean dom after you... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Totaal voetbal Let the individual elements of your program work for you. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Java To handle the logic. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JSP / XHTML To display the structure of your programs. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

CSS To present it in a proper manner. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript To enhance the user experience. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Exercise enhance the page you made... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Extra’s Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Event delegation Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Just in time initialization Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Code as prose. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Douglas The good parts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

JavaScript The Definitive Guide (5th) Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Add a comment

Related presentations

Related pages

Frontend Masters - Expert JavaScript and Front-End Web ...

Upgrade your front-end web development skills in HTML5, CSS3 and JavaScript with expert teachers like Crockford, Estelle Weyl and the creator of AngularJS.
Read more

GitHub - sprintup/frontend-workshop: A place to practice ...

frontend-workshop - A place to practice frontend development.
Read more

Video Courses on JavaScript and Front-End Web Development

Become a master in front-end with 20+ advanced video training courses featuring experts such as Douglas Crockford, Kyle Simpson and Estelle Weyl.
Read more

KnightHacks/frontend-workshop · GitHub

Contribute to frontend-workshop development by creating an account on GitHub.
Read more

Frontend-Strategie endlich in Sicht!

Frontend-Strategie endlich in Sicht! Wege aus dem Irrgarten der IT Wir nehmen Sie mit: Jetzt erfahren Sie, warum es sich lohnt, wenn Sie frühzeitig
Read more

Front-End Design Conference // St. Petersburg, Florida ...

Front-End Design Conference in St. Petersburg, Florida on June 15-17, 2016 | A conference for designers & developers.
Read more

Workshop “Frontend-Strategie”: Wissen, was taktische ...

Workshop “Frontend-Strategie”: Wissen, was taktische Vorteile im Wettbewerb bringt. 23. Juli 2015 - Das Bedürfnis von Unternehmen nach Analyse und ...
Read more

ADC.DE / ADC Craft Workshop "Layout"

Wie ein Layout unverwechselbar wird, wird im Workshop erklärt und geübt. CLUB. Organisation; Übersicht---Chronik; Präsidium; ADC Büro; ADC Sponsoren ...
Read more

Workshop SAPUI5 - Grundlagen für die Frontend-Entwicklung ...

Komprimierter Überblick: Interface Technologien der SAP, SAP UX Strategie, Vergleich der Frontend-Technologien (SAPUI5, WebDynpro und Screen Personas).
Read more