Upload
giles-wilkins
View
214
Download
0
Embed Size (px)
Citation preview
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
Home Workshop Support Webcast Support Supplies About Us
www.build-it-yourself.com
@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 <!--===========End Header===========//-->• Add <!--===========Start Footer===========//-->• 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"> <!-- (html comment tag)... //--> (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.
www.build-it-yourself.com
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
www.build-it-yourself.com
Project NameMission Plans Solutions
Projects Build-It-Blocks Workshops Video Phone Stockroom Invention Universe
670 Pixel Wide Table
Workshop Support Webcast Support Presentations Site Map About Us
Copyright 1995 – 2009 | Terms of Use | Privacy Policy
Turns red when selected.
Kids
Home Workshop Support Webcast Support Supplies About Us
www.build-it-yourself.com/support
Links to www.build-it-yourself.com
670 Pixel Wide Table
Workshop Support Webcast Support Presentations Site Map About Us
Copyright 1995 – 2009 | Terms of Use | Privacy Policy
Parents + Program Directors + Partners
Home Workshop Support Webcast Support Supplies About Us
@Schools @Home @BIY Support Materials Contact Us
Workshops at Build-It-YourselfOverview Application Internship
670 Pixel Wide Table
Workshop Support Webcast Support Presentations Site Map About Us
Copyright 1995 – 2009 | Terms of Use | Privacy Policy
www.build-it-yourself.com/support
Parents + Program Directors + Partners
Home Workshop Support Webcast Support Supplies About Us
Overview Requirements
Join The Webcast Room
670 Pixel Wide Table
Workshop Support Webcast Support Presentations Site Map About Us
Copyright 1995 – 2009 | Terms of Use | Privacy Policy
www.build-it-yourself.com/support
Parents + Program Directors + Partners
Home Workshop Support Webcast Support Supplies About Us
Overview Prices
After-school Program Workshop Supplies
670 Pixel Wide Table
Workshop Support Webcast Support Presentations Site Map About Us
Copyright 1995 – 2009 | Terms of Use | Privacy Policy
www.build-it-yourself.com/support
Parents + Program Directors + Partners
Home Workshop Support Webcast Support Supplies About Us
Overview Team Testimonials Partner PPT Contact Us
Empower the Next Generation to Use Technology Constructively
670 Pixel Wide Table
Workshop Support Webcast Support Presentations Site Map About Us
Copyright 1995 – 2009 | Terms of Use | Privacy Policy
www.build-it-yourself.com/support
Parents + Program Directors + Partners
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.
www.build-it-yourself.com
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
1. Open it with your favorite text editor.
2. Try to find “<!--=========End Header===========-->” 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 “<!--=========Start Footer===========-->” 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> <!--=========End Header===========--> <?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’); ?> <!--=========Start Footer===========--> <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).