What's on My Mind

Securing your content on the internet is not an easy task. There are many obstacles to overcome and trying to keep people from finding private information can be hard when writing code. If there is information such as phone numbers, names and e-mail addresses that are not entirely important but people do not want them easily accessed there is a simple code in JavaScript that you can write to separate this content. The code will be put into the HTML page and can be viewed if someone has any knowledge of internet code but is not easy to access. If you want to be able to encrypt a file use this open source http://www.protware.com/ that will take your code and encrypt it. This is not full proof because if a hacker is determined enough will break the code but it still works. I will be taking you step by step to create this separate page on your website.

Overview of Some of the Code that Was Used in Making the Content

<SCRIPT>

function passWord() {

var testV = 1;
var pass1 = prompt(‘Please Enter Your Password’,’ ‘);
while (testV < 3) {
if (!pass1) 
history.go(-1);
if (pass1.toLowerCase() == “letmein”) {
alert(‘You Got it Right!’);
window.open(‘protectpage.html’);
break;
} 
testV+=1;
var pass1 = 
prompt(‘Access Denied - Password Incorrect, Please Try Again.’,’Password’);
}
if (pass1.toLowerCase()!=”password” & testV ==3) 
history.go(-1);
return ” “;
} 
</SCRIPT>
<CENTER>
<FORM>
<input type=”button” value=”Enter Protected Area” onClick=”passWord()”>
</FORM>
</CENTER>

• The strike threw text on the page are what that you can change. The first is the password that you want for your password protected page and the second is the window that it will open when you access the next page. This requires another HTML document (This can be alternated to keep on the page by not opening a new window by getting rid of this portion of the code)
• <script src=”————.js” type=”text/javascript”></script> This goes at the top of the HTML document between the head tags to show that you are using an external source for the JavaScript. 
• The <script> tag should not be in the Js file
• <CENTER><FORM> <input type=”button” value=”Enter Protected Area” onClick=”passWord()”> </FORM> </CENTER> This is in the HTML document and should be placed where you want the button to appear on the page
• Any need to reference the code please feel free to see the original location of the code at http://www.javascriptkit.com/script/cut10.shtml

For an example of the use of this please visit http://studentweb.cortland.edu/erik.burrows/pwr209/memberpage.html and click view source to see how this code is utilized. When you open the JavaScript for the passwordpage_E.js the file is encrypted with the code shown above.

    Sites I found to improve usability: 

http://www.w3.org/WAI/intro/wcag

http://www.webstandards.org/

http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

http://webaim.org/intro/

http://web.mit.edu/atic/www/accessibility/guidelines.html

What is Usability: 

Usability is how easily accessible and simple that something is to utilize and how someone can improve upon those statutes. Some of things that I need to incorporate when using accessible design for the web are a site that is clearly labeled, easily found on the web, the colors on the page contrast and are not an eye-sore, and the content is found without a problem and can be followed as well as accessed from other pages on the site.

CSS layouts are not an easy thing to take grasp of because there are multiple elements that go into creating a page. There are codes that help identify certain elements of a page, pseudo classes to create each link, page layout that includes position property and the use of floating property that help you move smaller elements on your page. This language is confusing and not easily understood so there should be time spent reading into it and making sense of code language. The way that someone creates a layout of a page is essential to how someone views it. By using pseudo classes it helps enable links on the page that identify if you have used the link on the page and change its colors. This can be found in the navigation bar on the side of the page or within the text of the page. Also there is the need to be able to shift the direction of each element in the page using the position property and the floating property. These help by creating dividers between the edge of the page or page borders that make your page look more professional. The links below and the picture can help make sense of this and give you examples of what you think would be the best design for your page.

Helpful Websites for CSS Layouts

CSS Help-

http://www.maxdesign.com.au/articles/css-layouts/

Tutorial for Making a CSS Layout-

http://www.subcide.com/articles/creating-a-css-layout-from-scratch/

Color is an important element of web media content and can make all the difference in the appearance of your page. The color wheel is essential to the contrast on a page. Black on white creates the greatest contrast and colors that are across from each other on the wheel are complements of one another and are essential elements of design. Primary colors are important because they are the basics of how you start looking at the design of a page. By looking at the wheel provided below there are passive and active colors that need to be considered as well as how people will react to their page. Colors that are analogous, or next to each other on the page and do not make for good text and background colors because they blend in with one another. Please view the link to view CSS codes for colors and utilize the color wizard to create colors for your page.

