tag. 2) This includes an HTML fragement called "header.shtml" which renders everything you need to get into the usable body of a page. Note the included page is itself a SHTML page, as it has SSI process. 4) An H1 tag that contains the title you set. If you don't want the H1, or want something different text, there's nothing wrong with deleting or modifying this line. 6) Your actual content goes here, you can remove this line 8) Similar to the include on #2, but closes the HTML. ------------------- announcements.shtml ------------------- Slupred in by the main index.shtml page ---- css/ ---- Contains the stylesheets used by the site. Currently there are a couple of stylesheets in here that get used in various circumstances... - style.css - used by everything - print.css - some overrides used to make printing pages a little less ugly ------ exams/ ------ The exams info page lives here, as do the review/study sheets. ---- faq/ ---- The FAQ (yeah, not that interesting) ------------ footer.shtml ------------ The HTML fragment that gets slurped in by all pages to close out the page. ------------ header.shtml ------------ The HTML fragment that gets slurped in by all pages to open the page. NOTE: you will have to update the first 2 lines of this file each semester. 1  2  1) Changing the SEMESTER value here should update it mostly everywhere in the site. No search/replace on every page required ; ) 2) The BASE_URL value should be updated to point to the path after www.cs.umbc.edu when pulling the page up in the browser to get to the root of the semester's home page. This ensures all stylesheets and JavaScript are included appropriately where needed. ----------- index.shtml ----------- The main course page - currently has some content in itself, plus it sources the following files... - announcements.shtml - instructors.shtml --- js/ --- JavaScript libraries for things such as syntax highlighting, etc. ----- labs/ ----- index.shtml is the main page, all labs stored under here. --------- lectures/ --------- index.shtml is the main page, all lectures stored under here. ------------------ not-released.shtml ------------------ Generic page that can be linked to for a resource that hasn't been released. --------- projects/ --------- index.shtml is the main page, all projects stored under here. Sub pages for coding standards, late policy, etc. ---------- resources/ ---------- index.shtml is the main page, all projects stored under here. Some subpages. --------- schedule/ --------- index.shtml is the main page, which includes a PHP script which is capable of generating an HTML schedule from a list of events stored in schedule.json. The schedule.json file is a JavaScript Object Notation [1] file that describes the events for the semester. A small sample of this file is included and described below... 1 [ 2 { 3 "title": "Introduction", 4 "url": "http://www.cs.umbc.edu/courses/undergraduate/202/spring2011/lectures/FOO.PPT", 5 "dates": ["2011-01-26", "2011-01-27"], 5 "type": "lecture" 7 }, 8 // ... 9 ] 1 & 9) opening/closing array bracked, you needn't change this. 2 & 7) each event lives in one of these (an object). 3) the title to be displayed on the schedule 4) if a url is provided, it will be hyperlinked in the schedule 5) the dates as strings (YYYY-MM-DD format) in an array 6) the type (valid values lecture, exam, final, project, lab) NOTES: - '//' is treated as a comment - be sure you have no comma after the last event object ------ staff/ ------ index.shtml is the main page, sources both instructors.shtml and teaching-assts.shtml HTML fragments for display. instructors.shtml is currently utilized in the staff/index.shtml and main index.shtml pages. teaching-assts.shtml is currently only used by staff/index.shtml --------- syllabus/ --------- index.shtml is the main page. There are also some images in here which are used by the syllabus (e.g. book pics). ------------------- Syntax Highlighting ------------------- If you'd like a chunk of code to be syntax highlighted you can do this by simply placing the code inside of a <pre class="brush:java"></pre> tag and it will be automatically highlighted for you. This is done in JavaScript by Alex Gorbatchev's SyntaxHighlighter framework [2]. ---------- References ---------- [0] http://en.wikipedia.org/wiki/Server_Side_Includes [1] http://json.org/ [2] http://alexgorbatchev.com/SyntaxHighlighter/

