WEB DESIGN FINAL

Web design final options- Choose one of the following options for our Final to be started Monday 5/20 and completed by 5/27.

NO MATTER WHICH FINAL YOU CHOOSE YOU MUST POST DAILY PROGRESS ON YOUR BLOG. YOU MAY USE ANY REFERENCE AVAILABLE FOR YOUR DESIGN OR CODING.

BOTH FINALS WILL BE DUE ON MONDAY MAY 27th.

Design- Using PS, create a simple step by step tutorial on how to make a simple navigation bar.

Use a single BLOG post as the TUTORIAL SITE. DYK-You can open a post and save it as a draft without publishing it right away.

Shown to the RIGHT is a sample of a finished example of what you must have.

-You must have at least 5 buttons and use the slice tool to make one "clickable"

-At least 3 textured finishes (I used layer all styles)

-A Background for the Navbar.

-Once you have created a NAVBAR.

-You must show no less than 5 steps.

-Images must be of your NAVBAR in PROGRESS.

-RE. The SLICE tool will take at least 2 STEPS.

Add manipulated screen shots to your post/ tutorial as images that you would see in a tutorial.

Code- Using Notepad create a simple home page.  Your page must be able to show all components. YOU MUST SHOW YOUR PROGRESS EVERYDAY ON YOUR BLOG.
All posts must show HTML "code" version & a progress screenshot as a Web Page.

-BACKGROUND WITH TEXTURE

-NAVBAR (NAVBAR must have a hyperlink property code.)

-FOOTER
-SIMPLE CONTENT USING AN IMAGE AND <href> so the image in "clickable"

You must be able to show all proper <meta> tags and be able to show proof of your working code.



Photoshop will be available for the coding option and Notepad and HTML will be available but neither is mandatory for final. You do NOT have to use notepoad for DESIGN and you do NOT have to use PS for the CODING.

YOU MAY NOT USE PREVIOUSLY FINISHED PROJECTS.

GOOD LUCK

MO

GRAPHIC TUTORIALS

If you have finished your portfolio tutorial start this series of tutorials, this seriers id designed as a coloborative design effort whe you the designer mus TWEEK the tutorials to creat a cohesive design bond, and post each one as you finish.

#1- CLICK HERE to choose a header.

#2- CLICK HERE to choose a background.

#3- CLICK HERE to choose a navigation bar.

#4- CLICK HERE to for a footer.

Let me know if thereare ANY questions, THIS project will be interupted by the Final next week.

Thanks
MO

portfolio WEB PAGE

When you have finished your re-design you will go to thi SITE and choose a template tutorial to create a "portfoilio" for your work in this class.

Where as the template and tutorial must be followed to spec, some changes may be made such as COLOR, FONT and CONTENT.

Workindependantly throughout the duration of this project, I will be around to help with and design or tech issues that you may have.

Thanks
MO

this is a simple assignment dont over complicate it.

INDUSTRIAL SPY

You are a corporate spy in the cutthroat world of dot com's, your job is to find a dot com and and recreate it for our company. Steal their idea's and use them for you own success- YOU will NOT be allowed to Copy Cut & Paste. so creation is everything

WIDGET.COM

You must create a website for Widget.com using an existing WS as a model. Youe model MUST be an industrial WS, Your Company page is called Widet, ( A widget is a fictitious product/ company ).

You must USE PS tutorials to create ALL components.
COMPONENTS INCLUDE:

-LOGO- use a basic shape to develop you LOGO
-BACKGROUND- Keep It Simple but relevant.
-NAVIGATION BAR- nust include a photos page, 3 photos must be of use of the widget taken by you. BE CREATIVE
-HEADER- Let everyone know what your company is about
-FOOTER- Keep It Simple

All Components must be screenshot, and on separate documents. You MAY use HTML & notepad but it is NOT required.

Let me know if there are ANY questions

MO

stickman flash

Pretty good tutorial for flash animation

CLICK

FLASH

after I take you through what I know about flash, I would like you to find a tutorial that can help in WEB DESIGN.



CLICK HERE for an example of a Flash website.

then

CLICK HERE for a simple tutorial in flash about making a simple action button.

