adobe brackets for educators - · pdf fileso what? 0 i teach web design and development 0...
TRANSCRIPT
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)
Slides
http://markdubois.me/2013May7
