Web Media: Website Material Thursday, Nov 24 2011

Leave a Response »

 

Web Media: HTML and CSS Site-Building – Part 05 Thursday, Oct 27 2011

For the first lesson after term break, we began by revised what we have learnt so far regarding HTML and CSS. This week will be the start of the true website building, as the pre-planning and the basic HTML and CSS practice has been completed.

Due to the majority of the class not having their main page fully designed, only a few students were able to work with their own clickable prototypes with DreamWeaver. Some of us simply watched the process and took down notes, and some borrowed other classmates’ designs for the time-being.

Knowing the overall process of converting your visual designs into working webpages before you start will make things easier to understand:

• Start with your visual design. It must be at exactly 100% size (i.e. no scaling). It must also be at 72 dpi.
• Print out your design and draw a div map over the top. This is where you decide on how you will build the HTML structure.
• Slice you design up into smaller pieces (files). Optimize each file so it has good quality but small file size.
• Using your div map to guide you, write your empty HTML structure.
• Begin writing the CSS structure, using the sliced images from step 3.
• Use a combination of HTML and CSS to create functionality such as navigation menus.
• Begin populating your HTML file with content – the text, images, and videos.
• Use this file as a template to create other webpages. Just remove the content and replace with the appropriate content for the new page. Remember to update links to CSS files and images, and to adjust menus.
• Test as you go.

We then moved on to creating what is called a Div Map. It is simply a layout of the web page cut into sections which are called div tags (short for division), and they are invisible containers which help separate the content within the HTML. Div tags can be assigned IDs and Classes for CSS use which can prove to be incredibly useful and much recommended for more specific customisation within the styling. By applying IDs or Classes to a Div tag, practically every form of customisation within the CSS is available.

After creating our Div Map, we went into Photoshop/Illustrator with our home page design and began to “slice” our designs. The guidelines for slicing the content in a web page design is as follows:

• all slices must be rectangular
• you only need to slice parts of your design that cannot be created via code (i.e. images and textures)
• All photos, logos, and decorative elements that can’t be made by code alone will have to be sliced.
• You do not need to slice text that will be created with HTML.
• You also don’t need to slice up areas of plain colour, as you can use the background-color command.
• Gradients should ideally be linear, instead of radial. This means you can take a small sample of the gradient and repeat it, thus saving precious bandwidth.
• You should optimize each of your slices individually, to get the best quality with the lowest file size.
• Slicing is the process of cutting one large image up into lots of little images.
• It helps to go through and rename the many new files you get after slicing to something more easily understandable.

Shortly after, we began creating the start of our final web page’s HTML. We discovered that indenting each Div which sits within another Div helps keep the HTML structure tidy and easier to keep track of, helped even further by the use of “comment” tags.

In HTML, the comment tags are structured  <!– like this –>

In CSS, the comment tags are structured /*like this*/

Comment tags are useful for organising and identifying where certain things are in an HTML or CSS document, while keeping the notes within the tags completely invisible to the internet browser.

For the remainder of the class, we learnt some Intermediate CSS techniques and applied them to our Div tags in our newly-made HTML document.

Leave a Response »

 

Web Media: HTML and CSS Site-Building – Part 04 Saturday, Oct 8 2011

This week we have been introduced to CSS, which is the second type of coding which works hand-in-hand with HTML to create a successful web page.

“CSS stands for Cascading Style Sheets, and it is a very simple form of code to write.

There are two basics components to writing CSS, first, you must label the item that will have the style applied to it (in the HTML file). Second, you need to write the rules that define that style (in the CSS file).”

Why do we use CSS?

“Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer in a web document. The main advantage of CSS over presentational HTML markup is that the styling can be kept entirely separate from the content. For example, it’s possible to store all the presentational styles for a 10,000-page web site in a single CSS file. CSS also provides far better control over presentation than do presentational element types in HTML.

By externalizing the presentation layer, CSS offers a number of significant benefits:

• All styling is kept in a limited number of style sheets. The positive impact this has on site maintenance can’t be overestimated—editing one style sheet is obviously more efficient than editing 10,000 HTML files!

