Recess Over: Back to the Basics




Website Design, Development, and Management

Philip Asare
2009‐2010 Region II Communic...
Introductions                                      Recess Over: Back to the Basics




 •   Name
 •   School
 •   Year
 • ...
House‐keeping                                                 Recess Over: Back to the Basics




 • Monthly reports
   – ...
Recess Over: Back to the Basics




You won’t learn how to create a 
   website in an hour, but …



               4     ...
Recess Over: Back to the Basics




PART I: WEBSITE DEVELOPMENT TOOLS




                5          THE NATIONAL SOCIETY ...
Hosting Tools                                      Recess Over: Back to the Basics




 • Web Server with support for a wi...
Development Tools                                                     Recess Over: Back to the Basics




 • Simple Text E...
Recess Over: Back to the Basics




PART II: WEBSITE STRUCTURE




            8           THE NATIONAL SOCIETY OF BLACK E...
“RESTful” Site Architecture                                                                           Recess Over: Back to...
Recess Over: Back to the Basics




• Each resource must have a Uniform Resource 
  Locator (URL)
• URLs must be independe...
Pages                                               Recess Over: Back to the Basics




 • Information will normally be on...
Pages                                               Recess Over: Back to the Basics




 • Contain the information (raw te...
Recess Over: Back to the Basics




PART III: CONTENT DEVELOPMENT AND 
             MANAGEMENT




                13     ...
Content Development                                       Recess Over: Back to the Basics




 • Formatting: Markup Langua...
Content Development                                                         Recess Over: Back to the Basics




 • Page de...
Formatting: HTML                                             Recess Over: Back to the Basics




 • HyperText Markup Langu...
Style: Cascading Style Sheets                          Recess Over: Back to the Basics




 • Specifies “look” of tag attr...
Server Scripting: PHP                             Recess Over: Back to the Basics




 • Stands for Hypertext Preprocessor...
Browser Scripting: Javascript                                          Recess Over: Back to the Basics




 • Syntax simil...
Content Management                                   Recess Over: Back to the Basics




 • Use Includes
 • Allows dynamic...
Content Management                                           Recess Over: Back to the Basics




 • Use Provided Templates...
Template Example                                                                   Recess Over: Back to the Basics




 • ...
Template Example (HTML w/SSI)                         Recess Over: Back to the Basics




 • Header File
   – Has common h...
Template Example (HTML w/SSI)                   Recess Over: Back to the Basics




 • Navigation
   – Defines top level n...
Template Example (HTML w/SSI)                              Recess Over: Back to the Basics




 • Footer File
   – Has com...
Template Example (HTML w/SSI)                          Recess Over: Back to the Basics




 • Page
   – Includes common pa...
Basic Web Development Process                                          Recess Over: Back to the Basics




 • Plan! Plan! ...
Keep this in mind                                      Recess Over: Back to the Basics




 • You are a facilitator
   – I...
Learning Resources                                                                  Recess Over: Back to the Basics




 •...
Recess Over: Back to the Basics




Questions?




    30           THE NATIONAL SOCIETY OF BLACK ENGINEERS
              ...
Upcoming SlideShare
Loading in...5
×

TCommFunctional-Website_Deisgn_Development_Management_945

287

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
287
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TCommFunctional-Website_Deisgn_Development_Management_945

  1. 1. Recess Over: Back to the Basics Website Design, Development, and Management Philip Asare 2009‐2010 Region II Communications Chair THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  2. 2. Introductions Recess Over: Back to the Basics • Name • School • Year • Major • Experience in NSBE leadership • Experience with web design and development • Any other communications‐related experience 2 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  3. 3. House‐keeping Recess Over: Back to the Basics • Monthly reports – Due 10th of each month (first one due October) • Communications Committee – Four Positions • Media Management • Information Management • Documentation and Archiving • Communication Tools Management – Suited to Telecommunications chair THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  4. 4. Recess Over: Back to the Basics You won’t learn how to create a  website in an hour, but … 4 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  5. 5. Recess Over: Back to the Basics PART I: WEBSITE DEVELOPMENT TOOLS 5 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  6. 6. Hosting Tools Recess Over: Back to the Basics • Web Server with support for a wide range  web programming languages (not always  available) • File Transfer Protocol (FTP) Software – WinSCP – FileZilla • Domain Name linked to host server 6 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  7. 7. Development Tools Recess Over: Back to the Basics • Simple Text Editor + Image Manipulator – Notepad++ (text) – Gimp, Aviary, Splashup, FotoFlexer (image) – More comprehensive list in Telecommunications Reference – More to be indentified and provided • Integrated Development Environment (IDE) – Adobe Creative Suite (expensive) – Microsoft Expression Studio (free for NSBE) • A combination of IDEs and other software 7 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  8. 8. Recess Over: Back to the Basics PART II: WEBSITE STRUCTURE 8 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  9. 9. “RESTful” Site Architecture Recess Over: Back to the Basics • REpresentational State Transfer is the architectural style of the web.1 • Websites contain resources (information or content) • Resources have representations • Resources have locations • Resources should be well‐organized Homepage Programs Events Publications … … 1 Read more about REST: http://en.wikipedia.org/wiki/Representational_State_Transfer 9 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  10. 10. Recess Over: Back to the Basics • Each resource must have a Uniform Resource  Locator (URL) • URLs must be independent of representation – http://national.nsbe.org/Membership/Precollege/ better than http://national.nsbe.org/Membership/Precollege/tabid/57/Default.aspx • Resource representations have many forms – Pages – Images – Portable Document Format (PDF) files – Microsoft Word documents 10 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  11. 11. Pages Recess Over: Back to the Basics • Information will normally be on a page • Pages can be static or dynamic • Static pages have information stored in the  page • Dynamic pages are populated with  information from different files 11 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  12. 12. Pages Recess Over: Back to the Basics • Contain the information (raw text, images, or  information from other files) • Formatted using a markup language • Styled using a style sheet • Manipulated using scripts 12 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  13. 13. Recess Over: Back to the Basics PART III: CONTENT DEVELOPMENT AND  MANAGEMENT 13 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  14. 14. Content Development Recess Over: Back to the Basics • Formatting: Markup Language (HTML) • Style: Cascading Style Sheets (CSS) • Manipulation: Scripting Languages – PHP: Server Scripting – Javascript: Browser Scripting • Storage: Database (if necessary) – Will not go into this in detail today • Information available on the W3Schools  website: http://www.w3schools.com 14 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  15. 15. Content Development Recess Over: Back to the Basics • Page development diagram CONTENT (text, images, MARKUP STYLE FINAL PAGE database information, …) (HTML) (CSS) SCRIPTS (PHP, Javascript) 15 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  16. 16. Formatting: HTML Recess Over: Back to the Basics • HyperText Markup Language • Has a Document Object Model (DOM) – Tags (e.g. <p></p>, <img>) – Attributes (e.g. <img src=“[image URL]”>) • Tags styles (also attribute properties) defined  in style sheets • DOM manipulation by scripts • Usually static but can be dynamic with Server‐Side Includes (SSI) 16 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  17. 17. Style: Cascading Style Sheets Recess Over: Back to the Basics • Specifies “look” of tag attributes (e.g height,  color, border style) – e.g. p{margin‐left:15px} • Can specify event‐based styles • Can specify separate styles for browser display  and printing • Can be manipulated using scripts 17 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  18. 18. Server Scripting: PHP Recess Over: Back to the Basics • Stands for Hypertext Preprocessor • Written in C programming language • Has C‐style syntax • Numerous functions for adding life to your  website • Can implement Server‐Side Includes (SSI) • Frameworks exist for application development • Allows database access 18 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  19. 19. Browser Scripting: Javascript Recess Over: Back to the Basics • Syntax similar to Java programming language • Great for adding user interactivity • Can be used for includes – New discovery • Frameworks and Libraries available for adding “cool” features  (JQuery, MooTools) – e.g. Chapter Senators Information on RLC page done with JQuery 19 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  20. 20. Content Management Recess Over: Back to the Basics • Use Includes • Allows dynamic addition of information from  one page to another • Used to manage content to is common to  pages (header, footer, navigation) • Makes changes to common information easier  (i.e. change it in one place, see it everywhere) 20 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  21. 21. Content Management Recess Over: Back to the Basics • Use Provided Templates • Templates come in three flavors – HTML with SSI – PHP with SSI – HTML with Javascript Includes • Template Documentation helps • Python Script allows easy page generation • Set up like the regional site • Can be tweaked to meet individual needs • Support available year‐round 21 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  22. 22. Template Example Recess Over: Back to the Basics • Organization Homepage Header Footer Navigation Styles Scripts Membership People Programs Events Publications Contact Center … … … … … … 22 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  23. 23. Template Example (HTML w/SSI) Recess Over: Back to the Basics • Header File – Has common header information – Implements variables provided by pages • Stylesheets • Scripts • Page title • Page Level 23 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  24. 24. Template Example (HTML w/SSI) Recess Over: Back to the Basics • Navigation – Defines top level navigation 24 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  25. 25. Template Example (HTML w/SSI) Recess Over: Back to the Basics • Footer File – Has common footer information – Tracking information (Google Analytics) 25 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  26. 26. Template Example (HTML w/SSI) Recess Over: Back to the Basics • Page – Includes common pages (header, footer,  navigation) – Defines variables for common pages – Has main content 26 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  27. 27. Basic Web Development Process Recess Over: Back to the Basics • Plan! Plan! Plan! (Site Architecture) – What goes where? – Who is your audience? – What do you want who seeing? – Answer these questions first. • Get a design – Great works start with great inspiration – University websites are good models (so is the regional website) – Use firefox Web Development Toolbar or Firebug to view page sources, css files, layout • Work on page layouts and styles • Develop and test scripts • Populate pages with content 27 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  28. 28. Keep this in mind Recess Over: Back to the Basics • You are a facilitator – Information must be provided to you • Plan ahead, manage time and resources • Document your work – Helps you and your successor • Maintain good quality of communication – More in this in later presentation 28 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  29. 29. Learning Resources Recess Over: Back to the Basics • W3 Schools ‐ www.w3schools.com  – Free tutorials and learning resources for various web languages  • PHP.net – www.php.net – Free comprehensive resource for the PHP language.  • Sitepoint – www.sitepoint.com – Resources for web design and development (some free, others for a price).  • Designing for the Web: A Tutorial by Mike Markel – http://bcs.bedfordstmartins.com/techcomm8e/tutorials/designforweb/index.html – Free online tutorial on the web design processs.  • More to be provided 29 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  30. 30. Recess Over: Back to the Basics Questions? 30 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×