1. Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

2. Web Foundations (BIT112/113) Official Web Site: faculty.cascadia.edu/cduckett/foundations/faculty.cascadia.edu/cduckett/foundations/ Class Times: Monday-Thursday 8:30am-10:35am ( discussion about Tues/Thur: 8:30am or 8:45am ? ) Canvas: BIT112, BIT 113 (for Grade Tracking) BIT112/113 Instructor Email: cduckett@cascadia.educduckett@cascadia.edu Instructor Office: CC1-042 (in alcove near the main entrance) Instructor Office Hours: Tuesdays: 11am-1pm ; Thursdays: 11am-12noon; by Appointment

3. Web Foundations Cohort (16 Total Credits) BIT112 (5 Credits): Craig Duckett BIT113 (5 Credits): Craig Duckett CMST105 (5 Credits): Danielle Powell BIT160 (1 Credit): Brian Bansenauer The best way to think about and to work through this Web Foundations Cohort is to approach it as a single class, to consider it a unified whole, yet divided into separate synergistic sections each with their own areas of proficiency and skillsets. All these sections will work together to form an integrated unity that may not be apparent in the earlier stages of the course, but if you do the work and trust the process and the way each of the classes have been developed, by the end of the quarter you should see how all the individual pieces of the puzzle synch up and fit together to form a kind of grand scheme. Personal Solo Development – Communication Skills – Project Development – Teamwork – Conflict Resolution – Career Research – Interviewing Clients – Resume Development – Cover Letter Writing – Elevator Speeches – and more!

4. Web Foundations (BIT112/113) Syllabus: BIT112, BIT 113 Grading BIT112: 1000 points (Solo) Grading BIT113: 1000 points (Team)

5. Weekly Schedule Format First Two Weeks Focus exclusively on HTML, FTP, and working on the HTML Lab, the FTP Lab, creating the Portfolio, doing a Critique Report & Heuristic Report, starting the Reflection Logs, and Intro to CSS Weeks 3 through 11 Monday: HTML/CSS lecture with hands-on time Tuesday: Design lecture, followed by Solo Lab time Wednesday: HTML/CSS lecture with hands-on time Thursday: Brief Design lecture, followed by Team time Last Week 12 Final Portfolio Submission & Final Team Project Presentation

6. Recommended Software/Hardware Text Editors PC ◦Notepad (comes with Windows) ◦Notepad++ http://notepad-plus-plus.org/http://notepad-plus-plus.org/ ◦UltraEdit http://www.ultraedit.com/products/ultraedit.htmlhttp://www.ultraedit.com/products/ultraedit.html ◦TextPad http://www.textpad.comhttp://www.textpad.com Mac ◦TextEdit (comes with OS X) ◦Coda http://www.panic.com/coda/http://www.panic.com/coda/ ◦BBEdit and TextWrangler http://www.barebones.com/http://www.barebones.com/ Adobe Dreamweaver http://www.adobe.com/downloads.htmlhttp://www.adobe.com/downloads.html Adobe Creative Cloud for Students http://success.adobe-education.com/en/na/students.htmlhttp://success.adobe-education.com/en/na/students.html CAUTIONARY NOTE: Do not use a word processor like Microsoft Word or Apple Pages

7. Recommended Software/Hardware FTP Clients PC ◦Core FTP http://www.coreftp.comhttp://www.coreftp.com ◦Filezilla https://filezilla-project.org/https://filezilla-project.org/ ◦CoffeeCup FTP http://www.coffeecup.com/free-ftp/http://www.coffeecup.com/free-ftp/ Mac ◦Cross FTP http://www.crossftp.comhttp://www.crossftp.com ◦Transmit http://panic.com/transmit/http://panic.com/transmit/ ◦Filezilla https://filezilla-project.org/https://filezilla-project.org/ Fire FTP (Firefox Add-On) https://addons.mozilla.org/en-US/firefox/addon/fireftp/https://addons.mozilla.org/en-US/firefox/addon/fireftp/

8. Intro to Internet, WWW, and HTML A Short Free-Form Lecture  History of Web (PowerPoint)  Look at plain digital text file  Look at a Word.docx file .zip file  The "interpretation" of Markup Language

9. Web Lexicon  The world wide web (www, or web) consists of millions of sites, each of which has a unique web address called a uniform resource locator, or URL (for example, http://www.google.com)http://www.google.com  Each site consists of many pages with related content  Each page on a website can be viewed in a browser (such as Firefox, Chrome, Internet Explorer, Safari, or Opera) on a computer or on a mobile device such as a tablet or a smart phone.  Web users navigate from one page to another via web links, also called hyperlinks

10. Local Folder | Remote (Live) Folder

12. HTML DEMONSTRATION: Text File  HTML file View in Notepad  Browser Intro to tags Russian Nesting Dolls Concept applies to Tags and Directories!

13. Rex Winkus's Portfolio Rex Winkus's Portfolio

14. Rex Winkus's Portfolio Rex Winkus's Portfolio

15. Hello element Deprecated attributes (but still used) ◦BACKGROUND=“Sunset.jpg” (can be tiled) ◦BGCOLOR=color ◦TEXT=color ◦LINK=color (unvisited links) ◦VLINK=color (visited links) ◦ALINK=color (when selected)

16. 16 Headings text

17. 17 Headings Document Headings Samples of the six heading types: Level-1 (H1) Level-2 (H2) Level-3 (H3) Level-4 (H4) Level-5 (H5) Level-6 (H6)

18. Paragraph defines a paragraph Add ALIGN="position" (left, center, right) Multiple 's do not create blank lines Use for blank line Fully-specified text uses and But is optional 18

19. 19 Here is some text Centered text Right-justified text

20. 20 Fonts (the old way) Line One Line Two Line Three Note: is now deprecated in favor of CSS.

21. Colors : RGB Hexidecimal Values for BGCOLOR and COLOR ◦many are predefined (red, blue, green,...) ◦all colors can be specified as a six character hexadecimal value: RRGGBB ◦#FF0000 – red ◦#888888 – gray ◦#004400 – dark green ◦#FFFF00 – yellow http://www.w3schools.com/html/html_colors.asp

22. 22 Ordered (Numbered) Lists [see TYPE] Item one Item two Item three Item four Item five

23. 23 Unordered (Bulleted) Lists [see Type] One Two Three Four Five Six

24. 24 Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact Microsoft to report the problem. Link to a relative URL: See these references concerning our fine products.

25. Images 25 This is a very cute dolphin! align="left" width="150" height="150" alt="Dolphin jump!"

26. Images 26 Align=positionImage/Text Placement LeftImage on left edge; text flows to right of image RightImage on right edge; text flows to left TopImage is left; words align with top of image BottomImage is left; words align with bottom of image MiddleWords align with middle of image

27. HTML1 (1993)

28. HTML2 (1995)

29. HTML3.2 (1997)

30. HTML4 (1998)

31. XHTML1 (2000) eXtensibleHTML The main difference between XHTML1 and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other.

32. XHTML1.1 (2001)

33. HTML5 (2008 Working Draft; 2012 - ?) http://www.w3schools.com/tags/default.asp

34. CSS3 (1999 Draft; 2012 Browser Support) to coincide with HTML5 CSS2 (1998 Draft; 2010 Browser Support) CSS1 (1996 Draft; 2000 Browser Support) to coincide with HTML4/XHTML1 Cascading Style Sheets http://www.csszengarden.com/ http://faculty.cascadia.edu/cduckett/foundations/html5_no.html faculty.cascadia.edu/cduckett/foundations/html5.html