• The overall saving in bandwidth is measurable. Since the style sheet is cached after the first request and can be reused for every page on the site, it doesn’t have to be downloaded with each web page. Removing all presentational markup from your web pages in favor of using CSS also reduces their size and bandwidth usage—by more than 50% in many documented cases. This benefits the site owner, through lower bandwidth and storage costs, as well as the site’s visitors, for whom the web pages load faster.

• The separation of content from presentation makes it easier for site owners to reuse the content for other purposes, such as RSS feeds or text-to-speech conversion.

• Separate styling rules can be used for different output media. We no longer need to create a special version of each page for printing—we can simply create a single style sheet that controls how every page on the site will be printed.”
• From: http://reference.sitepoint.com/css/css, by Tommy Olsson and Paul O’Brien

When one talks about the “style” of a CSS, they are referring to the look, position, attributes or visual effect of something.  As an example, the style of a CSS would include types and colours regarding fonts, the width and height of certain objects and parts of the page, margins and padding, positioning of the content on the page, extra visual effects such as drop shadowing and gradients, and generally how things look on the page. Practically every visual customisation is made within the CSS; the HTML will hold merely the content for the website for the websites that we will be making, mostly because it is much easier to control the customisations of a web page if the visual effects are kept within a CSS. Since multiple HTML files can reference the visual style that a single CSS contains, it makes changing an effect on a site much simpler and faster than changing each individual HTML file for an adjustment.

How to write basic CSS

• Open DreamWeaver
• Load your chosen HTML file.
• To create a new CSS file, go New à Choose CSS
• A blank CSS file will have appeared, save it!
• Make sure it is saved in the CSS folder within your website content. This makes it much easier to locate.

CSS Syntax

To keep a track of the changes of your webpage, open your HTML document in a web browser (make sure that it’s up to date, earlier versions of internet browsers often have difficulty loading certain CSS effects. Firefox and Chrome are recommended for previewing).

Three different types of selectors are used in CSS

• HTML Selectors – eg. <h1> <p> <em> These are automatically detected by all browsers.
• ID Selectors – eg. <div id=”name”>
• Class Selectors – eg. <div class=”name”>
• Both ID and Class Selectors are highly useful for more specific changes within the CSS document, and also help keep track of your effects much easier.

Leave a Response »

 

Web Media: HTML and CSS Site-Building – Part 03 Friday, Sep 30 2011

DreamWeaver Preferences for web design

• Open Adobe DreamWeaver
• Edit –> Preferences
• Check through each category and find out what you can change in the Preferences.
• In Code Hints, set the closing tags to “after typing the open tags “>”, and Enable code hints
• This will ensure a smoother and much easier web making process, as the program automatically creates a closing tag upon completing the opening tag, and with Code Hints enabled, hints and options will appear to aid in finishing the tag for you.

The entire website, including its contents, need to be kept in a single folder for each access, which will contain sub-folders for each main category of content, such as Images, Reference Materials/Research, Documents, Music, Videos, etc. A separate folder containing the CSS is strongly recommended and is generally labelled “CSS” for simplicity. The HTML files themselves are almost always located in the main folder rather than the sub-folders because it makes it a lot faster and simpler to link to them through the HTML and CSS.

Note: All files are to be named in entirely lowercase. Any spaces in the titles are to use “_” instead of a regular space. This is because the HTML and CSS sometimes has difficulty reading files with spaces and/or capital letters, so using lowercase letters and “_” for spaces means that there will be no issues regarding the file names.

Setting up a new HTML file in DreamWeaver

• File –> New –> Choose HTML file, XTML 1.0 Transitional.
• There are several varieties of HTML that can be used, but XTML 1.0 Transitional is a decent type to work with for learning purposes as it is stable and is accepted in the majority of internet browsers.

For the remainder of this week’s lesson, we learnt the definition of HTML (Hyper Text Markup Language) and how it is used and applied in web design. HTML is composed of three different parts; <the opening tag>, the content, <and the closing tag />. Opening tags hold the code within greater-than and less-than symbols, and closing tags contain the same code and symbols, with a “/” included at the end to indicate that the tag is finishing. The content sits inside of these tags.