Thanks
MO

DO NOW thursday 3/28

Who controls the Internet? Even though the Internet has been around for as long as you have been alive, 90% of the people that control major portions of Internet and Internet filtering (safety) were born prior to the birth of the Internet.

SPAMHAUSE, a Geneva based NON-PROFIT spam filtering organization blocked CYBERBUNKER, a Dutch web hosting company.

Basically CYBERBUNKER says they have the right to host everything from public high school web-design classroom BLOGs to kiddie porn and terrorist website. SPAMHAUSE serves as a filter to keep the Internet justified and uncorrupted.

ASSIGNMENT: Does any one organization have the right to suppress the Internet? Use and site facts from the Internet to support your comments.

Thanks
MO
Read & watch the video.
CLICK HERE

latest requirements for the latest project

For this project you are designing a website completely in photoshop.

You will be responsible for the following:

-BACKGROUND
-HEADER
-LOGO
-NAV BAR
-FOOTER
-BASIC CONTENT (PICTURES or TEXT)
     - USING THE SLICE TOOL YOUR NAV BAR MUST TAKE YOU TO AT LEAST 3 PARTS OF YOUR PAGE.

There will be allowed to use the same concept as the HTML assignment but ALL components MUST be re-designed in PHOTOSHOP.

Thanks
MO

Here is what you are responsible for for the 3rd QTR

List of assignments-

- Purpose of a website-
- list of 10 successful websites with posted images
- finished HTML page containing all (non-functional) components
- working link on HTML page
- progress shown on BLOG of PS page
- use of the slice tool on PS PAGE.
- updated BLOG.

Go through this list, MAKE SURE YOU HAVE EVERYTHING!!!

new purpose statement

Your next WEBSITE will be designed fully using PHOTO SHOP.

this project will be a multi document project.

1- page doc.- this doc will be the skeleton for the entire project. as you finish each component you will bring it onto this "PAGE DOC." Use the guidelines to help line up the components.

2- banner doc. - create a NEW banner, let the banner combine a LOGO and text to give a "snapshot of what your business is about"

3- navigation bar- research other navigation bars, do NOT take design for granted. designers get paid to create nav. bars that "blend" into their web environment.

4- Background- keep this subtle but expressive. You do not want your back ground to be more important than your content.

5- LOGO- this is Incorporated into your banner.

6- footer- use a simple version of your banner/ header.

Once you finish your design you may then use the slice toole to create usable space.

You may use your last Website as your idea for your new project BUT, you MUST re-design all components.

You will also be responsible for at least 3 separate pages listed in you NAVIGATION BAR.

*REMEMBER= when you design more than one page, you are using the same header, navbar and footer, actual content is all that changes.

thanks
MO

wrapping up your HTML

I foresee about 2 days left on the HTML project.

your page must include the following to have a full grade.
   -header- designed in PS.
   -navigation bar- designed in PS.
   -background- color using HTML or texture designed in PS.
   -one picture as a link- use <center><a href="http://www.whatever url you want"><img src="what ever image you want.jpg"></a> </center> (remember the image must be saved in the same place as the notepad)
   -Footer- designed in HTML.

You should finish with a full screen shot of your page on your BLOG. thanks

MO

PS comment to let me know that you understand, or if you have any questions.

Take some time and check out some of these WS, its NOT the content that impresses me but the inovation of the search and discover.

http://digitalmash.com/

http://www.storenvy.com/

http://www.radiumlabs.com/

http://www.riotindustries.com/

Comment your thoughts about 2 of these WS's, good or bad. Take your time.

Thanks
MO

Im Baaaaackk!!

OK folks, I noticed that some of you did little to NO posting while I was out, remember I need your posts to grade you. This is how I track your progress. The more detailed your posts are the better you grade is going to be. An easy way to ensure a good grade is to post pictures or a screenshot of projects whether they are finished or in progress.

I am quickly coming up on the interim and I NEED to see some of your BLOG posts with pictures.

While I was out you should have been developing a plan for your next WEB SITE. for this assignment you most post the following.

-PURPOSE STATEMENT- this tells what your WS is about in moderate detail.

