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