The main exercise in this week’s lesson involved learning the different types of basic tags (which can be used in HTML), and the purpose of “container” tags (which hold all of the content in certain places of the HTML code). We applied some basic HTML tags to a pre-made website created by our tutor to test out and get used to using HTML. During this exercise, we also learnt how to apply images into the HTML content using the <img src=”content” /> tags and also how to link other HTML pages together using <a href=”page.html”> </a> tags.

Leave a Response »

 

Web Media: HTML and CSS Site-Building – Part 02 Saturday, Sep 24 2011

This week we began focusing on the visual design of our website, starting off with the home page, as that is the core page of any website. For starters we investigated the variables which could affect an individual viewer to our websites, in particular focusing on what types of web browsers are available for people and what kind of screen resolutions are the most commonly used for owners’ computers.

As well as those two potential problems, there is also the issue of fonts. Not every household computer has certain fonts installed, which could pose a problem if a lesser-known font is used in a website. It will cause the website’s font to change to a particular default and may cause the website to lose visual impact on that particular computer viewing it. This is why there are “web safe” fonts available.

“Web safe” fonts are fonts that are the most commonly used on websites, and are the most safe to use as almost all computers come with them already installed. They are a very important guideline for website-building as they are nearly fail-safe to use and are useful to guarantee that your site will be viewed in the way intended.

Other ways that websites can be convenient and effective include simple and familiar web page layouts. There are often patterns of certain layouts which show on many websites; they all share a similar basic layout and help with ensuring that viewers will know what is where on the pages. Creating a unique look and layout for a website is good, but there is a chance that it could distract or confuse the viewer and “turn them off”, causing them to close the browser without giving your web page a decent look-through.

After familiarising ourselves with the different issues and tips regarding the basics of web page layouts, we then began to work on our concept and visual developments, which will later become our final designs that will be used for the final product. Working with the site map which we had drafted/finished the week prior, we created our own wireframes. Wireframes, also known as schematics, are simple representations to show the basic layouts of a web page. The shapes used in wireframes are often simple, like squares and rectangles, which help simplify the basic content in the site (like pictures, etc. replaced by rectangles/squares).

We sketched our wireframes simply with the use of a pencil and ruler. If one wants a tidier approach, digital vector software such as Illustrator would be a decent option.

Leave a Response »

 

Web Media: HTML and CSS Site-Building – Part 01 Saturday, Sep 17 2011

This week we began our second project of this class, which is a personal online portfolio website made from scratch using a combination of HTML and CSS that we will be learning in class over the next few weeks. This will give us a “stable and functional methodology for making websites” which the skills learnt may be able to be applied in future projects or jobs.

We spent a portion of time during class studying the brief and figuring out what sort of early plans for out websites could potentially be. From the minute-go I had the idea in my head that I wanted to use my website to introduce and/or advertise the original story that I have been working on for the past few years, so for the lesson I based all of my pre-planning on working with that idea.

Today’s lesson also involved a time management plan. We recorded, sketched and planned how we are going to be spending the remainder of the semester working on our website.

Our next exercise for this week’s lesson was figuring out and defining what exactly we want the purpose of our website to be. It is the most important information to have, since a website is practically useless without a cause or reason for it being on the web. I brainstormed a small amount of ideas but mostly focused on my original plan of working with my original story, but for the most part I want to use my website to show people a bit more about me, how I work, and the things I want to do.

After that we worked with some extra exercises regarding the structure of content, how we want the pages to be laid out (our first steps and planning for what will eventually become our site maps and wireframing, so the initial plans we have been doing this week will most likely evolve or change entirely), and we learnt what the differences between content, structure, and formatting are.

Content is the information that is displayed on a website, which can vary with each site on the web. The most common forms of content are text, images, PDFs, music and videos, but other types of content are found in websites too. Content is almost entirely placed in a website through HTML, but background images are usually put into the CSS.

Structure is the skeletal layout of a website, and is created within the HTML code. It is the support mechanism for holding the content and formatting with the use of tags such as <div> </div>.

Formatting is the theme or skin of a website, and is created with CSS rather than HTML so it can be changed and edited a lot easier. CSS also has many more options for structuring a website whereas HTML is very limited to what can be done. Things a format contains can vary from each site but are usually where the fonts, colours, and layouts of the website are decided.

