Chapter 5 covered a variety of basic HTML tags relating to text. In addition, it discussed the usefulness and importance of style sheets in order to cut the amount of individual text coding by providing an overall protocol for the entire page or site. I know I'll be using these, but they were almost all familiar to me through previous experience.
Chapter 6 covers a topic new to me: Cascading Style Sheets (CSS). I am familiar with the term and concept, having computer geek friends, but have never constructed my own. I paid close attention to the chapter, so that I could formulate my own CSS instructions for my web site. I was impressed at how many different ways you can manipulate the instructions to change the formatting of the entire site.
Other key information contained in 6 include font formatting tips, like using "graphic text" - images of text used in place of buttons or headers. These can be perfected in digital editing software and saved as images so they are consistent across web browsers and not affected by other font styles. Also addressed are spacing and text alignment commands, borders, and class selectors. Class selectors allow a web designer to create formatting commands for a variety of "classes" in order to cut down on the overall time in coding a page.
Saturday, May 31, 2008
Monday, May 26, 2008
Site reviews - Week 3
http://www.icann.org/
This site is of a very basic design, most likely due to the non-profit nature of the organization, although it is a tech-based group. It was last updated February 1, which seems like a long time in cyberspace. The Internet Corporation for Assigned Names and Numbers (ICANN) is an organization that coordinates access to websites internationally. Their mission statement says, "The mission of ICANN is to coordinate, at the overall level, the global Internet's systems of unique identifiers, and in particular to ensure the stable and secure operation of the Internet's unique identifier systems." It was interesting to see what they do to make sure that sites are accessible from anywhere.
http://www.internettrafficreport.com/
This site was completely awesome! It was intriguing to to see how the Internet is in use across the globe in real time. The FAQ page is very useful, explaining some complicated technical concepts in understandable language. The intra-page links help the user easily find whatever they need defined without excessive scrolling. Overall, a concise and simple web site that doesn't look cheap or assault the eyes.
http://www.internetworldstats.com/stats.htm
Along the same lines as the "Traffic Report," this site details more permanent statistics like total users, access penetration, and growth. They provide a variety of links to other related organizations to provide a big picture of Internet usage and related issues across the globe. Designwise, I did not like how much scrolling the welcome page involved. I think an additional page for links to other organizations would be more effective and cut down on initial page size.
http://www.caida.org/
The organization's mission statement greets you at the top of the main page. It states, "CAIDA, the Cooperative Association for Internet Data Analysis, provides tools and analyses promoting the engineering and maintenance of a robust, scalable global Internet infrastructure." This site is a mega-mart of information, with a large database of papers and other academically valid sources. I really liked the two tier navigation system at the top of the page, directing users down from a main category into smaller ones to make the overwhelming amount of information manageable.
http://pewresearch.org/
Great site! Its design is good without being intrusive, a standard three column format which works well because it invokes the image of a newspaper. This lends itself to credence and believability. Especially in this age of distrusting the accuracy of web sites, designers can use echoes of trustworthy print sources to make users more comfortable. Graphics are used masterfully, with small pictures, graphs, charts, and other visual elements drawing the reader's attention to key articles and information. Hidden drop down menus at the top of the page provide a fantastic organizational structure for the site, allowing users to find supporting pages with less clicks. While not the most visually exciting of this week's sites, it earns my highest ranking for other outstanding design elements!
http://usfweb2.usf.edu/ur/webadmin/webguide.html
This site outlines the guidelines for website use at USF. It covers both school generated sites and user generated sites, although there are less guidelines for the latter. Legal issues are addressed, as well as general content and technical specifications. This is clearly an informational site without much thought about design, although it is not overtly unattractive.
This site is of a very basic design, most likely due to the non-profit nature of the organization, although it is a tech-based group. It was last updated February 1, which seems like a long time in cyberspace. The Internet Corporation for Assigned Names and Numbers (ICANN) is an organization that coordinates access to websites internationally. Their mission statement says, "The mission of ICANN is to coordinate, at the overall level, the global Internet's systems of unique identifiers, and in particular to ensure the stable and secure operation of the Internet's unique identifier systems." It was interesting to see what they do to make sure that sites are accessible from anywhere.
http://www.internettrafficreport.com/
This site was completely awesome! It was intriguing to to see how the Internet is in use across the globe in real time. The FAQ page is very useful, explaining some complicated technical concepts in understandable language. The intra-page links help the user easily find whatever they need defined without excessive scrolling. Overall, a concise and simple web site that doesn't look cheap or assault the eyes.
http://www.internetworldstats.com/stats.htm
Along the same lines as the "Traffic Report," this site details more permanent statistics like total users, access penetration, and growth. They provide a variety of links to other related organizations to provide a big picture of Internet usage and related issues across the globe. Designwise, I did not like how much scrolling the welcome page involved. I think an additional page for links to other organizations would be more effective and cut down on initial page size.
http://www.caida.org/
The organization's mission statement greets you at the top of the main page. It states, "CAIDA, the Cooperative Association for Internet Data Analysis, provides tools and analyses promoting the engineering and maintenance of a robust, scalable global Internet infrastructure." This site is a mega-mart of information, with a large database of papers and other academically valid sources. I really liked the two tier navigation system at the top of the page, directing users down from a main category into smaller ones to make the overwhelming amount of information manageable.
http://pewresearch.org/
Great site! Its design is good without being intrusive, a standard three column format which works well because it invokes the image of a newspaper. This lends itself to credence and believability. Especially in this age of distrusting the accuracy of web sites, designers can use echoes of trustworthy print sources to make users more comfortable. Graphics are used masterfully, with small pictures, graphs, charts, and other visual elements drawing the reader's attention to key articles and information. Hidden drop down menus at the top of the page provide a fantastic organizational structure for the site, allowing users to find supporting pages with less clicks. While not the most visually exciting of this week's sites, it earns my highest ranking for other outstanding design elements!
http://usfweb2.usf.edu/ur/webadmin/webguide.html
This site outlines the guidelines for website use at USF. It covers both school generated sites and user generated sites, although there are less guidelines for the latter. Legal issues are addressed, as well as general content and technical specifications. This is clearly an informational site without much thought about design, although it is not overtly unattractive.
Power Tools - Week 2
MacDonald discusses several HTML editors and their advantages, features, and disadvantages. I have explored a few of them, and I have decided to move ahead with Nvu as my HTML editor. I do not have access to FrontPage or Dreamweaver, so despite their amazing features, I cannot further explore their possibilities.
Some of the things I like about Nvu include:
- Free!!
- Available for my iMac
- Multiple views to examine my design, including color-coded HTML tags for easy identification and the fabulous WYSIWYG view. I am not a programmer, so that view is much more like the desktop publishing software with which I am most familiar.
- Similarities to other software include the all-important "undo" feature, and most of the menus are similar to typical office software.
In creating a test page, I really enjoyed the process and made a great start toward my site template. See the results at http://myweb.usf.edu/~mjosephs/Nvutest.html
Some of the things I like about Nvu include:
- Free!!
- Available for my iMac
- Multiple views to examine my design, including color-coded HTML tags for easy identification and the fabulous WYSIWYG view. I am not a programmer, so that view is much more like the desktop publishing software with which I am most familiar.
- Similarities to other software include the all-important "undo" feature, and most of the menus are similar to typical office software.
In creating a test page, I really enjoyed the process and made a great start toward my site template. See the results at http://myweb.usf.edu/~mjosephs/Nvutest.html
Putting Your Page on the Web - Week 2
Chapter 3 talks about putting your page on the web. The broad topics discussed include web hosting, the parts of a URL (uniform resource locator), domain names, web space, uploading files, general broadband issues, associated email addresses, and other various frills.
I think the easiest way to practically address these issues is using the book's "Web host checklist" (p. 67) to evaluate my needs for this design project.
- Web space: I am not sure of my needs at this time, but the space at USF should be sufficient for the size site I am constructing.
- Bandwidth: I shouldn't need much, this will be a relatively simple site with little to no multimedia that requires extra computing power.
- Domain name: I am not going to register a domain name for this site, since the purpose is strictly personal/academic in nature.
- Email addresses: This is already provided by USF. Thank you, Academic Computing!
- FTP access: SSH is the bomb! Thanks again, USF.
- Tech support: I have ample tech support through USF, an abundance of tutorials, and some of my tech-savvy classmates.
- Statistics: I am still considering whether or not to add stats to this site- I know that in the future, should I design other pages, I do think they are important for usability and user information.
- FrontPage extensions: I will not need these as I am not using FrontPage for this project.
I think the easiest way to practically address these issues is using the book's "Web host checklist" (p. 67) to evaluate my needs for this design project.
- Web space: I am not sure of my needs at this time, but the space at USF should be sufficient for the size site I am constructing.
- Bandwidth: I shouldn't need much, this will be a relatively simple site with little to no multimedia that requires extra computing power.
- Domain name: I am not going to register a domain name for this site, since the purpose is strictly personal/academic in nature.
- Email addresses: This is already provided by USF. Thank you, Academic Computing!
- FTP access: SSH is the bomb! Thanks again, USF.
- Tech support: I have ample tech support through USF, an abundance of tutorials, and some of my tech-savvy classmates.
- Statistics: I am still considering whether or not to add stats to this site- I know that in the future, should I design other pages, I do think they are important for usability and user information.
- FrontPage extensions: I will not need these as I am not using FrontPage for this project.
Saturday, May 24, 2008
Site reviews - Week 2
http://www.w3.org/
This site was chock full of great information, but I was overwhelmed by the lack of white space. I did like the three column format, and really appreciated the left and right columns being on a colored background to provide visual distinction from the center. It was nice to have a search box at the top of the right column, a generally intuitive place to look. It is clear that this site is all about information access, and not so much about user attractiveness.
http://www.w3schools.com/default.asp
I like this site better than the above... although it is very text heavy, the gray background color is not as harsh as a bright white background to the eyes. I looked through the HTML tutorial, it was clear, detailed and easy to follow. A+ from me! For a beginning designer, it might be too much information, but someone with even a little bit of HTML or XML experience should find it to be an excellent resource.
http://www.cas.usf.edu/lis/distance/tutorials/
All the basics are here! No major design elements or flaws to speak of, just a useful and functional web page. I looked at the SSH tutorials before class on Thursday and they were very helpful. I like the use of Captivate to show users what they should see when they perform the operations on their own computer.
This site was chock full of great information, but I was overwhelmed by the lack of white space. I did like the three column format, and really appreciated the left and right columns being on a colored background to provide visual distinction from the center. It was nice to have a search box at the top of the right column, a generally intuitive place to look. It is clear that this site is all about information access, and not so much about user attractiveness.
http://www.w3schools.com/default.asp
I like this site better than the above... although it is very text heavy, the gray background color is not as harsh as a bright white background to the eyes. I looked through the HTML tutorial, it was clear, detailed and easy to follow. A+ from me! For a beginning designer, it might be too much information, but someone with even a little bit of HTML or XML experience should find it to be an excellent resource.
http://www.cas.usf.edu/lis/distance/tutorials/
All the basics are here! No major design elements or flaws to speak of, just a useful and functional web page. I looked at the SSH tutorials before class on Thursday and they were very helpful. I like the use of Captivate to show users what they should see when they perform the operations on their own computer.
Sunday, May 18, 2008
Creating Your First Page - Week 1
The anatomy of a web page is written in HTML: HyperText Markup Language. This language tells the Web browser how to format a specific page for a user, as well as linking different documents together. It is relatively simple to create, using a simple text editor with preview capability in any web browser on your computer- no internet connection required! However, the wide range of possibilities created by this simple file are almost unlimited, based on the creator's skill and knowledge of HTML tags and the correct order of using them.
HTML basics:
Container tags - Used mostly to format page elements that are "contained" between a beginning and ending tags.
Standalone tags - These tags insert something on the page, but do not affect other content.
Nesting tags - This is the practice of using a variety of tags one inside another to accomplish more complicated formatting, such as text that is both bold and italic.
Document tags - A minimum of three container tags establish a true HTML document. These are: "html," which tells the browser that the page is encoded in HTML; "head," which designates the header of the page that includes the title displayed in the title bar, search keywords, and a style sheet; and "body," which holds the actual content to be displayed by the page.
10(ish) most important tags:
Name: Type
Bold, italic, underline: Container
Paragraph: Container
Line Break: Standalone
Heading: Container
Horizontal Line: Standalone
Image: Standalone
Anchor: Container
Unordered list, list item: Container
Using this information, I created my first attempt at an HTML document, titled Under Construction. It is available from my USF account at: http://myweb.usf.edu/~mjosephs/underconstruction.html
HTML basics:
Container tags - Used mostly to format page elements that are "contained" between a beginning and ending tags.
Standalone tags - These tags insert something on the page, but do not affect other content.
Nesting tags - This is the practice of using a variety of tags one inside another to accomplish more complicated formatting, such as text that is both bold and italic.
Document tags - A minimum of three container tags establish a true HTML document. These are: "html," which tells the browser that the page is encoded in HTML; "head," which designates the header of the page that includes the title displayed in the title bar, search keywords, and a style sheet; and "body," which holds the actual content to be displayed by the page.
10(ish) most important tags:
Name: Type
Bold, italic, underline: Container
Paragraph: Container
Line Break: Standalone
Heading: Container
Horizontal Line: Standalone
Image: Standalone
Anchor: Container
Unordered list, list item: Container
Using this information, I created my first attempt at an HTML document, titled Under Construction. It is available from my USF account at: http://myweb.usf.edu/~mjosephs/underconstruction.html
Planning a Web Site - Week 1
The first step in any successful website is planning. In chapter one of his book, MacDonald discusses some basic ideas about websites and presents some of the first decisions to be made about the site as a whole. I am going to go through his broad subject categories and discuss how I will be addressing those topics in my site for this class.
1. Types of sites
The many types of website accessible on the Internet include: personal, blogs, resume, topical, event based, promotion, and business. I will be constructing a business-style site for the media center I work in at Harmony High School.
2. Understanding your audience
This encompasses several factors, including hardware issues such as monitor variations that affect color and fonts, connection speeds, browser-specific features such as plug ins, and other technical complications. In order to avert this, it is suggested that designers check the functionality of their sites on a variety of web browsers and operating system platforms.
3. The lifespan of your site
At the outset, it is important to know the intended lifespan of your site, in order to plan for regular updates and new content. If you design a site poorly at the outset, it becomes very difficult to change content easily, leading to quickly outdated content that discourages users.
4. Practice good design
Some of the tips given in this section include stay simple, be consistent, and know your audience. These are important because they help the designer stay focused on the essential purpose for the final site: usability. Simplicity, consistency, and end user satisfaction are key elements in planning a good site.
5. Ingredients of a web site
- Web pages: my site will consist of 5-6 individual pages
- Web space: for the purposes of this project, I will use my USF web site to host the pages
- Domain name: at this point, a domain name is unnecessary
- Web design tools: I am currently looking into Kompozer and Adobe Dreamweaver
- Hyperlinks: Not only a requirement of the project, but an integral part of any website
- Extras: search engine listing, establishing forums, animations, audio and video
All of these factors contribute valuable knowledge to the planning process of building a site framework, and determining how to allocate information across a variety of pages. I am ready to get started, which is the next chapter!
1. Types of sites
The many types of website accessible on the Internet include: personal, blogs, resume, topical, event based, promotion, and business. I will be constructing a business-style site for the media center I work in at Harmony High School.
2. Understanding your audience
This encompasses several factors, including hardware issues such as monitor variations that affect color and fonts, connection speeds, browser-specific features such as plug ins, and other technical complications. In order to avert this, it is suggested that designers check the functionality of their sites on a variety of web browsers and operating system platforms.
3. The lifespan of your site
At the outset, it is important to know the intended lifespan of your site, in order to plan for regular updates and new content. If you design a site poorly at the outset, it becomes very difficult to change content easily, leading to quickly outdated content that discourages users.
4. Practice good design
Some of the tips given in this section include stay simple, be consistent, and know your audience. These are important because they help the designer stay focused on the essential purpose for the final site: usability. Simplicity, consistency, and end user satisfaction are key elements in planning a good site.
5. Ingredients of a web site
- Web pages: my site will consist of 5-6 individual pages
- Web space: for the purposes of this project, I will use my USF web site to host the pages
- Domain name: at this point, a domain name is unnecessary
- Web design tools: I am currently looking into Kompozer and Adobe Dreamweaver
- Hyperlinks: Not only a requirement of the project, but an integral part of any website
- Extras: search engine listing, establishing forums, animations, audio and video
All of these factors contribute valuable knowledge to the planning process of building a site framework, and determining how to allocate information across a variety of pages. I am ready to get started, which is the next chapter!
Wednesday, May 14, 2008
Introduction
This is my weekly blog for the Summer 2008 Instructional Graphics course at USF. I will use it throughout the semester to discuss the topics and issues covered in class by my professor, texts, and classmates. I look forward to seeing the final result!
Subscribe to:
Posts (Atom)
