Author Archives: Onno

About Onno

Writing book For A future, almost finished

14 WordPress

Posted on by

You have learned how HTML and CSS work, and you can build a website. Most web sites in the real world are not hand coded, but use a Content Management System, or CMS. While a CMS does not have to use a database, most do.

CMSs

High end CMS programs run sites like Google, Amazon or financial institutions. Most sites do not need that kind of performance or redundancy, and are built using open source software, usually PHP with MySQL as the database.

WordPress, Drupal and Joomla are three popular CMS. WordPress has become the most popular of these, even though it is the least CSM like. Comparison between the three main CMS platforms.

Each of these CMSs work very different, though all use PHP to construct the pages out of information provided by the database, and content stored in the site itself, on the basis of a template.

To modify the look of the CMS, requires modification of the template. You build your website by designing the template. The CMS does the rest.

WordPress

We focus on the most popular choice. Because there is not enough time in the class, I leave developing your own WordPress theme as an alternate choice.

You will be able to create a template from scratch by following the short course: WordPress 3: Creating and Editing Custom Themes with Chris Coyier of CSS-Tricks. To click this link, you first need to log into the Newschool Portal –> Library –> Databases –> search for Lynda.com, click on the link, go to Lynda.com, sign up for an account, and then sign in. You can then use this link to go to the tutorial and download the accompanying exercise files. Lynda.com.

When A Dynamic Website is Not the Best Choice

Dynamic websites are the best thing since sliced bread, but they come with one big drawback. If you do not keep up with the software, they can contain exploits used by people with malicious intent. This can render your website hacked. This is not possible with a conventional, hand coded website.

If you plan to not update your portfolio all of the time, it better be a hand coded site. If you plant to keep up with the software updates, then by all means, use a CMS.

Installing WordPress

You will find all the resources you need at wordpress.org. You start by downloading WordPress. Put all of the files in the directory you want WordPress to appear in.

You will go to that directory, and you will be guided by the WordPress Installer. You will need to know the name and password of the database that WordPress is to use. The installer will take care of setting up everything else.

See MAMP & WAMP for setting up WordPress on your own computer.

Chris Coyier outlines a great way to experiment by using a local MAMP installation at both Linda.com with a video tutorial or the Video on CSS-tricks.com. That’s a sure way to become familiar with using WordPress as the basis for building web sites.

WordPress Template

WordPress comes with a default templates. It is possible to modify them. The problem with preexisting templates is that if they are not exactly what you want, even though they are 95% of the way there, that extra 5% sometimes requires a lot more work than you would expect, as you have to deconstruct the template and rebuild it the way you want. It can take less time to do it from black template. That is why a better way is to design the template from scratch. Start with a blank template Chris prepared.

Having installed WordPress, you need to add this to the “themes” folder in the “wp-content” folder. Once it is there, you can activate it from within the WordPress Dashboard.

Yes I am going through this rather very fast, in part because we could never cover the whole topic anyway, and this is just to give you a taste of what is to come. Please do Chris’ tutorial if you want to learn more.

WordPress File Organization

Inside the blank template folder, you will find an index.php file. That is the main file creating each page.

You learned how PHP is able to include a number of files. That is what happens here. Everywhere you see a “get_” PHP will insert an associated file in that place. This is what the index.php looks like:

<?php get_header(); ?>
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
			<div class="entry">
				<?php the_content(); ?>
			</div>
			<div class="postmetadata">
				<?php the_tags('Tags: ', ', ', '<br />'); ?>
				Posted in <?php the_category(', ') ?> |
				<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
			</div>
		</div>
	<?php endwhile; ?>
	<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
	<?php else : ?>
		<h2>Not Found</h2>
	<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

You will notice that the index file pulls in the header.php, the sidebar.php and the footer.php files, in addition to the loop that fetches the current post.

Here is a list of all the files in the template:

404.php
archive.php
comments.php
footer.php
functions.php
header.php
index.php
page.php
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

You need to understand that the HTML page that you otherwise code as one entity is here divided among these different files. It is quite easy to transfer your static website to a dynamic WordPress site by dividing up the web page into the existing pages like the header.php, sidebar.php, footer.php, etc.

The good news is that the CSS styles are included as an external stylesheet “style.css” exactly as you would expect.

