Reminder. 0 Presentation on Easel/ CreateJS delayed until next Tuesday 0 That presenter is at AdobeMax

Transcription

1

2 Reminder 0 Presentation on Easel/ CreateJS delayed until next Tuesday 0 That presenter is at AdobeMax

3 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)

4 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) Edge Code part of Creative Cloud 0 Extended with Adobe specific enhancements 0 Will discuss more when covering web fonts today

5 Brackets vs. Edge Code

6 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:

7 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

8 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

9 Demo

10 Brackets Interface 0 Minimal (by design) 0 File > New

11 Keyboard Shortcuts 0 Ctrl + Shift + o [quick open file] 0 Ctrl + e [quick edit]

12 Keyboard Shortcuts 0 Ctrl + k [quick docs] 0 Read more takes you to:

13 Brackets Extensions 0 Extensible 0 Help > Show Extensions Folder 0 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

14 HTML Templates 0 Choose from list

15 HTML Templates 0 Starting HTML5 document 0 Again, let students focus on learning, not process

16 0 Show Shortcuts built in as of sprint 15 Extensions

17 Extensions CanIUse 0 CanIUse inline version of CanIUse.com site

18 Extensions Validate 0 W3C validator code should validate

19 Extensions Hover 0 Hover preview quickly see images/ colors

20 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 url( );

21 Extensions Fonts (2) 0 Visit to choose url( Abril +Fatface Aclonica Caesar+Dressing);

22 Extensions Fonts (2) 0 Edge Code has better integration with Edge Web Fonts

23 Extensions Fonts (3) 0 After selecting font, click on WF logo to generate HTML code 0 One instance where Edge Code better integrated

24 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

25 Demo using MUSE Export files

26 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)

27 0 It is 2013 Thought

28 Resources (project overview) 0 (getting started with Brackets) 0 (these materials and recording) 0 My weblog posts on Brackets 0 (sprint 20) 0 (sprint 10) my initial thoughts

29 Adobe Brackets Questions? Please use question (Twitter) Mark@WebProfessionals.org

30 Slides

31