BC_BrianoWebDesignSyllabus_2_5_2015.docx.docx€¦ · Web viewWeb Design & Development |American High School . Course Description Instructor: Mr. B.C. FUSD District Course Code:TCWAF-001

Web Design & Development |American High School

Course Description Instructor: Mr. B.C.FUSD District Course Code:TCWAF-001 RM 711MVROP Course Code: 303112 PHONE 796-1776 EXT. 57711PLEASE CORRESPOND WITH INSTRUCTOR THROUGH: SCHOOL LOOP EMAIL &/OR

[email protected] Course Website: http://ahsweb.mvrop.org/

FUSD District Catalogue Course Description

Explore web design as you incorporate graphics, sound, movies, and animation into HTML/ CSS built websites. Students will learn all phases of the design process from the idea state, through planning, production and testing while creating original web sites. Learn design concepts for content and layout as you design commercial web pages.

Course Purpose

In the dawn where web publishing has become completely accessible to the average consumer, businesses are seeking qualified web-designers to cut through the “boxed, cookie cutter”- excessive template-looking sites. This course aims to arm students with the knowledge to establish sites, which can offer companies, and their brands, products, and missions a tailored look and style; A creative design, with friendly, accessible user interfaces, that meet the needs of their clients’ innovations, ideas, and mission statements. This course aims to give students the base practical knowledge to create web sites from the ground up, using W3C standards building methods for current browser and media queries. Students will also become knowledgeable regarding: website accessibility, semantic markup, proper character encoding.

Web Design & Development Course Description Last updated February 5th, 2015: | Page 1 of 15

Course GoalsBy completing Web Page Design , students will be able to describe the history of web design and make informed predictions about future trends; work in a team to deliver professional-quality projects on deadline; design content for desktop, handset and tablet delivery; choose appropriate tools to complete assigned tasks; and create standards-compliant websites using HTML, CSS, JavaScript, bitmap and Flash assets.

Course ObjectivesAt the end of this course, students will be able to:

● Present their artistic web site designs while create a semantically structured HTML document with a text editor, meeting publication requirements

● Create a standards-based CSS document with a text editor● Use a Dropbox and file organization to manage and share documents, and back-ups, and

collaborate with colleagues and instructors.● Use of browser property inspectors to effectively determine proper edits in markup. ● Understand color theory and use of Pantone color charts, and hexadecimal colors● Open, copy, edit, and share Google Docs and spreadsheets● Embed images, audio, video, and Flash .swf files in an HTML document● Edit outdated HTML tags, and recreate websites with proper use of current standard methods.● Create their own forms, galleries, and website design templates requiring input interfaces. ● Use Dreamweaver to create and manage a complete web site.● Use Photoshop to crop, mask, and color-correct images.● Explain the differences between JPEG and Gif, PNG file types● Give an accurate estimate for how long a web design project will take to complete.● Create and manage a personal web portfolio● Learn methods, responsibilities, and protocol for publishing work on the World Wide Web.● Critique, evaluate, and augment web site design to improve design effectiveness and

communication. ● Actuate Search engine optimization (SEO)

Texts & Supplemental Instructional MaterialsKeith, J., DOM Scripting: Web Design with JavaScript and the Document Object Model, Apress

Negrino,T., Dreamweaver CS5 for Windows and Macintosh: Visual QuickStart Guide, Peachpit Press

Reding, E., Adobe Photoshop CS2 Revealed: Deluxe Education Edition, Thompson Course Technlogy

Weinmann,E., Photoshop CS5 for Windows and Macintosh: Visual QuickStart Guide, Peachpit Press

Zeldman, J., Designing with Web Standards: Third Edition, New Riders


Online Resourceshttp://ahs-fusd-ca.schoolloop.com/ http://www.w3.org/standards/

http://www.codecademy.com/ https://developer.mozilla.org/en-US/

Additionally the course makes use of a variety of supplemental current web sites for reading materials, tutorials, investigations, and current events, which establishes basic knowledge foundations in: web design aesthetics, graphic design, structural terms, and other current event website content knowledge.

