Www..com Website Redesign. Workshop Support + About Us Content that inspires and guides kids to...

www. .com

Website Redesign

Workshop Support+

About Us

Content thatinspires and guides

kids to build Invention Universe

Development

Website Sections

Parents+

Educators

BIY Staff +

Partners

Kids

Site 1Build-It-Yourself.com

Site 3Build-It-Yourself.com/dev

Site 2Build-It-Yourself.com/support

Website Sections

InventionUniverse

Post/View ProjectsPHP, Java,

MySQL Server

WebcastSchedule

and Sign up

www.Build-It-Yourself.com

Build-It-BlocksMySQL Server

Webcast RoomLondon ISP

Stock RoomFulfillment House

ProjectsHTML Web Server

Contact BIY

WebcastSupport +

Requirements

About BIY

Business PlanTeam

Testimonials

MembersKids 8 - 13

GuidanceCounselors

Parents

After-schoolProgramDirectors

Partners

Non-membersKids 8 - 13

WorkshopSupport +Contracts

WorkshopContracts +

Support

Project Mgm’tDevelopment Sites

www.build-it-yourself.com

Invention-Universe.com

Home Workshop Support Webcast Support Supplies About Us


@Schools @Home @BIY Support Materials Contact Us

Workshops at Build-It-YourselfOverview Application Internship

Build-It-Yourself.com/support

[email protected] | 269 Pearl Street | 617-547-0705 | www.build-it-yourself.com

Content

Problems

1. The website’s navigation is a rats nest!!! 2. Every page on the Build-it-Yourself website

has the navigation bar (header) and the BIY company information (footer) hard-coded in. If you want to change the items in the navigation bars you have to change it on over 400 pages.

3. There are inconsistent ‘style’ or layout modifiers.

4. The HTML code is ugly! It does not validate.

Mission

1. Clean up the HTML code2. Add Style Sheets.3. Make all the pages on the BIY website use

the same header and footer PHP files, instead of coding a new menu each time something changes.

HTML Guidelines• Indents are all 2 spaces (no tabs)• Indentation hierarchy and nesting is strictly followed• No line is more than 80 characters• Add • Add • Add <tbody> </tbody> table tags• No caps on tags or attributes• Use quotes around attributes (ex. width=10: wrong width="10":

right)• All tags closed (<br/>, <hr/>, <img.../>,<p>...</p>)• Correct javascript:

<script type="text/javascript">  (end html comment tag) </script>

Example of HTML code written by Nathan (continued):http://www.build-it-yourself.com/dev/web-site-redesign-

2009/index-money-makers.html

Code Validation Checkerhttp://validator.w3.org/

Document Types (Comply with Loose Standard)http://www.w3.org/QA/2002/04/valid-dtd-list.htmlUse this tag before your <html> tag.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN“"http://www.w3.org/TR/REC-html40/loose.dtd">

Conforming to the loose standard should ensure that our Website will Display accurately on most browsers.IEFirefoxSarariChromeIphoneGphoneBlackberry

Code tutorialhttp://www.htmlcodetutorial.com/document/_33nDOCTYPE.html

Mission

1. Clean up the HTML code2. Add Style Sheets.3. Make all the pages on the BiY website use

the same header and footer PHP files, instead of coding a new menu each time something changes.

Request a.php

Send back a.html

How a WAMP server gets PHP code to a client browser(Windows Apache MySQL PHP Web Server)

Client Browser

Rendered PHPIn HTML format

<html><body>Hello</body></html>

a.php

<?Echo “Hello”;?>

PHP Interpreter

Rendered PHPIn HTML format

My SQLDatabase

WAMP Server

Questions?

• What is PHP server side code and how is it different from HTML client side code?

• Discussion about the pro’s and con’s of PHP, ASP, Frames and iFrames.

Project of the MonthBuild a door greeter.


670 Pixel Wide Table

Workshop Support Webcast Support Presentations Site Map About Us

Copyright 1995 – 2009 | Terms of Use | Privacy Policy

Projects Build-It-Blocks Workshops Video Phone Stockroom Invention Universe

Links to build-it-yourself.com Becomes darker when mouse over.Turns red when selected.

Kids

http://www.build-it-yourself.com/index.html


Project NameMission Plans Solutions

Projects Build-It-Blocks Workshops Video Phone Stockroom Invention Universe




Turns red when selected.

Kids



www.build-it-yourself.com/support

Links to www.build-it-yourself.com




Parents + Program Directors + Partners



@Schools @Home @BIY Support Materials Contact Us

Workshops at Build-It-YourselfOverview Application Internship








Overview Requirements

Join The Webcast Room








Overview Prices

After-school Program Workshop Supplies







Overview Team Testimonials Partner PPT Contact Us

Empower the Next Generation to Use Technology Constructively






