Reminder

0 Presentation on Easel/ CreateJS delayed until next

Tuesday
0 That presenter is at AdobeMax
 Background
0 Working with HTML for 21 years
0 Professor at Illinois Central College
0 Created first accredited AAS degree in Web Systems
0 We also have 5 certificates: web designer, web
developer, eCommerce, rich Internet applications,
webmaster
0 Director of Education at WebProfessionals.org
0 SchoolofWeb.org initiative
0 You will find a copy of these resources posted there
0 Adobe Education Leader (higher ed)
 Brackets?
0 Tool for editing HTML, CSS, and JavaScript files
0 Written in HTML, CSS, and JavaScript
0 Extensible

0 Comes in two flavors

0 Brackets – open source (free)
0 http://download.brackets.io/
0 Edge Code – part of Creative Cloud
0 Extended with Adobe specific enhancements
0 Will discuss more when covering web fonts today
Brackets vs. Edge Code
 So 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 will help their productivity
after they know the basics
0 Think of Brackets as a replacement for:
Basic Student Process
0 Create HTML/ CSS in Notepad or Text Wrangler…
0 Save file
0 Open browser, point to saved file
0 Doh?
0 Use debug tools to identify problem
0 Modify HTML/ CSS in Notepad or Text Wrangler…
0 Save file (again)
0 Refresh (or reopen browser)
0 Doh?
0 Lather, rinse, repeat
Basic Student Process
0 Student focuses on process (painful after time)
0 Brackets – live preview
0 Brackets on one side, browser on other side
0 Make a change to code in Brackets and immediately see
change in browser
0 Now student can focus on learning HTML and CSS
Demo
 Brackets Interface
0 Minimal (by design)
0 File > New
 Keyboard Shortcuts
0 Ctrl + Shift + o
[quick open file]

0 Ctrl + e [quick edit]

 Keyboard Shortcuts
0 Ctrl + k [quick docs]

0 Read more takes you to:

http://docs.webplatform.org/wiki/css/properties/float
 Brackets Extensions
0 Extensible
0 Help > Show Extensions Folder
0 https://github.com/adobe/brackets/wiki/Brackets‐
Extensions
0 Store zip file locally
0 Extract contents into extensions folder
0 Reload Brackets
0 For example – HTML templates extension
0 When create file…
0 Edit > HTML Templates
 HTML Templates
0 Choose from list
 HTML Templates
0 Starting HTML5 document
0 Again, let students focus on learning, not process
 Extensions
0 Show Shortcuts –
built in as of
sprint 15
Extensions – CanIUse
0 CanIUse – inline version of CanIUse.com site
Extensions ‐ Validate
0 W3C validator – code should validate
 Extensions ‐ Hover
0 Hover preview – quickly see images/ colors
 Extensions ‐ Fonts
0 Fonts – add fonts to page – Brackets relies on Google fonts,
Edge Code on Edge Web Fonts
0 Edit > Web Fonts…
0 For Brackets, need to include following line at top of CSS
file
@import url(…);
Extensions – Fonts (2)
0 Visit http://www.google.com/fonts/ to choose font(s)
@import
url(http://fonts.googleapis.com/css?family=Antic|Abril
+Fatface|Aclonica|Caesar+Dressing);
Extensions – Fonts (2)
0 Edge Code has better integration with Edge Web Fonts
Extensions – Fonts (3)
0 After selecting font, click on WF logo to generate HTML
code

0 One instance where Edge Code better integrated

Extensions – Lorem ipsum
0 In case need placeholder text
0 Alternate installation – File > Install extension…

0 While typing text, enter lorem followed by tab key

Demo – using MUSE
Export files
 Review
0 Brackets is an editor for HTML, CSS, and JavaScript
0 It is highly extensible (and there are already a number of
developed extensions)
0 It is open source (free)
0 There is a corresponding Adobe product (Edge Code)
 Thought
0 It is 2013
 Resources
0 http://brackets.io/
0 http://download.brackets.io/
0 http://markdubois.me/Brackets01 (project overview)
0 http://markdubois.me/Brackets02 (getting started with
Brackets)
0 http://schoolofweb.org (these materials and recording)

0 My weblog posts on Brackets

0 http://markdubois.me/Brackets03 (sprint 20)
0 http://markdubois.me/Brackets04 (sprint 10) my initial
thoughts
 Adobe Brackets
0 http://download.brackets.io/

0 Questions?
Please use question pod

@Mark_DuBois (Twitter)

Mark@WebProfessionals.org
 Slides
http://markdubois.me/2013May7