Week 6 Learning

In this week I have learned many new things that motivate me a lot more to learn about creating a websites. There are so many interesting things that we can put into our websites and one of them is to put a Google calendar into a website for events. A calendar will show all the upcoming events, time and date and it will give a user a good understanding of all the events. Having a Google calendar into a website is not so hard at all. All I had to do was to create a Google account and then under the calendar option choose create a new calendar.  Into a new calendar I have to choose a calendar title, date, time, and a place and then our calendar is created. It gave me an option to customize the calendar look and I was able to change the background color and also the event information color. After everything is done and added to the calendar at the bottom of the page there is an embed option that I could get a code for my html page. I added the code to my desire organization page and was able to see the calendar in my page. The other thing I have learned in this week was making a website in word press. Creating a website in the word press is much easier than creating a website by hand coding and beginning from scratch. I am able to do the same thing in word press that I can do in html but in much easier way. Word press to me is much more fun and interesting and I loved it more.

Week 5 Class Learning

This week’s class was one of the most interesting classes and it was really important to me. Every website needs to have a contact form and is one of the things that we can’t really go without that.  Usually anyone who comes to a website always looks for contact information to make sure they can contact someone if there is a problem or they need something. In this week class I learned how to make a contact form for a website and how to add all kind of information in there. The code below is an example of a simple contact code for a website.

            <form name ="Registration" action ="confirmation.html" method ="post">

            First Name : <input type ="text" name = "f_name"/> <br />

            Last Name : <input type ="text" name = "l_name"/><br />

            Gender: <input type = "radio" name = "gender" value = "female"/> Female <input type = "radio" name = "gender" value = "male"/> Male <br />

            Address : <input type ="text" name = "address" size = "40"/> <br />

            City: <input type ="text" name = "city" size = "15"/>

            State:

            <select name = "state">

                        <option>Georgia</option>

                        <option>New York</option>

            </select>

            zip  : <input type ="text" name = "zip" size = "5"/> <br />

            <h3>Comments</h3>

            <textarea name="comments" rows ="6" cols = "30">

            </textarea> <br />

            <input type="submit" value = "submit">

</form>

In addition of making a form I learned how I can upload a video into my website or webpage. For uploading a video from my camera there is a couple programs that I have to use, but to be able to get a code and be able to upload it I have to use a program called Adobe Media Encoder CS5.5. I always wanted to know how I can share a YouTube video into my page and I surprisingly found out that it’s not hard at all. For uploading a video  from other sources into my webpage all I have to do is to click on the share button and then below the share click on Embed and copy the code below it and post it to my code area for a webpage. This is simple enough to have a video on a webpage from another video source. These two interactive media were really helpful to help me achieve what I wanted to in my organization website.

Important highlights of chapters 7-14 and what I have learned!

By reading those chapters I got a good understanding of what are a cascading sheet and all different changes that I can add to a cascading sheet.

CSS (Cascading style sheets) defines the appearance. A style sheets is simply a text file that contains one or more rules that determine through properties and values- how certain elements in a webpage should be displayed.

Each style rule in a style sheet has two main parts: the selector, which determines which elements are affected, and the declaration block, made up of one or more property/value pairs (each constitutes a declaration)

To add comments to style rules:

1. In your style sheet, type /* to begin your comment.

2. Type the comment.

3. Type */ to signal the end of the comment.

An em is roughly equal to the element’s font size, so 2em would mean “twice the font size.”

I can construct my own color by specifying its amount of red, green, and blue (hence the name RGB).

I can make style sheet with three methods: external style sheets (the preferred choice), embedded style sheets, and inline styles (the least desirable).

To create an external style sheet:

1. Create a new text document in your text editor of choice.

2. Define the style rules for your Web pages

3. Save the document in a text-only format in the desired directory document with the extension .css to designate it as a Cascading Style Sheet.

To link an external style sheet:

1. Type <link rel="stylesheet" in the head section of each HTML page.

2. Type a space and then href="url.css", where url.css is the name of my CSS style sheet.

3. Type a space and the final />.

An embedded style sheet is the second way to apply CSS to a page. It lets me set the styles directly in the HTML document that I want to affect (typically it goes in the head)

