{"id":36949,"date":"2016-09-01T01:08:37","date_gmt":"2016-09-01T01:08:37","guid":{"rendered":"http:\/\/www.immersive-learning.org\/?p=36949"},"modified":"2016-09-01T11:11:37","modified_gmt":"2016-09-01T11:11:37","slug":"eme6207-tech-ed-wysiwyg","status":"publish","type":"post","link":"https:\/\/emeclasses.org\/?p=36949","title":{"rendered":"EME 6207 &#8211; Tech Ed: Web Site Building With Visual Editors (WYSIWYG)"},"content":{"rendered":"<h2>Visual Editors (WYSIWYG)<\/h2>\n<p>WYSIWYG editors are HTML editors that attempt to display the web page as it will show on the browser.<\/p>\n<p>The term stands for\u00a0<strong>\u00a0W<\/strong>hat\u00a0<strong>Y<\/strong>ou\u00a0<strong>S<\/strong>ee\u00a0<strong>I<\/strong>s\u00a0<strong>W<\/strong>hat\u00a0<strong>Y<\/strong>ou\u00a0<strong>G<\/strong>et.<\/p>\n<p>They are visual editors, and you don\u2019t manipulate the code directly. They allow you to create html markup the same way you would write with Microsoft word. \u00a0 The best\u00a0way to get started with\u00a0authoring html is to use a visual editor. \u00a0Most of the time these visual editors are easy to use, but all editors have their shortcomings and do not always create the most efficient code, done 100% correctly. No worries. Most visual editors do a wonderful job with this so you should use them with confidence.<\/p>\n<p>You have a choice with editor software. You can purchase an application (Dreamweaver from Adobe) or find a free one.<\/p>\n<p>Here is a list of a few free Visual editors out there for you to use:<\/p>\n<ul>\n<li><a href=\"https:\/\/html-online.com\/\">Online HTML editor\u00a0<\/a><\/li>\n<li><a href=\"https:\/\/creative.adobe.com\/products\/download\/dreamweaver?promoid=T32PLZSW&amp;mv=other\" target=\"_blank\">Dreamweaver Free 30 Day Trial <\/a>(Both Platforms)<\/li>\n<li><a href=\"https:\/\/www.google.com\/webdesigner\/\">Google Web Design Tool<\/a> (Beta, Cross-platform)<\/li>\n<li><a href=\"http:\/\/kompozer.net\/\">Komposer<\/a> (Open Source, Cross-Platform)<\/li>\n<\/ul>\n<p>We have set up an external server for you to use (edtecher.org) for this particular assignment. You will be setting up your own when you build your sites from scratch using the content manager later in this course. We will reference this site in the instructions and notes that follow. If you choose one of the free site builders, you will need &#8216;translate&#8217; our instructions as needed to comply with the rules put out by these companies.<\/p>\n<p>With that in mind, let&#8217;s go ahead and delve into this wonderful world of Web creation&#8230;<\/p>\n<hr \/>\n<h3>Setting Up Your Filing System<\/h3>\n<p>Technically speaking, you can simply use one folder for all your files. Many web designers do not like to do this. They prefer to have sub-folders set up for images and audio files, style sheets, external scripts, libraries. \u00a0Whatever you do <strong>be consistent<\/strong>. \u00a0The main folder is referred to as the <strong>root. \u00a0<\/strong>If you use the sub-folder for media (i.e., images, audio etc) then you must specify that folder in the link that is asked for when you insert the image onto the page.<br \/>\nSo if you were going to write the html markup for an image tag in your index.html file it would look like this:<\/p>\n<pre>&lt;img src=\"media\/myImage.jgp\"&gt;<\/pre>\n<p>This is called <strong>relative linking<\/strong>. \u00a0All of these folders need to stay together in the same configuration they are set up on your computer, or they will not work. \u00a0If you&#8217;ve used relative linking the project will be self contained. When you upload the images using FTP, you need to keep the folders in the same location relative to the <strong>root<\/strong>. \u00a0The\u00a0<strong>root<\/strong><br \/>\n<a id=\"do\"><\/a><br \/>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#0033cc;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#3366ff;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">Do This!<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\"><br \/>\n<a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2013\/06\/dothis.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-37098\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2013\/06\/dothis.gif\" alt=\"dothis\" width=\"60\" height=\"48\" \/><\/a><\/p>\n<p>We now have enough information to do a simple project. Using any one of the visual editors, create a Newsletter for a hypothetical class or a Site page that introduces a product or company (if you are not in K-12 environment). The site should contain three or four images, links to at least three other sub pages that you create, and a link to at least one external site (relevant to the class you are teaching), and a couple other nifty things for them to keep them informed.<\/p>\n<p>One word of caution here&#8230;<strong> IF YOU ARE CREATING A NEWSLETTER FOR A K-12 CLASSROOM, DO NOT POST GRADES FOR YOUR STUDENTS ON ANY PUBLIC SITE.<\/strong> There are very strict confidentiality laws prohibiting this (called <a href=\"http:\/\/www2.ed.gov\/policy\/gen\/guid\/fpco\/ferpa\/index.html\" target=\"_blank\">FERPA<\/a>).<br \/>\nSimilarly, if you are creating a site for a business or training function, you need to be aware of any guardianship requirements for confidential information.<br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><\/p>\n<p><strong>Planning a website<\/strong><\/p>\n<p>Before you start throwing around markup with out any idea what you are doing, it is good to have a plan. For this project, a simple sitemap is a great start. \u00a0I am going to make a newsletter site that has an index page and 4 assignments. \u00a0Using simple bullet points, I will make an outline to describe my sitemap<\/p>\n<ul>\n<li>Home Page &#8211; (index.html)\n<ul>\n<li>Spelling Assignment (assign1_spelling.html)<\/li>\n<li>Writing Assignment (assign2_writing.html)<\/li>\n<li>Reading Assignment (assign3_reading.html)<\/li>\n<li>Drawing Assignment (assign4_drawing.html)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>You might go even further and write out all of the content that will be on each page. \u00a0 \u00a0Planning something out will only make it easier when you go to execute. \u00a0You do not have to turn any of this in. \u00a0It&#8217;s to help you succeed.<\/p>\n<p>Another tool web designers use is the wireframe (the image on the right). \u00a0Its a basic sketch to describe what you are making visually. \u00a0It can be used with a client to describe what you are making for them. \u00a0But it also can be used to just visually work out what you are going for. \u00a0\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-43263 aligncenter\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2016\/09\/Profilewireframe-270x300.png\" alt=\"Profilewireframe\" width=\"270\" height=\"300\" \/><\/p>\n<hr \/>\n<p><strong>File Management<\/strong><\/p>\n<div class=\"su-pullquote su-pullquote-align-left\"><strong>Please follow these instructions to the letter. \u00a0Not doing so will cause issues (such as bad links, improper references to images, etc.), and as a result, you will loose points. <\/strong><br \/>\n<\/div>\n<ul>\n<li>Create a folder on your computer called <strong>[lastname]_newsletter<\/strong>. \u00a0So for me, I&#8217;d create a folder named <strong>lenz_newsletter<\/strong>. \u00a0Inside that folder place all your pages, including your main page that needs to be named <strong>index.html \u00a0<\/strong><\/li>\n<li>Create in the main folder a <span style=\"color: #000000;\">sub-<\/span>folder called <strong>media<\/strong>. Place in that sub-folder all your images, videos, audio files etc. You will need to put your media in the media folder prior to embedding it on your webpage<\/li>\n<li>Find the folder on edtecher.org site as outlined in the upload instructions below.<\/li>\n<\/ul>\n<hr \/>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Click Plus Sign for Hints<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<ul>\n<li>When installing the visual editor, make sure you set your Preferences to save to your desktop. This will help you locate the files when you work on them.<\/li>\n<li>Create your main folder and name it <strong>exactly<\/strong> as described above.<\/li>\n<li>To repeat&#8230;. Place all your images in a sub-folder (under your main folder) and call it &#8216;<strong>media<\/strong>&#8216; <strong>PRIOR to linking to them from the actual pages.<\/strong> This is VERY important!!!!<\/li>\n<li><span style=\"text-decoration: underline;\">DO NOT USE CAPITAL LETTERS<\/span> IN FOLDERS (OR FILE NAMES). IT IS JUST AN IMPORTANT HABIT TO DEVELOP&#8230; SOME SERVERS HANDLE CAPITAL LETTERS AS COMPLETELY DIFFERENT THAN LOWER CASE.. USING ALL LOWER CASE IS FOR CONSISTENCY.<\/li>\n<\/ul>\n<p><\/div><\/div><br \/>\n<div class=\"su-heading su-heading-style-default su-heading-align-center\" id=\"\" style=\"font-size:13px;margin-bottom:20px\"><div class=\"su-heading-inner\">Uploading your Newsletter<\/div><\/div><\/p>\n<ol>\n<li>Upload your Newsletter folder onto the edtecher.org site using Filezilla FTP software,<a href=\"\/?p=32988\" target=\"_blank\"> as shown by these instructions<\/a>.<\/li>\n<li>Post the complete url for your newsletter on to Canvas and confirm this all has been done by way of answering the confirmation survey questions (like you did before for your HTML assignment).<\/li>\n<\/ol>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus-square-1 su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Click Plus Sign for Final Instructions<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n<ul>\n<li>Notice you do not need to specify index.html in the URL because that is assumed by the system.<\/li>\n<li>If you name your main page something <strong>other than index.html<\/strong>, the browser will not find it and return an error.<\/li>\n<li>You may check out to see if your Newsletter has uploaded properly by keying in the URL. The URL you enter would be exactly:<strong><span style=\"color: #800000;\">http:\/\/edtecher.org\/6207\/fal2016\/newsletters\/yourlastname_newsletter\/<\/span> <\/strong><\/li>\n<li><strong>In my\u00a0case it would be: http:\/\/edtecher.org\/6207\/fal2016\/newsletters\/lenz_newsletter\/<\/strong>. If it does not open correctly, you did something wrong (you named the index file wrong, you used capital letters, you posted to the wrong folder, etc.)<\/li>\n<\/ul>\n<p><\/div><\/div><br \/>\n<\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Editors (WYSIWYG) WYSIWYG editors are HTML editors that attempt to display the web page as it will show on the browser. The term stands for\u00a0\u00a0What\u00a0You\u00a0See\u00a0Is\u00a0What\u00a0You\u00a0Get. They are visual editors, and you don\u2019t manipulate the code directly. They allow you to create html markup the same way you would write with Microsoft word. \u00a0 The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[96],"tags":[],"class_list":["post-36949","post","type-post","status-publish","format-standard","hentry","category-tech-ed-6207"],"_links":{"self":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/36949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36949"}],"version-history":[{"count":8,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/36949\/revisions"}],"predecessor-version":[{"id":43268,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/36949\/revisions\/43268"}],"wp:attachment":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=36949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=36949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}