Color on the Web- A helpful website that can help with the basics of web design.  http://www.colorsontheweb.com/

Color matching tool- http://www.colorblender.com/

Web Topography Reference- http://webtypography.net/

Graphics and Image Reference-

http://www.luminouslandscape.com/tutorials/understandingseries/und_resolution.shtml

Streaming Video Reference-

http://www.mediacollege.com/video/streaming/overview.html

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.

CSS creates the design of the page, including but not limited to: Background, formatting images, borders on the page, bullets, fonts, family fonts, font color, etc… the only limit is the amount of code that you are willing to write and are willing to find.

CSS’s relationship to XHTML is that CSS helps the XHTML recognize that there are style/format changes being added to a document such as those listed above. The part of web design that these languages govern are the style of the web page which ‘tells’ the web page how it looks and XHTML describes the writing in the document.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. 

Guide to CSS- htmlhelp.com/reference/css/

CSS Beginner Tutorial- www.htmldog.com/guides/cssbeginner/

CSS Reference- http://www.javascriptkit.com/dhtmltutors/cssreference.shtml

 HTML and CSS Quick Reference- www.tagindex.net/

XHTML is an acronym for Extensible Hypertext Markup Language. XHTML is used to do nothing more than provide meaningful structure to all of a page’s text content and any media elements such as images, audio and video. XHTML can only describe the structure of a Web page’s content and is only the foundation for the Web page. XHTML’s relationship to HTML is that XHTML is the HTML language rewritten according to XML’s rules. They are the same language basically but the book promotes XHTML.

All of this post came from: “How to Design and Write Web Pages Today” by Karl Stolley

HTML Help- http://htmlhelp.com/

The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings.

Extensible Hypertext Markup Language page- http://xhtml.com/en/xhtml/reference/

Good Tutorials (free HTML, CSS, Javascript and more tutorials)

All of the tags that can be used in HTML- http://www.w3schools.com/tags/default.asp

Javascript help- http://www.javascriptkit.com/

CSS Help forum- http://forums.devshed.com/css-help-116/

pwrryan:

(Source: puck-zilla20)

Basics of Web Design- http://webdesign.about.com/

This site gives a basic overview of web design and some links to other pages that may be useful. This is a site that is a good place to start on your research on web design as it gives a basic overview.

Web Design Methods- http://www.d.umn.edu/itss/training/online/webdesign/architecture.html

This site gives a comprehensive list of information and articles that someone could read on web design. All of the articles are listed under specific categories so if there is something that you are stuck on this could be a site to visit.

Web Design Tips- http://sixrevisions.com/web_design/250-quick-web-design-tips-part-1/

This site has two list of 250 web design tips for your website and is a great resource to look through for web design.

What to do and what not to do..- http://websitehelpers.com/design/

This site gives a list of what to do and what not to do in web design and is helpful if this is your first time doing a web site.

Top 25 Web Design Blogs- http://www.dailyblogtips.com/top-25-web-design-blogs/

This site ranks all of the top web design blogs so if you are looking for a blog to read posts this is a great place to start.

Web Design Forum- http://www.webdesignforums.net/

This site has a few useful forums on web design so if you want to read what other people post about this issue this could be a place to go to but is a limited source.

Web Design for Dummies- http://www.dummies.com/how-to/content/web-design-for-dummies-cheat-sheet.html

This is a great cheat sheet to use from the popular book series “For Dummies…” It gives a basic overview of some web design helpful tips and has links to other how to pages below on their site.

How to start a web page- http://www.thesitewizard.com/gettingstarted/startwebsite.shtml

This tutorial shows you how to make or create a website. It is intended for the beginner and layperson, taking you step by step through the whole process from the very beginning.

HTML Help- http://htmlhelp.com/

The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings.

CSS Layout Techniques- http://glish.com/css/

This site gives you an insight into how CSS works and some helpful techniques that you can use for your website. This is a good site to visit if you are having problems with building a site.

List of Tutorials for Web Design- http://www.good-tutorials.com/

This site allows an individual to access different forums on various topics under web design. This site can be good for troubleshooting or accessing other people’s thoughts on web design.

Potential Website Builder- http://styleboost.com/

This may be a potential website builder that I found off of the useful links page that my professor offers us. It could be a website builder that I use.