To designate media specific style sheets:

1. Add media="output" to the link or style start tags, where output is one or more of the following: print, screen, or all

2. Alternatively, use the @media at-rule in your style sheet

To select elements to format based on their class:

1. Type. (a period).

2. with no space, type classname, where classname identifies the class to which you’d like to apply the styles.

To select elements to format based on their id:

1. Type #

2. With no intervening space, type id, where id uniquely identifies the element to which I’d like to apply the styles.

Selecting Part of an Element:

To select the first line or first letter of an element:

1. Type element, where element is the selector for the element whose first line I’d like to format.

2. Type  :first-line to select the entire first line of the element.

EX: p:first-line {

                                Color: red;

}

To select links to format based on their state:

1. Type a (since a is the name of the element for links).

2. Type : (a colon).

3. Type link to change the appearance of links that haven’t yet been or aren’t currently being activated or pointed at. Or type visited to change links that the visitor has already activated.

Or type focus if the link is selected via the keyboard and is ready to be activated.

Or type hover to change the appearance of links when pointed to.

Or type active to change the appearance of links when activated.

To apply styles to groups of elements:

1. Type selector1, where selector1 is the name of the first element that should be affected by the style rule.

2. Type , (a comma).

3. Type selector2, where selector2 is the next tag that should be affected by the style rule.

To set the font family:

After the desired selector in your style sheet, type font-family: name, where name is your first choice of font.

To create italics:

1.     Type font-style:  2. after the colon (:), type italic for italic text

To apply bold formatting:

1.     Type font-weight: 2. Type bold to give an average bold weight to the text.

To mandate a specific font size:

1. Type font-size: 2. Type a specific size after the colon (:), such as 13px. Or use a keyword to specify the size: xx-small, x-small, small, medium, large, x-large, or xx-large.

To set the line height:

1.     Type line-height: 2. Type n, where n is a number that will be multiplied by the element’s font size to obtain the desired line height.

To change the text’s background:

1. Type background:

2. Type transparent or color, where color is a color name

3. If desired, type url(image.gif) to use an image for the background, where image.gif is the path and file name of the image relative to the location of the style sheet.

If desired, type repeat to tile the image both horizontally and vertically, or repeat-x to tile the image only horizontally, or repeat-y to tile the image only vertically, or no-repeat to not tile the image.

To specify tracking:

Type word-spacing: length, where length is a number with units, as in 0.4em or 5px.

To add indents:

Type text-indent: length, where length is a number with units, as in 1.5em or 18px.

To set white space properties:

1. Type white-space:

2. Type pre to have browsers display all the spaces and returns in the original text. Or type nowrap to treat all spaces as non-breaking. Or type normal to treat white space as usual.

To align text:

1. Type text-align:

2. Type left to align the text to the left. Or type right to align the text to the right. Or type center to center the text in the middle of the screen. Or types justify to align the text on both the right and the left.

To change the text case:

1. Type text-transform:

2. Type capitalize after the colon (:) to put the first character of each word in uppercase.

Or type uppercase to change all the letters to uppercase. Or type lowercase to change all the letters to lowercase.

To use a small caps font:

Type font-variant: small-caps.

To decorate text:

1. Type text-decoration:

2. Type underline after the colon (:) to underline text. Or type overline for a line above the text.

Or type line-through to strike out the text.

To use a background image:

1. Type background-image:

2. Then type url(image.png), where image.png is the path and name of the image that should be used for the background. Or type none to use no image at all, as in background-image: none;

To wrap text around elements:

1.     Type float:  2. Type left  or right

To position elements absolutely:

1. Type position: absolute;  2. type top, right, bottom, or left. Then type : v, where v is expressed as the desired distance that you want to offset the element from its ancestor (10px or 2em, for example)

3. If desired, add position: relative

To specify how elements should be displayed:

1.  Type display:

2. Type block to display the element as block-level , Or type inline to display the element as inline , Or type inline-block to display the element as inline but with block-level characteristics, meaning you can also assign the element properties, such as width, height, margin, and padding, on all four sides.

My organization project plan, analysis and information related to Usability Reading Assignment.