SoftwareMicrosoft Windows 7 & Office 7

Adobe Creative Suite 6: Web Design Premium: Acrobat Professional, Dreamweaver, Fireworks, Flash, Illustrator, Lightroom 2.0, Media Encoder, Photoshop,

Apple Safari for PC, Google Chrome, Internet Explorer, Mozilla Firefox & their inspector element consoles.

Sublime Text 3, Notepad ++,

See Course Outline (Next Page)


Course Outline:

Course standards: National Visual & Performing Fine Arts Standards:

Creating, Performing ,Presenting, Producing, Responding, Connecting: [ CR, Pr3 Re, Cn ] The California Visual & Performing Fine Arts Standards, are incorporateand within the above

national standards, which will be soon adopted by the state in the future.

Mission Valley Regional Occupational Program Standards: Workplace Skills and Behaviors, Employment & Career skills, Professional Practices.

Course Intro

Objective(s): Students understand the course expectations, requirements, rules, and routines. Course Form Review, Discussion, Q&A & Forms to Return:

Syllabus, Media Release, Computer Network Use AgreementAHS Website Pre-Publication Checklist & Parent ReleaseCA State Mandated Sexual Harassment TrainingStudent intros, icebreakers, computer assignments

Readings: Course forms and contracts, syllabus.

CODEACADEMY TUTORIALS ONGOING THROUGHOUT YEAR-LONG COURSE

Objective(s): In preparation for class exams and teacher observational assessments, students are asked to register an account through codecademy, and in an ongoing process complete trainings for the Html & CSS as well as the JavaScript

Websites: http://www.codecademy.com/


Basic HTML, HTML5: Tags, Elements, Expressions , direct & absolute links

Objective(s): Students create three separate CV/ Resume Files in Sublime Text 3.0, and a vector graphic based personal business logo, in Adobe CS6 Photoshop or Illustrator.

Websites: http://www.w3schools.com/ website & The Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/HTML/ for HMTL tags element reference, and use tutorials to investigate and understand html in expressive ways. http://www.smashingmagazine.com/2009/04/01/10-handy-tips-for-web-design-cvs-

and-resumes/

Creation:

A) Basic HTML: html template tags: html, head, title, body, h ,hr, br , p, b, em, i, B) Above, plus links to institutions <a href> with relative path images used.C) Above plus images as links to institutions, img src=”” , absolute links, parent

directory, index files. type=”_blank” , Alt=”” Present: Students present their final CV/ resume to the class for critique.

Readings: Above websites for development reference: facts upon tags, expressions, attributes.10 handy tips for writing web-based CV/resumes (class discussion and critique of example resumes from the reading, and review of the author’s creative and developmental process for creating her resume. http://www.forbes.com/fdc/welcome_mjx.shtml : Why Every Job Seeker Should Have a Personal Website, And What It Should Include, by Jacquelyn Smith 2013.

Vector Graphic Logo Creation in Adobe CS6 Photoshop & Illustrator

Objective(s): Students will use Adobe CS6 Illustrator & Photoshop to create a vector graphic based personal professional business logo, to apply to their online website CV/ Resume. Students will learn to use the pen tool to create shape layer paths to design their logos.

Creation: A) Photoshop & Illustrator vector graphic .psd, .jpeg,.png file of a personal business logo.

Websites: Adobe.com tutorials on The Pen Tool and its use to create vector graphics utilizing adobe layers and shape paths to design personal logos. Readings: websites for development, Box model layout, website scoping example, Mozilla developer

network html extensive element reference.

Div’s, Spans & Floats, Attributes: ID & Class, Link decoration styles

Objective(s): Students will learn to create a box model based layout through schematic drawings & box model layout drawings to scope the design of a given website. Students create


2 websites homepage layouts based upon following a basic html/CSS tutorial for a 2 &3 column layout with header, horizontal navigation links, footer, and the use of web-based placeholder texts, spans, divs and floats in CSS.

