Tech Ed-6207 « Course Content

Archive for the ‘Tech Ed-6207’ Category

EME 6207 – Tech Ed: Cascading Style Sheets

Thursday, September 15th, 2016

Textbook Reference(s):

Chap 1: 12-12; Chpt 2: 13-13

The purpose of style sheets is to separate the semantics and content from the design.

There are three types of style sheets:

Internal CSS’s that affect the entire webpage
External CSS’s that affect the entire website
Inline CSS’s that affect the particular section of a Web page. This is not recommended, because it doesn’t effectively separate the content and the design

Internal Style Sheets: The Set-up

The <style> tags are (typically) located in the head of the HTML document:

<html>

<head>

<style>

body {background-color: white}

h1 {color: red}

font {font-family: "Arial"; color: blue}

</style>

</head>

<body>

<h1>WORLD CUP 2010!!!!</h1>

<font>GOAAAAAAAAAAAAAAAAAAAAAAAALLLLL !</font><br/>

</body>

</html>

It will look like this (click the spoiler button to see):

See the Coding

WORLD CUP 2010!!!!
GOAAAAAAAAAAAAAAAAAAAAAAAALLLLL

External: The set-up

An external style sheet is the most common way to include CSS. Instead of the <style></style> tags shown above we link to the external file mystyle.css which is in a folder named css

<link rel="stylesheet" type="text/css" href="css/mystyle.css">

please keep in mind. the same relative linking used for images is necessary as used with images

Inline Set-up

The code is inserted into the body each time it is used. This is more or less impractical. While it MAY save coding time, a simple copy/paste works just as well, especially if it is used less often. Here is an example of a inline ccs that has to be repeated each page is resides:

<strong style ="font-family: Verdana, Geneva, sans-serif;color: #800000;">
"Creating a community of avid readers, one video at a time<sup>©</sup>"</strong>

Results in (click the spoiler button to see):

See the Coding

“Creating a community of avid readers, one video at a time^©“

Do This

Go to the following tutorial sites and take your pick.. both are pretty self explanatory. When you are satisfied you understand things, you can go on to the lesson on Java Script.

Tutorials

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: Cascading Style Sheets

EME 6207 – Tech Ed: Java vs Java Script

Thursday, September 15th, 2016

Textbook Reference(s):

N/A

What is JavaScript?

History

Short version

JavaScript’s official name is ECMAScript.
ECMAScript is developed and maintained by the ECMA organization.
ECMA-262 is the official JavaScript standard.
The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.
The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.
The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.
The development of the standard is still in progress. This makes javascript programming a bit of a soft disciplin
Java and JavaScript are not the same thing

A little Longer Version of its history

O’Reilly.net

Characteristics

JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a language that controls a program (which is written in a programming language)
JavaScript is can be embedded into HTML pages or linked like a CSS file
JavaScript is an interpretive language (means that scripts execute without preliminary compilation)
Everyone can use JavaScript without purchasing a license
Javascript is a client side language. All of the processing happens on the user’s computer and not on the server. Interaction with the server is done in the context of the user.

Java Script vs Java

Java and JavaScript are not the same!
Java and JavaScript are two completely different languages in both concept and design
Java (developed by Sun Microsystems) is a powerful and much more complex programming language – in the same category as C and C++.
Java has evolved to being the most common language used by programmers today to develop server side applications.

What can a JavaScript do?

JavaScript gives HTML designers a programming tool – HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small “snippets” of code into their HTML pages
JavaScript can put dynamic text into an HTML page – A JavaScript statement like this: document.write(“” + name + “”) can write a variable text into an HTML page
JavaScript can react to events – A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements – A JavaScript can read and change the content of an HTML element
JavaScript can be used to validate data – A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
JavaScript can be used to detect the visitor’s browser – A JavaScript can be used to detect the visitor’s browser, and – depending on the browser – load another page specifically designed for that browser
JavaScript can be used to create cookies – A JavaScript can be used to store and retrieve information on the visitor’s computer in between pages loading

Some examples with Coding

Simple Java Scripts for Teaching Basic Computer Programming Skills

Do This:

Visit the tutorials at 3Schools.com. When you are satisfied, go on to the next lesson and tutorials on php

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: Java vs Java Script

EME 6207 – Tech Ed: Introduction to php

Thursday, September 15th, 2016

Textbook Reference(s):

N/A

To get started, take a look at these two short overviews to get an idea of what php is and its relationship with xml (the next lesson). Both videos run around 25 minutes.

[Spider_Single_Video track=”5″ theme_id=”7″ priority=”0″]

[Spider_Single_Video track=”4″ theme_id=”7″ priority=”1″]

Ok..ok.. so just What IS php?

PHP stands for PHP: Hypertext Preprocessor. So it’s used to manipulate hypertext dynamically.
PHP is a server-side scripting language, like ASP
PHP scripts are executed on the server
PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
PHP is an open source software
PHP is free to download and use

Ok so what php does (in conjunction with xml) is to add CONTEXT and the processing of data stored on Web pages. By stripping the functions out from one another (form, navigation, data and context), you have the elements necessary for the semantic Web…. each plays a role… add the idea of mobile computing and you have the beginnings of a recipe for pervasive or ubitquitous computing.
What is a PHP File?

PHP files can contain text, HTML tags and scripts
the script part of php is enclosed in opening and closing tags <?php code ?>
PHP files are returned to the browser as plain HTML. The server does all of the manipulation before the data is sent to the user
PHP files have a file extension of “.php”

What is MySQL?