The project scope identifies what needs to be accomplished for the project to be considered complete. When discussing an organization scope, it’s important to define the below information for my organizations website:

·         What product is being developed?  Natural home remedies for skin and body.

·         What information is going to be covered? Will it feature a particular topic or is it for a particular audience?  All directions and steps for how to make those natural home remedies and their benefits.

·         What is the size of the product (i.e. how many pages will the site contain)? It will contain four pages.

·         Are you creating a website for an entire agency or organization? Is the site for part of that agency or organization? I’m creating a website for an entire agency.

·         What amount of research do you intend to pursue? Is there time built in for incremental adjustments based on those findings. The amount of time that I’m going to do a research is 72 hours.

User / Task Analysis Sample Questions:

Describe the organization: Is it a community, e.g. slashdot.org, a business, a non-profit group, etc. What are its goals and objectives and what services does it provide.

It is a nonprofit organization. It’s for people wellbeing that concentrates on home remedy skin care for all types of skin. The goal is to make people live longer and healthier and feel good about who they are and their skins. 

 The objective is to save a lot more money and don’t be afraid of not wasting their money. Products sold in markets are increasingly becoming more expensive; the prices of skin care products make it difficult for average people to buy the best products out there in the market.  With these home remedies people are able to make any kind of home remedies they want without spending a lot of money and time. In addition these natural remedies have an advantage since they do not produce any harmful side effects.

Describe the projected user community. What are their demographics: age, sex, education levels, computer literacy, interests, etc.

It’s for all ages, female and male are able to use these home remedies skin care products, it had to do nothing with an education level, as long as they know how to use an internet and read they should be able to use this website and learn many new home remedies.

What are the users trying to learn and/or accomplish at the web site?

What are their goals and objectives? How will they accomplish these?

What tasks do they have and what actions will they take to accomplish these?

The users are trying to learn all different kind of home remedies skin care products. They will accomplish these goals by making and trying those home remedies and will see the benefits and changes.

Examples of Good & Bad Web Designs!

Example of two good websites design:

1. http://foodsense.is/

The site is free from irrelevant, unnecessary and distracting information. Information’s are presented in a simple, natural and logical order. Also, the site requires minimal scrolling and clicking. It has all wonderfully realistic detailed photo displays that make me love this website. The careful attention to layout details, visual design, text, and photos are enough to make me love this website. Visual design in this website is perfect. It has good use of color and meaningful graphics. Everything in this website has been well organized and doesn't require lots of research. It’s easy to find and locate everything. The information’s are clear and users can complete common tasks quickly.

2. http://www.starbucks.com/

The website is easy to navigate no matter how you access it. The website will work on all Internets accessible devices. The Starbucks style guide defines their responsive grid framework, regions, blocks, and more. Information is presented in a simple and clear way. Everything is easy to understand and it’s not time consuming. They can navigate easily to each part of the site that they want. The user does not need to enter the same information more than once. Users can load their Starbucks cards anytime without going through trouble. Meaningful labels, effective background colors and appropriate use of borders and white space help users identify a set of items. They have used a high quality product images which make their website more interesting and it also increase the visual design.

Example of two bad websites designs:

1. http://www2.zmovie.tv/

Every time a link is clicked, a full page ad pops up, making navigation frustrating. Flash based menus are too concerned with style (and not enough with ease of navigation) and they can be slow and unresponsive. The search option doesn't work all the time and sometimes it takes so much time to load the page. When watching movies it stops every couple seconds and it comes back up again. The visual design and layout all together are not bad but it can be much better.

2. http://www.alasu.edu/index.aspx

The front page menu is fairly small and hard to see and pop up menus are annoying. It takes one minute for the page to load completely. The scrolling news items don’t seem to be complete. The background color is black and is hard to concentrate on the page. The color combinations of text and background make the text hard to read. It doesn't have any white color in the background and also, it has a really distracting background.

What I have learn and need to remember from chapters 1-6!

HTML is used to define content’s meaning, and CSS is used to define how content and Webpage will look.HTML has three principal markup components: elements, attributes, and values.

Elements are like little labels that describe the different parts of a Web page.

Attributes contain information about the content in the document, as opposed to being content itself.