Websites: http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/ (3 column layout)http://html.net/tutorials/css/lesson8.php

Creation: A) & B) Students create a two and three column layout homepage, styling them with internal, and external CSS style sheets.

C) Students re-create their CV/ Resume website utilizing: divs, spans, and a external CSS style sheet.

D) Students will create an opening navigation to a homepage of a fictional site, utilizing the letters of their 1st of last name as the anchor elements of a horizontal or vertical navigation, which is centered in the window.

Readings: websites for development, Box model layout, website scoping example.

Box Model Layout, The Domi : Inspect Element, and Web Site Scoping –Favorite Website (Part 1)

Objective(s): Students will use the browser’s inspector element and Mozilla’s X-ray goggles web app, to effectively seek out html syntax, CSS styling and style sheets in resources, and overall scoped design of a favorite website. They will manage the inspect element to affect computed layout and style to a given website. Once this “box modeled” layout is scoped upon paper, students will then code their scoped website design emulating the original design, and applying personalization of their own.

Websites: https://developer.chrome.com/devtools/docs/dom-and-styleshttps://developer.mozilla.org/enUS/docs/Tools/Page_Inspectorhttp://morpht.com/website/scopinghttps://goggles.webmaker.org/

Creation: A) Students will scope out in a box model layout their favorite website, on paper using a ruler, a pencil or pen, and the browser’s inspect element. Readings: Websites for development, Box model layout, website scoping example, Mozilla Developer Network html extensive element reference.

New HTML & HTML5 Element(s) & Assoc. Attributes - Presentational Website;

target attribute _blank


Objective(s): Students will combine their prior learned knowledge from previous lessons to create a multiple page website in which to present: two newly learned HTML5 elements, their attributes and properties, show an example of the proper use of these elements, reference them in the MDN (Mozilla Dev. Website) through absolute links to each elements resource page, explain their: properties, values, attributes and create an additional link to your re-created favorite website to demonstrate further use of the presentational elements found within your site.

Websites: Mozilla Developer Network, Link to Student recreated favorite website, citing use of their new element and demonstration of its proper use.

Creation: Create a multi-page website which introduces to the class two new html elements of your choosing. The site will also make use of absolute links to the Mozilla Dev. Network reference pages for your elements, allowing the student access to attributes and properties unique to their elements and also sharing their global attributes in common with other elements. Pages will present elements in proper html syntax with tags (opening & closing; if closed,) These may use the SVG element to draw your tags. Your homepage contains your name and links to your other pages. This page should also contain a navigation inside a div, and will also contain a link to your recreated favorite website. All links are to employ the target attribute of _Blank.

Don’t Make Me Think By Steve Krug :

Web Usability Design Principles & Site Testing

Objective(s): Through excerpted readings and a PowerPoint lecture with audience participatory questions and quiz, students will learn the basis for creating user-friendly design, and practical websites. Students will learn to think as a designer, website developer, and experienced site user to prevent obvious & not-so-obvious web design flaws.

Websites: http://www.sensible.com/Respond & Create: Students & Instructor will critique the CV/ Resume websites and Element

Presentation websites recently created and critique them in context of the objectives laid out in Steve Krug’s book.

Readings: PowerPoint slide text, and students’ websites.

10 Usability Heuristics for User Interface Design by JAKOB NIELSEN

Objective(s): Through excerpted readings Students will learn to identify specific Heuristic usability traits that when rectified will enable anticipated website users to avoid


major and minor problems; emphasis upon locating and identifying minor problems that lead to user turnoff.

Websites: http://www.nngroup.com/articles/ten-usability-heuristics/http://www.nngroup.com/articles/usability-problems-found-by-heuristic-evaluation/

Respond & Create: Students will critique the CV/ Resume websites and Element Presentation websites recently created and critique them in context of the objectives laid out in the above websites, and creative solve these problems within their sites.

Readings: see sited websites above.

EXAM #1 SEMESTER 1 FINAL PART A COURSE APPLICATION WEBPAGE

