TCommFunctional-Website_Deisgn_Development_Management_945

  • 176 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
176
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. Recess Over: Back to the Basics PART I: WEBSITE DEVELOPMENT TOOLS 5 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  • 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. 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. Recess Over: Back to the Basics PART II: WEBSITE STRUCTURE 8 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  • 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. 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. 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. 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. Recess Over: Back to the Basics PART III: CONTENT DEVELOPMENT AND  MANAGEMENT 13 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Recess Over: Back to the Basics Questions? 30 THE NATIONAL SOCIETY OF BLACK ENGINEERS REGION 2