Leave a Response »

 

Web Media: Assignment 05 – Search Engine Optimization Saturday, Sep 3 2011

This week we took a closer look into Search Engines and how they operate.

Search Engines collect keywords from websites using “spiders” and they are stored and presented when people type that particular keyword in the search bar. The amount of times a website is visited and linked from other sites, as well as the validity of the information on the page determine how high in the search results it is placed; the most relevant and well-informed sites with higher pageviews placed at the top.

Most of this week’s lesson involved investigating SEO (Search Engine Optimisation), which means in simpler terms adjusting your website to make it easier for Search Engines to find, index and read. We went onto Google and typed our own usernames and keywords that we have been using in our blogs to see how high in the search results we were.

I discovered that typing the exact username of my WordPress blog gave much more specific results, as only I use this particular username. Yet, if I typed in the keywords that I have been using in my blog, there are far too many other matches for mine to appear anywhere near the first ten pages of Google.

We looked into the process of SEO to make Google’s search results better for our own pages. We came up with a list of different things we could do to improve the rank of our blogs in a Google search:

• Have at least 100 words per page. The more words available, the more keywords that become relevant to your blog.
• For most instances, good grammar and spelling helps with your place in the search, as misspelt words of uncommonly-searched-for keywords will make it difficult for your blog to appear in the results.
• Quality of the information is vital, as Search Engines favour results that are trustworthy and helpful to the searcher.
• Use your keywords in titles and during the main post of your blog entries. The more often the same keyword shows up on your page, the better chance you have of becoming higher in the search results.
• Also use keywords in the sidebars of your blog, as well as captions for images. Google and other Search Engines can’t recieve keywords for images and videos, so adding some captions with the keywords help the Search Engine to find it.
• Build up your incoming traffic by sharing links; link out to a few quality websites as well as some others related to your subjects. Try to get other sites (especially quality sites with higher rankings) to place your own link on their pages, as traffic from those sites will flow to yours as well.
• Link up all of your social media sites with your website also, as traffic from the social media sites will flow to your blog or web page also.
• Make your page easy to navigate. The information could be valid and helpful, but a poorly-designed website will drive away new viewers.

Blogging websites have an advantage as the main site takes care of the technical aspects of SEO for you.

For the remainder of the class, we spent time working on which keywords to include more of in our blog posts. We used Google’s Keyword Tool to help find keywords related to our blog subjects which contained many monthly searches, but were lower in competition for search results. We then began to apply what we found into our blogs.

Leave a Response »

 

Web Media: Assignment 04 – Tutorial Friday, Aug 26 2011

This week, we were assigned the task of creating a tutorial involving something that we have previous learnt in our Web Media class. Tutorials are some of the most useful pieces of information to find on the web, and can help with drawing traffic to your blog. We needed to consider several things for the creation of our tutorial to help it become more useful:

• Who will our target audience be? What kind of age group are we wanting to make this tutorial for, and what experience level will it be?
• What particular purpose will this tutorial be for? Proffessional reasons or more directed towards casual hobbies and interests?
  How will it be laid out and worded to make it more interesting and easy to read?

I chose to create a somewhat-detailed but easy-to-understand tutorial about setting up a WordPress account. My particular target audience for this tutorial is people 20 years and over who are of beginner experience with navigating web pages and account setups. I made sure to include accurate screenshots to walk readers through the tutorial and to help them spot the particular area on their own page.

I also provided outside links for extra information if the readers want to find out more about particular information.

I learnt that creating tutorials is much more time-consuming and difficult than they seem, and that a lot of thought is needed to be able to present it in a way that attracts the target audience. The information also needs to be reliable and accurate, as well as easy to understand so the readers won’t get confused. Layout is a very important part of a tutorial’s appeal; it needs to be set up in a way that the target audience will find it easy to read and follow.