Objective(s): Students will complete a designed website homepage of the instructor’s choosing as accurately as possible, including use of a single pixel background, multiple nested divs, in a 2 column layout, color transparency, web kit-gradient, box-shadow, field set, focus, background-color, input types, use of select.

Websites: Students Favorite website, box model scoped. for structure and CSS

Creation: A) Recreate the style of an existing favorite website from the divs up.

EXAM #1 SEMESTER 1 FINAL PART B ACME CORP WEBSITE HOMEPAGE

Objective(s): Students will design to screenshot parameters, a homepage for a fictitious company: Acme Corp. This website includes the use of CSS, inputs, background image and header image company logo, absolute links, placeholder texts, and border shadow, specific font to be matched, and alpha attributes applied to text.

Websites: Students Favorite website, box model scoped. for structure and CSS

Creation: B) Apply your personal style in a new innovative way to re-design your favorite website.


REDESIGN 1 : DECONSTRUCT & EMULATION OF STUDENTS' FAVORITE WEBSITE (PART 2)

Objective(s): Students will use the inspect element, W3schools.com, Mozilla Dev. Network, and skills from past tutorials to emulate (re-create the style of the existing website), without copying code, but instead designing from the previously scoped website layout using the div’d box model.

Creation & Websites: Students’ Favorite website, box model scoped for structure and CSS. A) Recreate the style of an existing favorite website from the divs up.

Reading: Applicable website research to complete effective emulation of website.

REDESIGN 2 : REDESIGNING STUDENTS' FAVORITE WEBSITE (PART 3)

Objective(s): For students, Choice in decisions can sometime, make or break the motivational power student place in work. Also, the ability to challenge one's self further if they have the capacity and skills to do so, cannot be understated in allowing students to show their skills. Thus I give students the option of undertaking one of two different Quarter Exams, and then allow them to take on the challenge of furthering their knowledge and skills in the additional assessment. Given An Image Logo, and a screen shot, how perfect can student match the screenshot. Students must design their box model layout on paper showing the scoping design of their web page, and then complete it. Students will use the inspect element, W3schools.com, Mozilla Dev. Network, and skills from past tutorials to emulate (re-create the style of the existing website without copying code, but APPLY THEIR OWN PERSONAL STYLE TO THE RE-DESIGN, utilizing their previously scoped website layout as their basis for their box model.

Websites: Students’ Favorite website, box model scoped for structure and CSS Creation.

https://developer.chrome.com/devtools/docs/dom-and-styles https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector http://morpht.com/website/scoping https://goggles.webmaker.org/

B) Apply your personal style in a new innovative way to re-design the favorite website.


MOOD BOARDS- VISUAL CONCEPTUAL DESIGN COMMUNICATING APPEAL TO THE CLIENT

Objective(s): After reviewing the website reading, and several company mood boards, students during this week-long lesson students will first decide on the design Theme direction they’re going to create, go out and photograph images from their worlds that represent their thematic ideas, create & Present for critique (3) mood boards to represent three different “assigned” website clients, and prepare to pitch their design ideas in a “mood board” (designed in html) their website’s: design, feel, color and texts.

Create: A) Students will create 3 mood board representing three “assigned” clients.Websites: http://www.creativebloq.com/graphic-design/mood-boards-812470

MEDIA QUERIES & MOBILE USER INTERFACE AND PLATFORMS Objective(s): Students will learn to adjust websites designs to fit contemporary media standard formats, designing a single website to conform to at least 3 different media formats, adjusting designs for aesthetics, and user interface usability(UI).

Create: Three variations upon their website CSS Stylesheets to adjust designs in their sites for 3 major media formats: HD screen, Ipad, and Iphone/Android formatsWebsites: http://www.sitepoint.com/web-foundations/understanding-media-queries/

This is an excerpt from Jump Start Responsive Web Design, by Craig Sharkie and Andrew Fisher.


CLIENT WORK #1 AMERICAN HIGH SCHOOL’S EAGLE LOGO & LOGO USE AGREEMENTS