As you translate your existing website to WordPress, you will once again learn everything that you have learned in class over again, but this time, you will be applying it to the modular structure of a dynamic php / database driven site.

There are many benefits to such a dynamic site, and a few drawbacks. Dynamic sites are a little slower and unless you keep up with the latest software, can be insecure, but that is not that large a price to pay when you add in all the benefits of a dynamic site.

I understand that this is all a little much. This is meant as a brief introduction. Watch the tutorial, and you will use WordPress to build your sites from that point on.

00 Assessable Tasks

Posted on by

Assessable Tasks

Assessable tasks are those core tasks required to create modern web design.

Hand coding the HTML and CSS should come together with the midterm assignment. Bold terms signify assessable tasks:

Tasks / Activities Date Requirements/Indicators
Marking-up Content Week 2 Is the markup valid and semantically correct HTML5? Are images the correct format and size?
Styling the Content Week 4 Is the CSS valid, clean, external, and using structural selectors when possible? Are various layout strategies used to construct the pages?
Constructing the Portfolio Site Week 6 Information Architecture Is the site logically laid out? Is it SEO friendly? Is it tracked using Google Analytics?
Is the web site Future Proof? Week 8 Is the website responsive to a change in viewport size, from an iPhone to the standard web browser?
Explore CSS3 and HTML5 Week 9-11 Are CSS3 & HTML5 being used to create the final website?
Modularity and Interactivity Week 12-14 Are PHP and Javascript being used in the final website?
Forms Week 12-14 Are forms being used in the final website?

03 Demo Instructions

Posted on by

In class demonstration for week three: introduction to CSS. Finished file.

  1. pick up the HTML5 template from the class portal
  2. Give it a title.
  3. There is an embedded style sheet that we will not use. 
    <style type="text/css">
