Monthly Archives: February 2013

Navigation and Introduction to Dreamweaver – Learning Activity 2.4 – Sitemap

“Draw up sitemaps from three of the websites previously worked with, earlier this week.”

Sitemap 1 – http://www.karmoygeddon.no

Karmøygeddon Sitemap

Sitemap 2 – http://www.harleydavidson.com

HarleyDavidson Sitemap

Sitemap 3 – http://www.wikipedia.org

Wiki Sitemap-Recovered

This was a pretty tedious task to be honest. I guess it’s easier when creating a website yourself, to create a sitemap in advance, and not like we did here.

Anyways – almost done for the week 🙂

Rock’n’Roll

-Marit

Advertisements

Navigation and Introduction to Dreamweaver – Learning Activity 2.3 Navigation and Content

“Based on learning activity 2.1 Research, please present different types of navigation.

* Which method is used for the user to navigate around the website?

  • Test the websites throughly.
  • Make a list of the result from the research, concerning the different types of navigation.

* Look at which subpages the website has put in their menu structure on the main page.

  • Does any of the subpages “repeat” themselves?
  • In which way does the subpages enhance the main purpose of the webpage? “

There are different types of navigation on a website, and we are focusing on four of them:

Direct navigation – when typing in related word in the address bar of a browser, adding .com, .no, .net etc. You’ll be directly navigated to the website related to the word you typed in.

Searchable navigation – many websites includes an internal search engine on their website. When using a search engine of such kind, you will only get a hit on a search related to the website you’re on.

Linear navigation – a method where the user navigates around the website in an order determined by the web developer.

Tab navigation – a hyperlinked navigation. This means that an image, text or an icon etc. that is linked to another page on the website or a different website on the internet.

Here’s my research of some of the websites from learning activity 2.1:

http://www.youtube.com – searchable navigation, direct navigation, tab navigation. Webpage seems to be built on a tab navigation, as all video clips are hyperlinked. By opening one subpage, you are well able to “hyperlink” your way to the next video clip.
The sidebar menu on the left is aimed directly at the user, so you basically navigate through your members area by clicking any of the choices in the menu.

http://www.foto.nodirect navigation, searchable navigation and tab navigation.
Logo is always placed on the same spot, no matter which subpage you are on.
Main menu is also highlighted when clicking on one of the option, but the website does not have any “bread-crumb” path.

http://www.listeverse.comdirect navigation, searchable navigation and tab navigation.
Logo is always placed in the same spot. No “bread-crumb” path.
Menu choice is always highlighted when clicked on.

http://www.karmoygeddon.nocontains direct navigation and tab navigation.
A couple of subpages are quite repeating, as some menu choices clicked on leads to hyperlinks for different bands that has or is going to play on a Karmøygeddon event.
Logo is always placed in the same spot.
Some hyperlinks linked to other websites.
Menu choice is also highlighted.
Subpages is definitely enhancing the “message” of the website, which tells you to buy tickets to the next show.

I haven’t gotten in to doing all the ten websites from the previous learning activity 2.1, as I’ve already written quite a lot about the navigation in that task already.

So that was my navigation research. Have a nice one!

Rock’n’Roll

-Marit

Navigation and Introduction to Dreamweaver – Learning Activity 2.2 – Building Blocks

“Pick out three websites from the previous learning activity.

  • Define each website’s elements and building blocks.
  • Create a wireframe of each of the three sites main page.
  • Name the building blocks.”

A bit of random naming of the blocks here, don’t know if I’ve got the hang on the technical terms quite yet, but here’s my go at the task:

Wireframe – http://www.karmoygeddon.no:

KarmøygeddonWireframe

Pretty simple website – only aiming to provide information to the viewer.

Wireframe – http://www.listeverse.com:

ListeverseWireframe

Several blocks containing links to specific lists, whether it’s recently added ones, “top ten” ones or the most popular ones.

Wireframe – http://www.matprat.no

MatpratWireframe

More elements than the two previous sites. Own bloc for memeber area of the site. And there’s alo two search engines on main page of the site.

That’s it for now…

