1. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 1 "Free, Simple, High-Level Webpage Creation – Easy as Word" Website Working Group Workshop 23 May 2013 SeaMonkey Tutorial

2. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 2 Getting to Know the Audience The Internet moves data & commands between anyone’s computer & web servers. A web browser is an app stored on your computer. It starts by requesting a webpage by giving its location (url) in the cloud. It then renders visual/graphical webpage images interpreting the all-text description files. Low-level all-text descriptions (HTML) of webpages & graphics files reside on servers. Also, web apps, databases … A web browser is an app stored on your computer. It starts by requesting a webpage by giving its location (url) in the cloud. The browser then renders on the display the visual/graphical webpage image(s) interpreting the all-text description files.

3. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 3 Disclaimers I am not, and never have been, a professional webpage designer, but …  I am completely self-taught in this technology  I have never taken any course about webpage creation  but I am an academically trained Computer Scientist and was a practicing Software Engineer at TRW/Northrop-Grumman almost 31 years, including doing technology training (Similarly, SeaMonkey is not enough for developing professional webpages) I “got on the web” about 1994. Netscape was one of the email systems we used then. (I've been on earlier variants of email & the Internet, then call the ARPANET, since 1977.) Curiosity led me to discover that Netscape had this webpage “Composer” capability built in to it. SeaMonkey is Netscape's successor. I built and launched my first webpage in about 1995 – a collection of pointers to external (& later, internal) technology pages relevant to our TRW Division's business. The division immediately hosted my website. The rest is history …

4. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 4 What are SeaMonkey & Composer? SeaMonkey is a free integrated internet suite – web browser, email system (client), and web-page authoring tool. It is developed and distributed by the Mozilla community, a distributed consortium who believes the Internet is a public resource that must remain open and accessible to all. Mozilla is thousands of dedicated volunteers and corporate contributors from around the world with a small staff of employees to coordinate the process. SeaMonkey is Netscape's successor. Mozilla also develops the Firefox web browser and Thunderbird email system. Composer is a free web-page authoring tool (somewhat misleadingly, aka an “HTML editor”); it’s part of SeaMonkey. Composer is a WYSIWYG (What You See Is What You Get) web- page authoring system which enables people who have no prior web-authoring experience or any knowledge of the HTML language to create basic web pages. Composer generate the HTML version of your webpage behind the scenes. The purpose of this tutorial is to enable users to create and modify simple webpages. It is not intended to teach advanced web design techniques. You always have access to built-in Help in Composer.

5. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 5 Presentation Outline 1.A Little Techno Jargan on the Topic 2.Downloading the Free Tools (SeaMonkey, FileZilla; GIFfun) 3.DEMONSTRATIONs: Overview via 3 Example Webpages I've Developed With SeaMonkey – “Reuse” & Modify an Existing Webpage Create a New Webpage from Scratch some things you will learn; some I won't teach you 4.Webpage Development Basics  Using Tables for Layout  Fonts Types & Colors  Page Titles, Background Colors or Patterns  Bullets & Numbered Lists  Adding Graphics  Links (Hyperlinks) to other webpages; or, for file downloads 5.Webpage Style Guidelines 6.“Testing” your new/modified webpage & Uploading it to the Web 7.References 8.EXERCISE: Update Omnilore homepage & Curriculum page

6. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 6 A Little Techno Jargan on the Topic Webpage (or web page): a page from the web in a single window Website (or web site): interconnected set of webpages on one server Homepage (or home page): the topmost webpage (the entry point) of a website Subpage: a subordinate webpage linked from another webpage within a website HTML (HyperText Mark-up Language, aka webpage Source) : the under-the-hood, mostly textual representation of webpages, with “tagged” text codes for images, fonts, sizes, formatting, etc. Browser: a computer application (program) which interprets an HTML file and displays (renders) the graphical webpage in a window WYSIWYG (What You See Is What You Get): Like Word, the layout, sizing, colors, etc. of the resultant output are the same as you see on your computer monitor as you author the document/page Composer: SeaMonkey’s embedded webpage-authoring component – a WYSIWG editting tool which automatically generates the equivalent HTML FTP (File Transfer Protocol) : a small, simple program which uploads/downloads files between your local computer and a remote computer site. FileZilla is the free example we use.

7. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 7 More Techno Jargan on the Topic (Features you might build into your webpage) Background (or Wallpaper) : a color or design or image covering the entire webpage, behind its text & graphical contents Link (or Hyperlink or Active Link, sometimes called Button)): a clickable section of a webpage (often a text phrase or an image, often highlighted) which when mouse-depressed brings a different webpage into a browser window. An Anchor is a special link that jumps within the current page. Download Link: A special hyperlink which starts the download of a non-webpage file (e.g., PDF, Word, PPT, or an executable application) MailTo link: starts a new email with addressee filled in (optionally, Subject too) Animation: A graphic which changes or moves. (Made with GIFfun for homepage) Mouse-Over (or Rollover or Hover): Advanced: As you move the mouse over an image, link, or text section, changes its properties, e.g., font, size, color, or a different image. Marquee: Advanced feature scrolling text repeatedly across part of a webpage. Java: Advanced: A computer programming language with good features for describing graphical computer interfaces, including those with some kind of action or user interaction (dynamic webpages). A Java script (fragment of code) is sometimes embedded in the HTML of a webpage. CSS (Cascading Style Sheets): Advanced : A file referenced from a webpage which defines specific instances of advanced features such as mouse-overs, walking menus, etc.

8. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 8 3 Example Webpages I've Developed With SeaMonkey (1) Some things you will learn to do — Some things I won't teach you 2: Carleton67.net : my college class's reunion & news website A more organized webSITE with many subordinate pages, connected by hyper-links; to both my own subordinate pages & others' (Carleton College's website, Flickr) Common look among linked pages – go to “In Memoriam” example, drill down Visible TABLES, used for layout of graphics, text blurbs, buttons, etc. Use of color, font types, Page Title Time breakdown of modern web design “Wallpaper” (background): carleton67-bkgr.gif file (“View Source” to find file) Beyond SeaMonkey: hover or mouse-over (text vs graphics); count-down clock; CSS 1: Hart-site.net : our family's website Simple (unprofessional) webpage look – non-uniform mix of text, graphics, & links Shows automatic resizing of text boxes as webpage window size changes Click on most graphics to see larger version Some links are to downloadable files (our holiday letters, softball statistics,...) Click on St. Hart's Day icon to see linked subpage which is invitation Car animation is a special type of GIF file – I did not create, merely copied/linked it More linked subpages on softball team & Vivian Hart … Link to college class webpage...

9. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 9 3 Example Webpages I've Developed With SeaMonkey (2) Some things you will learn to do — Some things I won't teach you 3. Omnilore Shakespeare Class website: This demonstrates how you can extend Myron's SDF folder capability into a website to enhance your class's access to online capabilities related to your subject matter. http://omnilore.org/members/Curriculum/SDGs/13a-SHK-Shakespeare/ Stores organizing artifacts:  DownLoadable linked files  some artifacts presented as subpages created using Word  research resources on the web Info on the trimester's plays: cast lists; external web resources, video clips, animated summaries … “Go To Top” feature between sections of the long webpage Beyond SeaMonkey: a scrolling “Marquee” but it was really easy to view the HTML source code and just copy the Marquee HTML fragment from the Source of an existing webpage & revise the text

10. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 10 Downloading the Free Tools (SeaMonkey, FileZilla, GIFfun) SeaMonkey, free downloads for Windows, Mac OS X, & Linux: http://www.seamonkey-project.org/ FileZilla, a free FTP program with downloads for Windows, Mac OS X, & Linux: http://filezilla-project.org/ Optional: GIFfun (by Stone Design), a free program for creating animated graphics such as “OmniPeople.gif” on the Omnilore homepage. Built for Mac OS X, but there is an Executor for other platforms (Windows, Linux, DOS...) as well as downloadable source code: http://www.stone.com/GIFfun/

11. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 11 “Reuse” & Modify an Existing Webpage: Demonstration Example: Converting a prev. trimester's SHK homepage into next trimester's (the Quick-and-Dirty way to do a webpage) Change Background Color Change Animated GIF Update Text & Links for chosen plays... “Improve” Layout

12. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 12 “Reusing” & Modifying an Existing Webpage: The Procedure 1.Open existing webpage in SeaMonkey's browser (Navigator) 2.Select “Edit Page” from File menu (or Ctl-E) – this opens a Composer window (why I like the “integrated” SeaMonkey internet suite) 3.Click “Save” icon at top of Composer window: place existing webpage into a new directory (this brings along all images too), picking file name = “index.html” 4.Change Page Title (in Format menu) 5.Change background if desired (in Format menu) 6.Edit contents of webpage pretty much the same as using Word … 7.Save periodically as you work 8.After any Save, check out how the webpage looks by clicking the “Browse” icon at top of Composer window 9.Use basic Word-like editing functions (see next 2 charts) to change/extend the webpage

13. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 13 Using Tables for Layout Use Tables to simulate columns & separate sections to divide your info into clearly defined sections, and keep spacing & distances uniform (handy technique in Word too) The Table borders (lines between cells) may be made invisible (you see them in Composer but not when opened in a browser window) or they may be visible in any chosen width or a variety of patterns (e.g., dotted, doubled, grayed …) Width of each column in browsers may be specified by % of total Table or by absolute number of pixels. Ditto, whole table relative to browser window size. (1) Enum. Item 1 (2) Enum. 2 (3) Enum 3 Bullet 1 Bullet 2 Bullet 3 Paragraph blah blah blah blah blah blah blah blah blah blah blah blah... S/DG TITLE

14. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 14 Basics – Using Familiar Icon Buttons, or Menus Bullets & Numbered Lists Bold, Italics, Underlining Lower-Level, indented lists (or text) Fonts Types & Colors Page Titles, Background Colors or Patterns Adding Graphics Links Mailto’s

15. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 15 Creating a New Webpage from Scratch: Demonstration Example: Create a homepage for “Trial by Movies” class Center, left- justify etc. text using Composer's TOOL BAR Add Images using Image button Mailto Links 3-Column effect using a TABLE Link to another webpage Links to Down- load Files

16. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 16 1.Plan the general layout of your page/site before you begin – what will be the contents, what order should they appear in, lay out info in columns vs vertical paragraphs, location of menus (if any), what other webpages will you reference (link to),... 2. Make sure that you have all the images you want to include and text/Word/PPT files you want to link before you start.  Keep graphics files small. Large graphics will cause your web pages to load slowly. Use only lo-res JPG (photo quality) and GIF (good for colors) graphics formats. 3. To minimize the possibility of broken links, keep all of those files in a single folder (directory), the same one as your new webpage(s). PLANNING – Getting organized for your webpage creation

17. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 17 Creating a New Webpage from Scratch: The Procedure 1.Start Composer from SeaMonkey's “Window” menu, or icon at bottom left in browser window 2.Open a new webpage file using “New” icon or from File menu 3.Click “Save” icon at top of Composer window: place existing webpage into a new directory using file name = “index.html” (or index.htm) 4.Enter Page Title (Format menu) 5.Set background if desired (Format menu) 6.Create contents of webpage pretty much the same as using Word 7.Save periodically as you work 8.Add subpages, external links,... 9.After any Save, check out how the webpage looks by clicking the “Browse” icon at top of Composer window

18. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 18 Webpage Style Guidelines (appropriate for simple webpages, culled from several sources) 1.Use font colors in sharp contrast with background for ease of reading neutral background color vs darker font colors 2.A sans-serif font, e.g., Arial font (or Arial Bold ), is easier to read on a monitor than Times 3.Chop long sentences into shorter ones. Avoid long words (> 3 syllables). Keep paragraphs short. Avoid a “wall of text.” 4.Highlight (bold) keywords & major points 5.Minimize usage of italics and underlining. Too much is “messy.” 6.Increase readability by using lists, bullets, subheadings, & columns (to keep readable lines easier for the eye to scan, like newspapers) 7.Highlighting links helps recognition that they're links: most common convention – underlined, blue (SeaMonkey’s default) 8.Judicious usage of graphics increases appeal 9.Always provide a way to contact you (the webpage's webmaster) 10.Avoid Frames (use Tables) for printability Less is Better

19. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 19 “Testing” Your New Webpage Preview your web pages in multiple web browsers (such as Internet Explorer, Safari, Firefox, SeaMonkey, Chrome, Flock, Opera, Camino, etc...) to ensure that your page appears consistent on different browsers. In my experience, Microsoft's Internet Explorer (IE) is the one most likely to display a webpage differently. When appearances are different, decide if the difference matter for your purpose. If so, you may have to change or simplify something to get a uniform look; this may be hit-and-miss.

20. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 20 Uploading Your New Webpage to the Web: Server Space At least 3 different ways to obtain web server space to host your webpage(s) 1.If for an Omnilore class, folder space is provided at http://omnilore.org/members/Curriculum/SDGs/ – See SDG Folders webpage for upload instructions & guidelines contact Webmaster@Omnilore.org for FTP address and password 2.Some Internet Service Providers (ISPs) provide ample free server space for members to host their webpages: AOL, EarthLink, … Instructions come with membership, or contact them for help 3.There are many commercial services which sell web domain names (renewable 3 years) & rent server space for an annual fee, typically $50-$100 for several Gigabytes of storage A webpage listing some such services: http://www.top-10-web- hosting.com/ The hosting service will provide the host server's web address, a username & password for uploading (FTP) your webpage files

21. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 21 http://www.top-10-web-hosting.com/

22. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 22 Uploading Your New Webpage to the Web: Typical Upload Instructions Use FileZilla (or another FTP utility) to upload webpage files: the HTML file generated by Composer, plus any graphics files, subpages, and linked/downloadable PDF/WORD/PPT/etc. files See http://omnilore.org/members/SDG5.htm#FTP 1.Connect as per instructions provided by server-space provider 2.Select directory on your computer (“Local Site”) with webpage files & sub-directories 3.Select Destination (Target) directory (“Remote Site”) as per instructions (if not already visible) 4.Perform upload(s) by double clicking on files on Local Site, or dragging icons from Local Site to Remote Site 5.Check out uploaded webpage(s) again (“Testing”) Brag on it to your classmates/friends/family...

23. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 23 Exercises 1)Open “Omnilore-WEBSITE-Files(SeamonkeyTutorial)” folder on Desktop 2)Note structure: a)Seven abc5.htm pages (linked to homepage’s yellow buttons) b)“images” directory c)“information” directory (with Newsletters in it) d)“members” directory” e)Open “members” directory eight xyz.htm pages in it (linked to homepage’s orange buttons) “admin” directory (contains calendars referenced from Calendar page) “OfficeManager” & “Procedures” & “Training” directories, containing files referenced from Officers & Training pages

24. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 24 Exercise 1 1)Drag “index.html” onto SeaMonkey icon to open it (or Open in Composer) 2)Enter EDIT mode (Composer) BASIC EDITS 3)Under “Upcoming Events”: Delete May 13 & 17 events (they’re history) 4)Update “What’s Happenin’ ?” for week of May 20’s two events (today’s) 5)Shrink size of Newsletter entry there (because it’s getting oldish) 6)Update date at bottom; add your initials; SAVE; view in browser EXTRA CREDIT (TABLE Row manipulations – Row Select, Copy, Row Insert, Paste) 7)Before Deleting Rows in (4) above, Copy those 2 events to June 10 & 21 8)Edit June 10 based on “Interest Groups” webpage 9)Make Hiking/Walking Group entry a generic To Be Announced 10)Gray out Hiking/Walking Group intra-page link (BONUS EXTRA CREDIT) Open “index(20130519).htm” to see expected result

25. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 25 Exercise 2 1)Drag “Curriculum5.htm” onto SeaMonkey icon to open it 2)Enter EDIT mode (Composer) UPDATES TO MAKE: 3)In table with light orange background under banner, header: Retitle right to read “VIEW: Current SDGs (Summer 2013, with Coordinators)” Reverse right & left halves (Current SDGs at left) Add a separator line down middle of box (aesthetics, clarity) Lose “Course Selection Form” line Add “HTML” & “PDF” links under “Current SDGs” linked to files “Summer-2013-Courses-FINAL.html” & “Summer-2013-Courses-FINAL.PDF” which you will find by browsing the directory Add “Schedule Table View ” linked to “Curriculum/ClassesCoordsSummer2013.pdf” Open “Curriculum5(20130510).htm” to see expected result

26. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 26 References 1)NorthEastern Illinois University SeaMonkey tutorials: www.neiu.edu/~scs/Documentation/Internet/Web_Development/Web_Development.pdf www.neiu.edu/~scs/Documentation/Internet/Web_Development/Mac_webpage.pdf 2)Web-hosting services: Top 10 values linked at http://www.top-10-web-hosting.com/ Yet, I use http://virsite.net/ (They’re Green !?!) 3)Style Guidelines: Many available on the web, e.g., http://www.upenn.edu/webguide/style_guide/ http://www.google.com/support/webmasters/bin/answer.py?answer=35769 http://webdesign.about.com/od/styleguides/Web_Style_Guides.htm Download this “SeaMonkey Tutorial” PowerPoint presentation from: http://omnilore.org/members/OfficeMgr/OfficeFiles/2.1.4..WebWorkGroup/Seamonkey-Tutorial.ppt

27. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 27 References: Other Web Development Tools, Further Reading Today there are many tools & technologies for web development:  Commercial ones (both WYSIWYG & other) with all the advanced features; necessary for professionals building retail websites (shopping carts, databases of info): e.g., DreamWeaver, Front Page, Microsoft Expressions, ColdFusion…  Some free WYSIWYG ones for the Windows platform  But no other WYSIWYG ones I’m aware of that are free and implemented on all 3 Windows/Mac/Linux platforms  No other ”integrated internet suites” I’m aware of For further reading on web development & available tools: http://en.wikipedia.org/wiki/Web_development www.howstuffworks.com Google “Web Development” or “Web Design” or “Web Design Software”

28. “Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 28 Timeline of the World Wide Web (from Wikipedia “Web Development” article)