"Free, Simple, High-Level Webpage Creation – Easy as Word" Website Working Group Workshop

1. SeaMonkey Tutorial "Free, Simple, High-Level Webpage Creation– Easy as Word" Website Working Group Workshop 23 May 2013

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. 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. Low-level all-text descriptions (HTML) of webpages & graphics files reside on servers. Also, web apps, databases …

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. 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. • Composeris 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. Presentation Outline • A Little Techno Jargan on the Topic • Downloading the Free Tools (SeaMonkey, FileZilla; GIFfun) • DEMONSTRATIONs: • Overview via 3 Example Webpages I've Developed With SeaMonkey– • “Reuse” & Modify an Existing Webpage • Create a New Webpage from Scratchsome things you will learn; some I won't teach you • 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 • Webpage Style Guidelines • “Testing” your new/modified webpage & Uploading it to the Web • References • EXERCISE: Update Omnilore homepage & Curriculum page

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. 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. 3 Example Webpages I've Developed With SeaMonkey (1) Some things you will learn to do — Some things I won't teach you • 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 ... • 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

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. 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. “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 “Improve” Layout Update Text & Links for chosen plays...

12. “Reusing” & Modifying an Existing Webpage: The Procedure Open existing webpage in SeaMonkey's browser (Navigator) Select “Edit Page” from File menu (or Ctl-E) – this opens a Composer window (why I like the “integrated” SeaMonkey internet suite) 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” Change Page Title (in Format menu) Change background if desired (in Format menu) Edit contents of webpage pretty much the same as using Word … Save periodically as you work After any Save, check out how the webpage looks by clicking the “Browse” icon at top of Composer window Use basic Word-like editing functions (see next 2 charts) to change/extend the webpage

13. Bullet 1 • Bullet 2 • Bullet 3 Paragraph blah blah blah blah blah blah blah blah blah blah blah blah ... Enum. Item 1 Enum. 2 Enum 3 S/DG TITLE 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.

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. 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 3-Column effect using a TABLE Link to another webpage Links to Down-load Files Add Images using Image button Mailto Links

16. PLANNING – Getting organized for your webpage creation • 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), ... • 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. • 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).

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

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

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. Uploading Your New Webpage to the Web: Server Space • At least 3 different ways to obtain web server space to host your webpage(s) • 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 • 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 • 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. http://www.top-10-web-hosting.com/

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 Connect as per instructions provided by server-space provider Select directory on your computer (“Local Site”) with webpage files & sub-directories Select Destination (Target) directory (“Remote Site”) as per instructions (if not already visible) Perform upload(s) by double clicking on files on Local Site, or dragging icons from Local Site to Remote Site Check out uploaded webpage(s) again (“Testing”) Brag on it to your classmates/friends/family ...

23. Exercises • Open “Omnilore-WEBSITE-Files(SeamonkeyTutorial)” folder on Desktop • Note structure: • Seven abc5.htm pages (linked to homepage’s yellow buttons) • “images” directory • “information” directory (with Newsletters in it) • “members” directory” • 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. Exercise 1 • Drag “index.html” onto SeaMonkey icon to open it (or Open in Composer) • Enter EDIT mode (Composer) • BASIC EDITS • Under “Upcoming Events”: Delete May 13 & 17 events (they’re history) • Update “What’s Happenin’ ?” for week of May 20’s two events (today’s) • Shrink size of Newsletter entry there (because it’s getting oldish) • Update date at bottom; add your initials; SAVE; view in browser • EXTRA CREDIT (TABLE Row manipulations – Row Select, Copy, Row Insert, Paste) • Before Deleting Rows in (4) above, Copy those 2 events to June 10 & 21 • Edit June 10 based on “Interest Groups” webpage • Make Hiking/Walking Group entry a generic To Be Announced • Gray out Hiking/Walking Group intra-page link(BONUS EXTRA CREDIT) • Open “index(20130519).htm” to see expected result

25. Exercise 2 • Drag “Curriculum5.htm” onto SeaMonkey icon to open it • Enter EDIT mode (Composer) • UPDATES TO MAKE: • 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. References • 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 • Web-hosting services: Top 10 values linked at • http://www.top-10-web-hosting.com/ • Yet, I usehttp://virsite.net/(They’re Green !?!) • 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. 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. Timeline of the World Wide Web (from Wikipedia “Web Development” article)