Rock’n’Roll

-Marit

Navigation and Introduction to Dreamweaver – Learning Activity 2.1 Research – Websites

Start of a new week, and a new tattoo inked onto my body. So while I’m sitting here scratching like a mad cow, this was our first learning activity for the week:

“Find 10 separate websites, that are different in:

  • Contents – message sent to visitor.
  • Navigation – how you navigate yourself on, in and around on the website.
  • Structure and design – wireframe.
  • Justify the choice of each link you have found.”

1. http://www.h-avis.no
Content: Daily/weekly updates on regional news in my hometown, some domestic, and a couple of foreign news as well. Mainly aimed at the locals in town and in this region.
Navigation: Direct navigation by entering the websites address in the address bar of your browser. Searchable navigation with an embedded search engine on the site, and tab navigation – which is a hyperlink navigation.
Menu choices are also highlighted when clicked on.
Wireframe: Ad placed on the very top of the website. Logo is placed on top along with navigation tabs, and is placed there on every “undersite” as well. Main box on website is all the little boxes of news and ads that you can click on for the full text of an article, or more info on the ad placed there.
At the very bottom of the site, there is a box with various practical information, such as “contact us”.

2. http://www.matprat.no

Content: Website containing recipes for different types of food, nutritious advice, and practical cooking advises.
Navigation: Direct navigation, searchable navigation, tab navigation.
Menu choice is highlighted when clicked on, and there’s also a “breadcrumb path”, when you click yourself deeper into the site. It’s shown under the logo on each page.
Wireframe: Divided into three main parts. 1. Top with logo on left hand side, and main tabs centered. 2. Left side box with subcategories. 3. Box on right hand side with links to different parts of members site.

3. http://www.youtube.com

Content: A site for uploading, sharing and showing off video clips and short videos.
Navigation: Direct navigation, and searchable navigation.
Wireframe: Simple design, with logo always placed on your upper left corner, along with the search engine. A small menu on the left hand side with a couple of searchable topics.
The middle of main page is filled with examples of videos that are most popular, and videos the visitor might like according to previous search history on the site.

4. http://www.foto.no

Content: Norway’s biggest website for photography. Contains interviews, articles, artwork, forums, and members area.
Navigation:  Direct navigation, searchable navigation and tab navigation. Logo is always placed on your top left side, and highlighted menu choices.
Wireframe: Ad placed on the very top of site. Followed by a tab box with main categories.
Main box is filled with clickable links to articles and interviews recommended to read.

5. http://www.ebay.com

Content: Widely known around the world for being a bidding and selling websites, where everyone, as well as private and businesses, can sell new and used items of all kinds.
Navigation: Direct navigation, searchable navigation and tab navigation. Logo is always placed on your top left side, and highlighted menu choices.
On this website, we also find linear navigation, where the user or visitor navigates through the website in an order decided by the web developer.
Wireframe: Top box is the searchable engine. Left hand side contains the main category tabs. Main box contains recent purchases, member log in etc.

6. http://www.harleydavidson.com

Content: Information on Harley-Davidson products and bikes, where you can find your dealer, contacts, and news etc.
Navigation: Direct navigation and tab navigation. Main logo is not always displayed, and certainly not in the same place as on the main site. Menu choice is highlighted.
Wireframe: Top box is the tab menu – and the main box basically only contains a link to new products. You will have to click on the tab menu to choose any other topic.

7. http://www..wikipedia.org

Content: This is probably one of the most well-known Internet Encyclopedias in the whole world.
Navigation: Searchable navigation, and direct navigation. The page also contains a main menu when first entering the site, where you can choose the language of your liking.
Wireframe: Logo is always displayed on your left hand side. There’s also a box to the left with different tabs the user can click on. On your right hand side, there’s a box with different type of information for the search you recently did. Mid page contains the information on your search. A plain and simple site, as you would presume the user would want for an encyclopedia.

8. http://www.listverse.com