Uniform Resource Locator, or URL, It contains information about where a file is and what a browser should do with it. The first part of the URL is called the scheme.  The second part of the URL is the name of the server where the file is located, followed by the path that leads to the file.

To start an HTML5 page:

1. Type <!DOCTYPE html>

2. Type <html lang="language-code">, where language-code is the language code that matches the default language of page’s content

3. Type <head> to begin the document head of page.

4. Type <meta charset="UTF-8" /> to declare the character encoding of your document as UTF-8.

5. Type <title></title>. This will contain a page’s title.

6. Type </head> to end the document head of page.

7. Type <body> to start the body of my page. This is where the content will go (eventually).

8. Leave a few blank lines for creating a page content

9. Type </body> to end the body.

10. Type </html> to end my page

The document head is where I define the title of page.

The body element encloses my page’s content, including text, images, forms, and anything else.

Creating Headings

HTML provides six heading levels for establishing the hierarchy of information in pages. Mark up each heading with one of the h1–h6 elements, where h1 is a top-level heading, h2 is a subheading of an h1, and h3 is a subheading of an h2.

To group two or more headings:

1. Type <hgroup>.

2. Type <hn>, where n is a number from 1 to 6, depending on the level of importance of the heading that I want to create.

3. Type the contents of the header.

4. Type </hn> where n is the same number used in step 2.

5. Repeat steps 2 through 4 for as many headings as I want to be part of the hgroup.

6. Type </hgroup>.

To designate a group of links as important navigation:

1. Type <nav>.

2. Type list of links structured as a ul (unordered list) unless the order of the links is significant, in which case should structure them as an ol (ordered list).

3. Type </nav>.

The article element represents a self-contained composition in a document, page, application, or site.

To create an article:

1. Type <article>.

2. Type the article’s contents, which could include any number of elements, such as paragraphs, lists, audio, video, images, figures, and more. 3. Type </article>.

To define a section:

1. Type <section>.

2. Type the section’s contents, which could include any number of elements, such as paragraphs, lists, audio, video,images, figures, and more.

3. Type </section>.

To add a comment to HTML page:

1. In your HTML document, where I wish to insert a comment, type <!--.

2. Type the comments.

3. Type --> to complete the commented text.

To begin a new paragraph:

1. Type <p>.

2. Type the contents of the new paragraph.

3. Type </p> to end the paragraph.

If want to provide author contact information for the page:

2. Type <address>.

3. Type the author’s email address, a link to a page with contact information, and so on.

4. Type </address>.

The date time Format:  YYYY-MM-DDThh:mm:ss

To mark important text: <strong>

To emphasize text: <em>

To cite a reference: <cite>

To quote a short text: <q>

To highlight a text: <mark>

To mark the defining of a term:

1. Type <dfn>.

2. Type the term you wish to define.

3. Type </dfn>.

To mark an edit involving newly inserted text:

1. Type <ins>.

2. Type the new content.

3. Type </ins>.

To mark an edit involving deleted text:

1. Place the cursor before the text or element that wish to mark as deleted.

2. Type <del>.

3. Place the cursor after the text or element that wish to mark as deleted.

4. Type </del>.

To mark text that is no longer accurate or relevant: <s>

To specify fine print:

1. Type <small>.

2. Type the text that represents a legal disclaimer, note, attribution, and so on.

3. Type </small>.

To insert line or break: <br>

Meter: measurement

6factors to remember when create a webpage: Format, color, size and resolution, speed, transparency and resolution.

To insert an image on a page:

1. Place the cursor in the HTML code where I want the image to appear.

2. Type <img src="image.url", where image.url indicates the location of the image file on the server.

3. Type a space and then the final />.

To offer alternate text when images don’t appear:

1. Within the img tag, after the src attribute and value, type alt=".

2. Type the text that should appear if, for some reason, the image itself does not

3. Type ".

A link has 2 main parts: the destination and the link.

To create a link to an anchor:

1. Type <a href="#anchor-name">, where anchor-name is the value of the destination’s id attribute create an anchor”).

2. Type the label text, that is, the text that is highlighted (usually blue and underlined by default) and that when activated will take the user to the section referenced in step 1.

3. Type </a> to complete the definition of the link.