Course Title WEBSITES FOR EVERYONE {Websites for Everyone: Implementing WordPress (CMS) Sites for Business and Self-promotion} Semester Fall 2017 Catalogue Number Art145-1 Class Number 1078 Room A201 Dates Sep 5, 2017–Dec 19, 2017/ Wed. 9:55AM – 1:15PM Pre-requisite None Instructor Holly Sears Office Art Department / Main Office Telephone 201-200-3214 (Art Department – leave a message). Email NJCU@hollysears.com Office Hours By appointment

Course Description Using open source Content Management Systems such as WordPress, students will create a website. They will analyze the requirements for their site, design and compose original content, prepare digital media, customize code, and optimize for effective delivery. Course Objectives Students will gain familiarity with the technological processes and conceptual organization behind websites, which are already integral to their daily lives. In creating a website, students will have the experience of composing content, determining what information is essential, and discovering how to organize that information for purposeful, visual communication. During the course of this class, students will act as collaborative teams with interchanging roles of client and web-developer, in order to engage and improve verbal communication skills, create and organize content (both visual and written) and work through the challenges that are intrinsic to creating interactive information design. Students will demonstrate technical skills and design trial versions while using the elements and principles of design. Multiple solutions to design problems will be created. Through class lectures, individual research and class critiques, students will formulate critical assessment and determine the effectiveness of various websites. By the end of the course, students will be able to analyze and assess the requirements of a new website project, produce, manage and strategically edit the required content, as they create an effective website on the open source content management platform (CMS) - WordPress. These analytical and practical technology skills can be applied to the creation of websites for personal presentation, occupational ventures, or community organizations. These are essential skills for many employment opportunities. The course will address the modes of critical thinking to evaluate and solve problems, and oral communication.

Required Textbooks *WordPress: The Missing Manual, 2nd Edition By Matthew MacDonald Publisher: O'Reilly Media Final Release Date: June 2014

2

Through NJCU: http://njcu.bncollege.com/webapp/wcs/stores/servlet/WORDPRESSMISSING_MANUAL/BNCB_TextbookDetailView?sectionId=74400364&item=Y&catalogId=10001&langId=-1&displayStoreId=33051&storeId=33051&partNumber=MBS_1525433&productId=500021121346&sectionList=&booksAddh Book Oreilly: http://shop.oreilly.com/product/0636920027508.do Book Amazon: http://www.amazon.com/gp/product/144934190X/ref=pd_lpo_sbs_dp_ss_1?pf_rd_p=1944687442&pf_rd_s=lpo-top-stripe-1&pf_rd_t=201&pf_rd_i=1449309844&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=15D0FEPSW06XMJ76QSKA Kindle: http://www.amazon.com/WordPress-Missing-Manual-Matthew-MacDonald-ebook/dp/B00L9IVLJQ/ref=mt_kindle?_encoding=UTF8&me= Supplemental Study http://WordPress.org https://make.WordPress.org/support/handbook/ http://WordPress.com Other Recommended Resources: *WordPress: Visual QuickStart Guide, 3rd Edition By Matt Beck, Jessica Neuman Beck Published Oct 30, 2013 by Peachpit Press. Part of the Visual QuickStart Guide series. http://www.peachpit.com/store/WordPress-visual-quickstart-guide-9780321957610 http://www.amazon.com/WordPress-Visual-QuickStart-Guide-Edition/dp/032195761X HTML and CSS: Visual QuickStart Guide, 8th Edition By Elizabeth Castro, Bruce Hyslop Published Aug 9, 2013 by Peachpit Press. Part of the Visual QuickStart Guide series. http://www.peachpit.com/store/html-and-css-visual-quickstart-guide-9780321928832 http://www.amazon.com/HTML-CSS-Visual-QuickStart-Edition/dp/0321928830 The WordPress Anthology By Mick Olinik and Raena Jackson Armitage © 2011 SitePoint Pty, Ltd http://www.sitepoint.com/store/the-WordPress-anthology/ http://www.amazon.com/The-WordPress-Anthology-Mick-Olinik/dp/0987153005 Web Designer’s Guide to WordPress: Plan, Theme, Build launch By Jesse Friedman © 2013 by Jesse Friedman New Riders, 1249 Eighth Street Berkley, CA 94710 Learning Web Design, Fourth Edition By Jennifer Niederst Robbins

3

© 2012 Littlechair, Inc. Published by O’Reilly Media HTML & CSS Design and Build Websites By Jon Duckett © 2011 John Wiley & Sons, Inc. Published by John Wiley & Sons, Inc. CMS: http://en.wikipedia.org/wiki/Content_management_system https://en.wikipedia.org/wiki/Static_web_page http://www.webdesignerdepot.com/2011/10/top-10-content-management-systems/ http://www.smashingmagazine.com/2009/03/05/10-things-to-consider-when-choosing-the-perfect-cms/ http://blog.udacity.com/2014/12/front-end-vs-back-end-vs-full-stack-web-developers.html http://manningdigital.com/blog/2014/01/23/difference-between-front-end-and-back-end-development HTML & CSS: https://developer.mozilla.org/en-US/docs/Web/HTML/Element http://www.w3schools.com/html/default.asp http://www.w3schools.com/tags/ref_byfunc.asp http://reference.sitepoint.com/html http://www.w3schools.com/cssref/default.asp https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors http://www.wpbeginner.com/wp-themes/default-WordPress-generated-css-cheat-sheet-for-beginners/ https://codex.WordPress.org/CSS