Content: Basically a website with loads of different “top ten” lists in all sorts of categories imaginable.
Navigation: Direct navigation, tab navigation and searchable navigation. Sites logo is always displayed in top box centered.
Wireframe: Top box is mainly clickable tabs to the main categories on the site. Right hand side contains recent and top lists. And the main centered box contains recently added lists as well.

9. http://www.karmoygeddon.no

Content: Contains information about the yearly metal festival ‘KARMØYGEDDON’, and  other single gigs the promoters puts on during each year. Also contains information on previous gigs and shows.
Navigation: Direct navigation and tab navigation. Logo is always placed as a top box on each page you click into.
Wireframe: Down from the logo, there’s a box with tabs to main categories on the page. Main box contains ads from up and coming shows, and bands that will be playing in the near future.

10. http://www.dragenshule.no

Content: This is an alternative webshop, where you can buy alternative clothes, decorative items, patches, hair and make-up products etc.
Navigation: Direct navigation, tab navigation, always keeps the logo in the same place on top of page. This is probably a WordPress page, or similar.
There also seems to be a describing title of all sub pages.
Wireframe: Top tabs is aimed directly at the buyer with information on the site, contact information, log in and sign up choices.
Left hand box presents the buyer with purchase categories, and purchase information.
Right hand box shows ads, and middle section box contains example of products + more ads.

So, there you go. A lot of time spent ogling websites. Yaaaawn!
Finito!

Rock’n’Roll

-Marit

Introduction to HTML and CSS – Learning Activity 1.3 CSS, Font and Colour

“Add font and colour to the index.html file already created:

  • Add font and colour to the header text elements, and the paragraph elements.
  • Test out the result in your browser.
  • Add a print screen of the CSS file, and how it all looks like in your browser.”

Here’s how my CSS file looks like:

CSSScrShot

And, this is how it looks like in my browser:

Finito CSS

Notepad has actually been pretty easy to use during these learning activities, however, it’s a bit dull to stare at for hours.
I mean, as notepad is pretty generic looking, letters and codes easily floats together, after a few hours in front of the screen. Suppose it’s pretty important to be organized when using notepad.

I have to admit, I wasn’t really concentrating on making this little “website” visually attractive. As I’ve never touched webdesign before, I was more concentrating on getting into the basics, and understanding my tasks.
But now, after being able to test out a few things, troubleshooting mistakes and reading loads, I’ll be able to concentrate more on the design and visual expression in the code.

Basically, as a designer, the sky is the limit when it comes to CSS and HTML.
There are so many codes, and tags that will enable you to create aesthetics and attractive websites. I suppose you will have to listen to the client, combined with a large portion of creativity when producing a website.

However, the subject is indeed extremely interesting. Hopefully, this will all go well 😉

Rock’n’Roll

-Marit

Introduction to HTML and CSS – Learning Activity 1.2 Head/Body

“Use the index.html file created in the previous learning activity:

  • Divide the content into head and body
  • Add a title to the website, and link a CSS file.”

So, here’s how this looks in notepad:

Head-Body

Aaaand, this is how it looks like in the browser:

PrntScrHeadBody

One more learning activity to go!

Introduction HTML and CSS – Learning activity 1.1 Index Page

Back in business!

After a good few months on maternity leave, I’m back.
So, fist subject on my curriculum; introduction to HTML and CSS – yikes!

“Use notepad to create a website called index.html with the following content:

  • Header text element
  • Paragraph text element
  • Image element
  •  Link to reflective journal

Choose which content the elements should contain, and test it in your browser”.

Here’s how the screenshot of my notepad looked like:

IndexScrshot

And this is how it looked like in my browser:

HTMLPrintScrn

The biggest technical challenge in this learning activity, was the image insertion.
Text was pretty easy to minimize and maximize, as it was well explained in the lessons received in our classroom.

However, after trying and failing with the image for a while, I finally realized I had misspelled “img src”. I actually wrote “img scr”.
Oh, the headache this little misspell caused.
Hehe – anyway, I should have spent a bit more time to study the details there. This was  obviously a very fixable thing, however lesson learned.
I’ll be more careful with the spellings in the codes from now on… 🙂

Next learning activity to be added soon.