Download presentation
Presentation is loading. Please wait.
1
www..com Website Redesign
2
Workshop Support + About Us Content that inspires and guides kids to build Invention Universe Development Website Sections Parents + Educators BIY Staff + Partners Kids Site 1 Build-It-Yourself.com Site 3 Build-It-Yourself.com/dev Site 2 Build-It-Yourself.com/support
3
Website Sections Invention Universe Post/View Projects PHP, Java, MySQL Server Webcast Schedule and Sign up www.Build-It-Yourself.com Build-It-Blocks MySQL Server Webcast Room London ISP Stock Room Fulfillment House Projects HTML Web Server Contact BIY Webcast Support + Requirements About BIY Business Plan Team Testimonials Members Kids 8 - 13 Guidance Counselors Parents After-school Program Directors Partners Non-members Kids 8 - 13 Workshop Support + Contracts Workshop Contracts + Support Project Mgm’t Development Sites
4
www.build-it-yourself.com Invention-Universe.com
5
Home Workshop Support Webcast Support Supplies About Us www.build-it-yourself.com @Schools @Home @BIY Support Materials Contact Us Workshops at Build-It-Yourself Overview Application Internship Build-It-Yourself.com/support Biysupport@gmail.com | 269 Pearl Street | 617-547-0705 | www.build-it-yourself.com Content
6
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.
7
Mission 1.Clean up the HTML code 2.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.
8
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 table tags No caps on tags or attributes Use quotes around attributes (ex. width=10: wrong width="10": right) All tags closed (,,,... ) Correct javascript: (end html comment tag) Example of HTML code written by Nathan (continued): http://www.build-it-yourself.com/dev/web-site-redesign-2009/index- money-makers.html
9
Code Validation Checker http://validator.w3.org/ Document Types (Comply with Loose Standard) http://www.w3.org/QA/2002/04/valid-dtd-list.html Use this tag before your 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. IE Firefox Sarari Chrome Iphone Gphone Blackberry Code tutorial http://www.htmlcodetutorial.com/document/_33nDOCTYPE.html
10
Mission 1.Clean up the HTML code 2.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.
11
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 PHP In HTML format Hello a.php <? Echo “Hello”; ?> PHP Interpreter Rendered PHP In HTML format My SQL Database WAMP Server
12
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.
13
Project of the Month Build 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
14
www.build-it-yourself.com Project Name Mission 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
15
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
16
Home Workshop Support Webcast Support Supplies About Us @Schools @Home @BIY Support Materials Contact Us Workshops at Build-It-Yourself Overview 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
17
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
18
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
19
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
20
Projects Build far out stuff http://www.build-it-yourself.com/project/index-project.htm Build-It-Blocks Find clever tricks + building blocks http://www.build-it-yourself.com/biy-build-it-blocks/index-build-it-blocks.html Workshops Sign up for workshops http://www.build-it-yourself.com/biy-workshops/index-workshops.html Video Phone Build online with hip artists and engineers Stock Room Get parts, tools, & premium quality junk. http://www.build-it-yourself.com/biy-stock-room/index-stock-room.html Invention Universe Build a planet for your projects http://liuhuan.mit.edu/biy-iu/universe/client/InventionUniverse.html Navigation Button / Alt text / temp link
21
Project of the Month Build a door greeter. www.build-it-yourself.com ProjectsBuild-It-BlocksWorkshopsVideo PhoneStock RoomInvention Universe Build-It-Yourself.com 670 Pixels Wide Table Workshop Support Webcast Support Presentations Site Map About Us Copyright 1995 – 2009 | Terms of Use | Privacy Policy
22
Header and Footer PHP Script
23
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 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 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 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 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
24
Build-It-Yourself toys, robots, puppets, contraptions. <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 robots MIT Media Lab, Life Long Kindegarten, Scratch, games, computer games …..blah blah blah Invention Universe
25
Project of the Month Click for plans to build a door greeter that will welcome your buddies and scare away evil doers. ……..blah blah blah Copyright 1995 - 2009 | Terms of Use | Privacy Policy
26
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?
27
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).
Similar presentations
