Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0...
-
Upload
truongduong -
Category
Documents
-
view
215 -
download
2
Transcript of Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0...
![Page 1: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/1.jpg)
![Page 2: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/2.jpg)
Reminder0 PresentationonEasel/CreateJS delayeduntilnextTuesday
0 ThatpresenterisatAdobeMax
![Page 3: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/3.jpg)
Background0WorkingwithHTMLfor21years0 Professor atIllinoisCentralCollege
0 CreatedfirstaccreditedAASdegreeinWebSystems0 Wealsohave5certificates:webdesigner,webdeveloper,eCommerce,richInternetapplications,webmaster
0 DirectorofEducationatWebProfessionals.org0 SchoolofWeb.orginitiative0 Youwillfindacopyoftheseresourcespostedthere
0 AdobeEducationLeader(highered)
![Page 4: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/4.jpg)
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
![Page 5: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/5.jpg)
Bracketsvs.EdgeCode
![Page 6: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/6.jpg)
Sowhat?0 Iteachwebdesignanddevelopment0 Beginningstudentsdon’tneedtoknowDreamweaver
0 TheyneedtoknowHTMLandCSS0 Dreamweaverwillhelptheirproductivityaftertheyknowthebasics
0 ThinkofBracketsasareplacementfor:
![Page 7: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/7.jpg)
BasicStudentProcess0 CreateHTML/CSSinNotepadorTextWrangler…0 Savefile0 Openbrowser,pointtosavedfile0 Doh?0 Usedebugtoolstoidentifyproblem0 ModifyHTML/CSSinNotepadorTextWrangler…0 Savefile(again)0 Refresh(orreopenbrowser)0 Doh?0 Lather,rinse,repeat
![Page 8: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/8.jpg)
BasicStudentProcess0 Studentfocusesonprocess(painfulaftertime)0 Brackets– livepreview
0 Bracketsononeside,browseronotherside0 MakeachangetocodeinBracketsandimmediatelyseechangeinbrowser
0 NowstudentcanfocusonlearningHTMLandCSS
![Page 9: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/9.jpg)
Demo
![Page 10: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/10.jpg)
BracketsInterface0 Minimal(bydesign)
0 File>New
![Page 11: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/11.jpg)
KeyboardShortcuts0 Ctrl+Shift+o[quickopenfile]
0 Ctrl+e[quickedit]
![Page 12: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/12.jpg)
KeyboardShortcuts0 Ctrl+k[quickdocs]
0 Readmoretakesyouto:http://docs.webplatform.org/wiki/css/properties/float
![Page 13: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/13.jpg)
BracketsExtensions0 Extensible
0 Help>ShowExtensionsFolder0 https://github.com/adobe/brackets/wiki/Brackets‐Extensions
0 Storezipfilelocally0 Extractcontentsintoextensionsfolder0 ReloadBrackets0 Forexample– HTMLtemplatesextension
0Whencreatefile…0 Edit>HTMLTemplates
![Page 14: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/14.jpg)
HTMLTemplates0 Choosefromlist
![Page 15: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/15.jpg)
HTMLTemplates0 StartingHTML5document
0 Again,letstudentsfocusonlearning,notprocess
![Page 16: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/16.jpg)
Extensions0 ShowShortcuts–builtinasofsprint15
![Page 17: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/17.jpg)
Extensions– CanIUse0 CanIUse – inlineversionofCanIUse.comsite
![Page 18: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/18.jpg)
Extensions‐ Validate0W3Cvalidator– codeshouldvalidate
![Page 19: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/19.jpg)
Extensions‐ Hover0 Hoverpreview– quicklyseeimages/colors
![Page 20: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/20.jpg)
Extensions‐ Fonts0 Fonts– addfontstopage– BracketsreliesonGooglefonts,EdgeCodeonEdgeWebFonts
0 Edit>WebFonts…0 ForBrackets,needtoincludefollowinglineattopofCSSfile@importurl(…);
![Page 21: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/21.jpg)
Extensions– Fonts(2)0 Visithttp://www.google.com/fonts/ tochoosefont(s)@importurl(http://fonts.googleapis.com/css?family=Antic|Abril+Fatface|Aclonica|Caesar+Dressing);
![Page 22: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/22.jpg)
Extensions– Fonts(2)0 EdgeCodehasbetterintegrationwithEdgeWebFonts
![Page 23: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/23.jpg)
Extensions– Fonts(3)0 Afterselectingfont,clickonWFlogotogenerateHTMLcode
0 OneinstancewhereEdgeCodebetterintegrated
![Page 24: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/24.jpg)
Extensions– Lorem ipsum0 Incaseneedplaceholdertext0 Alternateinstallation– File>Installextension…
0Whiletypingtext,enterlorem followedbytabkey
![Page 25: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/25.jpg)
Demo– usingMUSEExportfiles
![Page 26: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/26.jpg)
Review0 BracketsisaneditorforHTML,CSS,andJavaScript0 Itishighlyextensible(andtherearealreadyanumberofdevelopedextensions)
0 Itisopensource(free)0 ThereisacorrespondingAdobeproduct(EdgeCode)
![Page 27: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/27.jpg)
Thought0 Itis2013
![Page 28: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/28.jpg)
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
![Page 29: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/29.jpg)
AdobeBrackets0 http://download.brackets.io/
0 Questions?Pleaseusequestionpod
@Mark_DuBois (Twitter)
![Page 30: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/30.jpg)
Slides
http://markdubois.me/2013May7
![Page 31: Adobe Brackets for Educators - · PDF fileSo what? 0 I teach web design and development 0 Beginning students don’t need to know Dreamweaver 0 They need to know HTML and CSS 0 Dreamweaver](https://reader031.fdocuments.us/reader031/viewer/2022030412/5a9e20367f8b9a420a8df895/html5/thumbnails/31.jpg)