.example {
}
</style>
  4. There is a link to an external style sheet. 
     <link rel="stylesheet" href="CSS/styles.css" media="all">
  5. We will use an external style sheet. Create a folder called “CSS” and a file called “style.css” External style sheets are just blank files, filled with css rules attached to selectors that target the elements in the HTML document.
  6. If we were to start adding rules, we would be adding our rules on top of the default rules of the browser. Since we do not want to depend on the rules of this or that browser, we neutralize them with a browser reset.
  7. After the Browser reset, we begin by writing that this is where the user style sheets starts. 
    /*USER STYLES*/
  8. We start by targeting the most general tags, and slowly work our way to more specific tags.
  9. The most general tag is the <body> tag. Do we want to keep the white background? What fonts do we want, etc? How about: 
    body {
background: hsla(0,100%,70%,1);
font:  400 1.5em/1.6em  "Times New Roman", Georgia, Serif;
}
  10. Be careful with this font property, as it combines a number of properties, and you need to execute it exactly as it is here. 400 refers to the weight of the font. 400 is normal. 700 is bold. 1.5/1.6 provides us with both the font size and the line height. I then name the font family, were Times New Roman is requested, and if that is not available , Georgia, then any serif font. See Class 6 for more font information.
  11. Since every other tag will be written inside the body tag, they will inherit some of these properties. The font property is inheritable, the background property is not.
  12. The next strategy is to limit the width of the window when looking at the website on a computer screen, and to center it in the middle. We limit the width to 940px and place it in the middle by using the CSS property margin with value auto like so: margin: auto;. 
    section {
width: 940px;
margin: auto;
background: hsla(30,100%,98%,1);
}
  13. The background of the section tag is only as large as the information inside of the tag. Right now it takes on the size of the picture. Let’s swap the picture with the text that one of you has written. The section expands to contain the new content.
  14. The CSS reset has reset most properties, so we need to define all of our CSS. We start by providing the section tag with 40px padding. This keeps the content from hitting the edges of the section tag.
  15. Save the document, make the browser window active by clicking on it and hit command-R to refresh the browser.
  16. We can keep the top from touching the top of the window by giving it a positive top and bottom margin. This is done by adding 40px before the auto. margin: 40px auto;
  17. CSS always starts on top, then goes clockwise, to the right, bottom, and finally left. If you only have one value, all sides take on that number. If you specify two numbers, the first signifies the top and bottom, the second the right and left sides. If there are three numbers, you can give different values to the top and bottom, and the sides stay the same. With four values all the sides are specified separately.
  18. Let’s define the section by adding a #444 border. We can do that with a shortcut that allows us to specify width, kind and color at the same time; border: 3px solid #444;
  19. The entire code for the section now looks like this: 
     section {
width: 1100px;
margin: 40px auto;
padding: 70px 30px;
background: hsla(30,100%,98%,1);
border: 3px solid #444;
}
  20. What if I were to give the header a background color? If I color the header, it looks kind of clumsy, because of the padding I gave the section. I want to counteract that by giving the header negative margins for each side, but not the top or bottom. That is accomplished by margin: 0 -60px; Giving it a little extra makes it stick out over the section, and has the effect of raising the header above the rest of the document, which helps define its importance in the visual hierarchy. I also want a little space between the header and whatever comes next. 30px should do it. margin: 0 -60px 30px; I give it a border border: 1px solid #444; and 20px of padding to finish it off. 
    header{
background: hsla(0,100%,90%,1);
margin: 0 -60px 30px;
padding: 20px;
border: 1px solid #444;
}
  21. Next up is to style the h1 header. If we make it 2em (that is a size based on the width of an em dash). OK, that is not brash enough. Lets go with 4em. The serif font does not work and I change it to Helvetica. There are more interesting fonts available, but for now, lets keep it simple.
  22. The navigation is a list. Lists items by default act like blocks. That means they go down like paragraph returns. We want them to go across, so we need to target the list items in the header and change the display from block to inline-block. With a little margin we can separate the menu items. We can go further, but lets leave that till class 5. 
    header li {
display: inline-block;
margin: 0 10px;
}
  23. It is easy to have paragraphs display one below the other. It is more difficult to display them side by side. Going vertical is natural, going horizontal is what will give you your headaches.
  24. To give us some practice, I will demonstrate the float technique to place items horizontally. This is the technique used by the NYTimes.com to create their layout. You can see this for yourself by installing the Plugin. Click on the bug that is installed to the right of your address bar, select outline in the pop-up and select outline frames. You will see almost every box in the layout light up.
  25. The float technique was originally used for floating pictures, but five years ago it was adopted by the NYTimes to float layout elements. Tables were used for layout before that time.
  26. The first step is to float an image to the right. Create a figure, img and figcaption and link to an appropriately sized picture. Since I may want to move pictures to the right more often, I create a class called pict-r, and use the class attribute in the figure class="pict-r" . A selector for the class is placing a period before pict-r in the CSS style sheet .pict-r . I also specify a smaller font for the caption, and align it to the right, and put a border on the image, though I offset it by 2px using padding. 
    .pict-r {
float: right;
margin-left: 40px;
}
img {
border: 3px solid silver;
padding: 2px;
}
figure {
}
figcaption {
font:  400 .7em/.7em  Helvetica, san-serif;
text-align: right;
}
  27. The picture moves to the right. The caption is flush right. The picture has a border around it, and the text runs around that picture.
  28. We use the same idea, but now we float a layout element to the left. THe layout element is created by introducing a div in the markup that encloses the text I want to float to the left.
  29. This time I use an ID to target the div. An ID can only to used once on a page. The id attribute is placed in the div tag: id="left" and in the style sheet, a hashtag is used as the selector: #left 
    #left {
float: left;
width: 44%;
margin-right: 3%;
padding-right: 3%;
border-right: 2px solid silver;
margin-bottom: 10px;
}
  30. I used percentages as an easy way to figure out the width. It is always a percentage of the width of the parent element. I could have figured out the pixels values and done it that way as well.
  31. When I decided to put a top and bottom holding line it, a problem arose, and I needed to push the last paragraph below the float. There is a CSS property to do this, called clear, meaning clear float. That allowed me to put the last paragraph below the two columns.
  32. To finish it off, I gave the paragraphs a 13px spacing at the bottom. 
     .bottom {
border-bottom: 2px solid silver;
padding-bottom: 10px;
margin-bottom: 20px;
}
.top {
clear: left;
border-top: 2px solid silver;
padding-top: 10px;
margin-top: 20px;
}

13 Homework

Posted on by

Homework for the Final

  1. Update website with suggestions from the peer review. State how effective the peer review was in making you reconsider aspects of your site.
  2. Write review and hand in to the person whose website you reviewed right after you reviewed it.

Homework for the Unit

  • The final project is to have a form on it.

15 Final Presentation

Posted on by

Week 15
12/17

Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream, on the web.