Objective(s): Introduction to this assignment comes from an initial request of our current Associated Student Body Director to have American High students redesign out American High School’s eagle logo, and Our “A” logo to incorporate Facebook, Twitter, Instagram, & The as well as incorporating our school logo with Facebook’s logo as seen on Granada High’s, and my response of turning down the offer to complete this job on the grounds of infringing upon brand logo use agreements, and ensuing copyright infringement and policies to use to avoid copyright issues. )This project may be directly connected with the FUSD graduation requirement of serving 40 hours community service learning, as long as project agreements are met, and instructor has signed off on proper paperwork )

Create: Redesign in vector graphic form, with a transparent background American High’s Eagle, for better aesthetics and fit with our website.

Websites: Graphic Design Employment

https://www.printdesignblog.com/facebook-and-twitter-logo-usage-for-graphic-designershttps://about.twitter.com/press/brand-assetshttps://www.youtube.com/yt/brand/using-logo.htmlhttps://help.instagram.com/304689166306603

Readings: See above websites

CLIENT WORK #2

Objective(s): Creation of a website based upon client’s needs (Community Service- non- compensated work.)

Creation: Students will have the opportunity to meet with a clients from within the school community and develop mood boards, and scope and create a website based upon client’s needs. (This project may be directly connected with the FUSD graduation requirement of serving 40 hours community service learning, as long as project agreements are met. )

Websites: All prior listings, but also including research into various other sites that may include direct competitors of the client, or sites the client likes the aesthetic of.

Readings: Pre-Publication Checklist, company newsletter, and internal documents to help establish the thematic traits and signatures of the client company.


CSS ANIMATIONS

Objective(s): This lesson walks students through a scaffold run of 4 CSS animation projects;

Creation: A) animating color changes with durations B) the above with position changes C) the above with duration, timing-function, delay, iteration, direction, play- state4→Student creation using all of the above skills.

Websites: http://www.w3schools.com/css/css3_animations.asp https://developer.mozilla.org/en-US/demos/search?q=animations

Readings: Reading for these assignments are specific to certain animations tutorials the student is willing to tackle, and implement in their website design.

JAVASCRIPT JS-CLOCK EXTENDED ANIMATION THROUGH PROGRAMMING

Objective(s): Students will design and create HTML, CSS, animated clocks, then re-design them to become accurate through the use of JavaScript to pull in from the DOM, the current local time.

Creation: A) Design using images and / or vector graphic SVG html elements a programmed working clock which uses code to keep time, and the browser information upon date and time to confirm accuracy.

Websites: https://developer.mozilla.org/en- US/docs/Web/API/Canvas_API/Tutorial/Basic_animations


WORDPRESS WEBSITE CREATIONS & PUBLISHING Objective(s): Students will learn to use the website WordPress, it’s interfaces, and designed styled templates to create an aesthetic portfolio site. They will also learn the requirements and formats to design and publish their own WordPress Templates on the site. Create: Students will create a portfolio website in WordPressWebsites: https://wordpress.com/

Readings: http://www.computerworld.com/article/2495111/open-source-tools/choosing-an-open-source-cms--part-3--why-we-use-wordpress.html


FINAL EXAM PROJECT WEB DESIGN PORTFOLIO & PROPOSAL AND PROJECT

Objective(s): Students will design and create an HTML, CSS, and perhaps JavaScript rich Portfolio that also incorporates additionally a new designed website, after having submitted a mood board, scope layout, and proposal write-up showing schematic hierarchy of the site, including, buttons, inputs, forms, links etc…

Creation: Portfolio Website, incorporating all course work examples made by the student.

Websites: Websites used for this project consist of all previous websites as references, and additionally any websites found through student and instructor research that assist

in the complete of the students portfolio website


Computer Lab DonationThe American High School Visual & Performing Fine Arts Department , and Media Arts Courses, and MVROP AMET Cluster are pleased to accept cash donations that will provide enhanced learning opportunities for students. Donations are voluntary, but much appreciated. Donation contribution is not a requirement for participating in any educational activity. Donation funds will be used to purchase:

❑ Printer paper❑ Kleenex❑ LaserJet ink❑ LCD projector bulbs❑ Replacement computer parts and peripherals❑ Additional software licenses

GradingGrades are based on total points earned for participation, daily work, group projects,

and assessments. The following scale will be used:

90%-100% A80%-89% B70%-79% C60%-69% D

68% & Below F

Homework Requirements and PoliciesWeb Design & Development Course Description Last updated February 5th, 2015: | Page 13 of

15

All work must be completed in class. No work will be accepted from home computers unless prior arrangement is made with the instructor.Regular attendance is imperative. Students with excused absences must arrange with the instructor to make up work during lunch or after school. Missed assignments are given a grace period equal to the number of school days missed. After that, no late assignments will be accepted. Assignments and quizzes missed because of truancy will automatically become a “zero” and will not receive credit.

PLEASE BE AWARE THAT M.V.R.O.P. Courses Do not honor independent studies as a way to complete missed work due to absences from the course instruction.

Non-excessive School Business excused absences are the only allowable absences, which do not require hours to be made up by the student to make-up for the loss of units.

Classroom Rules: Students are not allowed to:Open, attempt to repair, or move computers hardware, Copy programs or other students’ data without prior permission from the instructor.

STUDENTS MAY NOT Install software on AHS / MVROP computers.

Bring food, drinks (including water), or chewing gum near computer workstations.VIOLATION OF THIS EQUALS A TARDY; 3 TARDIES EQUALS A CALL HOME AT SECOND OFFENSE, AND AN 1HR DETENTION ON THE 3RD OFFENSE. without prior permission from the instructor.

( Please continue to see next page.)


Your Printed Names & Signatures Below Acknowledges the Following:▪ I have read and acknowledge an understanding of the above class policies, procedures, and

requirements, and that I fully agree to participate to my fullest in the course. ▪ I have also been provided access to and have read the School Loop Link for : THE PRE-

PUBLICATION DESIGN REVIEW OF STUDENT CREATED WEBSITES, and acknowledge that I understand that my student’s(s)’ first and last names will be listed as the web designer / master for their created web sites, and that only websites meeting all criteria layout out within this PRE-PUBLICATION DESIGN REVIEW document may be considered for Live Posting to the World Wide Web* Not all sites meeting the criteria will be posted, and this is at the discretion of the Course Instructor, FUSD and MVROP. (Server Use and access is, Pending Approval by Fremont Unified School District’s, Chief Technology Officer, Mr. Joseph Siam.)

▪ I acknowledge, that I and my student ARE CURRENTLY REGISTERED with separate emails on School Loop, and I currently have access to this course, its calendar, emails, and grades. ( BELOW :please list emails; and a explanation note.)

Note: ___________________________________________________________________

I understand Students who violate any classroom rules will be subject to lunch-time detention or after-school detentions.

o I understand that Students with excessive absences will lose semester units. Should missed hours not be made up, prior to two weeks to the close of a semester, a loss of course units will be incurred relational to the number of hours missed, based upon the MVROP formulae of 4 hrs. = .5 units, 8 hrs = 1 units, 12 hrs = 1.5 units etc…

o I understand that Students who violate MVROP or FUSD computer network rules may be subject to suspension and/or immediate withdrawal from the class, which will result in a loss of credit for the semester. In accordance with FUSD Ed. Code § 48904(b)1, students and/or legal guardians will be liable for damage to equipment or materials if damage is a result of a student violating one or more of the above rules.

Grade Level

Student Signature Date

_______________________________________________________________________________________________

Printed Name

_______________________________________________________________________________________________

Parent / Guardian Signature Date

________________________________________________________________________________________________

Printed Name


Documents

BC_BrianoWebDesignSyllabus_2_5_2015.docx.docx€¦ · Web viewWeb Design & Development |American High School . Course Description Instructor: Mr. B.C. FUSD District Course Code:TCWAF-001