I found it rather fun in the end, and I’m pleased with my result. (:

Leave a Response »

 

How to Create a WordPress Account for Blogging Thursday, Aug 25 2011

This is a quick and easy-to-understand tutorial for setting up a WordPress account for blogging about hobbies and personal interests. (:

• Access WordPress’s main page, which is http://wordpress.com. The front page should look like this, but may look a little different depending on which Internet browser you are using (ie. Internet Explorer, Mozilla Forefox, Google Chrome, etc.)
• 
• See that big, orange button? Click it! It will take you to a new page that will help you get started with setting up a username.
• You should now be on a page that looks similar to this. Here, you will be asked to fill in some spaces that will help you create a username on WordPress. Everything is laid out simple and easy on this page so you won’t miss anything out
• 
• Blog Address:
  This is where you choose your URL (short for Uniform Resource Locator. If you’d like more information, click here), which in easy terms is the address of your blog. Your URL can be anything you want it to be, as long as it isn’t already in use by somebody else. I recommend for you to choose a blog name that fits the purpose of your blog. Ask yourself, “What things do I want to share in my blog?”
• Note: Be sure to click the “No thanks, I’ll use the free wordpress.com address” before continuing further since you are creating a blog for personal and casual reasons. Paying money for a blog isn’t necessary; that option is directed towards more proffessional purposes. 
• Username:
  This is the name of your account. By default it will be the name of your blog address, but you can change it to something else if you’d prefer. If you are unsure of what you would like to use as your username, you don’t have to worry about it right now as you can change it at a later time through your account settings.
• 
• Password:
  You will use this to access your account. Passwords are used for security so only those who know it can access the account to make changes. Your password can be anything you’d like it to be, but make sure you will be able to remember it! The longer the password, the stronger it is. If you ever forget your password, WordPress can recover it for you.
• 
• Email Address and Language Setting:
  Don’t have an email address? Make one now by visiting one of these sites:
  http://nz.yahoo.com
  http://hotmail.com
  http://gmail.com
  Type your email in the box provided. Make sure that the language set for your blog posts is English or a language that you can fluently read. Once WordPress recognises that everything is ok, the “Sign up” button will turn orange and you will be able to click it. 
• 
• And you’re done! Now, you should be on a page that looks like this, which will tell you that an email has been sent to your email address. You will need to access your email account and find the email sent by WordPress (if it isn’t in your Inbox, it may be in your Junk folder. Watch out for that), and click the link contained in the email to finally make your account 100% useable.

  Now your WordPress account is complete and you can start working on customising your blog. (:

Leave a Response »

 

Web Media: Assignment 03 – Working With Widgets Thursday, Aug 25 2011

This week we took a look at extra ways of customising our WordPress blogs, in particular we looked into “Widgets”. Widgets are extra “blocks” of functionality that can be included in a blog to make it more interesting and interactive. We learnt that:

• Widgets are seperate from the main contents of a blog, so they can be changed around, moved, edited or deleted without interfering with the blog’s posts.
• They need to be placed somewhere that they can be seen, such as Widget Areas or Sidebars. These vary in numbers depending on which theme is being used on a blog. For example, my current theme only has a Sidebar, so every Widget I add will only appear on my Sidebar.

For further information on Widgets, click here: http://en.support.wordpress.com/widgets

As I had previously included Widgets into my blog the week before, I worked on which extra Widgets I could include and how I could set them on my page. I already had a Blogroll Widget that I included on my blog last week, as well as an Archives and Categories Widget to make it easier to track my older posts. This week I added several more Widgets, including a Search Bar, Recent Posts, Twitter Updates and a Widget for a website called Delicious.com.

www.delicious.com is a place to store and share Favourites and Bookmarks, and can also be used as a Widget for WordPress. My current Bookmarks in my Delicious Widget are of various art blogs by artists I admire. All save one are Japanese currently, but eventually I will be adding Bookmarks of English-posting artists and their blogs.

I also chose to include a Widget that allows extra text or HTML, which I placed below my Profile Picture; it simply explains what I intend my blog to be about as well as where I am currently studying.

Here are some WordPress-written help and support links of some social-networking sites that are compatiable with the Widget option:
http://en.support.wordpress.com/widgets/delicious-widget
http://en.support.wordpress.com/widgets/twitter-widget
http://en.support.wordpress.com/widgets/flickr-widget
http://en.support.wordpress.com/facebook-badge

Leave a Response »