ProjectsBuild far out stuffhttp://www.build-it-yourself.com/project/index-project.htm

Build-It-BlocksFind clever tricks + building blockshttp://www.build-it-yourself.com/biy-build-it-blocks/index-build-it-blocks.html

WorkshopsSign up for workshopshttp://www.build-it-yourself.com/biy-workshops/index-workshops.html

Video PhoneBuild online with hip artists and engineers

Stock RoomGet parts, tools, & premium quality junk.http://www.build-it-yourself.com/biy-stock-room/index-stock-room.html

Invention UniverseBuild a planet for your projectshttp://liuhuan.mit.edu/biy-iu/universe/client/InventionUniverse.html

Navigation Button / Alt text / temp link

Project of the MonthBuild a door greeter.


Projects Build-It-Blocks Workshops Video Phone Stock Room Invention Universe

Build-It-Yourself.com

670 Pixels Wide Table

Workshop Support Webcast Support Presentations Site Map About UsCopyright 1995 – 2009 | Terms of Use | Privacy Policy

Header and Footer PHP Script

1. Open it with your favorite text editor.

2. Try to find “” in your editor, this is the signal of end of the header. If you can’t find one, you will have to identify it yourself.

3. Select everything from beginning to this line, replace them with a single line

<?php require_once(‘lib/header.php’); ?>

1. Note: “lib/header.php” is a RELATIVE PATH, so make sure that, if you are in a subdirectory, use some “../” before “lib” to go up to the root directory of your repository.

Like <?php require_once(‘../../lib/header.php’); ?>

• Try to find “” in your editor, this is the signal of start of the footer. If you can’t find one, you will have to identify it yourself.

• Select everything from this line till the end, replace them with a single line

<?php require_once(‘lib/footer.php’); ?>

• Note: “lib/footer.php” is a RELATIVE PATH, so make sure that, if you are in a subdirectory, use some “../” before “lib” to go up to the root directory of your repository.

Like <?php require_once(‘../../lib/footer.php’); ?>

1. Use the find/replace function to replace all the “.html” to “.php” in your text editor.

2. Clean up the code: (according to Nathan’s rules).

Converting instructions

<HTML> <head> <title>Build-It-Yourself toys, robots, puppets, contraptions.</title> <META Name="description" Content=

"Build your own whimsical toys and robots. Merge art, technology and junk. Get proper tools, parts and supplies. Collaborate with engineers, artists and toy inventors."> <META Name="keywords" Content="LEGO, LEGO inventions, LEGO RCX, LEGO mindstorms, LEGO robotsMIT Media Lab, Life Long Kindegarten, Scratch, games, computer games

…..blah blah blah <td width="155" align="center"> <font face="Comic Sans MS" size="3"> <a href="http://liuhuan.mit.edu/biy-iu/universe/client/InventionUniverse.html" title="Meet inventors and show off your projects" STYLE="text-decoration:none"> Invention Universe</a></font> </td> </tr> </table> <hr width="670" align="center" /> </div>  <?php require_once(‘lib/header.php’); ?> <div align="center"> <p> <a href="biy-projects/proj-lab-setup/proj-lab-setup-greeter.html"> <img border="0" src="images/proj-lab-setup-duck-greeter.gif" width="225" height="208"> </a> </div>

<div align="center"> <b> <font size="4" face="Comic Sans MS" color="#444444"> Project of the Month </font> </b> <br> <font size="3" face="Comic Sans MS"> <a href="biy-projects/proj-lab-setup/proj-lab-setup-greeter.html"> <font> Click for plans to build a door greeter<br> that will welcome your buddies and scare away evil doers.</font> </a> </font> </div> <?php require_once(‘lib/footer.php’); ?>  <br> <p> <br> <p> <div align="center"> <hr width="670" align="center" /> ……..blah blah blah</div> <div align="center"> <font size="2"><font color="#808080" face="Comic Sans MS">

Copyright 1995 - 2009 | Terms of Use | Privacy Policy </font> </div> </body> </html>

Testing

• Quick check … Just open it as the a normal HTML file (i.e., save your local copy with suffix .html).

• Development Web server• Staging Web server• Live Web server• Test platforms

(Windows + Mac OS Versions?)IE Versions? Firefox Versions?Safari Versions?Smart phone browsers?

In the future

• After all the pages on the BiY website have been updated to use the same header and footer we can begin remapping and redesigning the site.

• We need to change the navigation to incorporate invention universe.

• We would like to standardize the site layout using CSS (cascading style sheets, http://en.wikipedia.org/wiki/Css).

Www..com Website Redesign. Workshop Support + About Us Content that inspires and guides kids to...

Documents

Transcript of Www..com Website Redesign. Workshop Support + About Us Content that inspires and guides kids to...