Presentation is loading. Please wait.

Presentation is loading. Please wait.

Www..com Website Redesign. Workshop Support + About Us Content that inspires and guides kids to build Invention Universe Development Website Sections.

Similar presentations


Presentation on theme: "Www..com Website Redesign. Workshop Support + About Us Content that inspires and guides kids to build Invention Universe Development Website Sections."— Presentation transcript:

1 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 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 Guidance Counselors Parents After-school Program Directors Partners Non-members Kids Workshop Support + Contracts Workshop Contracts + Support Project Mgm’t Development Sites

4 Invention-Universe.com

5 Home Workshop Support Webcast Support Supplies About @BIY Support Materials Contact Us Workshops at Build-It-Yourself Overview Application Internship Build-It-Yourself.com/support | 269 Pearl Street | | 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): money-makers.html

9 Code Validation Checker Document Types (Comply with Loose Standard) Use this tag before your tag. 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

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 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 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 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 Links to 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 @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 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 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 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 Parents + Program Directors + Partners

20 Projects Build far out stuff Build-It-Blocks Find clever tricks + building blocks Workshops Sign up for workshops Video Phone Build online with hip artists and engineers Stock Room Get parts, tools, & premium quality junk. Invention Universe Build a planet for your projects Navigation Button / Alt text / temp link

21 Project of the Month Build a door greeter. 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.

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 | 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,


Download ppt "Www..com Website Redesign. Workshop Support + About Us Content that inspires and guides kids to build Invention Universe Development Website Sections."

Similar presentations


Ads by Google