-COMPONENT CONSTRUCTION- this is a 5 part project. The components should all carry a specifically designed theme that directly corresponds with the purpose of the WS.

-LOGO- upper left corner no larger than 100px X 100px
-BANNER- immediately to the right of the logo. and fills the remainder of the width, the height should be the same as the LOGO.

-NAVIGATION BAR- either vertical or horizontal, if you choose vertical then the width should be the same as the logo, if you choose horizontal then the width should be the same as the logo and banner together. This component should contain text using Photoshop.

-FOOTER- do your research here and post your findings, footers vary but usually keep the same size at the page itself and contain many of the same links as the navigation bar with a few extras. The text in this component is NOT nearly as prominent as the text in the Navi Bar.

-CONTENT/BACKGROUND- Create a simple JPG in PS that uses the size of the page that has a  textured theme or a simple gradient that completes the a color coordination, USE a color wheel if necessary.

I am looking for the level of creativity to be stepped up. Using PS or ILL. to construct the following components. each component will be placed onto a new HTML page. remember you have to create a new folder for this project so you can save IMG or .JPG's so your HTML knows where to locate it. IF you have ANY questions I will be around, I know the level of PS varies in this class however your explanation of your vision can help me to help you.

Thanks
MO

latest

We are still working on the list of assignments from the 2/21 post. That list is your in-class agenda through Wednesdays class. Also to add to the list would be to connect a second page to you r HTML. There is a chance that I will be out tomorrow and possibly Wednesday.

If you are finished you are to write and post a Proposal for your next project, a new web site, the purpose for the WS is in the service industry. For Example- Lawn cutting, butler service, at home car wash, etc etc.

These companies are the backbone of the internet advertising explosion. Suggestive design throught the major components will help sell any business. For a buler service maybe the background is designed like a tuxedo, with very clean lines and cifflinks as the navigation bar buttons. This project will take research on your part to hel design the look. All work will be done in Photoshop. Anyone who lacks in PS knowledge will get help. As always remember small things like:
-Logo design
-colors
-font choice
-target market
Will shape a successful design.

Comment that you have read this and understand it, also post ANY questions.

Thanks
MO

opening your HTML page

Some people have difficulties opening their WP.
You can see below that I have the HTML page open as an internet page, then you should be able to goto OPEN- OPEN WITH- NOTEPAD. try that

What you should have so far....

1- BLOG- this grade includes daily maintenance and pictures of any current project either finished or unfinished.

2- 2.5 page paper on "purpose of a WS"
3- list of 10 websites with reasons.
4- HTML- basic text.
5- HTML- basic text with picture.
6- HTML- basic text with picture & banner.
7- HTML- basic text with picture, banner & navigation bar.
8- HTML- basic text with picture, banner, navigation bar & frames around a new picture.

#'s 4 through 8 are all the same project that you are building, this particular HTML WS, does not have to have a particular purpose. Our next project will be designed for a specific purpose.

Use your BLOG's as a resource, find people in this class and follow their BLOG so if a question comes up you can refer to their post.

thanks
MO

Continue your HTML project

Using w3schools.com as your resource- you should have the following
#1- title tag (RED) name of WS
#2- img tag (GREEN)
#3- head tag (BLUE) -some of you may have inserted an image here.
#4- p tag (purple) body of text

Things to work on if you are up to this point.

-Back ground color
-Frames around new images.
-wrapping a body of text around an image.


Continue working on these issues and remember to BLOG ABOUT IT!!!

Thanks
MO

I think we are ready to start designing a page.

I have been wasting enough time making you read and write, time to start designing.

Lets start with basic CODING. for HTML.

As you found out yesterday Hyper Text Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

Today we will start a basic HTML page, I understand that this class is at Varying levels, I want you to stick to the instruction. but if you surpass where we are, It is your responsibility to BLOG about it. Click HERE to find an online HTML editor.

Then open your start menu- accessories- notepad.

Thanks, be patient
MO

READ and answer the questions below

CLICK HERE, then read from "Origins of the Internet"

Answer this question in full on your BLOG.

#1- Who is credited for envisioning the "internet"? What did he call it? When did it happen?


THEN CLICK HERE, then read from "what is HTML" and answer these questions on your BLOG.

#1- What doe HTML mean?
#2- What is the most basic program to write HTML?
#3- How many different programs on the computer you are working on right now can build a website? name them.


Thanks
MO

FINISHED WITH THE HEADER????

START A NAVIGATION BAR.

Remember Navigation bars can be horizontal (SHOWN BELOW) or vertical, also shown below.

Both of these components have very specific sizes, do your own research to find what size will work for you.

Using your Banner (You may want to make changes to your Banner now. Open doc.- Ctl-U) as a model for a color theme create a Navigation bar with at least 7 buttons. Use the type tool to name the buttons. Advanced students should be using guide lines and expeiience to create a "flashier" looking button.

I will be around to help.

Thanks
MO

create a banner

#1- Using PS- open a new document 750px X 90px @ 100res.

In thie space Create a a banner for a website. You must use full color, and Text. When you are FINISHED youy must save the doc. as a JPG. in order for it top be used as a WEB ready Graphic, this work should be save in your Web Design folder in a folder called Graphics. Name the Document before you save it. DO NOT leave it "Untitled-1"

Your First WS is the subject of your project but does not have to be the WS name. This is just 1 component of 6 major components that must carry a theme. From Banner to Footer. Right now we are not concerned with functionality.

Sorry I out, but while Im away.......

What is a banner- On a website, the banner is a large image found on the upper part of the page. It usually contains the name of the website and an image related to what is on the page, and/or advertising which is typically used to defray the cost of running that website and/or earn the page/site owner some money

What is a header- a website header is a graphic that contains information about the website products or services and this graphic sits on the top of the web page.


I want you to dig further into these topics and post on your blog the differences you find, search any where and site your findings, I will be grading the quality of your post.

If you finish you will have the rest of the period to finish any of the previous posts. INCLUDING THOSE THAT DON'T HAVE A REAL PICTURE FOR YOUR PROFILE- what a great way to spend the period- that means no cars or karate guys or Alkiada Terrorists, We will start PS and Illustrator tomorrow, right now I have to do this thing.


Thanks
MO

make sure you have.....

-10 successful Websites with thoughts about each one.
-5 commonalities
-Post your picture for your BLOG profile pic.
-design your back ground
-2.5 pages on the purpose of a website. as per this article click HERE

Then Post your Super Bowl prediction and score here to let me know that you have read this post.

thanks
MO

Web site appeal

Take some time today and search interesting websites,

YOU HAVE UNTIL 9:17 TO CRUISE THE INTERNET AND DISCOVER 10 WEBSITES THAT YOU CONCIDER TO BE SUCCESSFUL- TAKE A SCREEN SHOT OF EACH ONE AND POST ON YOUR BLOG WHY ITS SUCCESSFUL, YOU HAVE UNTIL FRIDAY.

THANKS
MO

SEND ME YOUR URL

What is a URL? a URL is an acronym for Uniform Resource Locator and is a reference (an address) to a resource on the Internet. When you created your BLOG your were each give an specific URL, there approximately 400,000,000 current URL's (websites) and growing by the minute. A URL is like walking into that bookstore and picking up the specific book you want. Type in the URL and you go straight to that page, using GOOGLE or any other search engine is like using a card system at the library.

So anyway lets start today by sending me your URL. you can find it in the address bar when you log into Blogger and click the "VIEW BLOG" button. Copy it and post it as a comment to this post- be sure to attach your full name, so it looks like this.

mosclass.blogspot.com
Sean Mohammed

after that start  designing your BLOG, by going to the template list and editing the layout and template, I iwant you to insert an image on your own from google images or one that you have taken and e-mailed to yourself, once that is finished then take a picture of your self and send it to you rgmail account and use it as your picture. Please post to tell me that you have read the assignment and UNDERSTAND IT, then if you have questions post them to this comment as well here.

RE-CAP

#1- Comment this post with your URL (not the advanced Computer Graphics people)
#2- Design your BLOG BACKGROUND with images from the internet or personal images. ACG students can use texured images to reflect the back ground as being Built or man made. (PS tutorial)
#3- Set your profile picture with an image taken using a phone.
#4- Comment on this post that you have read it and UNDERSTAND it if not post a question to it.

Thanks
MO

LATEST ASSIGNMENT

Click here to read a short article about the 10 best web designs.

After you read, write 5 commonalities about these websites. This will be your second post on your NEW blog.

Thanks
MO

WELCOME TO WEB DESIGN

Welcome to WEB DESIGN

#1- read the syllabus below.

#2- Click here to take my survey.

#3- Read the article HERE and write 2.5 page paper as to the purpose of a WS (website) site specific points in the article. Points to write about
-Overall purpose
-Creativety
-Business purpose
-Market
If you dont understand what these terms mean "GOOGLE" them. this paper is due tomorrow thanks to the early dismissal.

 Also, include a brief description of your graphics experience, include all classes, workshops and interests that may be relevent to graphic design as it pertains to photoshop, illustrator and any other platform included in the Adobe Creative suite.

THERE IS NO CCP (copy cutting & pasting) As per the Syllabus you have already read. 

Thanks
MO

Syllabus

Web Design: HTML, Photoshop & Illustrator

Instructor: Sean Mohammed

E-mail: mohammeds@mahopac.k12.ny.us

Web site: www.mosdesignclass.blogsot.com

All Grades and projects will be posted on Infinite Campus.

Extra help will be given on a basis of needed instruction, Any student that needs EH can come at any time the lab is open- or make arrangements for Afterschool help any day of the week.

Course Description

Designed for the experienced computer user, this course provides the opportunity to experiment with a host of graphics applications to create Web Sites from scratch using HTML code on Notebook and integrating graphics created in Photoshop and Illustrator. Students will be creating their own professional-quality web ready graphic presentations and pages. After completing this course you will have the knowledge and experience in these relevant computer applications and vocational methods. Hands-on projects maximize the learning; each student will chart their own progress using their BLOG as a student journal. Students will also use standard display techniques for professional quality presentation.

.

Primary Learning Outcomes

Upon completion of the course participants shall:

• Become familiar with the interface of sophisticated computer graphics programs.

• Become familiar with the tools used in relevant web design software

• Use basic HTML with integrated.

• Compose images to achieve effective communication.

• Become proficient at linking standards to technology based curriculum.

Standards - Based Instruction

. . .To ensure that students are prepared for their future we should: include technology and information literacy in state and local standards for what students should know and be able to do; ensure students use technology appropriately and responsibly; develop new student assessment tools; and strengthen partnerships with effective art based learning standards coupled with real life oriented creative problem solving.

1. Communication and Collaboration

Students use digital media and environments to communicate and work collaboratively, using distance education methods, to support individual learning and contribute to the learning of others.

Through the use on BLOG’s and interactive digital class participation.

Students:

a. interact, collaborate, and publish with peers, experts, or others employing a variety of

digital environments and media.  Through BLOGGER.COM

b. communicate information and ideas effectively to multiple audiences using a variety

of media and formats.

2. Research and Information Fluency

Students apply digital tools to gather, evaluate, and use information. There is a consistent use of tutorials and collaborative problem solving.

3. Critical Thinking, Problem Solving, and Decision Making

Students use critical thinking skills to plan and conduct market research to manage projects, solve problems, and make informed decisions using appropriate digital tools and resources.

Students:

a. identify and define authentic problems and significant questions for investigation.

b. plan and manage activities to develop a solution or complete a project.

c. collect and analyze data to identify solutions and/or make informed decisions.

d. use multiple processes and diverse perspectives to explore alternative solutions.

4. Digital Citizenship

Students understand the student code of conduct as it pertains to internet use and computer use and responsibilities.

Students:

a. advocate and practice safe, legal, and responsible use of information and technology.

b. exhibit a positive attitude toward using technology that supports collaboration,

learning, and productivity.

c. demonstrate personal responsibility for lifelong learning.

d. exhibit leadership for digital citizenship.

Course Materials- For display, only materials that are provided in class as per project basis.

Course Requirements

There are written assignments and multiple projects in all.

1-Create a BLOG account at BLOGGER.COM & follow mosdesignclass.blogspot.com

Course and Self evaluation

Each student will use their Blog to chart progress on a daily basis. The class will be given assignments that are posted on the teachers BLOG- all correspondence for the course will take place digitally. If a student is experiencing problems with an assignment it should be discussed on the blog where other students will be encouraged to aide in the assistance of other students. There will be a % of your grade based on your daily BLOG maintenance and your online participation.

Grading RUBRIK-

PROJECT=50%

CLASS/ ONLINE PARTICIPATION=30%

CONTENT UNDERSTANDING= 20% (Not all projects are Effort based)

Grading Scale

Letter grades, should one be requested, will be on the following scale:

100%- 95% = A

94% - 90% = A-

89%- 85%= B

84%- 80%= B-

79%- 75%= C

74%- 70%= C-

69%- 65%= D

64%- 0% = F

Topics and Assignments

Basics of HTML

Placement of WEB parts

Anatomy of a website

Mastery of graphic design

Understanding Graphic design- LOGO, HEADER, FOOTER

Adding text

BASIC RE-DESIGN

Integration- of Graphics software

BLOG maintenance

Elective assignments, tutorial folder

Course Evaluation

Use of tools and techniques (T&T)

Effort and Perseverance

Craftsmanship

Consistency

Evidence of Learning

Students will be evaluated on the ability to follow directions as described in posted assignments and by the oral instruction given by the instructor (All work will be posted by students on daily maintained BLOG sites in stages of completion) these assignments will demonstrate mastery of the tools and techniques. Written assignments should contain thoughtful, reflective responses applicable to their personal and/or educational experiences which indicate they have put thought and effort in to their replies. All written assignments will be in the form of daily BLOG postings.

Policy on Plagiarism

“All people participating in the educational process at Mahopac High School are expected to pursue honesty and integrity in all aspects of their academic work. Academic dishonesty, including plagiarism, will be handled according to the procedures set forth in the Mahopac High School Student code of conduct.”

The following statement reflects the Desired Student Outcomes as it relates to coursework at

Mahopac High School Art Department:

“WEB DESIGN course work reflects Mahopac Desired Student Learning Outcomes as it applies to creative development to demonstrate the following:

• Oral and written communication in individual and group settings

• Content knowledge, and application of such knowledge in the students’ area of interest

to affect change

• Reflection for personal and professional growth

• Critical thinking

• Cultural and global perspectives to understand complex systems

• Collaborative and cross curricular efforts used to understand and expand disciplines, including an understanding of technological systems.”

FINAL project

STEP BY STEP

As advanced students you have all had to encounter step by step instructions. For this project you will be creating your own step by step instructions.


HERE ARE YOUR STEP BY STEP INSTRUCTIONS FOR YOUR STEP BY STEP INSTRUCTIONS

OVERVIEW- Find a simple task- Making a P-B & J sandwich or sharpening a pencil or any number of menial tasks that we as regular people perform any on given day. Break down this task to 6 simple steps, after these steps have been determined you must use your phone to photograph the steps. After the steps have been photographed use your phone to e-mail yourself the pictures you have taken. You will open them in Illustrator one by one and use the pen tool to illustrate over the image to show a step by step drawings of your simple task.

STEP 1- determine your simple task, find something that can be done in easy enough steps dont bite off more than you can chew. steps may not be repeated but parts of the drawings may be. You want each step to be different enough to show direction but close enough to show consistancy.

STEP 2- Take pictures, pictures should be simple with consistantsy in size, environment and composition.

STEP 3- E-mail pictures and open them in Illustrator. Same process as opening them in PS.

STEP 4- Start Illustrating, the objective is to combine composition with ecomony of line. Simplicity is the key.

Helpful hints= The color choices can be White with a Black stroke set as the outline(this will set up your drawing)

Each drawing must be posted on your blog as you finish, then a splashpage will be the last post for this project.

Your timeline is from Jan.7 to the 17th. the end of this class is the 25th. You may come in to work during Mid-term week. But try to finsh before then to avoid 55%'s.

If you have Questions let me know.

PS I will give a brief overview of the PEN TOOL in Illustrator on Tuesday and Wednesday.

BLOG ABOUT EVERY STEP FROM START TO FINISH!!!

Thanks
MO