TCommFunctional-Website_Deisgn_Development_Management_945
Upcoming SlideShare
Loading in...5
×
 

TCommFunctional-Website_Deisgn_Development_Management_945

on

  • 358 views

 

Statistics

Views

Total Views
358
Views on SlideShare
358
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TCommFunctional-Website_Deisgn_Development_Management_945 TCommFunctional-Website_Deisgn_Development_Management_945 Presentation Transcript

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