MySQL is a database server
MySQL is ideal for both small and large applications
MySQL supports standard SQL
MySQL is also open source
MySQL compiles on a number of platforms
MySQL is free to download and use

PHP + MySQL

PHP combined with MySQL are cross-platform (you can develop in Windows and serve on a Unix platform)

Why PHP?

PHP runs on different platforms (Windows, Linux, Unix, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP is FREE to download from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side

Are you beginning to see a trend here? Open Source seems to jump out at you every link on this page? hmmmmm

Where to Start?

To get access to a web server with PHP support, you can:

Install Apache (or IIS) on your own server, install PHP, and MySQL (known as AMP)
Or find a web hosting plan with PHP and MySQL support
install a manager on your computer. I recommend MAMP

What do you Need?

If your server supports PHP you don’t need to do anything.

Just create some .php files in your web directory, and the server will parse them for you. Because it is free, most web hosts offer PHP support.

However, if your server does not support PHP, you must install PHP.
Note: hostgator, one of the hosting services we are recommending does support mysql and php… the other one is dreamhost

PHP code is executed on the server, and the plain HTML result is sent to the browser.

When you are done reviewing all of this, spend some time on this site to go through some of the basic tutorials. When every you see a greet button labeled “Run Example” you can mess with that code. You are not expected to become an expert by any means but you may wish to take the short quiz at the beginning to test your knowledge.

Do This:

Seeing as you perhaps took the little quiz on php, there is not really much more to do here. To gain a better understanding, go on to the next lesson on xml.

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: Introduction to php

EME 6207 – Tech Ed: FTP/File Management

Thursday, September 1st, 2016

FTP (File Transfer Protocol) Programs

Ok now, let’s start with FTP. First, in order for you to send files using an FTP package, you need a place to ‘put’ the file so that the other party can download it. The technical aspects of FTP are not really important. What you are doing is taking a file from your computer, and placing it onto another computer. That other computer has some space for your files. These are set up in the same hierarchal way files are set up on your computer. That other computer is referred to as a server. It runs an FTP server program. Your computer is referred to as the client. It runs an FTP client program

The kicker is you need to send these files to a server that is available for us all to see. There are several server hosting companies out there that range from free to those that cost less than $40 for an entire year. I am not asking you to purchase any for this course at this time. We will have to look into it when we get to our final projects. But for now, let’s simply utilize the space I have purchased for you. The server package I have purchased for you cost less than $100 for a year and it includes unlimited storage and almost unlimited file transfers per month. I also have other packages I use as my personal “cloud” and a place to back-up my important files. I simply FTP them to the server into specific folders I have set up. And then I have permanent and easy access to them anywhere in the world. In short, I have a virtual ‘file taxi’.

You sometimes hear on the radio about file back up services that cost from $50-100 per year. This method is more reliable and costs a fraction! So, it is good to become familiar on how this works.

Again, In the service we have set up for you there are specific folders for specific activities. You will be asked to set up folders for each of your activities. The instructions on how to FTP a file below direct you to the specific folders for these activities.

Step 1:

In order to do a file transfer, you need to download to your computer a special FTP program. The best one I have found that has an identical interface for both the PC and the MAC is is called Filezilla. It is free and reliable.

To get the program, simply click on the link above and download it and then follow the instructions on how to install. Usually they self-install. I always also try to get an icon on my desktop so I can easily find it.

Make sure you select the Filezilla Client Link.

Some other notable FTP programs are WINSCP & Fetch. Dreamweaver has this functionality built into the program

Step 2:

Once installed, you have to set up the program to go to the correct location to open up the server access.

Then you wait for the system to open up the dialog box:

For this class the host name is edtecher.org the user name is studentuploads. The password has been posted on Canvas (in the Drop Box (under the Assignments Menu Tab) on the main course page. It is not printed here for security reasons.

Copy and paste into the dialog box.

Make sure you select FTP (SFTP is default).. it should be all going to Port 21

First you have to enter the correct information into the input area. The left side of the screen is a visual representation of your computer. Find where you created your newsletter folder The Right side of the screen is the remote site.

You need to navigate to the correct folder… in our case will be /edtecher.org/6207/fal2016/newsletters. Please do not go to the wrong folder. There are several, representing sites for other classes.

Once you find the correct folder, simply drag the newsletter folder from the appropriate location from the left side (your computer hopefully, your desktop) over to the right side into the correct folder.

Simply let go of the file and it will transfer, resulting in a look that shows you that the file is there.

That’s it! you log off. Depending on file size, this may take a few minutes.

ONLY ONE WORD OF CAUTION. IF YOU DO THIS ON CAMPUS, THE WIRELESS CONNECTION PROHIBITS ACCESSING FTP SERVERS. IF YOU ARE HAVING TROUBLE CONNECTING IT MAY BE BECAUSE YOU ARE ATTEMPTING TO DO USING WIRELESS ON CAMPUS. SORRY BUT WE CANNOT DO ANYTHING ABOUT THIS ONE! ALTERNATIVELY, YOU CAN ACCESS THEM USING A WIRED CONNECTION IN THE DORMS AND IN THE COMPUTER LABS OR FROM YOUR OFFICE COMPUTERS ON CAMPUS.

Back to Lesson Module

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: FTP/File Management

EME 6207 – Tech Ed: Web Site Building With Visual Editors (WYSIWYG)

Thursday, September 1st, 2016

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 What You See Is What You Get.

They are visual editors, and you don’t manipulate the code directly. They allow you to create html markup the same way you would write with Microsoft word. The best way to get started with authoring html is to use a visual editor. Most 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.

You have a choice with editor software. You can purchase an application (Dreamweaver from Adobe) or find a free one.

Here is a list of a few free Visual editors out there for you to use:

Online HTML editor
Dreamweaver Free 30 Day Trial (Both Platforms)
Google Web Design Tool (Beta, Cross-platform)
Komposer (Open Source, Cross-Platform)

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 ‘translate’ our instructions as needed to comply with the rules put out by these companies.

With that in mind, let’s go ahead and delve into this wonderful world of Web creation…

Setting Up Your Filing System

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. Whatever you do be consistent. The main folder is referred to as the root. 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.
So if you were going to write the html markup for an image tag in your index.html file it would look like this:

<img src="media/myImage.jgp">

This is called relative linking. All of these folders need to stay together in the same configuration they are set up on your computer, or they will not work. If you’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 root. The root

Do This!

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.

One word of caution here… IF YOU ARE CREATING A NEWSLETTER FOR A K-12 CLASSROOM, DO NOT POST GRADES FOR YOUR STUDENTS ON ANY PUBLIC SITE. There are very strict confidentiality laws prohibiting this (called FERPA).
Similarly, if you are creating a site for a business or training function, you need to be aware of any guardianship requirements for confidential information.

Planning a website

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. I am going to make a newsletter site that has an index page and 4 assignments. Using simple bullet points, I will make an outline to describe my sitemap

Home Page – (index.html)
- Spelling Assignment (assign1_spelling.html)
- Writing Assignment (assign2_writing.html)
- Reading Assignment (assign3_reading.html)
- Drawing Assignment (assign4_drawing.html)

You might go even further and write out all of the content that will be on each page. Planning something out will only make it easier when you go to execute. You do not have to turn any of this in. It’s to help you succeed.

Another tool web designers use is the wireframe (the image on the right). Its a basic sketch to describe what you are making visually. It can be used with a client to describe what you are making for them. But it also can be used to just visually work out what you are going for. Profilewireframe

File Management

Please follow these instructions to the letter. Not doing so will cause issues (such as bad links, improper references to images, etc.), and as a result, you will loose points.

Create a folder on your computer called [lastname]_newsletter. So for me, I’d create a folder named lenz_newsletter. Inside that folder place all your pages, including your main page that needs to be named index.html
Create in the main folder a sub-folder called media. 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
Find the folder on edtecher.org site as outlined in the upload instructions below.

Click Plus Sign for Hints

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.
Create your main folder and name it exactly as described above.
To repeat…. Place all your images in a sub-folder (under your main folder) and call it ‘media‘ PRIOR to linking to them from the actual pages. This is VERY important!!!!
DO NOT USE CAPITAL LETTERS IN FOLDERS (OR FILE NAMES). IT IS JUST AN IMPORTANT HABIT TO DEVELOP… SOME SERVERS HANDLE CAPITAL LETTERS AS COMPLETELY DIFFERENT THAN LOWER CASE.. USING ALL LOWER CASE IS FOR CONSISTENCY.

Uploading your Newsletter

Upload your Newsletter folder onto the edtecher.org site using Filezilla FTP software, as shown by these instructions.
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).

Click Plus Sign for Final Instructions

Notice you do not need to specify index.html in the URL because that is assumed by the system.
If you name your main page something other than index.html, the browser will not find it and return an error.
You may check out to see if your Newsletter has uploaded properly by keying in the URL. The URL you enter would be exactly:http://edtecher.org/6207/fal2016/newsletters/yourlastname_newsletter/
In my case it would be: http://edtecher.org/6207/fal2016/newsletters/lenz_newsletter/. 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.)

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: Web Site Building With Visual Editors (WYSIWYG)

EME 6207 – Tech Ed: Drupal Primer

Wednesday, August 17th, 2016

From Wikipedia:

Drupal is a free and open-source content management framework (CMF) written in PHP and distributed under the GNU General Public License. It is used as a back-end system for at least 2.1% of all websites worldwide ranging from personal blogs to corporate, political, and government sites including whitehouse.gov and data.gov.uk. It is also used for knowledge management and business collaboration.

The standard release of Drupal, known as Drupal core, contains basic features common to content management systems. These include user account registration and maintenance, menu management, RSS feeds, page layout customization, and system administration. The Drupal core installation can be used as a brochureware website, a single- or multi-user blog, an Internet forum, or a community website providing for user-generated content.

As of January 2013, there were more than 20,100 free community-contributed add-ons, known as contributed modules (WordPress refers to these as plugins), just as with WordPress these are available to alter and extend Drupal’s core capabilities and add new features or customize Drupal’s behavior and appearance. Because of this plug-in extensibility and modular design, Drupal is described by its developers as a “content management framework”. Drupal is also described as a web application framework, as it meets the generally accepted feature requirements for such frameworks. Although Drupal offers a sophisticated programming interface for developers, no programming skills are required for basic website installation and administration.

Some Tutorial Videos

We would be remiss if we did not give you some video tutorials on how to get started. It is assumed that you already have purchased an ISP license or have installed Xamp on your computer to run it locally. If you have already done the WordPress activity, then Drupal can co-reside on the same remote site.. simply place the app in a different /unique folder underneath the root..

Click for Tutorial: Beginner’s Guide to Drupal

As with all of these there are plenty more on You Tube to be found.. no sense me reinventing the world here

If you prefer text based tutorials etc… then maybe this works better

Drupal Tutorials

This is provided by siteground.com, a Web hosting service. They provide infrastructure support for Drupal with plenty of packages.
http://www.siteground.com/tutorials/drupal/
Here is the Drupal site itself.. which has its own tutorials
drupal.org
I am sure you can find many more on your own including at vtc.com
and lynda.com.

Do This!

You may wish to practice with your site on your local computer prior to uploading it to your server. In order to do that you must make your computer simulate being a remote host. Here is a step by step set of instructions for you to follow to get your site up and running. You need to complete the activity, get the site up and running and then send a link to it in the drop box set up on Canvas. The instructions for setting up WordPress and for Drupal are almost the same. I am not specifying which program you do first. The activity for this cycle has been combined with the last. Create a chart comparing the two CMS’ and reasons why you selected the one you did. See the Assignment Checklist for final details.

Installing Drupal Locally

There is a way to run Drupal and/or WordPress on your own desktop/laptop. But because php and mysql assume a client-server relationship, you must first install on to your computer a ‘server simulation program’ (called Xamp.. Mac’s also have their own simulator called Mamp, but the latest MACs will run either simulator). Both Drupal and Worpdress can then be installed locally. This way, you can do all your design and production work locally and not have to contract with an external ISP just to try the products out. This is especially useful in this course where you will be trying the both out then picking one of them for your final project. Note that you do not HAVE to do it this way, but is being offered as an alternative.

This concept is especially useful if you happen to live in an area with poor Internet service and want do not want all the delays. You would have to download the plugins and themes using the Internet but all the design work can be done without an Internet connection. Then, once you are satisfied, you can easily recreate your final product by uploading it to your IPS of choice. I find this especially useful when I set up at conferences, for example, and want to be able to show my sites but do not have any Internet service.

I have provided you with a tutorial on how to set this server simulation up on your computer. I have also provided a step by step set of instructions on how to upload a duplicate of your final version on to the ISP.

Here are the steps to set up your CMS on your Web Host

Contract with a hosting service that is WordPress AND Drupal friendly/compatible. We are not asking you to spend a lot of money here. Most of the free hosting sites are laden with ads… and many do not support php5, mysql, Drupal, or WordPress. One of the better ones (and the most reasonable) is hostgator. They offer a one-click install for Drupal. They claim there is a quick install feature for WordPress but we have never tried it. Dreamhost is a little more expensive and they offer a One Click install for WordPress and Joomla! (but not for Drupal).
To do your Drupal install, use this Quick Install for Beginners.. OR if you have selected hostgator for your site server, then go through their one-click installs.
Unless you wish to pay for two site hostings (or purchase the ‘hatchling’ plan on hostgator that provides unlimited domains), be sure NOT to set up Drupal in the root directory. Instead, set up a sub directory on your site and load Drupal to that directory. Call the directory anything you wish but make it distinctive. Drupal and WordPress can co-exist on the same site as long as they are in their own directories. Then simply designate that directory when you refer to your site… For example, http://mysite.com/drupal/ (where mysite is the name you give your site).
You MAY wish to select the default theme. You can experiment on your own by searching the themes offered on the Drupal site.
The ‘extend’ site also provides a link to modules (extensions). Select at least four and install them. If you have already done the WordPress activity, see if you can find modules that replicate (or closely replicate) what you chose on WordPress.
Begin working on your site (or blog). The context may be of your choosing. As this is an education/training course, most will probably pick one for that industry. However, some of you come from higher education and or a business and may wish to create one for your own interest. The idea is to make it functional and of good design. If you have to spend some time on this, why not make something tat you can actually use? We will be looking at each product during our final Adobe Connect session at the end of this term.
If you chose to start with WordPress, the idea here is to replicate in Drupal the essence of the site you have already created (including trying to identify similar plug ins that do similar things as the add-on modules did for Drupal. This will allow you to see the differences between the two CMS systems and make your choice as to the best one that suit your needs.
If you have issues or would like some type of formative review, you can contact your instructor.
Be sure to post a link to your site in the drop box set up on Canvas by the deadline. If you have decided to install Drupal on your local computer, then simply upload a few screen shots of your practice site into the dropbox set up in Canvas

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: Drupal Primer

EME 6207 – Tech Ed: HTML Primer

Friday, August 5th, 2016

Textbook Reference(s):

Chpt 2: 26-33

The Basics

The basic coding structure beneath all Web pages is based on hypertext mark-up language (HTML). It as gone through several changes over the years but the basics are relatively the same. This lesson is simply to introduce you to some of the fundamentals. You are not expected to become experts in this but simply become introduced to the concept. The next lesson on How Browsers work will begin to tie it all together.

To get started, let’s take a look at a video (approx 15 minutes) I created to introduce the basics of the concepts behind HTML and XHTML, which as you will see is an interim step to HTML5 (which we will introduce in a later in this module:
[one_third].[/one_third][one_third]

[/one_third][one_third_last]..[/one_third_last]

HTML Syntax Review (In case you simply cannot get enough!)

I could spell out here a step by step guide to HTML coding but w3Schools has done that for us, so no need to reinvent the wheel. Their tutorial is a cookbook approach with a try it activity for each chapter, as well as a self-test. You are sort of on you honor here but there is an activity at the end of this module, so it may behoove you to review these materials:

HTML Basics

In case you are a visual learner, here are a couple of YouTube videos that further review the basics:

(This one is a bit dated but does show much of what is still a part of current html coding)

(This is the second (of four) in the basics videos that began with the above)

In essence, HTML is a markup language. You may or may not know it but ALL formatted text (even a Word document) has underlying coding that creates the bold, italics, indents, etc.

Just as an example, take a look at this seemingly simple letter:

Here is what that same letter looks like under the skins:

So, all HTML does is to tell a browser how to format that text.

Well that is not exactly true. HTML also helps with context of the words a little bit but that is left to another set of coding syntax called xml.

Formatting/Characteristics (Use this as a Check Sheet)

HTML is standard (ASCII) text with embedded format codes. In other words there is no underlying format.. it is text only. that is why you cannot use Word or other document processor to create HTML code. You must use a text editor like Notepad on the PC or Sublime Text on a Mac.

HTML uses paired tags (they are set off by opening and closing <> brackets).
If you have an opening tag (like <h3>) you must also have a closing tag (i.e.</h3>).

Some basic rules:

Sometimes the opening and closing tags are specified as one single tag:

For example,The <hr/> tag means enter a horizontal rule on the page.
the <br/> tag means a line break.

Tags can identify elements or format the structure of document.

<strong> bold </strong>
<em> italics</em>
<u> underlining</u> , etc.

Document Structuring

Titles in HTML

Titles appear in the title bar of the page. Ever notice when you open a page on the tab at the top there is a title? The title bar may say “Untitled Document” that is because no titles were specified.

Headings in HTML

Headings of different weights are used to introduce sections

<h2> </h2> tag

is larger than

<h3> </h3> tag

which is bigger than

<h4> </h4> tag

Nested headings are especially important in HTML as they are used to define sections of the text. You shouldn’t start a section with an h2 if you have not already used an h1.

Text in HTML

simple text is enclosed in paragraph <p></p> tags
break <br> tags help to format lines
font faces and other attributes may be specified. You can go from the simple to more complex
font size may be numbered using absolute values between 1 and 7
font size may be sized relatively using +n or –n (where n is some integer)

Color

Simply specifying ‘Red’ is browser’s way of mapping to one of a 256-color indexed Red Green Blue palette of colors. A ‘web-safe’ color is one of a special palette of 256 others (originally designated by Netscape) that are consistently represented, regardless of platform
You may also get very specific by coding a set in what is called hexadecimal coding. For example to make this red I coded make this red

The hexadecimal numbers represent a reference to a chart that is recognized by all Web Browsers:

To see how this works, click on the image below in various spots to change the color. The notice how the hex reference changes in the dialog box below it.

Lists

ordered lists (automatically numbered) Coding is <ol> for an ordered list. The numbered list is generated by the <li> </li> tags surrounding each line item. Then you close it with an </o> tag. Ordered lists should be used when order of the elements is important.

<ol>
  <li>Wake up</li>
  <li>Eat Breakfast</li>
  <li>Brush Teeth</li>
</ol>

Unordered lists (bullet points). Coding is <ul> for unordered list. Each bullet is also generated by the the <li> </li> tags surrounding each line item. Then you close the list with a </ul> tag. Unordered lists should be used when order is not important

<ul>
  <li>Banana</li>
  <li>Orange</li>
  <li>Apple</li>
</ul>

Inline Graphics

Images that are placed on the page along with text and other elements. There is a special set of codes you must use to specify the image and where it is located.
Web pages are restricted to accept only certain image file formats (.gif, .jpg, and .png)
The html document must be able to reach to image file for it to be embedded in the document. The image file is really merged with the document like when you add an image to a word document.
The image tag uses html properties to define when the image is located in relation to the html document. In the below example, the property is src and it is defined as myImage.jpg. The double quotes are mandatory.

<img src="myImage.jpg">

Hyperlinks

Hyperlinks are references to other elements: pages, images, resources, etc.
They cause an automatic request for linked element. The hyper link for this page is The text you place here is highlighted on the page and made linkable.
There are of course tons and tons more but this is enough for our purposes. The intent here is to introduce you to the concept and have you do a couple for fun.
The hyperlink tag is more traditionally refered to as an anchor or <a></a> and uses the href property

<a href="http://google.com">Click here to go to google</a>

Ok.. ok.. One Last review: Dave Raggett’s Intro to HTML Basics

What is HTML 5.0?

HTML 5.0 now the HTML Standard. Again, I could provide a detailed explanation but w3.org has already done that. Note that standards upgrades are often 7-8 year projects. Therefore, when you first hear about them, it may seem like it will never take place. This first link explains the whole process and even provides a chronology with details of every revision of the standards as it progresses along the 7-8 yr cycle.

Do This!

To make sure you understand the basics of HTML, let’s do an activity.

On your computer, open up the text editor (either Notepad on a PC or an open source text editor on the Mac such as Sublime Text). TextEdit on the Mac is not really a good text editor because it saves in Microsoft RTF format by default, even if you save it as an html. IN SHORT, DO NOT USE WORD, PAGES, WORDPAD, TEXTEDIT, OR ANY OTHER WORD PROCESSOR, AS IT WILL ADD PROPRIETARY, INTERNAL FORMATTING WHEN YOU SAVE THE FILE, REGARDLESS OF THE FILE EXTENSION YOU CHOOSE. This formatting is almost the same as html.
Replicate using html code what is displayed in the iframe below. Save it as a .html document (override the .txt extension that is automatically added as default). Alternatively you can create the code then copy/paste it on the w3c schools.net try it page.
When done, open the file inside a browser (File, Open or simply drop the file on the browser window). See if your manually created Web page looks like the sample.
You are on your honor here. Post on Canvas (in the Drop Box found under the Assignments Menu Tabs) a confirmation by answering the one question survey indicating you were successful in recreating the page.

Here is the example page that you need to replicate as a Web page using HTML:

[pdf http://rkenny.org/6207/html.pdf]

When you are done, go to the lesson on How Browsers Work and create a small site using a Visual Line editor (VLE)….

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: HTML Primer

EME 6207 – Tech Ed: xml Explained

Wednesday, August 3rd, 2016

Textbook Reference(s):

N/A

So we have another short overview of xml for you to look at:

What is XML you ask? (confused? no worries..)

XML was designed to transport and store data.

HTML was designed to display data.

Before you continue you should have a basic understanding of the following:

What is XML?

XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.

HTML is about displaying information, while XML is about carrying information.

XML Does not DO Anything

Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information (content).

The following example is a note to Tove from Jani, stored as XML

<note>
  <to>Romeo</to>
  <from>Juliet</from>
  <subject>wherefore art thou</subject>
  <body>Deny thy father and refuse thy name</body> 
</note>

But still, this XML document does not DO anything. It is just pure information wrapped in tags. Someone must write a piece of software to send, receive, and/ or display it. (again that code is describe/defined in the database on the other end).The note above is quite self descriptive. The xml tags <from> <to> etc, simply added context and meaning to the data, which I describe through what I do with that data on my server side data base system (mysql + php). It has sender and receiver information, it also has a heading and a message body.

In other words… XML is Just Plain Text

XML is nothing special. It is just plain text. Software that can handle plain text can also handle XML.

However, XML-aware applications can handle the XML tags specially. The functional meaning of the tags depends on the nature of the application.

With XML You Invent Your Own Tags

The tags in the example above (like and ) are not defined in any XML standard. These tags are “invented” by the author of the XML document.

That is because the XML language has no predefined tags.

The tags used in HTML (and the structure of HTML) are predefined. HTML documents can only use tags defined in the HTML standard (like /p, p,/p h1, etc.).

XML allows the author to define his own tags and his own document structure.

XML is Not a Replacement for HTML

XML is a complement to HTML

It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport and define data, while HTML is used to format and display the data.

My best description of XML is this:

XML is a software- and hardware-independent tool for carrying information.

XML is a W3C Recommendation

XML became a W3C Recommendation in February, 1998.

XML is Everywhere

We have been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has developed, and how quickly a large number of software vendors has adopted the standard.
XML is now as important for the Web (especially the social Web)as HTML was to the foundation of the Web.
XML is the most common tool for data transmission between all sorts of applications, and is becoming more and more popular in the area of storing and describing information.

Do This:

The last item on the list for this learning cycle is to read more about XML and follow a short tutorial found at W3C Schools and take their short self-study quiz.

After, we should be ready for the next cycle where we introduce content management systems… most of which are based on php and xml.

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: xml Explained

EME 6207 – Tech Ed: WordPress Primer

Monday, August 1st, 2016

Textbook Reference(s):

Chap 2: 46-49

What is WordPress?

Funny you should ask! I was just about to tell you…. ok..ok I know some of you know what it is but as a review:
The following was taken from utopian.net. No sense reinventing the wheel here… this is an excellent summary:

WordPress – what it is

WordPress is an [excellent] tool for managing content. If you need to add a page to your site, write a new post about the latest news, upload new photos, or update an ever-changing event calendar, WordPress is a solid and simple way to do all the above, without fiddling with code, and with a variety of ways to organize and present your content built-in.

If you’re completely new to WordPress, the place to start is the WordPress crew’s First Steps with WordPress. Below, you’ll find introductions and links to detailed documentation for major tasks in managing your site.

Admin Panel – manage site

The admin panel controls your site and your blog, giving you point-and-click access to every WordPress feature: change the appearance of your pages, configure plugin features, and, most importantly, easily write and upload text and pictures. Your site’s admin panel is available at your URL, followed by /wp-admin/.

CLICK IMAGES TO ENLARGE

[two_third][/two_third] [two_third_last][/two_third_last]

The WordPress team and community have provided extensive documentation for the base WordPress admin panel. It’s one of the first places to look if you’re fairly new to the blogging process, or to managing your site with a content management tool like WordPress.

Themes – control site appearance

You can find lots of looks for your WordPress-based site by visiting the official theme repository at the WordPress project, and at several other places around the net. Try a Google search for WordPress themes to get an idea of the choices, which range from free themes you can download and use or modify, to services that provide theme design and/or integration. CAUTION BASED ON RECENT EVENTS SURROUNDING VULNERABILITIES WITHIN WORDPRESS, DRUPAL, ET AL, BEST TO KEEP WITH THOSE THEMES AND PLUG-INS FOUND SPONSORED ON WORDPRESS SITE.

To use a new theme, first download it from the WordPress theme site. Themes are usually packaged as a .zip file. When the download completes, open the zip file to expand its contents. This will typically result in a folder with the same name as the theme file you downloaded. Click on the admin panel under Appearance, then Themes (Click pic to enlarge):

[two_third] [/two_third]
[two_third_last][/two_third_last]

Once it’s uploaded, you should be able to ADMINISTER the theme in the admin panel under Design | Themes and immediately see the new look on your site.

WordPress is not a web design tool. Switching from one existing theme to another and back again is one-click easy. However, creating and modifying themes is more involved, and WordPress is equipped with only very basic tools for theme editing. For now, it’s best not to mess with customization unless you are willing to spend time administering the site on a regular basis.

Plugins – add site features

The process for adding WordPress plugins is similar to that described above for installing a new theme, and new plugins can be uploaded directly inside the admin panel:

[two_third][/two_third][two_third_last][/two_third_last]

Selecting ‘Add New’ in this panel will take you to the WordPress Plug In Picker Page:

[two_third][/two_third][two_third_last][/two_third_last]

Go to top

The WordPress project’s official plugin repository has hundreds of useful community-developed plugins available to extend and customize WordPress. Common plugins provide search engine optimization, integration with popular social networking sites like flickr, facebook, twitter, and others, and tools for things like podcasting, or showing your instant messaging presence. There is a wide selection.

Go to top

Click the plus sign below for more information:

Spoiler title

There is not an abundance of primers’ out there. The following is pretty good introduction. We will follow with a few steps for you to follow to get you started.
A pretty good start

Additional Definitions

Admin Panel/Dashboard – As explained above, this is the area that controls operation look and feel and navigation of the site. You need to spend some time in this area to learn about all the functions of WordPress. WordPress has its own look and feel but essentially it is the same concept.
Settings – This is the control menu for most all the plug-ins as well as reading and writing controls for the entire site.
Pages versus Posts – Take a look at the link to determine the difference between them. In most regards they are the same. While Pages are higher in the ‘food chain’ hierarchy than posts, they do look similar. Under posts you have categories and tags. You can cause the posts to appear as static pages or show a chronology like what a blog would do.
Media Uploads – This is the area where you upload (and allow users to upload media (video, audio, pictures, etc.) to your site. You can use the area too, like I have to show you screen shots. Or you can send the images to a completely different place and link to them. I personally like to do this for security reasons and back-up.
Users/Roles – This gives functionality to the site, based on the level and type of users you have. There are a few plug ins for this.. Role Scoper being the most extensive and most popular.
Plug Ins – We’ve already discussed. There are thousands available. Best to keep with those sponsored by WordPress because this is a source of vulnerability on your site. if you install a non-sponsored one you do so at your own risk.
Themes – ditto
Categories versus Tags – This allows you to allow sub context to your pages. it is categories that allows me to create sub sections for Lesson, Assignments, Calendar, and Syllabus on this site, for example.

Go to top

Do This!

Here is a step by step set of instructions for you to follow to get your site up and running. You need to complete the activity, get the site up and running and then send a link to it in the drop box set up on Canvas. The instructions for setting up WordPress and for Drupal are almost the same. I am not specifying which program you do first. For the final activity you will select one, followed by a short reflection comparing the two and reasons why you selected the one you did.

Click the Plus sign below for more information on how to run WordPress on your computer

Spoiler title

You may wish to run WordPress on your computer prior to loading it up to your IP. Here are the instructions.

Running WordPress on Your Computer

There is a way to run Drupal and/or WordPress on your own desktop/laptop. But because php and mysql assume a client-server relationship, you must first install on to your computer a ‘server simulation program’ (called Xamp.. Mac’s also have their own simulator called Mamp, but the latest MACs will run either simulator). Both Drupal and Worpdress can then be installed locally. This way, you can do all your design and production work locally and not have to contract with an external ISP just to try the products out. This is especially useful in this course where you will be trying the both out then picking one of them for your final project. Note that you do not HAVE to do it this way, but is being offered as an alternative.

[/accordion]

Here are the steps to set up your CMS on your Web Host

Contract with a hosting service that is WordPress AND Drupal friendly/compatible. We are not asking you to spend a lot of money here. Most of the free hosting sites are laden with ads… and many do not support php5, mysql, Drupal, or WordPress. One of the better ones (and most reasonable) is hostgator. Hostgator offers a one-click install for Drupal and what they refer to as a quick install for WordPress.Dreamhost is a little more expensive and they offer a One Click install for WordPress and Joomla! (but not Drupal).
To do your WordPress install, use this 5 Minute install (if you chose Dreamhost, there is a one-click install under the Goodies heading in the control panel. Be sure to choose ‘custom’ or they will automatically install hundreds of them alternatives that you will have to pour through to get to the one you want).
Unless you wish to pay for two site hostings/domains, be sure NOT to set up WordPress in the root directory. Call the directory anything you wish but make it distinctive. Drupal and WordPress can co-exist on the same site as long as they are in their own directories. Then when you refer to the WordPress site you would give the link http://mysite.com/wordpress/ (or something similar to distinguish it).
You MAY wish to select the default theme. You can experiment on your own by searching the themes offered on the WordPress site.
You can also search for plugins in the dashboard. Select at least four and install them. If you have already done the Drupal activity, see if you can find modules that replicate (or closely replicate) what you chose on Drupal.
Begin working on your site (or blog). The context may be of your choosing. As this is an education/training course, most will probably pick one for that industry. However, some of you come from higher education and or a business and may wish to create one for your own interest. The idea is to make it functional and of good design. If you have to spend some time on this, why not make something tat you can actually use? We will be looking at each product during our final Adobe Connect session at the end of this term.
If you chose to start with Drupal, the idea here is to replicate in Drupal the essence of the site you have already created (including trying to identify similar plug ins that do similar things as the add-on modules did for Drupal. This will allow you to see the differences between the two CMS systems and make your choice as to the best one that suit your needs.
If you have issues or would like some type of formative review, you can contact your instructor.
Be sure to post a link to your site in the drop box set up on Canvas by the deadline. If you have decided to install Wordspress on your local computer, then simply upload a few screen shots of your practice site into the dropbox set up in Canvas

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: WordPress Primer

EME 6207 – Tech Ed: Installing a Server Simulator on your Computer

Tuesday, February 17th, 2015

You have the option of installing Drupal and WordPress locally to test them out and run them it without having to rely on being connected to the Internet.

Both content management systems rely on the xml <----> mysql client-server relationship (as delivered by php). To simulate this function, you need to install and run a server simulator package on your computer. This is really not that hard to do, but there are some steps involved. Be sure to do each step in order, as shown in this video tutorial (Runs approx 9 minutes):

Step One: Install MAMP on your computer

Click Here to Watch the Tutorial

Step Two: Download WordPress/Drupal zip file

There are many ways to download and install these programs. As stated in the lessons, the ISP often provide quick installs on their sites. However, these procedures do not work for your computer. Instead you must download the zip files provided and then ‘unzip’/expand them locally. At that point you simply follow the easy install or five minute install processes as explained in the lessons.

Step Three: Pick a them install plug-ins/add-ons, etc.

Remember you cannot simply click to install these.. in most cases, you have to download the zip files and open them up and place them inside the folders on your local install as per instructions. Use your browser to view your creations and content (remembering to view them on more than one browser for compatibility). Sidebar: see notes below about link/path references

Step Four: Replicate your site on your remote server

This is not too tricky, but you must remember to replicate on your ISP the file hierarchies EXACTLY as they reside on your local computer. The file structure should be duplicated. This is why we had you do the ftp activity in a previous cycle… to get you used to file management and naming.Now is the time you can follow the Quick Install/5-Minute install or One click install process. Make sure you have installed on your remote site the exact same theme(s) and plug-ins/add-ons and they are in the correct location on the remote host.

Step Five: Copy over content

This is not really as difficult as it sounds.

For WordPressFor Drupal

As seen below in the screen shot (click to enlarge), there is an import/export function under the Tool Menu (which actually creates an xml file). You first export your content to using the export function… save it to a location on your computer where you can easily find it.

[two_third][/two_third]
[one_third_last][/one_third_last]

On your remote site you will use the same function to import. This requires another plug-in (called wp-import)that you need to install remotely first. Then simply click the import function. The xml file will be loaded on to your remote site. If you followed the procedure (below about link referencing, all should end up looking exactly like your local site.

Make sure your link paths are all made relative

Note this short tutorial

The idea is that direct reference links include in them the location of the page being linked to. So, for example, if you place all your pages on your desktop, when you upload the content to the remote server, the page link will still reference (directly) your desktop, which, of course is not open to others. This is also true if you want to ‘mirror’ your site and load it in two different places. By making it ‘relative” you are only noting the page reference and NOT the location, making it useful regardless of where the page is located. This explains why we asked for you to insert your images inside a separate folder with the last activity and why your images MAY not have shown up once you ftp’ed it to the edtecher site.

This is way more tricky. Rather than re-inventing the wheel here, this seems to be the best tutorial I could find at the moment. Here is a video tutorial

Posted in Tech Ed-6207 | Comments Off on EME 6207 – Tech Ed: Installing a Server Simulator on your Computer

COE Masters & Doctoral Degrees

Archive for the ‘Tech Ed-6207’ Category

Internal Style Sheets: The Set-up

External: The set-up

Inline Set-up

“Creating a community of avid readers, one video at a time©“

Tutorials

What is JavaScript?

History

Short version

A little Longer Version of its history

Characteristics

Java Script vs Java

What can a JavaScript do?

Some examples with Coding

To get started, take a look at these two short overviews to get an idea of what php is and its relationship with xml (the next lesson). Both videos run around 25 minutes.

Ok..ok.. so just What IS php?

What is MySQL?

FTP (File Transfer Protocol) Programs

Step 1:

Step 2:

Visual Editors (WYSIWYG)

Setting Up Your Filing System

From Wikipedia:

Some Tutorial Videos

Drupal Tutorials

Here are the steps to set up your CMS on your Web Host

The Basics

HTML Syntax Review (In case you simply cannot get enough!)

In case you are a visual learner, here are a couple of YouTube videos that further review the basics:

Just as an example, take a look at this seemingly simple letter:

Here is what that same letter looks like under the skins:

So, all HTML does is to tell a browser how to format that text.

Formatting/Characteristics (Use this as a Check Sheet)

Some basic rules:

Document Structuring

Titles in HTML

Headings in HTML

<h2> </h2> tag

<h3> </h3> tag

<h4> </h4> tag

Text in HTML

Color

Lists

Inline Graphics

Hyperlinks

What is HTML 5.0?

Here is the example page that you need to replicate as a Web page using HTML:

What is XML you ask? (confused? no worries..)

What is XML?

XML and HTML were designed with different goals:

XML Does not DO Anything

In other words… XML is Just Plain Text

With XML You Invent Your Own Tags

XML is a W3C Recommendation

XML is Everywhere

What is WordPress?

WordPress – what it is

Admin Panel – manage site

CLICK IMAGES TO ENLARGE

Themes – control site appearance

Plugins – add site features

Click the plus sign below for more information:

Additional Definitions

Click the Plus sign below for more information on how to run WordPress on your computer

Running WordPress on Your Computer

Here are the steps to set up your CMS on your Web Host

Step One: Install MAMP on your computer

Step Two: Download WordPress/Drupal zip file

Step Three: Pick a them install plug-ins/add-ons, etc.

Step Four: Replicate your site on your remote server

Step Five: Copy over content

“Creating a community of avid readers, one video at a time^©“