---------------------- Fall 2013 Stuff ------------------ Untangled the css and ditched the javascript. (Note: some of the previous semester's websites have .htaccess files in the subdirectories. This can really foul things up.) Now the directory should be mostly relocatable. Used header1.shtml and footer1.shtml as a hack to make shtml files in subdirectories work if the website moves to a different location. Used my own PHP scripts for newsitems that age. newsobdy.php - has actual news items news.php - displays news for 2 weeks news-all.php - displays all the news items archive.shtml - wrapper for news-all.php newsfuncs.php - PHP code, just a couple of functions Here's the format for the items in newsbody.php Place text for news item here between the two php tags. The date and timestamp above are used to expire the news item after 14 days. This tag says 'dateuntil' instead of 'dateline'. Sometimes there are announcements that you want to keep for longer than 14 days. The second date above is the expiration date. - Richard Chang, 8/23/2013 ---------------------- Previous Stuff from Dan Hood ------------------ ======================= CMSC 202 Site Re-design ======================= This file attempts to document the newly designed 202 page as revamped by Dan Hood in the Spring of 2011. -------- Overview -------- All pages leverage server-side includes (SSIs) [0] to better break things up and to minimize duplication of HTML. The overall layout is as follows... . |-- TEMPLATE.shtml |-- announcements.shtml <-- UPDATE |-- css/ |-- exams/ <-- UPDATE index.shtml |-- faq/ |-- footer.shtml |-- header.shtml <-- UPDATE first 2 lines (see below) |-- index.shtml |-- js/ |-- labs/ <-- UPDATE |-- lectures/ <-- UPDATE |-- not-released.shtml |-- projects/ <-- UPDATE |-- resources/ |-- schedule/ <-- UPDATE schedule.json in directory |-- staff/ <-- UPDATE several files |-- syllabus/ <-- UPDATE (index.html as needed) `-- teaching-assts.shtml <-- UPDATE The items marked UPDATE, will require some amount of udpates each semester. -------------- TEMPLATE.shtml -------------- TEMPLATE.shtml is an minimal page that can be copied off to create other pages as needed. This file looks like... 1 2 3 4

5 6 7 8 Walking thought the file line-by-line. 1) This sets a variable called PAGE_TITLE that is used by the header.shtml file to print the page title in the HTML tag. 2) This includes an HTML fragement called "header.shtml" which renders everything you need to get into the usable body of a page. Note the included page is itself a SHTML page, as it has SSI process. 4) An H1 tag that contains the title you set. If you don't want the H1, or want something different text, there's nothing wrong with deleting or modifying this line. 6) Your actual content goes here, you can remove this line 8) Similar to the include on #2, but closes the HTML. ------------------- announcements.shtml ------------------- Slupred in by the main index.shtml page ---- css/ ---- Contains the stylesheets used by the site. Currently there are a couple of stylesheets in here that get used in various circumstances... - style.css - used by everything - print.css - some overrides used to make printing pages a little less ugly ------ exams/ ------ The exams info page lives here, as do the review/study sheets. ---- faq/ ---- The FAQ (yeah, not that interesting) ------------ footer.shtml ------------ The HTML fragment that gets slurped in by all pages to close out the page. ------------ header.shtml ------------ The HTML fragment that gets slurped in by all pages to open the page. NOTE: you will have to update the first 2 lines of this file each semester. 1  2  1) Changing the SEMESTER value here should update it mostly everywhere in the site. No search/replace on every page required ; ) 2) The BASE_URL value should be updated to point to the path after www.cs.umbc.edu when pulling the page up in the browser to get to the root of the semester's home page. This ensures all stylesheets and JavaScript are included appropriately where needed. ----------- index.shtml ----------- The main course page - currently has some content in itself, plus it sources the following files... - announcements.shtml - instructors.shtml --- js/ --- JavaScript libraries for things such as syntax highlighting, etc. ----- labs/ ----- index.shtml is the main page, all labs stored under here. --------- lectures/ --------- index.shtml is the main page, all lectures stored under here. ------------------ not-released.shtml ------------------ Generic page that can be linked to for a resource that hasn't been released. --------- projects/ --------- index.shtml is the main page, all projects stored under here. Sub pages for coding standards, late policy, etc. ---------- resources/ ---------- index.shtml is the main page, all projects stored under here. Some subpages. --------- schedule/ --------- index.shtml is the main page, which includes a PHP script which is capable of generating an HTML schedule from a list of events stored in schedule.json. The schedule.json file is a JavaScript Object Notation [1] file that describes the events for the semester. A small sample of this file is included and described below... 1 [ 2 { 3 "title": "Introduction", 4 "url": "http://www.cs.umbc.edu/courses/undergraduate/202/spring2011/lectures/FOO.PPT", 5 "dates": ["2011-01-26", "2011-01-27"], 5 "type": "lecture" 7 }, 8 // ... 9 ] 1 & 9) opening/closing array bracked, you needn't change this. 2 & 7) each event lives in one of these (an object). 3) the title to be displayed on the schedule 4) if a url is provided, it will be hyperlinked in the schedule 5) the dates as strings (YYYY-MM-DD format) in an array 6) the type (valid values lecture, exam, final, project, lab) NOTES: - '//' is treated as a comment - be sure you have no comma after the last event object ------ staff/ ------ index.shtml is the main page, sources both instructors.shtml and teaching-assts.shtml HTML fragments for display. instructors.shtml is currently utilized in the staff/index.shtml and main index.shtml pages. teaching-assts.shtml is currently only used by staff/index.shtml --------- syllabus/ --------- index.shtml is the main page. There are also some images in here which are used by the syllabus (e.g. book pics). ------------------- Syntax Highlighting ------------------- If you'd like a chunk of code to be syntax highlighted you can do this by simply placing the code inside of a <pre class="brush:java"></pre> tag and it will be automatically highlighted for you. This is done in JavaScript by Alex Gorbatchev's SyntaxHighlighter framework [2]. ---------- References ---------- [0] http://en.wikipedia.org/wiki/Server_Side_Includes [1] http://json.org/ [2] http://alexgorbatchev.com/SyntaxHighlighter/