Homework

Final Assessment: You will have an extra 5 days to complete all of your assignments.
Have a great NEW YEAR!!

Class Evaluation

  • 15 minutes to fill out the course evaluation.

Materials

Additional materials for this unit can be found by following these links:

Goal

The goal of this unit is to:

  • provide each student with the time to exhibit their work to the rest of the class.
  • receive feedback from everyone.
  • to celebrate that you have learned a new and imminently usable skill and now belong to the modern world wide web culture.

Outcomes

At the end of this unit, students will have:

  • spent about ten minutes each presenting their final assignment.
  • expressed the UX and IA decisions that went into the project
  • explained the problems they set out to solve
  • show the way that they tackled those problems.
  • used the work-sheets to help present and express themselves.

Final Assignment Links

Updated links that I expect to be up and live as they will be graded for your final grade.

Date Due Percent
2/7/14 Website Analysis 5%
2/14/14 Midterm Worksheet 5%
2/14/14 HTML markup 5%
2/21/14 PhotoShop Comp 5%
2/28/14 CSS selections 5%
3/7/14 CSS Layout Strategies 5%
3/21/14 Typography Poster 5%
3/14/14 Portfolio: Midterm 10%
3/7/14 class Presentation 5%
3/7/14 Quiz:
4/4/14 Final: Worksheet 5%
4/4/14 Responsive Redesign of Portfolio 5%
4/11/14 CSS3 Collateral 5%
4/18/14 CSS3 Animatic 5%
4/25/14 Final: Modular Navigation 5%
5/2/14 HTML5 Multimedia 5%
5/9/14 Final: User Testing 5%
5/9/14 Final: Peer Review 5%
5/9/14 Forms 5%
5/16/14 WordPress CMS 5%
5/16/14 Final: Presentation 10%

Each assignment exhibits a skill. If you have used that skill in building your portfolio, link to that page and explain how it satisfies the homework. For example, for Week 11 CSS Animatics, if you used a hover that fades in your final, point to a page that exhibits that and let me know to look for if it is not completely obvious.

The final website sells something. It does not have to be lots of pages, but the quality has to be ready for public scrutiny. It should have many of the assessable tasks we’ve covered in the course, like CSS3, Multimedia, PHP, forms media queries, etc.

Use the peer review criteria to make sure everything is as it should be. I will use that criteria to grade your final, and can take off for every aspect that does not meet expectations.

Final Grade Calculation

The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are ground for Failure.

* Does not require coding. No Late Assignments accepted.

Send me a zipped version of your final project before the due day, 5 days after the last class.

Grade calculation:

Date Due Percent
2/6/15 Website Analysis* 5%
2/13/15 Landing Page 5%
2/13/15 HTML markup of Analysis 5%
2/20/15 7 Steps — Midterm Worksheet* 5%
2/27/15 CSS selections 5%
2/27/15 Photoshop comp/ HTML Wire Frame 5%
First Quarter Assessment
2/27/15 incorporate CSS Layout Strategies in web site 5%
2/27/15 Quiz:
3/6/15 Peer Review 5%
Official Midterm Review
3/13/15 Typography Poster 5%
3/13/15 Portfolio: Midterm 10%
3/13/15 class Presentation 5%
Second Quarter Assessment
3/20/15 Final: Worksheet* 5%
4/3/15 Responsive Redesign of Portfolio 5%
4/10/15 CSS3 Collateral 5%
4/17/15 CSS3 Animatic 5%
4/24/15 Final: Modular Navigation 5%
Third Quarter Assessment
5/1/15 HTML5 Multimedia 5%
5/8/15 Final: Peer Review 5%
5/8/15 Forms 5%
5/15/15 WordPress CMS 5%
15/15/15 Final: Presentation 5%
Final Quarter Assessment
Two assignments dropped: -10%
Total: 100%

Grading Criteria

  • Grading is to determine how well you succeeded in satisfying the requirements for each assessable task. You either failed to meet the requirements, met the requirements or exceeded the requirements.
  • The assessable tasks have a life of their own, meaning that how well you do one or another task does not always correspond with the final grade that you receive, as a lot of factors go into the final grade. Generally speaking, however, it is better to exceed expectations than to fail to meet them.
  • Some tasks are clearly assessable, like the technical merits of your work. How semantic and well formed is the markup? Did you use selectors effectively? Does your code validate?
  • Other tasks have more wiggle room. The quality of your communication, how well you address your target audience, design decisions or the content you chose to show in your portfolio.
  • For these tasks, the work-sheet becomes important in revealing your thought process. How did you approach your creative work? Did you assess the problems rationally? Does your response and solution to solving these problems show creative problem solving?
  • Some tasks are clearly defined. Others are not so clear. In each case, I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity by which you are able to solve the problems.