Evaluations Evaluation/Grades will be based on attendance to classes, participation and attention in class projects and discussions, and the completion and the effort given to class work and outside assignments. Students will be evaluated on their oral presentations, development and editing of written content, application and creation of visual/design elements, technical execution into digital media and their evolving critical analysis and assessment of each segment of their final project as outlined through each assignment and the corresponding class work. There will be ongoing presentations by each student showing and describing the progress of their personal projects in addition to group discussions where students analyze the success of their and their fellow students stated goals and strategize for more effective solutions to these goals. There will be frequent quizzes at the beginning of many classes (with a time limit for completion) to assess each students understanding of the weeks work. Assignments and completion of class work will require at least 4-hrs per week of work outside of class. Students are expected to arrive on time, ready to work with the required assignments and materials. Deductions to grades are made for; each class and partial class that is missed, class work that is missed, not completed as directed or not completed, assignments that are not completed or turned in, lack of participation in class, lack of effort on work in class and assignments. Assignments will be made at the end of each class and a synopsis will be posted on the class web page (http://wfe.webclassnjcu.com) The course will be divided into project components which will culminate in a completed individual website done in WordPress based on each individual’s approved project goals.

4

Grading/Grading Criteria Assignment deadlines and the corresponding evaluation schedule (which may be adjusted to the pace and progress of the class) is shown in the course calendar and class outline. Grades will be made along the following guidelines. A – Excellent work, exceeding requirements, expectations: creatively, visually, technically, and conceptually. All class work completed as directed, all classes attended (no more than 1 missed class), project presentations executed on time with dedicated attention to clear articulation of individual goals and solutions, all technical problems executed and researched as directed, thoughtful, attentive participation in discussions and analytical problems, well developed and executed written content created towards project structure and appropriate for the project goal. B – Good work, above and beyond requirements. All class work completed as directed, (no more than 2 classes missed), project presentations executed on time with appropriate attention to clear articulation of individual goals and solutions, all technical problems executed and researched as required, thoughtful, attentive participation in discussions and analytical problems, fairly well developed and executed written content created towards project structure and appropriate for the project goal. C – Average work, meets requirements. All class work completed as directed, (no more than 3 classes missed), project presentations executed with some attention to clear articulation of individual goals and solutions, all technical problems executed and researched as required, some participation in discussions and analytical problems, somewhat developed and executed written content created towards project structure and appropriate for the project goal. D – Work that is below average, barely meeting requirements. At least 60% class work completed as directed, (4 or more classes missed), some project presentations executed with little attention to clear articulation of individual goals and solutions, some technical problems executed and researched as required, some participation in discussions and analytical problems, some written content created towards project structure and appropriate for the project goal. F – Failure to meet requirements. Less than 60% class work completed as directed( 4 or more classes missed), less than 60% project presentations executed with little attention to clear articulation of individual goals and solutions, less than 60% technical problems executed and researched as required, little to no participation in discussions and analytical problems, partially written content created towards project structure and appropriate for the project goal. RECAP: Deductions to your grades will be made for any and all of the following: lack of attendance, late attendance, leaving early, lack of class participation, late work, incomplete work, not completing classwork or outside assignments, not fulfilling classwork or outside assignments as directed, not completing quizzes as directed, not doing mid-term, practice or final presentations, not including information as directed in presentations.

Policies General Requirements: Students must have a rudimentary knowledge of how to operate a mac computer. To complete class work and homework students are expected to either have access to a computer or are able to make time to use the computer lab at school. Students must be prepared to spend at least an additional 4hrs. outside of class time to complete course work/homework. Expenditures: 1). Class Textbook ($6 - $30) 2). Flash drive ($6 - $30) 3). Host server purchased for this class project - specifications to be discussed, credit card required ($12-15)

5

Ground Rules ! Attendance is mandatory and will be monitored by a sign-in sheet provided at every class (arriving late

and/or leaving early is not acceptable and grade deductions will be made accordingly). ! Each student is expected to participate in class work and discussions. ! Each student is required to complete all class work and outside assignments. Weekly plans and goals are

listed in the syllabus below but there will be variations in the presentation of information and assignments to adjust to the pace and the needs of the class.

If a class is missed, significant information is missed. It is the sole responsibility of each student to make up for both missed class information and in-class work and outside assignments – and to find out what they have missed. It is suggested that students get the contact information of other students and make inquiries from them about what was done in class and the relative outside assignments. An outline of each class and corresponding reference material and homework assignments will be posted on the class website. (http://wfe.webclassnjcu.com). Cellphones, may not be used in the classroom – turn them off. Do not check or send personal email or text messages during class time. If you must check email or use your phone please do so out of the classroom.

Information – General Education Program: This class is one of many in the new Tier 1 classes in the General Education Program beginning this year and will take part in the General Education Program Assessment: General Education courses participate in programmatic assessment of the six University-wide student learning goals. They include instruction in, and assessment of, at least two of these learning goals. Signature assignments, which may include document, picture, sound, or video files, are uploaded to a secure server for anonymous distribution to the NJCU assessment team, which scores them using approved program rubrics. While instructors also grade their own students’ signature assignments, which count toward the course grade, assessment team results are aggregated to provide information about the Gen Ed program as a whole. Your name will not be included in any programmatic assessment data.

6

 Course Title WEBSITES FOR EVERYONE {Websites for Everyone: Implementing WordPress (CMS) Sites for Business and Self-promotion} Semester Fall 2017 Catalogue Number Art145-1 Class Number 1078 Room A201 Dates Sep 5, 2017–Dec 19, 2017 / Wed. 9:55AM – 1:15PM Pre-requisite None Instructor Holly Sears Office Art Department / Main Office Telephone 201-200-3214 (Art Department – leave a message). Email NJCU@hollysears.com Office Hours By appointment Website wfe.webclassnjcu.com  Ground  Rules    I  am  aware  that  this  class  is  a  hands-­‐on  studio  class  and  that  outside  assignments,  work  in  class,  along  with  participation  in  class  critiques  and  discussions  is  essential  to  this  course  work  and  are  thereby  required  as  well  as  part  of  my  personal  evaluation  and  grade.      Additionally,  I  understand  the  following  class  requirements  to:  • Weekly  check  and  review  the  class  website  (wfe.webclassnjcu.com)  for  particular  instructions  or  reminders  and  

outlines  of  the  coursework  and  homework.  • Provide  a  working  email  for  class  communications.  • Arrive  on  time  and  stay  for  the  full  time  period  of  each  class  to  complete  the  in-­‐class  drawings.  • Have  all  materials  necessary  to  work  in  class  upon  arrival.  • Complete  assignments  on  time  and  bring  them  to  class  as  directed.  • Complete  each  weekly  reading  assignment.  • Actively  participate  in  the  class  discussions  in  a  productive  and  respectful  manner.        • Work  at  4  hours  per  week  outside  of  class  on  assignments.  • Not  plagiarize  (copy)  any  other  work  or  part  of  written  reports  from  any  source,  including  web  sites  unless  properly  

sited.  • Turn  off  cellphones  or  digital  devices  in  the  classroom.          

 

I  have  read  the  course  syllabus  and  understand  and  accept  the  requirements  and  the  ground-­‐rules  of  this  class.          Name:                          Signature:                            Date:              

 

7

COURSE OUTLINE & CALENDAR Alterations to this outline may be made based on the pace and performance of the class. Each week, check the class website, wfe.webclassnjcu.com, for the most up-to-date information.

Class #1 – September 6: INTRODUCTIONS & PLANNING

PART I Instructor Introduction  

Review of class Information and expectations (shown in the General Description information, pages 1-5 above)

Expenditures and Outside Class Time Requirements: • Class Textbook ($6-$30 depending on purchase delivery) • Flashdrive ($6+ depending on size) • Webhost Purchase (approximately $15 – requires access to a credit card) • Students should expect to spend a minimum of 4 hrs., each week, outside of class time to complete

homework and weekly projects. There will be frequent quizzes to review critical information.

Curriculum Overview Students will be:

• determining an individual website project based on their personal experience, background, expertise and interests

• establishing a goal of purpose for their project • identifying relative information and any content needed to meet their goals • obtaining their own host server and installing WordPress on that server • analyzing, individually and as a class, each project and the respective goals of each project, and

discussing options for the internal structure and effective delivery for each website • creating and acquiring the content for their website including -

o writing original text o creating/ finding visual components, working with image files and their delivery for web,

learning Photoshop basics o establishing the information hierarchy and determining structure and navigation for their

website o populating all of these elements onto their website and then re-accessing and adjusting based

on critical appraisal • presenting their project through oral presentations to their classmates • evaluating and critiquing the work of their classmates

All website development will be done in a WordPress environment with individual host servers and urls.

8

Intro to how websites work and the professional expertise and roles in web development

PART II Student Introductions

Start Brainstorming - Determine a Website Project Consider the variety of website projects and their relative goals – portfolio, biography, special interest exploration, topic discussion/blog, how-to or information share, services offered. The project choice should have a personal voice and reflect your particular history, expertise and/or interests. Examples: Art Portfolio, Resume Website, Comicbook Commentary & Topic Discussion, Personal Bowling, 30 day weight loss challenge, Animal Rescue, Hiking in NJ, New Computer Games, Basketball Fan Club, Softball tips and how to, How to Cook, Meal Planning, Basketball Drills, Computer Questions, Make-up how to, Fashion how to, Installing Car Audio Systems, Travel Guide. NO SHOPPING WEBSITES.

Website Planner Packet – Let’s Begin! Planning and Preparation » Download the Student Website-Planner Packet

• Questionnaire and Chart Planner • Developer Info – User names and passwords Choosing a domain name: http://www.huffingtonpost.com/tom-lowery/5-tips-for-choosing-a-the_b_3859497.html http://www.seoworks.com/05-business-advice/choosing-a-domain-name-ideas/ http://www.smashingmagazine.com/2009/05/the-effective-strategy-for-choosing-right-domain-names/

Website planning: http://creatingmywebsite.com/how-to-create-a-website-plan http://www.1stwebdesigner.com/website-planning-developing-your-website-blueprint/ https://www.zionandzion.com/how-to-build-a-website-the-planning-process/

Check that a domain is available – http://www.whois.com/, https://instantdomainsearch.com/

Mac Tour/Organization in the Digital Environment and Sharing files Document Organization and working with Files - Naming, saving, and file types for class work - .doc, .pdf, .txt, .rtf, .rtfd, setting up your “info” file. (text edit, note pad – make it a plain text file)

Tour of the Computer Labs and Introductions to Tim and Anthony -------------------------------

Homework: Assignments to be completed by the next class.

9

Read: • Chapter 1, The Wordpress Landscape, 1st Section-How Wordpress Works (bk. Page 11- top of pg. 15) of

WordPress: The Missing Manual, 2nd Edition • https://wordpress.org/about

Execute: Download and complete the Website Planner Packet. Save the files to your Flash Drive.

Reference: Website examples: https://WordPress.org/showcase/

Class #2 – September 13, 2017 CREATING CONTENT FOR YOUR WEBSITE

Check In FTP – (File Transfer Protocal) Applications: Cyberduck, Filezilla, Fetch

• FTP address for Class folder • Add Information to your Info File • Name it • Save files, Zip folder • Upload – “Class1_HS(YourInitials).zip”

 

PART I Website Planner Packet Review Review each Project Proposal, as a class, and explore strategies for content creation and organizational ideas. (Storyboards/Outlines/Flow Diagrams)

PART II Consider Your Content

1. Copyright 2. Fair Use 3. Creative Commons 4. Open Source

http://www.copyright.gov/circs/circ01.pdf http://www.copyrightkids.org/defframes.htm https://en.wikipedia.org/wiki/Copyright https://creativecommons.org/about/ https://en.wikipedia.org/wiki/Creative_Commons

10

https://opensource.com/resources/what-open-source https://en.wikipedia.org/wiki/Open_source Of interest not required: Good Copy, Bad Copy (includes profanity and some sexual imagery) https://www.youtube.com/watch?v=ByY6j0qzOyM

Required Content - Must Haves https://www.youtube.com/watch?v=RzFfQrPbXJs 1. Home – Introductory explanation of the website - 'elevator speech' – what is your website about. 2. About - More in-depth information than what is on the home page, often more biographical in nature

with related information to the goals of the website 3. Contact information 4. Text on each page that includes a descriptive title, identifies what the page is about and where a user is

on a website 5. Consistency in the organization and the presentation of content throughout the website 6. Search Engine aware text and html tag attributes. 7. A series of ongoing information – such as news, steps in how to do something, descriptions of various

items – ‘POSTS’

Execute (start in class and finish as part of your homework) • Write your ‘Elevator Speech’ for your website – paragraph, sentence, tagline.

• Write Bio/About text for your website project – one to three paragraphs.

• Write the text for a the first of the 'sequential information' section for your website

• Search for websites with content and/or goals similar to your project. List the website urls. Take

screenshots of pages and note particular features (Use Mac native feature or Jing to do this).

 

Tools – Working with ‘Jing’ and Screenshots -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 1, The Wordpress Landscape, (bk. Page 11-30) of WordPress: The Missing Manual, 2nd Edition

  Complete the execution of your “Must Haves” List by next week. Review your Website Planner and make any adjustments necessary. Save all the material onto your Flash Drive. Look for an email with sign-in information – add it to your info file and bring that to class.

11

Class #3 – September 20, 2017 YOUR FIRST WEBSITE

Check In

CMS Introduction How do websites work? http://www.w3.org/wiki/How_does_the_Internet_work What is a CMS? How does it work? Introduction to web architecture: HTML, Files, Host Server, MySQL, WordPress, Themes WordPress.org and WordPress.com

Begin Working in WordPress • Start exploring the WordPress interface with Individual test websites in the class multisite: • Address/Sign-in/Username/password • Exploring, working, and learning the WordPress dashboard: settings, themes, visual editor, posts and

pages, categories and tags • Creating fake content: http://generator.lorem-ipsum.info/ • Page layout and attributes

Categories and Tags: https://www.youtube.com/watch?v=_ECoD39Yhsw https://www.youtube.com/watch?v=R9mlec3qh6A -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 4, Creating Posts, (bk. Page 85-122) of WordPress: The Missing Manual, 2nd Edition

Execute: In your new website:

• Create a ‘page’ using your Bio/About text. • Create a ‘post’ using your text written for the sequenced information. • Create a ‘category’ appropriate for the ‘post’ above. • Review and set up your ‘Settings’. • Create a ‘menu’ and assign the location. • Establish your ‘front page’.

12

Shoot Pictures:

• Take two to three pictures of yourself and save them to your flash drive keeping the largest version available.

• Take several pictures relevant to the content of your website project and save them to your flash drive keeping the largest version available.

• Be sure you have the pictures and updated information on your flash drive by Class #4.

Class #4 – September 27, 2017 PREPARING AND ADDING IMAGES Photoshop Tutorials Check In Sizing? Resolution? Pixels? Optimization? How do images affect a website visually and technically? Making images ‘web ready’. Acceptable file types for web images. Where do images go in WordPress?

PART I Photoshop Basics & creating an image strategy for WordPress: Review your website outline/spreadsheet to see what images are needed for each of the various pages of your website. Consider:

• image format for each need (horizontals for banners and headers, logos for headers, featured images based on the theme usage of featured images, page and post helpers, main content such as portfolio examples)

• relative importance of each image to your content and goals and strategy of use (band width) • size of images required based on format and importance • WordPress sizes created • file type required • do you need to create images • do you need purchase or find images

Photoshop Buy: https://www.adobe.com/creativecloud/buy/students.html?promoid=KSDQD https://creative.adobe.com/plans?single_app=photoshop&promoid=65FN7XFX&mv=other Set-up the Photoshop Environment: 1. Set Default Panels – Choose Essentials Panel and Toolbar options, arrangements and docking – setting up and manipulating your workspace. A good start – include these panels:

• Layers • History

13

• Paragraph • Characters • History • Info • Adjustments

2. Review Preferences and set rulers to pixels. Show Rulers. 3. Opening and saving files.

• File types and best practice: Always keep the original image – choose a file type that is appropriate (tiffs or psd)

• Create a folder specifically for your images in your website resources so you can return to the original at any time

• Be consistent, strategic, and predictable with file names • File types for web usage, advantages/disadvantage

jpgs, gifs, pngs and choosing the type of compression 4. Some Photoshop Practice:

• Crop and rotation options • Working in layers • Learn about your image – mage size/sampling • Levels • Selecting areas • Adding Text • Saving and compressing files

Other useful tools: https://tinypng.com/, https://tinyjpg.com/, Adobe Fireworks

Online Tutorials: Learn & Support / Photoshop Help – https://helpx.adobe.com/photoshop/topics.html#dynamicpod_reference_13 – https://helpx.adobe.com/creative-cloud/tutorials-photography-jumpstart.html Creative Suite / Optimizing images http://help.adobe.com/en_US/creativesuite/cs/using/WS6E857477-27FE-4a88-B8A4-074DC3C65F68.html#WSB3484C68-ECD2-4fa4-B7CC-447A5FE86680

Creating a header in photoshop Links to Photoshop Instruction Videos Layers: https://helpx.adobe.com/photoshop/how-to/layer-basics-explained.html Text: https://helpx.adobe.com/photoshop/how-to/add-format-text.html Cropping: https://helpx.adobe.com/photoshop/how-to/crop-remove-photo-edges.html?set=photoshop–get-started–essential-beginners

PART II Adding Images to WordPress – the Media Library What Happens? - the four files that are created.

Execute Upload, apply and edit an image(s) on a post/page.

14

Review the instructions for a header in the ‘Customizer’. Add a featured image to a post.

Adding Other Media Links and oEmbeds https://codex.WordPress.org/Embeds Video, Podcasts and Music -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 6, Jazzing up your Posts, (bk. Page 167 - pg. 177) of WordPress: The Missing Manual, 2nd Edition

Execute: Finish preparing images for your pages, Including a portrait for your bio page, a feature image for at least one page or post, a banner or logo for your header, and any additional images appropriate for your website. Add the images to your media library and format and apply them to the appropriate locations on your website.

Class #5 – October 4, 2017 CONTENT STRATEGY

Check In Strategy for Post and Page Content Google SEO info: http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf Continue to create and add content to your website. Individual Review.

Adding Menus – the strategy of navigation -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 7, Adding Pages and Menus (bk. Pages 199 - 220) of WordPress: The Missing Manual, 2nd Edition

15

Presentation Next Week: Prepare to make a oral and visual presentation showing the current state and progress of your website project. Minimum completed:

• An About/Bio page • A Contact page • A Front page that includes your ”elevator pitch” for your website • At least three images in various locations • A Menu • At least one widget • A post in sequential style - post and category and corresponding single post. • You should Include your current version of your website planner with all the information updated to the

latest adjustments and at least two examples of websites that show content that is relative to your project goals.

Organize and be prepared - tips:

• Speak clearly, loud enough, use proper grammar. • Review and describe your project goal and the information from your website planner. • Review the adjustments, the changes made to your content and why as you have been working on your

website. Make sure your preference. You will need a credit card in class by next week to get your personal host server.

Class #6 – October 11, 2017 PRESENTATIONS

Check In Oral Presentations and Evaluation of Starter websites

Get a Webhost DO NOT DO THIS WITHOUT CLASS GUIDANCE Recommend http://www.1and1.com/ or https://www.bluehost.com/ set up email set up ftp -------------------------------

Homework: Assignments to be completed by the next class.

16

Read: Chapter 10, Adding Picture Galleries, Video and Music (bk. Pages 311 - 351) of WordPress: The Missing Manual, 2nd Edition Execute: Revise your starter site after consideration of the feedback received in your presentation.

SPRING BREAK

Class #7 – October 18, 2017 THE INSTALL Check In

Installing WordPress Review - How WordPress works WordPress Install on your host server (wordpress.org, ‘5 min install’, download, FTP, set up MYSQL).

1. – Sign in to your host server and from the control panel find, and set up your FTP account, record all information

2. – Download WordPress (put the zipped file on your flash drive) 3. – Unzip the folder (make sure it is on your flash drive) 4. – In the control panel of your host server (have your info file open to save all information), go to

‘databases’ 5. – Create new database 6. – Record all database information – name, username, password by saving it in your info file. 7. – Create new user 8. – Add user to database 9. – Give all privileges

On Bluehost/Justhost only- FTP extracted WordPress files to folder /public_html Remove the default.html file. Go to your url and add the text in bold – http://yoururl.com/wp-admin/install.php Follow the screens and proceed with installation of WordPress. Sign in to your site – http://yoururl.com/wp-admin Set up WordPress user and permalinks.

Working with Import/Export or

17

Working with WP-Migrate (or similar plug-in) Move your database from the starter website over to the new website.

More Features - Working with Images and Galleries Adding other media such music, videos, podcasts: oEmbeds / Embeds/ iframes / Shortcodes (Chapter 10 of your textbook) https://codex.WordPress.org/Embeds https://codex.WordPress.org/Shortcode -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 5, Choosing and Polishing Your WordPress Theme (bk. Pages 131-156) of WordPress: The Missing Manual, 2nd Edition Execute: Review your content and make the necessary adjustments to your posts, pages, settings etc… from the database migrate. Start exploring plug-ins and themes. What are your needs for to achieve your project goal. Look at sites you admire with similar goals.

Class #8 – October 25, 2017 MORE FUNCTIONALITY/PLUGINS, THEMES Check In

 

Continued from Class #7 Moving your site from your class multisite to your new website on your own server

• Where do the files live? • Moving Media Files • Exporting and Importing your database.

Part Ia Adding plug-ins to your WordPress site.

• Review of plug-ins and when they are necessary. • How to add and test a plug-in.

18

• Pluses and Minuses. • Maintenance.

Execute Create a Workpress.com account Add ‘Jetpack,’ ‘Askimet’, ‘Updraft Plus’, ‘Template Debugger’

Part Ib Widgets

• What are they? • How are they used? • Making smart choices

Part II Exploring Themes

• What a theme does in WordPress. • How to preview, review, add and test a theme.

Testing Themes: Some Guidelines

1. Focus on the structural components of a theme. Do you have content available and appropriate to duplicate the look and features of this theme – such as sliders, background images etc…that fit the theme’s structure and layout?

2. Is the structure, organization and usability appropriate for the goal of your project? Type and colors can be adjusted – don’t let that styling alone determine your choice of theme. Avoid themes that are too complicated, require numerous plug-ins or have dependencies on programs like “page builder”. Is the theme up-to-date and compatible with the current WordPress version? Is the theme support adequate if it is a complicated theme?

3. Test the theme and use the customizer to see what options are available. Also check for any other options in the dashboard – usually under ‘Appearance’.

4. To properly test the theme you may need to create dummy content, if you do not have content in place: o Make sure you have at least 3 posts each, under two categories o Make sure you have at least 2 pages o Check the location of widget areas o Add the categories to you menu, add a drop down with single post in the same category for one

of them o Add a featured image to multiple posts and check the featured image usage o Add a header image o Look at page templates provided o Look at other options provided o Do you understand all of the options?

------------------------------- Homework: Assignments to be completed by the next class.

Read:

19

Chapter 9, Getting New Features with Plug-ins (bk. Pages 273 - 310) of WordPress: The Missing Manual, 2nd Edition Continue to populate, edit and revise with your project goal guiding your decisions. Back up your website and database. Be prepared for individual progress review.

Class #9 – November 1, 2017 GALLERIES, USER ROLES AND COMMENTS Check In

Part I Working with Galleries Extending gallery use with Jetpack and the Carousel Plug-In

Part II Working With Comments: Comments in WordPress – https://codex.WordPress.org/Comments_in_WordPress Check your Comment settings in the Dashboard for smart choices (Settings/Discussion.) Make sure you have Askimet (or equivalent plugin) installed and enabled. Consider adding an Avatar with gravatar.com. Create a test post and enable comments.

Part III Exploring User Roles and Adding Users: https://codex.WordPress.org/Roles_and_Capabilities *Administrator. – (somebody who has access to all the administration features within a single site.) Administrators can do absolutely everything. For example, if you add a friend as an administrator to your site, he can remove you, delete all your posts, and switch your site to a Hawaiian beach theme. WordPress strongly recommends that every site have just one administrator, to prevent power struggles. Editor. – (somebody who can publish and manage posts including the posts of other users.) Editors have full control over all posts and pages. They can create their own posts, and they can edit or delete any post, even ones they didn’t create. Editors can also manage post categories and tags, upload files, and moderate comments. They can’t change site settings, tweak the site’s layout and theme, or manage users. Author. – (somebody who can publish and manage their own posts.) Authors have control over their own posts only. They can create new ones and upload pictures, and they can edit or delete their posts anytime. Everyone else’s content is off limits. Contributor. – (somebody who can write and manage their own posts but cannot publish them.) Contributors are a more limited form of author. They can create draft posts, but they can’t actually publish them. Instead,

20

contributors submit their work for review, and an editor or administrator approves and publishes it. Sadly, contributors can’t upload pictures, even for their own posts. Follower or Subscriber. – (somebody who can only manage their profile.) These people can read posts and add comments. WordPress.com calls them followers, while WordPress.org calls them subscribers. If you run a WordPress.com site, it automatically notifies your followers about newly posted content (perhaps by email, depending on their personal preferences). If you run a self-hosted site, your subscribers won’t get any notifications, but they can opt in to an email subscription service.* *MacDonald, Matthew (2014-06-25). WordPress: The Missing Manual (p. 370). O’Reilly Media. Kindle Edition.

Execute Give it a try: Add a user to your site at the Author, Contributor, and Subscriber level. Review the new user’s contribution and edit, review and publish accordingly. Become a user on a classmate’s site and add content. Classmates comment on posts and pages and comments are reviewed. Classmates are given limited user roles and interface with various sites in various capacities to create, edit or approve posts/pages.

Part IV Individual Help and Review

  -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 8, Comments: Letting Your Readers Talk Back (bk. Pages 229 – 269) of WordPress: The Missing Manual, 2nd Edition Chapter 11, Collaborating with Multiple Authors (bk. Pages 353 –361- stop prior to Creating a Multisite Network from Scratch) of WordPress: The Missing Manual, 2nd Edition -Continue working on your website. Review your website for opportunities and the relative necessity of including other users. Make a decision: Do you wish to allow comments on pages and posts? Does this decision serve your project goal? Implement your decision.

 

Class #10 – November 8, 2017 CUSTOMIZING YOUR WORDPRESS WEBSITE – PART I

21

Check In

PART I Working with custom html: HTML and CSS Intro Create a static html page. Basic html/css, webhost, browser as interpreter, view source Code and write a html page, give it a name, upload to server, view on browser.

Html Reference: (tag encloses element with attributes and values) https://developer.mozilla.org/en-US/docs/Web/HTML/Element http://www.w3schools.com/html/default.asp http://www.w3schools.com/tags/ref_byfunc.asp http://reference.sitepoint.com/html Commonly used tags and elements: <!—text here —> Comment <img /> <a href="" ></a> <br /> <p></p> <b></b> or <strong></strong> <i></i> or <em></em> <div></div> CSS Reference:

• A typical style sheet — (rule with selector, declaration{}, property: value; ) • Declared locally (within an html tag as style=“”) • Declared in the head area of a page (with <style>… </style>) • Declared in an external style sheet <link rel=“stylesheet” href=“folder/name.css” />

/* info goes here*/ comments for style sheet. In Dashboard use Jetpack/Appearance/Edit CSS • The cascade what overrides what…

http://www.w3schools.com/cssref/default.asp https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors http://www.wpbeginner.com/wp-themes/default-WordPress-generated-css-cheat-sheet-for-beginners/ https://codex.WordPress.org/CSS Often used css: Inline Example added to html editor – <div style=”font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 1.2; margin: 10px 20px 30px 20px; padding: 10px 20px 30px 20px; border: 1px solid #cccccc;”>Here is my content</div>

Part II Customizing Your WordPress Website – CHANGING THE THEME STYLES

22

Review the WordPress landscape by identifying the location of your files & folders on your host server via FTP/Cyberduck. Configure Cyberduck for editing files (In Cyberduck, Preferences/Editor/Sublime Text2) Where are your themes and plugins? Where are your uploaded files? Locate the CSS file for your theme Where is your database? View your files from the dashboard of your website (Appearance/Editor) & note location of the same files on your host server.

Preparation Install/Choose Plug-in for site backup: — ‘UpdraftPlus’ https://WordPress.org/plugins/updraftplus/ https://updraftplus.com/ Install/Choose a plug-in for template identification: — ‘Template Debugger’ (note also creates an option to create a child theme) https://WordPress.org/plugins/quick-edit-template-link/ Back-up your files locally!

CSS changes – the choices: 1. Work with Jetpack - Activate ‘Custom CSS ‘in ‘Jetpack’ or add another plug-in like 'simple css'. 2. Hard coding in edit mode with Text Editor for your individual posts/pages. 3. Create a Child theme (advantages/disadvantages)

⇒ https://make.WordPress.org/training/handbook/theme-school/child-themes/ ⇒ http://codex.WordPress.org/Child_Themes

How do you identify what to change? Use the browser Developer Tools: Firefox (Tools/Web Developer/Inspector or Option/Command-C or right click – Inspect Element) Chrome (View/Developer/Developer Tools or Option/Command-I or right click – Inspect) Safari (Develop/Show Web Inspector or Option/Command-I or right click – Inspect Element)

Execute: Review the WordPress files & folders on your host server. Prepare and Back-up files for customization. Preview and determine the strategy for style adjustments with Browser Developer Tools. Make CSS adjustments and test.

Part III Individual Help and Review -------------------------------

Homework: Assignments to be completed by the next class.

Read: Chapter 13, Editing Themes: The Key to Customizing Your Site (bk. Pages 427 – 452) of WordPress: The Missing Manual, 2nd Edition -Continue working on your website, revising and customizing as necessary. ------------------------------- BY NEXT WEEK – YOU SHOULD HAVE READ THE FOLLOWING FROM YOUR TEXTBOOK – WordPress: The Missing Manual, 2nd Edition Chapter 13, Editing Themes: The Key to Customizing Your Site (bk. Pages 427 – 452) Chapter 8, Comments: Letting Your Readers Talk Back (bk. Pages 229 – 269)

23

Chapter 11, Collaborating with Multiple Authors (bk. Pages 353 –361- stop prior to Creating a Multisite Network from Scratch) Chapter 9, Getting New Features with Plug-ins (bk. Pages 273 – 310) Chapter 5, Choosing and Polishing Your WordPress Theme (bk. Pages 131-156) Chapter 10, Adding Picture Galleries, Video and Music (bk. Pages 311 – 351) Chapter 7, Adding Pages and Menus (bk. Pages 199 – 220) Chapter 6, Jazzing up your Posts, (bk. Page 167 – pg. 177) Chapter 4, Creating Posts, (bk. Page 85-122) Chapter 1, The WordPress Landscape, 1st Section-How WordPress Works (bk. Page 11- top of pg. 15) -Continue working on your website, revising and customizing as necessary.

Class #11 – November 15, 2017 CUSTOMIZING YOUR WORDPRESS WEBSITE – PART II - Check In Part II – CHANGING THE THEME PAGES BACK UP THE FILES in your theme folder!

• Review the php files in your theme folder. • Determine which page in your theme holds the area to be altered by using the information provided by

the plugin ‘Template Debugger’: (Note: this plugin also offers an option to create a child theme). • Use Sublime Text to edit the area you wish to change, upload, test.

Overview of typical WordPress page/post structure:

24

The WordPress Template Structure https://codex.wordpress.org/Template_Hierarchy

Individual Help and Review -------------------------------

Homework: Assignments to be completed by the next class.

 -Continue working on your website, revising and customizing as necessary.

25

Class #12 – November 22, 2017 PROMOTING YOUR SITE AND SEO

Check In Preparing Your Website: Ready to launch your site? As you are close to completing your site there are a number of steps to take to increase your visibility and track your visitors once you are ready to promote your site for public consumption. Note! These steps are in addition to:

• Continuing to edit and arrange content on each page(s)/post(s) for clarity and consistency while • Checking for meaningful and targeted use of text and • Adjusting the html tags in the WordPress editor for relevance to the importance of information •

I. Get your readers to share your posts and pages and increase your distribution with social media and subscriptions. Check your Settings/Reading and allow for Search Engine indexing. Review and consider activating these Jetpack plugins:

• Comments • Enhanced Distribution • Extra Sidebar Widgets • Publicize • Sharing • Subscriptions

Make sure the choices are right for your website and your project goals. Join professional organizations or groups with common interests and link to your website. Become involved and participate in the conversation.

II. SEO Optimization Review Google SEO info: http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf Start by creating a Google account and setting up Google Analytics: analytics.google.com/ and/or Activate Jetpack: Site Stats Use a plug-in(s) to help with SEO optimization: Suggestions: “All In One SEO ” along with “Google Analyticator” “Yoast” Instructor Notes - Individual Help and Review

26

Individual Help and Review -------------------------------

Homework: Assignments to be completed by the next class. Read: Chapter 12, Attracting a Crowd (bk. Pages 389 –426) of WordPress: The Missing Manual, 2nd Edition Continue revising your website with additional attention given to the official launch/completion of your site and SEO optimization. IF appropriate, add social media. Set up Jetpack stats and/or google analytics.

Class #13 – November 29, 2017 Final Revisions Check In Review and Critique each Class Project Individual Help and Review

Final Presentation Preparation

Create an outline and practice your presentation. Be sure to include the following information:

Introduction (introduce your website - the name/title, your goal/project purpose)

Review your process:

• What themes did you try? What theme are you using? Why? • What plugins did you try? What plugins are you using? Why? • Where is your menu? Why are the items included in the order that you show? • As you added content to your site, how did you change, delete, reorganize the information

and why. • How does your home page (front page) show the viewer what the site is about. • Where is your About page? • How did you utilize posts? • How did you utilize pages? • Did you have other people try out/assess your website? Did you make any changes to your

site as a result of their feedback? • Did you do special research for your project? not presented in class or further exploration

27

on any topic? • What aspects of this course work were you familiar with prior to the class? • What worked well - what could be better relative to your project goals? Use visuals to show the audience your information.

Be sure you can be understood and heard and that you both verbally and visually illustrate and connect all of the requirements of your presentation.

PRACTICE! Be Prepared next week for a 5 min. test presentation. -

Record and review your performance.

There will also be a Final Test to be completed in Class. -------------------------------

Homework: Complete your website. Complete your preparations for your practice and final oral presentation. Final Class Requirements

1. Each student will be giving a practice presentation AND a final oral presentation. You must be present and participate to receive credit for your presentation.

2. Each student is required to provide the information in the final assessment document (to be provided) and assess the websites of their fellow classmates. (Document to be available from the class website.) Email the completed document to njcu@hollysears.com no later than your exam day.

Upon completion of your final presentations, each student shall submit their “signature assignment” to the new Gen Ed Assessment team. (Directions will be posted.)

Class #14 – December 6, 2017 Complete and Prepare for Final

Check In Practice presentations and critique -------------------------------

28

Homework: Make all final adjustments and complete your website. Complete your preparations for your final oral presentation with attention given to feedback from your practice presentations. Final Class Requirements

1. Each student will be giving a final oral presentation. (Download/View the requirements from the class website) You must be present and participate to receive credit for your presentation.

2. Each student is required to provide the information in the following document and assess the websites of their fellow classmates. (Document download from the class website.) Email the completed document to njcu@hollysears.com no later than your exam day.

Upon completion of your final presentations, each student shall submit their “signature assignment” to the new Gen Ed Assessment team. (Directions will be posted.)

Exam Day – December 13, 2017 FINAL PRESENTATIONS

Check In Create a folder that contains screenshots of your website and the final questionnaire and outline (as provided). Zip the folder and send to njcu@hollysears.com Do final presentation and critique each presentation. Complete Gen Ed assessment as directed. Signature Assignment: Students will create a WordPress website for which they have designed a header, composed original content, prepared images, compared multiple design solutions, while collaborating in a client/developer relationship with another student. They will determine the necessary content, explore themes, pages, layouts, menus, colors, images, posts, and graphics, and ultimately organize the communication of information in a clear and aesthetically successful manner. Students will address orally and in writing how these aspects of the site best serve the stated goals of the site. They will demonstrate the ability to alter and adapt the site using acquired skills in HTML and CSS. Students will also include customization of their site through appropriate widgets and plug-ins, and demonstrate the integration of social media on their sites, with an explanation of how these enhance the site’s goals. At the conclusion, students will not only demonstrate the skills to produce their sites, but also compare and discuss when solutions were successful and where further problem solving could be implemented. The oral presentation component will reinforce skills of articulating visual ideas and verbalizing clear organization of thought.