Become a Coding Hotshot! Website Design 101 Become a Coding Hotshot!
The Problem Aliens are scanning the universe for signs of intelligent life. If they find a civilization of dummies they will blow it to smithereens. If they find signs of intelligent life they may want to trade ideas, music and computer games.
Evolve from know-nothing, nat-brain rookies … The Mission 1. Build a website that will make aliens want to make peace, not war. (And follow you on Instagram.) Alien Life Video Evolve from know-nothing, nat-brain rookies … …into Incredible Website Designers
Project Plan and Skills Needed How the Internet works Web page vocabulary Web page grammar Programming tricks Pictures, Audio, Video Web site plan and navigation Build-Your-Own-Site Skills Needed: PowerPoint Guru Problem Solver Master Designer Modular Constructor Hot Shot Programmer Celebrity Presenter
Hall of Fame Hot Shot Web Designers! Ayla, Travis, Val & John
Build Your Own Toys http://www.build-it-yourself.com/ Mechanical Toys Research Build Your Own Toys http://www.build-it-yourself.com/ Mechanical Toys http://www.cabaret.co.uk/ Mechanisms http://www.flying-pig.co.uk/mechanisms/ Pixar http://www.pixar.com/
You, Client Your local Internet Service Provider Internet Components You, Client Domain Name Server Your local Internet Service Provider Type a URL like ‘http://www.build-it-yourself.com’ in the address bar of your Web browser. Your local ISP (or Internet Service Provider) will convert this URL to an IP (or Internet Protocol) address by looking it up on a Domain Name Server. Your local ISP will then request a Web page from the Internet at the appropriate IP address.
You, Client Your local Internet Service Provider Internet Components You, Client Domain Name Server Your local Internet Service Provider `Domain name: build-it-yourself.com IP address: 192.96.204.81
Routers & Switches Routers & Switches Internet Components Routers & Switches Routers & Switches Your local Internet Service Provider Website Internet Service Provider You, Client Domain Name Server I N T E R N E T B A C K B O N E A Route Server will determine the best route from your ISP to the ISP that hosts the Website you want.
When the Website Internet Service Provider gets a Web page request, Internet Components Route Server You, Client Domain Name Routers & Switches I N T E R N E T B A C K B O N E Your local Internet Service Provider Website Host When the Website Internet Service Provider gets a Web page request, it sends back all the information necessary to display that Web page to the IP address associated with your client computer.
4/10ths of a second … time to blink your eye. Internet Speed 4/10ths of a second … time to blink your eye. 3/10ths of a second … time to send a signal from Boston to China and back.
Web Page HTML code Browser Web Design <html> <body bgcolor=gray> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg“ border=1> </center> </body> </html> Browser
html file sections (index.html) <html> <head> View/Source Code html file sections (index.html) <html> <head> < ! - - page description info - - > </head> <body> < ! - - page layout code - - > </body> </html>
Indent your code so it can be read and edited easily. HTML Source Code Body Section Indent your code so it can be read and edited easily. <body bgcolor=“gray”> < ! - - The Title Section Starts Here - - > <center> <font size=“6” color=“purple” face=“arial”> Hot Shot Web Designer </font> <img src=“images/turnip-head.jpg” border=1> </center> </body> RGB (Red Green Blue) 000000 FFFFFF – WHITE FF0000 - RED
Bad HTML code Good HTML code Web Design <html><head><title> Hot Shot Web Designers </title><meta name=“keywords” content=hot shots, smarties, your name> <meta name= “description” content=Best Web designers on the planet!></head> <body bgcolor=gray><!-- The Title Section Starts Here --><center> <font size=6 color=purple face=arial>Hot Shot Web Designer<p></font><img src="images/head-turnip.jpg" border=1 width="250" height="367"></center></body></html> <html> <head> <title> Hot Shot Web Designers </title> <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!> </head> <body bgcolor=gray> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg" border=1> </center> </body> </html>
View Source Code / Save As / Edit Find a Web page you like. View ‘Source’ COPY all source code to a text editor (Notepad or Apple Works). Save as ‘name-description.html’ in your folder in the folder ‘My Documents’ My Documents/john/john-turnip-head.html Create a sub-folder called ‘images’ and save your favorite pictures in this folder. To get pictures (JPG’s or GIF’s) from the Web, search Google Images. Right click (or CTRL click on Mac’s) on a picture and save the image to you images folder. Edit the tags, text and image names. Then save the html file. Launch Internet Explorer. File / Open ‘john-turnip-head.html’ Click on ‘Refresh’ after an edit is made and saved. 1 2 3 4 5 6
Set up your work folders. documents Desktop your name yourname-lab-book.ppt yourname-web-page.html C: or Hard Drive images cat.jpg ball.gif song.wav movie.wmv Never leave your files on the desktop. Files left on the desktop will get deleted.
File Naming Rules Rule Examples 1) Use long descriptive names so you know what the file is without having to open it. Good: animal-dog-poodle.jpg Bad: picture1.jpg 2) Specify names in hierarchical order so they sort naturally. (country, state, city) animal-dog-boxer.jpg Bad: boxer-dog-animal.jpg poodle-dog-animal.jpg 3) Use only lower case text. Bad: animal-dog-Poodle.JPG 4) Use “-” between words. Do not use “_” or “ “ Bad: animal_dog_poodle.jpg animal_dog_poodle.jpg animal dog poodle.jpg
Like a network of highways. Internet Definitions Internet The name given to the collective electronic network of computers and computer networks which are inter-connected throughout the world. Like a network of highways. WorldWideWeb – WWW The name given to the collection of computers which serve information in hypertext format to the INTERNET Like the US Post Office that uses the network of highways to deliver letters based on ZIP codes.
HTML - Hyper Text Markup Language Internet Definitions HTML - Hyper Text Markup Language the text markup language used to insert tags which allow a Web browser to correctly display a hyper-text document. <font color = “red”> Title </font> How many HTML commands are there? Web Browser (What are 2 popular browsers?) Application that converts HTML to a screen display
A server is a computer that controls information on a network. Internet Definitions Server A server is a computer that controls information on a network. Domain Name Server Translates a Web address like www.hotshot.com to an IP address like 231.987.520.52
Dial Up / DSL / Cable / T1 transmission speed Internet Definitions Client Dial Up / DSL / Cable / T1 transmission speed ISP (Internet Service Provider) Domain Name Servers IP address (Intrnet Protocol) Routers / Switches Server TCP/IP (Transmission Control Protocol / Internet Protocol) FTP (File Transfer Protocol)
Add text here that describes your research, storylines, Editing A Simple Table Add text here that describes your research, storylines, goals, and solution.
<table> <tr> <td> </tr> </td> Editing A Simple Table <table> <tr> <td> </tr> </td> </table> row data table
Change Image Change Text Editing Simple Table <div align="center"> <table border="0" cellpadding="5" cellspacing="5" width="650"> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 1:<br> Add text here that describes your research, storylines, goals, and solution. </font> </tr> Team 2<br> </table> </div> <p> Change Image Change Text
Navigation <body bgcolor=“gray"> <!-- The Title Section Starts Here --> <center> <font size=6 color=purple face=arial> Hot Shot Web Designer<br> </font> <!-- Navigation --> <font face="arial" size="4"> <a href="index.html">Home</a> | <a href="table.html">Page 2</a> <p>
You can embed sound effects or videos on a page: Audio and Video You can embed sound effects or videos on a page: <embed src=“images/burp.wav” autostart=true> Record or search for an audio file (.WAV) or a video file (.WMV) Save the WAV or WMV files to your ‘images’ folder and then embed them inside your <body> tags.
You can embed sound effects or videos on a page: Scrolling Title You can embed sound effects or videos on a page: <embed src=“images/burp.wav” autostart=true> Record or search for an audio file (.WAV) or a video file (.WMV) Save the WAV or WMV files to your ‘images’ folder and then embed them inside your <body> tags.
If you forget the format for an HTML command, search Google. HTML QUestions If you forget the format for an HTML command, search Google. Search Key Examples: - html table border color html align text A good HTML code syntax reference is: http://www.htmlcodetutorial.com/
Capture JPG’s and GIF’s from Web sites. Preparing Images Capture JPG’s and GIF’s from Web sites. Make your own image in Power Point, Appleworks Paint. Download photos from a camera. Process images. Gimp: Freeware version of Photoshop. http://www.gimp.org/downloads/ Free Online Tool for editing gif’s (crop and size). http://www.picresize.com/ Free Online Tool for making animated gifs. http://www.myspacegens.com/handler.php?gen=animatedimage&p=view&id=2818834919
Audience: Who are you speaking to? Designing your Website Audience: Who are you speaking to? (Young, grown up, boys or girls? Interested in entertainment, hobbies, or evaluating your work?) Goals: Sell or Convince (For example, demonstrate that you have mastered HTML and therefore should have a budget to buy some new hardware or software) Share (Share a story, information, or links to cool sites.)
Possible sections include: Goals and accomplishments Designing your Website Design, code and link 3 pages that would let an alien from another universe know who you are. Possible sections include: Goals and accomplishments Hobbies and interests Friends and heroes Favorite quotes and jokes Short story about how you would like your future to unfold.
Home Page Favorite Stuff Friends Web sites Hobbies Heroes Website Map and Navigation Home Page Favorite Stuff Friends Web sites Hobbies Heroes
Web Site index.html Section 1 Section ‘n’ Sec1 Images sec-1.html File Structure Folders Web Site index.html Section 1 Section ‘n’ Sec1 Images sec-1.html sec-n.html
Development (Code Tricks) You can add interesting background effects or a background image. If you do this, make sure your page information does not get lost in a complex background picture. <body background=“sparkle-background.gif”> Hannah
Time to view a page that requires 100K of information Development (Code Tricks) Design your Web site so that no page, including pictures, requires more than 100k bytes of download data. Time to view a page that requires 100K of information ___ Telephone modem download time. ___ Cable download time. ___ DSL download time. ___ Wireless download time. ___ T1 download time.
Web Server Invention Universe Deployment (FTP / Backup) Upload your website file folders from: controlpanel.invention-universe.com UID: inventionuniversecom PWD: Robot-Sushi0000 We recommend installing the FileZilla FTP tool. It's freeware. If no FTP client is installed on your computer, you can upload through 'File Manager' in an online control panel. Type into your URL browser box: controlpanel.invention-universe.com (do not type www or http://www) Click on File Manager. (I have noticed that sometimes you must upload one file at a time with this tool.) Set up personal websites as follows: 1) Create folder named: <your-first-name##> 2) Name your home page HTML file, index.html 3) Upload your files using 'File Manager' in the Control Panel. You need to create subdirectories such as 'images' or 'resources' View your website at: www.Invention-Universe.com/<your-first-name##>
What we should know How to think outside the box How to make people laugh Benefits of modular construction How to tell a compelling story Advanced Projects: Design more animated GIFs Build more elaborate code modules Reduce image file size by cropping, resizing and compression Create a video