Assessable Tasks

Assessable tasks are those core tasks required to create modern web design.

Tasks / Activities Date Requirements/Indicators
Marking-up Content Week 2 Is the markup valid and semantically correct HTML5?
Styling the Content Week 4 Is the CSS valid, clean, and using structural selectors when possible? Are various layout strategies used to construct the pages?
Constructing the Portfolio Site Week 6 Information Architecture Is the site logically laid out? Is it SEO friendly? Is it tracked using Google Analytics?
Is the web site Future Proof? Week 8 Is the website responsive to a change in viewport size, from an iPhone to the standard web browser?
Explore CSS3 and HTML5 Week 9-11 Are CSS3 & HTML5 being used to create the final website?
Modularity and Interactivity Week 12-14 Are PHP and Javascript being used in the final website?
Forms Week 12-14 Are forms being used in the final website?

Assessable Tasks Rubric

Assessable tasks are those core tasks required to create modern web design.

Tasks / Activities has not met expectations just met expectations met expectations surpassed expectations
Marking-up Content
Is the markup valid?
Semantically Correct HTML5?
Styling the Content
Is the CSS valid?
Is the CSS clean?
Structural Selectors?
Effective use of Layout Strategies
Constructing the Portfolio Site
Information Architecture
SEO
Google Analytics
Is the web site Future Proof?
Media Queries
Responsive Design
Explore CSS3 and HTML5
CSS3 basics
CSS3 advanced
HTML5 Canvas
HTML5 Video
Modularity and Interactivity
PHP
Javascript
Forms

Definitions

These are the general criteria that The Webby Awards use to evaluate web sites. You should be familiar with them.

Content
Content is the information provided on the site. It is not just text, but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.

15 Parting Essay

Posted on by

You now know a lot more about CSS and HTML than you did when you walked in. For many of you, it was difficult to first wrap your head around how this new language works. On the other hand, once you understood, it proved to be not nearly so difficult as you first had imagined. Now that you have gained more confidence, you are able to liberate your design sense and impose it upon the code, to make the code work for you.

Be good, enjoy what you do and have an effective web presence.

All the best,

onno

14 CMS: WordPress / Final Review

Posted on by

Week 14
12/10

Content Management Systems The basis of most professional websites is a CMS. We will take a look at how a WordPress template pulls together different PHP modules into a single HTML page, and how the CSS controls the look of the site. Activity: Modify a WordPress template, using it as the basis for our own design. Activity: 15 minutes will be taken to complete on-line student evaluations. Activity: In-class final Workshop #3.

Homework

You will be working on your final and other assignments. If you have extra time on your hands, you can build a WordPress template.

Materials

Additional materials for this unit can be found by following these links:

Goal

The goal of this unit is to:

  • Everyone is pretty busy with their finals, but I thought to wrap up the course with a guided tour of a WordPress template.
  • look at how PHP creates the WordPress Website out of different sections.
  • take a detailed look at the WordPress style sheet.

Outcomes

At the end of this unit, students will have:

  • been exposed to a content management system (CMS).
  • worked through WordPress template.
  • understood how PHP combines the page out of disparate files.
  • will have been helped with any outstanding issues remaining in their final project.

Step-by-Step

20 Review homework and answer questions.
40 Show and Tell: Content management System — WordPress: new site

15 Student Evaluations: I will leave the room while you fill out the evaluations.
10 Break
80 In Class Help on the Final

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

  1. Move the Web Forward is the hub for how to engage the web community once you have joined it. You have all joined this community by now, and this will be a continually updated resource at the center of the web design universe.
  2. Changing the World! Web Governance
  3. Paul Irish Industry leader.
  4. Eric Meyer The original Industry Leader that helped bring in Standards based web design.
  5. Jeff Zeldman Another industry leaders that helped bring in standards based web design.

