Course Website Design and Interactive Media 2
Livonia Career Technical Center
904 11.0801 Digital/Multimedia and Information Resources Design Credits 2 Teacher Melinda Bush Semester Full Year Program Monday –Friday Class First Block: 7:30 a.m.-9:04 a.m. Time Third Block: 9:50 a.m.-11:24 a.m. Fifth Block: 12:19p.m.-1:59 p.m.
Teacher’s Contact Information Office Phone Main Office Location Email Address Office Hours Pre-requisites:
734-744-2816 ext. 70065 8985 Newburgh, Livonia, MI 48150
[email protected] Call to schedule an appointment. Best way to contact is via email. Successful Completion of Web 1 Competencies
Course Description:
Students will build upon the knowledge acquired in Web 1 and demonstrate an increased ability create, design and produce interactive media products. Students will expand their knowledge of Web design, programming and administration to develop and maintain Web applications. This will include: HTML5, CSS/CSS3, Mobile Web Development, JavaScript, JQuery and Web Standards.
Course Outline Semester One
HTML 5 Web Page Structural Basics Document Type Definition Example XHTML Web Page Example HTML5 Web Page Head, Title, Meta and Body Elements Paragraph element Line Break Element Blockquote Element Phrase Elements Unordered List Ordered List Description List Special Characters Div Element Anchor Element Absoulte/Relative Hyperlinks E-Mail Hyperlinks Block Anchor HTML Validation
Configuring Color and Text with CSS Overview of Cascading Style Sheets Advantages Cascading Style Sheets Configuring Cascading Style Sheets CSS Selectors and Declarations The background-color Property The color property Configure Background and Text Color Using Color on Web Pages Hexadecimal Color Values Web-Safe Colors CSS Color Syntax Inline CSS with the Style Element Configuring Text with CSS The font-family property More CSS font Properties CSS Class, id, and Contextual Selectors Span Element External Style Sheets Center HTML Elements with CSS The “Cascade” CSS Validation Visual Elements and Graphics Configuring Lines and Borders Horizontal Rule Element Border and Padding Properties Types of Graphics Accessibility and Images Image Hyperlinks Image Optimization HTML5 Visual Elements HTML5 Figure Element HTML5 Figcaption Element HTML5 Meter Element HTML5 Progress Element Background Images Background Image Property Browser Display of a Background Image Background-repeat property Backround-position Property Background-attachment property Image Maps Favorites Icon
Image Slicing CSS Sprites Guidelines for using images Accessibility and Visual Elements CSS3 Visual Effects CSS3 background-clip Property CSS3 Background-origin Property CSS3 Background-size property CSS3 Multiple Background Images CSS3 rounded Corners CSS3 box-shadow Property CSS3 text-shadow Property CSS3 opactity Property CSS3 RGBA color CSS3 Gradients Page Layout The Box model Calculating em and Percentage Values Controlling how elements Display Creating Fixed, Fluid, and Responsive Layouts Structuring content with HTML5 Content Padding Border Margin Normal Flow CSS Layout Properties CSS Positioning Relative Positioning Absolute Positioning Floating Elements CSS: Clearing a Float The clear property The overflow property Define column Spacing Creating Grid Based Assets and Layouts Considering Mobile Design Specific Issues Enhancing Page Design CSS Sprites CSS Two Colum Page Layout Two Columns with Left Navigation Two columns with Top Header and Left Navigation Hyperlinks in an Unordered List Configure List Markers with CSS Vertical Navigation with an Unordered List
Horizontal Navigation with an Unordered List CSS Interactivity with Pseudo-Classes Practice with CSS Column Layout CSS Resources CSS Debugging Techniques HTML5 Structural Elements Header Element Hgroup Element Nav Element Footer Element Section Element Article Element Aside Element Time Element HTML5 and Today’s Browsers Links, Layout and Mobile Create an app like experience for the Apple iPad with HTML,CSS and JQuery :
Adding HTML Creating the layout containers Setting up JavaScript orientation detection Adding CSS for layout Using CSS3 animation Dynamically loading HTML with AJAX Adding iScroll functionality Adding video Adding a Google map Detecting an iPad device
More on Relative Linking Fragment Identifiers The Target Attribute Block Anchor Telephone and Text Message Hyperlinks CSS Sprites Three-Column CSS Page Layout CSS Styling for Print CSS Styling for the Mobile Web Mobile Design Best Practices Viewport Meta Tag CSS Media Queries Testing Mobile Display
Tables Table Element Table Captions Table Rows, Cells, and Headers Span Rows and Columns Configuring and Accessible Table Styling a Table with CSS CSS3 Structural Pseudo-Classes Configure Table Sections
Forms Form Element Form Controls Input Element Form Controls Text Box Submit button Reset Button Check Box Radio Button Hidden Input control Password Box Scrolling Text Box Select List Image Buttons and the Button Element Accessibility and Forms Styling a Form Server-Side Processing Privacy and Forms HTML5 Form controls Email imput URL input Telephone Number input Search Field input Datalist Form control Slider Form control Spinner Form control Calendar Form control Color-well Form control
Web Site Development
Successful Large-Scale Project Development Project Job Roles Project Staffing Criteria Project Manager Information Architect Marketing Representative Copywriter and Editor Content Manager Graphic Designer Database Administrator Network Administrator Web Developer Project Staffing Criteria The Development Process Conceptualization Analysis Design Production Testing Launch Maintenance Evaluation
Web Multimedia and Interactivity Plug-ins, Containers and Codecs Audio and Video XHTML Object and Param Elements Adobe Flash Flash Animation on a Web Page HTML5 Embed Element HTML5 Audio and Video Elements MultiMedia Files and copyright law CSS3 and Interactivity Java Adding a Java Applet to a Web APag Javascript Ajax HTML5 Canvas Element Accessibility and Multimedia/Interactivity E-Commerce
What is E-Commerce Advantages of E-Commerce Risks E-Commerce Business Models Electronic Data Interchange E-Commerce Issues E-Commerce Security Encryption Integrity Secure Sockets Layer Digital Certificate SSL and Digital Certificates Order and Payment Processing Cash Model Check Model Credit Model Smart Card E-Commerce Storefront Solutions Instant Online Storefront Off the Shelf Shopping Custom Built Solution Semi-Custom Built Solutions Web Promotion Search Engine Overview Popular Search Engines Components of a Search Engine Robot Database Search From Desiging Your pages for Promotion Keywords Page Titles Heading Tags Description Meta Tags Linking Page layout Images and Multimedia Valid Code Content of Value Listing in a Search Engine and search index Preferential Placement Map Your Site
Alliances Monitoring Search Listings Link Popularity Social Media Optimization Social Bookmarking Blogs and RSS Feeds Social Networking Other Site Promotion Activities Affiliate Programs Banner Ads Banner Exchange Reciprocal Link Agreements Newsletters Sticky Site Features Personal Recommendations Web Rings Newsgroup and Listserv Postings Traditional Media Ads and Existing Marketing Materials
Semester Two
JavaScript Introduction to JavaScript Introduction to Scripting Origins of JavaScript Popular Uses for JavaScript Alert Message Pop Up Windows Jump Menus Mouse Movement Techniques Adding JavaScript to a Web Page Script Element JavaScript Characteristics JavaScript and Common Programming concepts Events/Event Handlers Variables Form Handling Decision Making DOM scripting and Ajax Basic JavaScript Skills
How to use Objects in JavaScript How to Code Control Statements How to Create and Use Functions The Future Value Application Testing and Debugging How to work with Numbers, Strings and dates How to code control statements Conditional Expressions If/Else Clauses Code While, While do/ loops Arrays Basic Skills for working with functions Basic Skills for working with objects Expressions, Exceptions, Validating Data Slide Show Application How to use Cookies JQuery Introducing JQuery JavaScript Libraries Getting JQuery Adding JQuery to a page Modifying Web Pages Understanding DOM Selecting Page Elements: The JQuery Way Basic Selectors Advanced Selectors JQuery Filters Understanding JQuery Selections Adding content to a Page Setting and Reading Tag Attributes Classes Reading and Changing CSS Properties Changing Multiple CSS Prperties at Once Reading, Setting, and Removing HTML attributes Automatic Pull Quotes Making Pages Come Alive with Events Mose Events Document/Window Events Form Events Keyboard Events JQuery Events Animations and Effects Basic Showing and Hiding Fading Elements In and Out
Sliding Elements Login Slider Easing Animated Dashboard Swapping Images Preloading Images Rollover Images Photo Gallery with Effects FancyBox Photo Gallery
All career technical education programs follow the district’s policies of nondiscrimination on the basis of race, color, religion, sex, national origin, age, height, weight, marital status, handicap or disability in all activities and employment. In addition, arrangements can be made to ensure that the lack of English language skills is not a barrier to admission or participation. Director of Human Resources 15125 Farmington Livonia, Michigan 48154 (734) 744-2566
