>> First Day Semester Schedule on line Schoology GSHS Account I:/ drive - transferring files E-News addresses InformationNOW Socrative

Size: px

Start display at page:

Download ">> First Day Semester Schedule on line Schoology GSHS Account I:/ drive - transferring files E-News addresses InformationNOW Socrative"

Janel Rose
5 years ago
Views:

1 Web Design Unit: Internet as a Resource Core Standard # 1,4 WD-1.1 Demonstrate a basic knowledge of the internet WD-1.2 Access information using electronic sources WD-1.4 Analyze the affect of the Internet on society WD-4.9 Analyze ethical issues in choosing design solutions WD-4.10 Analyze the effective use of symbols, elements, principles, and media using appropriate terminology 1 Internet Research Objectives: 1) The student will be able to select and effectively use a search engine and the Advanced Search feature of Google. 2) The student will be able to discuss ranking of web pages by search engines and the variability of search results. 3) The student will be able to discuss and use the CARS and/or 5W checklist to evaluate websites. 4) The student will be able to select news sources on the internet and categorize news stories from the internet. 5) The student will be able to discuss blogs. 6) The student will be able to work collaboratively in small groups to produce blog entries. 7) The student will be able to locate, select, and download images and cite them appropriately. 8) The student will be able to discuss the ethical guidelines of downloading and citing internet sources of graphics. >> First Day Semester Schedule on line Schoology GSHS Account I:/ drive - transferring files E-News addresses InformationNOW Socrative >>FirstFive discuss TooSoon / Social Media News Project / current events discussion INSPIRATION (frames by topic) World, Economy/Business, Politics/Government, Science/Technology, Health, Sports, Entertainment Totals by category from OZY/Yahoo/BBC >> Socrative / Schoology Discussions Olympic Parents Socrative - short answer TTB style Hans Rosling - Don t Be Ignorant Schoology Discussion >> Effective Internet Research Discussion: Fake News Compare search results (prompt students for list) web page rankings / meta tags Google Advanced Search Evaluating Internet Research Sources Blank Inspiration diagram CARS 5W CRAAP Visit legitimate/spoof sites >> Images / Courtesy Lines / Plagiarism & Ethics search for images by topic discuss credit /courtesy lines for photos Ethics discussion Assign topic Download 5 pics keeping track of source pixel vs physical size discussion PhotoPage Project: Place images with courtesy line >> gshsblog 1 Project Visit gshsblog {The Expert} Blog1 in Word ZigZag procedure post-it favorite

2 Core Standard #3, 4 WD-3.1 Create a basic template WD-3.2 Develop website architecture, prototypes, and user interface specifications WD-3.3 Demonstrate knowledge of usability and interface design WD-3.4 Link web objects WD-3.5 Demonstrate knowledge of content management WD-3.6 Construct and maintain web pages using current editing software WD-3.9 Observe organized structure which demonstrates and understanding of correct pathnames for relative and absolute links WD-3.13 Analyze and optimize graphic files for web delivery WB-4.1 Identify and apply effective design solutions based on content 2 Core Standard #2 WD-2.1 Create and format a table on an HTML/XHTML document WD-2.2 Integrate scripting into HTML/XHTML documents WD-2.3 Utilize forms in an HTML/XHTML document WD-2.4 Identify and use appropriate HTML/XHTML elements and attribute syntax for semantic web page markup DreamWeaver CC Objectives: 1. The student will be able to utilize principles of good web design. 2. The student will be able to create, edit, and format head content, text formats, blockquotes, ordered lists, unordered lists, special characters, and links. 3. The student will be able to insert, edit, format and position images, rollover images and Flash files. 4. The student will be able to identify and use basic text, formatting and table tags in HTML. 5. The student will be able to identify and discuss HTML color tags. 6. The student will be able to edit Dreamweaver pages in code and live view. >> DreamWeaver Intro / Vuvuzella Project Create site by student name in I: Head content Text format Blockquote / remove Ordered lists Unordered lists Insert special characters Horizontal rule Insert date links Insert images / rollover image Insert Flash Add pages Text only hyperlinks >> PhotoShop Review/Fundamentals resize rotate Crop Inspiration diagram of above >> HTML Basics / Project {projector} Examine code view Create page in HTML in a text editor Create Inspiration diagram of tags as used in above Basic text tags / Table tags / HTML Color chart {discuss web safe colors} save as HTML open in DreamWeaver make changes in code view >> HTML Project, cont. >> Vuvu work day 2 Pictures by Student Photoshop to specs >>Vuvu upgrade 2 Pictures from net / courtesy lines Insert pictures Inspiration diagram of all Dreamweaver aspects

3 3 Core Standard #1, 2, 3, 4 WD-1.3 Identify key events in history of the WWW, Internet and Intranet WD-2.6 Demonstrate knowledge and implementation of CSS through proper syntax and effective use of external, embedded, and in-line style sheets WD-3.7 Construct web pages using standards compliant HTML/XHTML and CSS that successfully pass validation tests WD-3.11 Recognize file types and file extensions WB-4.2 Discuss the importance of proper research, brainstorming, and thumbnails HTML / DreamWeaver CC / CSS Objectives: 1. The student will be able to create, edit, and place tables. 2. The student will be able to combine/split table cells and edit the background, color, layout, and width of cells. 3. The student will be able to add, remove, and re-order pages in the navigation view. 4. The student will be able to create image hyperlinks and use alternate presentation styles. 5. The student will be able to identify the need to compromise web design due to external factors. 6. The student will be able to select page styles appropriate to content and identify commercial page layout concepts. 7. The student will be able create, edit, and use a CSS menu bar. 8. The student will be able to create, apply, and edit cascading style sheets. 9. The student will be able to customize and link to specialized cascading style sheets. >>Titan Carvers Project Content to page similar to Vuvu project Project done from project description >> Carvers work day 2 Pictures by Student 2 Pictures from net / courtesy lines Insert pictures ZigZag + Evaluation checksheet >> Cascading Style Sheets Video CSS Inspiration Diagram CSS Styles Panel CSS code selectors and declarations >> CSS Menus Drop15 create TitanDrop15 site copy page / css files explore Titanmobile.htm / TitanDrop15 Add menu items adjusting using style sheets >>Add activities sub-menu and items >> Headlines Page (alternate topic) Simple Grid Template Page Design vs Live view >> Pics download Rename with size Add Text >> YardGuys Project YIKES as Inspiration diagram Edited Responsive page Set-up all pages >> Biosphere Services page / Working with Tables set up tables edit contents, color, alignment, width split / combine cells pics in cells / pre-size cell background pic Custom Care services page {into a table} >> YardGuys Upgrade select and save photos from the internet PhotoShop - resize & crop Place pics with courtesy lines Alternate representations >> News Page new employee pic Add navigation to all 4 pages {all 4 pages}

4 4 Core Standard #2, 3 WD-2.6 Demonstrate knowledge and implementation of CSS through proper syntax and effective use of external, embedded, and in-line style sheets WD-3.7 Construct web pages using standards compliant HTML/XHTML and CSS that successfully pass validation tests DreamWeaver CC / CSS Objectives: 1. The student will be able to create and edit responsive starter page types including Blog post, E-commerce, and pages. 2. The student will be able to create, edit, and save a calendar for use in a website. 3. The student will be able to create a survey page in DreamWeaver. 4. The student will be able to create, insert, and edit a carousel and the requisite cascading style sheet. >>Carousel in CSS practice on a blank Blog Post page >>Blog Post Site Project Change for a Dollar {this site a reaction to above} Find sites for links Write Blog posting >>Blog post responsive page explore source code / css Create logo Photoshop: pics student 200x200 / logo 200x50 >>Changes in css stylesheet color rgba vs hex >> Add Carousel to Blog Post Project get pics from internet {courtesy lines on site} crop and resize to standard size >> PhotoShop #2 Inspiration diagram Photoshop Procedures Selection & magic eraser Resizing Transparent background Multiple practice sessions >>TitanWear Site Project ecommerce responsive starter pages add content >>Ecommerce css screen shot cheatsheet if needed >> Photoshop day sports logos/ team logos to tshirts/hoodies >> Calendars calendar widget WORD calendar {edit content for each day} export as pdf add link to TitanWear >> Web page surveys survey form code practice session Inspiration diagram >> Survey Page Customer survey (business related) Add to TitanWear >>Sample E-News Site Project responsive page sample Content day >> Photoshop/ work day >> Site Project responsive page sample Content day >> Photoshop/ work day put feature pic in W:\ >> Work day if needed Send Through G-Mail ZigZag & discussion

5 5 CSS / DreamWeaver CC Objectives: 1. The student will be able to create citations in the MLA format for Internet Sources. 2. The student will be able to add sound and video files to a page. 3. The student will be able to record, save, and use sound files using Audacity. >> Citing Internet Sources AutoBib/Docs/Dreamweaver shuffle use page for practice Bjarni Herjolfsson research as sample Alternate: Origins of Hoosier research for text Citations on page >> Topic Research Site responsive page add two sections six sources / quotes citations - top section of page >>work day ZigZag Socrative Quiz {each student submits own question} >> Internet History Site Blog responsive page ARPANET sample assign history topic research & content day >> Schoology Discussion - students post 3 facts Inspiration Diagram from Discussion >> Sound and AUDACITY Audio file formats - Inspiration diagram Basic operations Practice sessions {quotes from internet} wave files / MP3 >> Using video clips Simple Grid Template Page Transfer clips to site in I:/ {everything in I:/} link to clips Good Morning Titans practice sessions >>Instructional Website Project Create site, page Simple Grid Template Page Select teams of 2 (1 site per team) Select topic / set up sites by team Camera day (North) Sitework (South) North/South switch day above {Adobe Premiere/Media Encoder to convert to mp4} ZigZag

6 Unit: Animation Core Standard #4 WB-4.3 Evaluate the aesthetics of web design WB-4.4 Given the target audience, the student will be able to show the importance of assessment in the advertising media industry WB-4.5 Explain the elements of visual design unique to the commercial art and graphic design WB-4.6 List and describe the components of a design WB-4.7 Apply brainstorming techniques to develop many possible solutions WB-4.8 Explain the human, social and environmental issues that affect the design solutions WB-4.13 Begin, define, and solve challenging visual problems, demonstrating skill and in-depth understanding of media and processes 6 Animate CC Objectives: 1. The student will be able to create images for use as Animate content. 2. The student will be able to create, edit, and manipulate content in layers. 3. The student will be able to insert keyframes and motion tweens. 4. The student will be able to save, edit, and place.swf movies. 5. The student will be able to construct an internet banner style ad combining visual and audio elements. >> One Layer Animate / Intro FirstFlash Diagram (direct to student) Timelines Insert Keyframes Motion tweens sgsc logo >> Two Layer Animate Pic & Background Layers select background & logo (4 companies) Photoshop: size pics - background & logo adding background layer to FirstFlash procedure >> Two Layer Project >> Three Layer Animate Practice day on 2 animated layers resize and use Lee and Grant background map visible layers >> Three Layer Animate Project use folder in I:/ select, save, Photoshop 3 pics from internet (designated topic or news story) background -- 2 for movement insert Animate Movie to Dreamweaver page (table) ZigZag if time allows >> Banner Ad Project Sales item / Company Logo / Background search / select / save / Photoshop images Create Animate movie from above (sized to Banner) Background picture layer Transparent sales item layer Logo Layer >> Commercial Sound for Ad Commercial music samples Inspiration diagram descibing Background music Write copy to match music/vehicle Practice timing >>work day Recording day / Animate construction (add sound layer) if needed Projector ZigZag {sound} Schoology Discussion >> Historical Event Site Blog Post responsive page Research Day student-selected event with approval students search / select / save / Photoshop images background / 2 pics for Animate4 other images Courtesy lines for ALL photos text sources for summary Citations for above >> Animate Zig Zag Evaluation Checksheet

7 Unit: E-Commerce Core Standard #1 WD-1.5 Trace the history of Internet communication and commerce Core Standard #3, 4 WD-3.8 Design functional websites for consumer, education, and information based markets WB-4.11 Evaluate the effectiveness of elements and principles in other design solutions and use this evaluation toward personal work WB-4.12 Create design solutions that use specific elements, principles, and functions to solve problems and communicate ideas 7 Internet Business Concepts 1. The student will be able to identify and discuss the fundamental concepts of e-commerce. 2. The student will be able to identify and discuss the components of a well designed commerce site. Websites Objectives: 1. The student will be able to demonstrate a working knowledge of all concepts from the class through website projects. >> E-Bay Project [sale item variant] Compare and contrast listings / photos Class discussion of good listings / photos Select teams of 3 Items {from donated} Research Item >>Listing / PhotosDay Team writes listing 3 Photos by team List with selected photos >> Put on E-Bay [E-Bay Results after auction concludes] >> E-Commerce Fundamentals (ppt) Inspiration from slides Components (ppt) Find 10 sites to purchase items from selected list Site component checksheet >> Single Page Catalog Style WebPage Arapaho Mattock Sample page Responsive ecommerce >> Catalog Page Site Portfolio responsive Student selects a garden implement source material single page with price, company info, picture projector proofread as group correct missing phone #, etc. >> Manufacturing Careers Website responsive page Research Day Four Companies {Optional 5th} Select career >> ZigZag & Discussion >> Local Business Website responsive page Research Day select from town site 7 elements of commercial sites Flash ad for site {bonus for actual pics taken by student} [If time allows] Self-Web

Mrs. R. Jeanine Ewert Beaverton High School Beaverton, Michigan

Mrs. R. Jeanine Ewert Beaverton High School Beaverton, Michigan Course Description Students in this course will learn how to design, develop and publish web sites and web-ready communication. Students