There are, of course, many more resources, but in this ever changing fast moving web culture, you can count on these to move the web forward. This will keep you going.

  1. One last article that introduces freelance bidding sites.

    As long as you are a student, your courses provide you with projects, but if you are graduating, I highly recommend checking these sites out, and doing a number of projects, if not for the money, for the experience, so that you can build up your portfolio.

Definitions

These are the terms that participants should be familiar with during this unit:

13 Forms / Peer Review

Posted on by

Week 13
12/3
(Note: This class will be rescheduled)

Forms and Peer Review. HTML forms are a standard way to collect information from the user. Activity: Create a simple form. Your final project should be a functional web site by this time. Activity: Peer Review: Students split up into pairs and review each other’s web sites. I will also be reviewing everyone’s website.

Homework

1) For the class: Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that in both to the person whose site you reviewed and to me. Read: chapter 16. 3) For the final: Use the feedback from the peer review to finish your website. Due: The following week.

Materials

Additional materials for this unit can be found by following these links:

Goal

The goal of this unit is to:

  • Be able to incorporate forms into the final website.
  • Understand how to critically review web site design and execution.
  • Have your web site reviewed by a peer.
  • Critique and review a peer’s web site.
  • Have me review your web site.

Outcomes

At the end of this unit, students will have:

  • Learned how to construct forms in HTML.
  • Activated forms on the server side using a PHP script.
  • Implemented forms on their own website.
  • To have been a user and test a peer’s web site
  • Critiqued and reviewed that website.
  • Had their web site critiqued and reviewed.
  • Used the feedback to finish web site.

Step-by-Step

20 Review homework and answer questions.
20 Forms
20 Implement Forms and PHP script on server.
20 How to peer review a website
10 Break
20 User test partner’s site
30 Peer review partner’s site
40 Switch Roles

News and External Resources

Sources of information that will enrich your knowledge about web design and will help you to stay current:

  1. Opera Developer Blog
  2. Safari Developer Blog
  3. Mozilla Hacs

There are, of course, many more resources, but Safari, Firefox and Opera are the standards compliant browsers that have carried web forward. Microsoft is also becoming a player, but all of you use Macs.

Talking Points

LYNDA.COM is available to all Newschool students by logging in, going to the library page, clicking on databases and search for lynda.com. You will have to sign up and activate an account, but this will will give you access to both the video and the supplementary exercise files.

LYNDA.COM video Series: Validating and Processing Forms with JavaScript and PHP

Validating web forms is a critical skill for any web developer, ensuring that the data that’s submitted is complete, accurate, and not malicious before it’s sent off to the server. Join author Ray Villalobos in this course as he shows how to validate input from site visitors with HTML5, JavaScript, and jQuery and then process the data with PHP. Plus, learn how to email form data and save it in a MySQL database so that it’s ready for other applications.

Assignment Links

Links that I expect to be up and the end of the semester:

Example of landing page from a previous semester.

    Week 2

  1. Assignment 1 (5 pages marked up)

    Week 3

  2. Index.html landing page— these links and a picture next to your name.
  3. Worksheet: behind the scenes on creative process.
  4. NY Times Wireframe
  5. Portfolio Photoshop Comp

    Week 4

  6. Portfolio exhibiting the CSS selections

    Week 5

  7. Portfolio Photoshop comp to HTML/CSS.

    Week 6

  8. Portfolio: rough, including SEO, Google Analytics and Styled Navigation

    Week 7

  9. Midterm Quiz
  10. Midterm: Portfolio (can be the same link as week 6)

    Week 8

  11. Typography Poster
  12. Final Worksheet with topic

    Week 9

  13. Responsive Redesign of Portfolio

    Week 10

  14. CSS3 Collateral ( and post the exercise you did in class)

    Week 11

  15. CSS3 Animatics (and post the exercise you did in class)

    Week 12

  16. Final: Rough

    Week 12

  17. Multimedia Demonstration

    Week 13

  18. Final: Modular Navigation

    Week 14

  19. Final: User Testing

    Week 14

  20. Final: Peer Review

    Week 14

  21. Forms

    Week 15

  22. WordPress CMS

    Week 15

  23. Link to Final

    The final website sells something. It does not have to be lots of pages, but the quality has to be ready for public scrutiny. It should have many of the topics we covered, like CSS3, Multimedia, PHP, forms media queries, etc.

Definitions

These are the terms that participants should be familiar with during this unit: