* Project Outline should be a web page that hangs off your class Web site page. You can earn up to 5 points for outline. You can earn, Three points by week 8 and the other 2 at the end of the semester for updating the outline for what was actually accomplished.
Think of the initial outline as the Estimate for a Client.
You can list what you want to accomplish
a good number is 10 things each one on a page - but this could vary depending on the intensity of a particular thing.
How long & How much it will cost (for me it's an estimate of how many hours you think it will take, at the end - how many did it take)
For programming classes: Create a separate directory for your /Project subdirectory/folder
under the Project folder you can have your /images, /css, /javascript, and other directories
for JavaScript & PHP - You want to make this easy to maintain!! so get your PHP /includes & /requires in there!
I would like to see you incorporate generated slide shows, menu systems, widgets, Libraries, etc.
For Digital Imaging, Digital Photography or MultiMedia classes create a separate Google Web Site for your project & outline.
Create left or top navigation to go to the different topics of your project.
You want to make this site easy to maintain and get feedback - so allow comments on photos & web pages
Think of the final outline - as the bill. You want to be very specific on what you accomplished - so the customer knows what value you have given them. What project is and how it uses what we have learned this semester.
Since it is very rare in life that you get to do everything you wanted ... the same is true for projects.
Build in a PHASE II. this will be like what you want to put on the bottom of your bill - outlining all the other projects that you can do for the Client. So they know you have more to give them.
Use this project to create your perfect spec (specification for project requirements).
You may also want to consider your "underConstruction.html" page - because it can come in very handy.
** All work must be accessible by JilMac so I can grade it: If I can't find it - it will be hard to give you a grade ... honest!
1. For programming Classes: on STWEB or posted to Moodle. If you have a web host - the final project may reside there as an upgrade or even the 1st or 2nd revision. You do need to FTP all files to your STWEB for review. However the working model can be worked on and developed on a shared web host.
2. For Digital Imaging, Digital Photography or MultiMedia classes: in your Google Web site or posted to Moodle
by midnight on ___day, so I can have Grades into CCV by ___day NOTE: - ARE THERE ANY STUDENTS WHO NEED A GRADE BEFORE THIS DATE??? Contact JilMac.
*** The Project is a Student directed Web Site that incorporates what you have learned this semester. There are NO TESTs in my classes - the web will tell you if your Image displays correctly - you don't need me to grade you - what you build will grade itself.
I expect you to review and critique each others work - we are a team - we simulate what it would be like working in a real Business, development IT/Graphics shop. I expect you to help each other - and when someone helps you - to site them in the comments of your code. I don't make you work in any particular group - many of you will gravitate to each other by the contents, problem solving, testing and interactions on the Discussion Boards.
I will be using your graphics/code as examples in weekly chats - and using real examples - they may be yours, or they may be something that you commented on. I will not be able to review every piece of your code/graphics - you will be creating at least 3 or 4 programs/graphics/work files per week. When you multiply that over 12 weeks for summer or 15 weeks for Fall/Spring and 18 students that is a lot of files. It is planned that way - to resemble REAL LIFE - in a real web development environment.
I expect you to put your weekly files on the web:
1. For Programming students: in a subdirectory/folder for each assignment. ALL your code if it is to be graded MUST be accessible from your index.html.
If working code is on another server, then the code you created - and want a grade for needs to be on STWEB for me to see it, and grade it, with a LINK to the working code.
2. For Digital Imaging, Digital Photography or MultiMedia classes: in a different Navigation Link. ALL your code IF IT IS to be graded MUST be accessible from your web site.
Ideas for Projects
The Final Project is a BIG part of your grade, 25 points ¼ of your grade. Plus the Project outline is worth 5 points - the Project Outline will be one of next week's assignments. Having 30 points is a big part of this class. I don't do tests - getting something to display properly, and getting it or understanding how different web browsers or readers display your images and/or the software associated with it to display correctly is TEST ENOUGH!!! I expect you to use all resources available to you - just site where you got them, who helped you, and what you learned. Does everything have to work/display perfectly?? NO - Life's not perfect, software and imaging certainly is not perfect - but I do expect the Project Outline to reflect what the final project eventually turns out to be, and all that you learned.
Sample Project - JilMac's
PROJECT DIRECTION:
EX. If you are taking this class – and you have a Graphics Design backgound:– and you want to understand Web Programming with JavaScript, PHP, etc. then you may want to use the project to learn what programs like Photoshop do to AUTOMATE javascript, how you can optomize what is created. You may also want to get into vector generated grapics with Fireworks and how that can automate. You may also want to learn about RESPONSIVE DESIGN and how loading graphics on a web page is changing due to Tablets, SmartPhones and other Appliances, being widely used instead of just Personal Computers. – Then you have the ability to use your project ¼ of your grade to research how you will learn more in-depth Graphics – we have just touched the surface – what manuals, what software, what web sites will allow you to do what you are working towards.
EX. If you are taking this class – because you are going to be a front end Web Developer – you need to understand how you will have to interact with Javascript & Server Side languages. Research this and add some of these services to your web site.
EX. If you are taking this class – because you are planning to MANAGE large WEB projects – and you need to understand how Programmers think, what software and resources they need to create and modify their code, and what resources are needed by your company to run these types of applications – take this ¼ of you final grade to do the research – what do you need to understand – and WHY – this is about a 10 page paper – with examples that you have modified.
EX. If you are taking this class – because it is a requirement – and you have no other reason – just to get the necessary credit – then you may choose to use this ¼ of your grade to create a large application – you’ll learn JavaScript – and fulfill the credit.
Or – you may find different parts of each of these and combine them.
Wow – how do you know what will make the grade??? That is what is due WEEK 8, an outline of your Project – this is a web page that hangs off your Class Web page
It is your SPEC – like in Real Life – your Project Specification.
You can earn an total of 4 or 5 points for it, but usually not all at once, usually you get 1 point if you post it on Moodle, a second point if it is on your Web Page under Project Outline, the third point if it has good substance - measurable objectives that you will be working towards. As you refine the outline - you'll get more points - if you keep it current and it is a good reflection of the entire project you get all 5 points. You get points for the DOCUMENTATION of the Project. It is a LIVING document …. Meaning it changes as you learn more about your project and subject. Just as when you are working with a client or team. Your initial specification wants to have everything and the kitchen sink included in it.
As you get into the subject – you learn what is reasonable, what is unreasonable, what is a great idea – but needs to be moved to phase II, and what was just a naïve thought – and needs to be re-written. This is all learning to MANAGE the PROJECT. It is a place where you can clarify and move around topics until it gives a clear picture of your process. That is why I might give you 2 points in week 8 but by the end of the project you have earned all 5 points. Or more if you did an outstanding job. It is hanging off your index.html so that others can see your process and comment on it.
OK – that was long winded – but the project is SOOOOO important to make this class your own.
It gives you the ability to shape it and become passionate about it. You make the class what you want it to be. This is very hard for students who want to be told what to do. I’m sorry – LIFE won’t tell you what to do, it will make things available – and you take them or leave them – but you only get out of LIFE what you put into LIFE, and so the Project is a reflection of Life in a world where Images can be whatever and where ever your Imagination take you.
==========================================================================
RUBRIC https://drive.google.com/file/d/0B_nsZH_N7X9mb2xJdEZQbjM2d1k/view?usp=sharing
==========================================================================
MultiMedia
DIM - Digital Image Manipulation
Add improved Graphics page to http://JilMac.com
Add sound to graphics - specifically my brothers song Irish Prayer to the Image "Irish Prayer"
Display this in a Music page off Main Page
Combine Cathy's picture with her songs
Do a PowerPoint LIKE presentation (prob flash) of Tribute to Aunt Alice
Add Powerly-MacMenamin family tree-Scan, Clean, Re-touch, Organize and display on site
Examples of PROJECTS:
EX. If you are taking this class – because you want to be a Graphics Designer:– and that is all you want to do – just graphics. – Then you have the ability to use your project ¼ of your grade to research how you will learn more in-depth Graphics – we have just touched the surface – what manuals, what software, what web sites will allow you to do what you are working towards.
EX. If you are taking this class – because you are going to be a front end Web Developer – you need to understand how you will have to interact with Digital Images. Research this and add some of these services to your web site.
EX. If you are taking this class – because you are planning to MANAGE large WEB graphic projects – and you need to understand how Graphic Designers think, what software and resources they need to create and modify their images, and what resources are needed by your company to run these types of applications – take this ¼ of you final grade to do the research – what do you need to understand – and WHY – this is about a 10 page paper – font of 10.
EX. If you are taking this class – because it is a requirement – and you have no other reason – just to get the necessary credit – then you may choose to use this ¼ of your grade to create a large application – you’ll learn Photoshop – and fulfill the credit.
Or – you may find different parts of each of these and combine them.
Wow – how do you know what will make the grade??? That is what is due WEEK 6, an outline of your Project – this is a web page that hangs off your index.html page
It is your SPEC – like in Real Life – your Project Specification.
You can earn an total of 4 or 5 points for it, but usually not all at once, usually you get 1 point if you wrote something up, 2 points if it is hanging off your index.html, 3 points if everything looks like a good plan. As you refine the outline - you'll get more points - if you keep it current and it is a good reflection of the entire project you get all 5 points. You get points for the DOCUMENTATION of the Project. It is a LIVING document …. Meaning it changes as you learn more about your project and subject. Just as when you are working with a client or team. Your initial specification wants to have everything and the kitchen sink included in it.
As you get into the subject – you learn what is reasonable, what is unreasonable, what is a great idea – but needs to be moved to phase II, and what was just a naïve thought – and needs to be re-written. This is all learning to MANAGE the PROJECT. It is a place where you can clarify and move around topics until it gives a clear picture of your process. That is why I might give you 2 points in week 6 but by the end of the project you have earned all 5 points. Or more if you did an outstanding job. It is hanging off your index.html so that others can see your process and comment on it.
OK – that was long winded – but the project is SOOOOO important to make this class your own.
It gives you the ability to shape it and become passionate about it. You make the class what you want it to be. This is very hard for students who want to be told what to do. I’m sorry – LIFE won’t tell you what to do, it will make things available – and you take them or leave them – but you only get out of LIFE what you put into LIFE, and so the Project is a reflection of Life in a world where Images can be whatever and where ever your Imagination take you.
Rubric for Grading
==========================================================================
Ideas for Individual Web Pages on a Web Site
CIS 1151 Web Dev
Project should be a web page that hangs off your class Web site page. It should include: Grading Rubric
https://docs.google.com/document/d/1PcskAy4TVw-Cd6tF2Ps8O-TzScWfy2OtjvCpFJR8T8o/edit?usp=sharing
If you are creating a Web Site for yourself or a client, I recommend a
Responsive Design or Mobile First Design http://buildmobile.com/7-things-your-desktop-envies-from-your-mobile-site/?utm_medium=email&utm_campaign=BuildMobile+Feb+17th&utm_content=BuildMobile+Feb+17th+CID_4cfbffe8277580f6681680f2aac8c35f&utm_source=Newsletter&utm_term=Designing+Responsively+Fundamental+Practices
Note: Many CMS sites have built in options for Mobile.
SAMPLES of Web Pages that can be included in your PROJECT------------------------------------
Home Page: Landing or Index
Products or Services- Portfolios - Sample of Work
Basements Examples of Graphics Photographs
Homes Types of Graphics Types of Photographs
Additions Drawing, Photograph Weddings
Decks Logos, Icons, Favicons Family Reunions
Landscaping
About Us or Our Team - use Company or person name for best SEO
Products we use - or who we Partner with
Testimonial from Customers
Calendar (embedded from Google Calendar)
embed Picture/Graphic slide show, Google+ Album slide show
embed YouTube Video(s) - (SEO-higher rank tip-put a video on index.html)
Shows - Home Shows, Training, Demonstrations - we participate it, of things we think important
Table Page - to organize data, links, graphics, etc.
Directions - (embed multiple Google Maps)
Contact Us - Form
Basic: Simple as Google Documents Form, Survey Monkey,
Intermediate WordPress: Plug-in
Advanced: MySQL + PHP
Document page where Resume, Transcripts, Recommendations, Fliers can reside and be easily downloaded.
Things that you can include that JilMac thinks highly of:
NOTE: You don't have to do ALL of them - it is a list (living) of the things that I give points on. How involved each of the areas is will determine how many points. I don't want people scrambling to get ONE-OF-EACH. I want students to immerse themselves into a project - and where it brings them. I want the project to be why you are interested in Web Development & Computers.
It is probably why I have been reluctant to dictate! LOL
Project should be a web page that hangs off your class Web site page. It should include:
Grading Rubric: https://docs.google.com/document/d/1PcskAy4TVw-Cd6tF2Ps8O-TzScWfy2OtjvCpFJR8T8o/edit?usp=sharing
Website Header
Website Footer
Website Navigation
Use a Menu for Navigation
Favicon
External CSS
External JS
External Links to other sites & Internal Links to pages within the site
10 pages demonstrating types of pages that can be created or are typically found
Contain many types of Graphics
Contains a clickable image
Use of Google Maps
Use of a Google Form or equivalent
Use of a Calendar
Used a supporting Google Site for Content, Graphics collection and Outlines
Use of a Table to organize data & neatly arrange data components on web page
Have code in different directories if doing a HTML or WordPress site (ex. Assignments are in their own directory, Images are in their own directory, etc.)
Validate the pages of your Website - include comments in Project Outline
Test how your web pages will look on Computer, Phone, Tablet https://search.google.com/test/mobile-friendly or equivalent tool
Use Lorem Ipsum Generator to have text on your page to test wrapping http://designerstoolbox.com/designresources/greek/?lorem=pa
HTML Validator http://validator.w3.org or equivalent tool
CSS validator http://jigsaw.w3.org/css-validator or equivalent tool
Check the page SPEED TRACKER in your Chrome Browser https://developers.google.com/web-toolkit/speedtracer/get-started#downloading or equivalent tool
Website has good flow
Website is easy to read - fonts/colors/background images, etc don't interfere
Grading Rubric https://drive.google.com/open?id=1dcrx1jp7Me1gF4t8QqbBSEkRINy6FuvA
Everything from 1151 Web Dev listed above and the following:
Include & Require PHP - to reduce redundancy for:
Headers
Navigation
Footers
Read from an .XML file
Form with verification
Read & Write to a .TXT file
Read & Write to a .XML file
Read & Write from a MySQL table/database
Extra Cedit - Set up your own Domain Name
Extra Credit - Set up your own Shared Web Host
Grading Rubric https://drive.google.com/file/d/0B_nsZH_N7X9mZkZHVEVDNDgtVXc/edit?usp=sharing
Everything from 1151 Web Dev listed above
Include & Require PHP - to reduce redundancy for:
Headers
Navigation
Footers
JavaScript for the Menu System
JavaScript used to enhance the site
Read from a .TXT file
Read from an .XML file
Read Client information (ex browser type, time, etc.)
Form with verification
Extra Credit - Write to a .TXT file
Extra Credit - Write to a .XML file
Extra Credit - Read from a MySQL table/database
Extra Credit - Set up your own Domain Name
Extra Credit - Set up your own Shared Web Host
Everything from CIS 2140 Programming for the Web
Write to a .TXT file - need to be able to set file permissions (this may be restricted by your Web Host)
Write to a .XML file - need to be able to set file permissions (this may be restricted by your Web Host)
Read from a MySQL table/database
Extra Credit - Write to a MySQL table/database (this may be restricted by your Web Host)
Word Press Themes: Gridster Lite https://wordpress.org/themes/gridster-lite/
Everything from 1151 Web Dev listed above
CSS Menu System
Understanding how JavaScript reading the Client system (screen size, operating system, browser/version, etc) effects which CSS is used.
Use CSS Libraries
Extra Credit - use PHP Includes to eliminate redundancy