adobe brackets for educators - · pdf fileso what? 0 i teach web design and development 0...

Reminder0 PresentationonEasel/CreateJS delayeduntilnextTuesday

0 ThatpresenterisatAdobeMax

Background0WorkingwithHTMLfor21years0 Professor atIllinoisCentralCollege

0 CreatedfirstaccreditedAASdegreeinWebSystems0 Wealsohave5certificates:webdesigner,webdeveloper,eCommerce,richInternetapplications,webmaster

0 DirectorofEducationatWebProfessionals.org0 SchoolofWeb.orginitiative0 Youwillfindacopyoftheseresourcespostedthere

0 AdobeEducationLeader(highered)

Brackets?0 ToolforeditingHTML,CSS,andJavaScriptfiles

0 WritteninHTML,CSS,andJavaScript0 Extensible

0 Comesintwoflavors0 Brackets– opensource(free)

0 http://download.brackets.io/0 EdgeCode– partofCreativeCloud

0 ExtendedwithAdobespecificenhancements0Willdiscussmorewhencoveringwebfontstoday

Bracketsvs.EdgeCode

Sowhat?0 Iteachwebdesignanddevelopment0 Beginningstudentsdon’tneedtoknowDreamweaver

0 TheyneedtoknowHTMLandCSS0 Dreamweaverwillhelptheirproductivityaftertheyknowthebasics

0 ThinkofBracketsasareplacementfor:

BasicStudentProcess0 CreateHTML/CSSinNotepadorTextWrangler…0 Savefile0 Openbrowser,pointtosavedfile0 Doh?0 Usedebugtoolstoidentifyproblem0 ModifyHTML/CSSinNotepadorTextWrangler…0 Savefile(again)0 Refresh(orreopenbrowser)0 Doh?0 Lather,rinse,repeat

BasicStudentProcess0 Studentfocusesonprocess(painfulaftertime)0 Brackets– livepreview

0 Bracketsononeside,browseronotherside0 MakeachangetocodeinBracketsandimmediatelyseechangeinbrowser

0 NowstudentcanfocusonlearningHTMLandCSS

Demo

BracketsInterface0 Minimal(bydesign)

0 File>New

KeyboardShortcuts0 Ctrl+Shift+o[quickopenfile]

0 Ctrl+e[quickedit]

KeyboardShortcuts0 Ctrl+k[quickdocs]

0 Readmoretakesyouto:http://docs.webplatform.org/wiki/css/properties/float

BracketsExtensions0 Extensible

0 Help>ShowExtensionsFolder0 https://github.com/adobe/brackets/wiki/Brackets‐Extensions

0 Storezipfilelocally0 Extractcontentsintoextensionsfolder0 ReloadBrackets0 Forexample– HTMLtemplatesextension

0Whencreatefile…0 Edit>HTMLTemplates

HTMLTemplates0 Choosefromlist

HTMLTemplates0 StartingHTML5document

0 Again,letstudentsfocusonlearning,notprocess

Extensions0 ShowShortcuts–builtinasofsprint15

Extensions– CanIUse0 CanIUse – inlineversionofCanIUse.comsite

Extensions‐ Validate0W3Cvalidator– codeshouldvalidate

Extensions‐ Hover0 Hoverpreview– quicklyseeimages/colors

Extensions‐ Fonts0 Fonts– addfontstopage– BracketsreliesonGooglefonts,EdgeCodeonEdgeWebFonts

0 Edit>WebFonts…0 ForBrackets,needtoincludefollowinglineattopofCSSfile@importurl(…);

Extensions– Fonts(2)0 Visithttp://www.google.com/fonts/ tochoosefont(s)@importurl(http://fonts.googleapis.com/css?family=Antic|Abril+Fatface|Aclonica|Caesar+Dressing);

Extensions– Fonts(2)0 EdgeCodehasbetterintegrationwithEdgeWebFonts

Extensions– Fonts(3)0 Afterselectingfont,clickonWFlogotogenerateHTMLcode

0 OneinstancewhereEdgeCodebetterintegrated

Extensions– Lorem ipsum0 Incaseneedplaceholdertext0 Alternateinstallation– File>Installextension…

0Whiletypingtext,enterlorem followedbytabkey

Demo– usingMUSEExportfiles

Review0 BracketsisaneditorforHTML,CSS,andJavaScript0 Itishighlyextensible(andtherearealreadyanumberofdevelopedextensions)

0 Itisopensource(free)0 ThereisacorrespondingAdobeproduct(EdgeCode)

Thought0 Itis2013

Resources0 http://brackets.io/0 http://download.brackets.io/0 http://markdubois.me/Brackets01 (projectoverview)0 http://markdubois.me/Brackets02 (gettingstartedwithBrackets)

0 http://schoolofweb.org (thesematerialsandrecording)

0 MyweblogpostsonBrackets0 http://markdubois.me/Brackets03 (sprint20)0 http://markdubois.me/Brackets04 (sprint10)myinitialthoughts

AdobeBrackets0 http://download.brackets.io/

0 Questions?Pleaseusequestionpod

@Mark_DuBois (Twitter)

Mark@WebProfessionals.org

Slides

http://markdubois.me/2013May7