Internet Information Resource Design INFO652 week 1 Blackboard • • • • • http://drexel.blackboard.com Announcements, email Readings: on web or Bb Syllabus Discussion board 4/2/2009 E.Corse, Drexel IST 2 1 Syllabus 4/2/2009 E.Corse, Drexel IST 3 Pop Quiz! 2 The Web internet Web servers Web pages Home page Website 4/2/2009 E.Corse, Drexel IST 5 File organization • “Local” files are on your hard drive, your j jump d drive, i or perhaps h a flfloppy di disk k • “Remote” files are on a server… in this case, the web server dunx1 4/2/2009 E.Corse, Drexel IST 6 3 Browsing • Internet connection • Browsers • Web addresses http://crab.rutgers.edu/~corse/YALit/index.htm http://www.apple.com/itunes/ 4/2/2009 E.Corse, Drexel IST 7 History of Web Design Drexel 1997 Drexel 2009 4/2/2009 E.Corse, Drexel IST 8 4 Accessibility: W3 Ten Quick Tips http://www.w3.org/WAI/Reference s/QuickTips/Overview.php /Q i kTi /O i h Drexel web setup • • • • • • • • • http://www.drexel.edu/irt for support Launch SSH “secure file transfer client” File menu menu, Connect dunx1.irt.drexel.edu | your dunx1 username Click Connect Enter password; OK; OK Double-click Double click folder public public_html html Create subfolder “652” (New Folder button) Keep this window open! 4/2/2009 E.Corse, Drexel IST 10 5 index.html <html> <head> </head> <body> </body> </html> 4/2/2009 E.Corse, Drexel IST 11 head <head> <title>Emily Corse ePortfolio </title> </head> 4/2/2009 E.Corse, Drexel IST 12 6 body <body> <h1>E il ’ ePortfolio</h1> <h1>Emily’s P tf li </h1> <p>I am an adjunct professor at IST and I earned an MS here in 1996. I’ve designed many websites for many years, with many tools. t l </p> </body> 4/2/2009 E.Corse, Drexel IST 13 More info • Use <h2> headings for “Projects” and “I t “Interests” t ” • Use <p> tags to write short paragraphs for each • Save and display local file in browser 4/2/2009 E.Corse, Drexel IST 14 7 Publish • Switch back to SSH • Locate L t index.html i d ht l ffrom local l ld drive i and d drag into folder public_html/652 • View with browser using your official course web address 4/2/2009 E.Corse, Drexel IST 15 Your URL http://www.pages.drexel.edu/~username/652/ 4/2/2009 E.Corse, Drexel IST 16 8 Take a break…. 4/2/2009 E.Corse, Drexel IST 17 Photo courtesy Trevor Lowe on Flickr.com FW topic • audience • your own original textual and graphic information, plus annotated links • 5-8 pages total, including: – Home page – About page – Annotated links • watch tone • WARNING: this project will be published on the internet, via your dunx1 account 9 Sample topic proposal 1 I’m hoping to create a website that will i f inform an audience di off neophyte h t comic i collectors. I might include pages on Getting Started, Where to Buy, How to Protect, and My Favorite Superheroes. To avoid copyright issues, I can use my own original anime for images. Sample topic proposal 2 My website will offer resources for new parents, t including i l di some comic i essays I’I’ve written through the years, plus book reviews of my favorite parenting books. I’m also planning to include lots of links to the best online resources for health, adoption, and shopping. 10 Google account • Go to google.com • Click “sign in” • Click “create an account now” 4/2/2009 E.Corse, Drexel IST 21 Create blog • Go to blogger.com • Sign in with Google credentials • Create your blog & start posting: http://www.pages.drexel.edu/~corseel/web 2/firstblog/firstblog-textonly.html 4/2/2009 E.Corse, Drexel IST 22 11 First post(s) • • • • • Name, some version of Course of study Day job Career plans 3 oft-used websites If time • Editing on Blogger – Set time zone – Edit published post • Add URL • Add graphic – Delete comment • Edit on Wikispaces 4/2/2009 E.Corse, Drexel IST 24 12 Quick look at blogs, wikis? • http://www.theshiftedlibrarian.com/ • http://finalwebelc.blogspot.com/ • Create blog on blogger.com – Requires Google acct – May prefer using alias • http://profcorse.wikispaces.com/ htt // f iki / • Create account on wikispaces 4/2/2009 E.Corse, Drexel IST 26 13