I will walk around and speak to students and assist.
Make sure to upload it tothis link on MyKangan before the class is over. Upload complete and incomplete works. You can always add to it and re-upload your work.
ICAWEB424A Evaluate and Select a Web Hosting Service
Last Week
Last week we discussed aspects of social networking and how we relate to it. Let us look at the class discussion in the Forum on MyKangan. (The link requires for you to be signed into MyKangan).
Some of the discussion points and evaluations:
Facebook
How interactive is the site?The site is very interactive as a user can communicate with others through many ways (e.g messaging, chat, comments, statuses, posts, sharing media) 9/10
How intuitive is the navigation? Facebook isnt very inituitive, especially for beginners new users, there isnt really much of a tutorial on how to connect with friends, upload images, posts, etc. And the navigation is a little bit hard to use. 6/10
How responsive is the site (speed)? Facebook loads very fast on a desktop/laptop but i find it tends to be slow and laggy on a smart phone and can take awhile to load/refresh. 7/10
Advertisments: are there frequent ads, pop-ups or spam? The ads are all interesting to the user and related to a user’s “likes” (which could be books, movies, games, etc). 7/10
Visuals, layout and graphics: Facebook has a boring blue and white colour scheme, although the layout may be modern and clean it isnt very appealing, its too simple and boring. The website is very text based (especially if you have a lot of “friends” that post alot of statuses, etc), but it does have some images if someone has uploaded them. 4/10
How interactive is the site? Facebook is very interactive when it comes to interacting with other users. You can engage them in different ways from chatting to posting on their ‘wall’. I find the wall feature a bit corny and there is no wall anyway, so it is just a page in a text editing software. The fact that you can communicate with others, post songs, documents, videos, photos, graphics and links is excellent. Interactivity:9/10
How intuitive is the site? Facebook is not very intuitive. When you are new to Facebook you do not quite know what to do. It is rather boring to look at and you cannot understand the navigation easily. You get better at it through experience. I would rate it: 5/10
How responsive is the site? It is pretty fast. Mostly happy: 9/10
Advertisements? I do not like ads, I hate pop-ups and that goes even more for spam. Facebook is good in regards to ads, their ads are targeted and generally of interest to me.8/10
Visuals? What visuals? It looks like a text editor! Very boring in layout, in use of images and in colours: 2/10
Federico’s verdict: 6.7/10!
Linked In
Linked In is not very interactive because the site is now dated and the only interactions are when you email someone or they contact you. The topics of interest are not very regular and there is not alot of activity on a daily basis. 6/10
The navigation is also dated and like many SNS sites it takes time to navigate around the site to get used to it. 5/10
Linked In site speed is fast and there is not a page load time problem. 8/10
Linked In doesn’t have ads although I have noticed that they are promoting ads like facebook style ads to appear in the near future. All members have the ability to advertise their own business. 3/10
The visuals and graphics of Linked In are also dated and in need of an upgrade. You cannot edit your own images to how you want them to look and the whole page layout is boring. 4/10
On Linked In you cannot search for a person unless you are logged in. This makes it good for privacy reasons although if you want to use the paid version you can see who has been searching for you which seems to contradict the privacy aspects of Linked In. 5/10
Linked In is 80% text based and 20% images. 2/10
Paul’s verdict: 33/70!
Social Web in HTML
We will look at ways to include content in a Social Networking website and how to incorporate content from your website on another site.
You can use HTML to embed sound, video, websites and other objects.
Iframe
Iframe is a command that allows you to embed a website or a video into a frame. Example for code:
We will read through this task together please click on the link to download the file. Follow the in-class discussion and make sure that you understand each question or ask the teacher in the presentation!
We will commence Dreamweaver training. We will use the video tutorials provided on Adobe TV’s Webdesign Channel, but I would like you to open this online PDF to get you started: A Beginner’s Cookbook to Dreamweaver.
Note: Before you view ‘Defining a new Site’ create a folder with the name dw website and subfolder by the names: assets, CSS, images, notes, scripts and video.
Listening to your customers is an integral aspect of customer service. Image: Federico Viola
To be able to provide good customer service you need to know what the needs of your customers are.
This ability to understand is central to customer service and shows how customer service should commence with and ear rather than a mouth. Listen to your customers!So, let us have a look at customers.
Customers
Industries vary in customers and customer interaction. Some industries can be quite casual and friendly while other industries may have a more professional or even reserved level of contact. Your local hairdresser or many cafes are relaxed in the way they interact with clients.
Below is a list of customer groups. Try to relate these groups to multimedia design. So, brainstorm what these clients may be for a multimedia designer. I will post the brainstorm from class.
Clients
‘Purchasers of services’
Suppliers of goods and services
Contractors providing goods and services
Members of the general public who make contact with the organisation, such as prospective purchasers of services
Potential funding bodies
Co‑workers, peers and fellow frontline managers
Board members
Supervisors
Customer Needs
Let us look at customer needs. Customer needs can be looked at in a context. They may be related to:
Accuracy of information
Advice or general information
Complaints
Fairness/politeness
Further information
Making an appointment
Prices/value
Purchasing organisation’s products and services
Returning organisation’s products and services
Specific information.
Write down a context this may happen in, a location or point of contact (online, in a shop in person).
Please create examples of customer needs attached to each. Example: Complaints – A customer wants to be listened to , wants to reach a certain outcome and a customer would like an apology or explanation.
If you look at the diagram above you can see that customer needs can be classified further into value needs, psychological needs and performance needs.
Once you understand the customer needs of your target audience you will be able to respond to these.
Analysing Your Customers
What options do you have as a business owner or service provider to learn about the needs of your target audience? Below are some suggestions on how to receive the information:
customer feedback form
customer satisfaction surveys
quality assurance data
conducting interviews
making recommendations
obtaining management decisions
questioning and asking directly
seeking feedback to confirm understanding
summarising and paraphrasing.
A multimedia business can, as part of their quality control, make a feedback question or survey a recommended procedure for their staff. ‘Before a project is complete you need to ask the client for specific feedback.’
See my comment at the bottom of every post as another example.
Customer Service Standards
A business needs to plan to meet customer requirements. When you have a contract with a client most aspect of customer needs will be specifically stated (eg: ‘design a website that allows sales and promotion of sport equipment… due date:…).
The delivery of products and services needs to be aligned with the business plan of an organisation. You need to clarify what standard of product and service quality you want to reach.
The larger the organisation the harder it is to inform everyone of the customer service standards. A good way to set customer service standards and to make sure everyone in the organisation is well aware of it is to make it part of the culture of the business.
It helps to discuss the customer service standards at every meeting. Posters are another great way to ensure that staff know about them. See example below:
Customer service standards that work – source: WinningCareers.com.au
Assignment
Complete the questions in the attached assignment sheet and create a basic Customer Service Standard list or poster for a café in the CBD or a multimedia business that specialises in Web Design and Instructional Videos, and online resources.
Include 10 points in the poster that that business should focus on. Make it all up!
ICAWEB424A Evaluate and Select a Web Hosting Service
Evaluate Social Networking Sites
Before you will be able to evaluate Social Networking (Web-)Sites (let us call them SNS to make it easier) you need to define what a SNS is.
SNS – Definition
In our first class we looked at how to define a SNS. We seemed to agree that it needed to allow you to create a profile as much as to share information with others, to upload content and to be able to leave comments. It should allow you to chat to others.
This is a pretty wide approach and I believe applies to Facebook, YouTube and any other SNS.
Let us look at some other definitions:
‘A SNS is a web-based service that allows users to share a public or private profile with common users and explore connections with others within the site.’
(Boyd & Ellison, 2007 – Boyd, D. M., & Ellison, N. B. (2007). Social network sites: Definition, history, and scholarship. Journal of Computer-Mediated Communication)
This is a fairly wide and inclusive defintion that applies well to SNS.
List of SNS
Popular SNS found at SocialMediaToday.com
How many of the sites above have you come across? They were listed as 40 of the most popular SNS on SocialMediaToday. Here is a list of popular sites (source: Wikipedia)
Facebook
Twitter
Google+
Qzone
Sina Weibo
Formspring
Habbo
Vkontakte
LinkedIn
Bebo
Tagged
Orkut
Netlog
Friendster
hi5
How would you evaluate SNS? What criteria would you apply? Have a brainstorm with your colleagues (or alone) and afterwards discuss what makes a good SNS in your opinion.
Web accessibility is the requirement to create websites that can be accessed and understood by as many people as possible. You can relate it to the accessibility of a room in a university. Every student has to be able to access the room regardless of injury, disability or other hindering circumstances. A lot of schools had to build ramps to allow students in wheelchairs easier access to the facilities.
Web Standards
Accessibility has been integrated into the web standards. The web standards are decided on by the W3C (World Wide Web Consortium). Please click on this link now to visit the W3C: www.w3.org. Can you find the definition of accessibility? (>http://www.w3.org/WAI/intro/accessibility.php)
Please look up what impairments and disabilities are the focus of accessibility!
Browser Compatibility
Make sure to code your websites to W3C web standards to allow for the widest range of web browsers.
Contrast and Colour Blindness
Colour blindness is a common problem today with sources claiming that most people have levels of colour blindness. It affects mostly males, and it is excepted that about 10% of males have some form of colour blindness.
Web designers need to ensure that text and other interface elements can be read and understood by everyone. Here is some advice on the use of contrast:
Any time you use colour to convey information in an interface also use clear, secondary cues to support the information.
Use grey scale differentiation
Use graphics to support the information
Use text label associated with each colour
Spend 10 minutes to find websites that help with contrast and colour blindness. List 5 sites that help with contrast and 5 sites that help when designing for accessibility and colour blindness. Add your links to this post in form of a comment!
You add an image to your web page with this code in HTML: <img src=”smile.jpg” alt=”girl smiling”> or <img src=”\images\smile.jpg” alt=”girl smiling”>
If a visually impaired user is trying to access your web page they rely on screen reader software. Using the alt attribute allows all users to get an idea of the image regardless if they can view it or not.
What could be other reasons for users not to be able to view images?
Click on this W3Schools Link and access the TryIt-Editor. Read the code for inserting an image and try to rewrite it from memory adding a descriptive alt attribute.
I will walk around and look at your results.
Drop-down Menus
Drop-down menus are a smart way to navigate. Drop-down menus tend to look very attractive. Many successful websites avoid their use in total: eBay, Yahoo!, Amazon.
Drop-down menus are bad for accessibility.
HTML Code
Using the example of bold text and strong text, the code for bold <b>I love Football!</b> boldens that section. Using the code for strong has the same visual impact, but the difference is quite important. If you write <strong>I love Football!</strong> it will look bold, but a speech reader will interprete the text as important.
So, use strong rather than bold.
Self-closing HTML Tags
The old style of a tag is not self-closing: <br>. This is the tag for a line break and most browsers will have no trouble to read it. The web standard-compliant version is self-closing: <br />. Start to use self-closing tags to ensure that your websites will show on the widest range of web browsers in the future as well.
Site Maps
Site maps are a good way to support accessibility. Anyone with trouble navigating your site will benefit from a clear, text-based site map.
What is a site map? It is an index or guide to the different pages and hyperlinks on your website.
Make sure to use text size that is suitable for a variety of users. Smaller text looks neet and modern, but not everyone will be able to read small text (think of older users).
Recommendations regarding the ideal text size vary significantly: various sources recommend sizes for body text (main text) from 12px-14px as well 16px. W3Schools recommends a default size for paragraphs of 16px.
With a change towards responsive web design, a design approach that aims at flexible website dimensions to provide an optimal viewing experience on any platform, there has also been a shift towards maesuring text size in em, rem or in percentages.
Text set in em or rem (they are different) can be resized by all browsers, which allows for ideal viewing on a screen as much as on a tablet or mobile phone.
It is recommended to add a link that allows the user to change the font size within the website. To achieve this you need to include a link that uses JavaScript to swap between two CSS style sheets.
Accessibility Validation
It is important to check your website for accessibility! Make use of one of several online accessibility validators. Bobby used to be the most successful free online validator, which has been disabled recently by IBM.
Automated validators give only an indication of the accessibility of your website. Accessibility is measured at three levels from basic accessibility to advanced: A, AA, AAA. Each level relates to a priority checklist that can be found at: W3C website.
The W3C website is rather cumbersome and that is being friendly. It is fine to use an accessibility validator and you can refer to the checklist below (see Accessibility Checklist)
What level do you need to reach as a web developer? W3C states:
A Web content developer must satisfy all priority 1 points. This will give the site a Level A-Accessibility rating, which can be labeled on the website.
A Web content developer should satisfy all priority 2 points. This will give the site a Level AA-Accessibility rating, which can be labeled on the website.
A Web content developer may satisfy all priority 3 points. This will give the site a Level AAA-Accessibility rating, which can be labeled on the website.
Alternative Content for Flash
There has been a problem with Flash content online. Flash content has not been accessible until later versions of Adobe Flash. If you use Flash make sure to provide the content in alternative format.
It is recommended to describe your Flash file (SWF) in words by offering users a link to a text version.
Semantic Markup
The W3C has declared its intention to create a Semantic Web, meaning a World Wide Web of structured data, that is transparent. Using ‘Semantic Markup’ means that you will write HTML that is self-descriptive and written for other humans rather than just for machines (software, parsers, Google etc).
Semantic Markup means that HTML code is used appropriately. This is achieved by using the HTML standard classes accordingly: <h1> will be used for the main heading followed by <h2> and these tags will be used for headings and not to emphasise or enlargen text. <p> will be used for a paragraph (rather than <br /> for line break).
Above I mentioned the examples of using <strong> rather than <b> to emphasise text. The same applies to the <em> tag (which actually stands for emphasis, while strong represents prominent text) to be used rather than the <i> tag which stands for italic or sloped text.
The point is that <b> and <i> are purely representational or visual, while <strong> and <em> offer semantic meaning that will be interpreted differently by screen reader software. The other point is that the visual representation for <strong> and <em> may change over time from bold and italic to something else (eg high-lighted).
You can also add comments to important sections of your code. Comments will only display in your HTML code and not on your website. The use of comments is to help understand long passages of code. Other team members will benefit. But it also helps understanding code that you wrote a while ago.
Example of a comment in HTML: <!–This is a comment. Comments are not displayed in the browser–>
HTML5 offers new semantic elements to clearly define different parts of a web page:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
Example of Semantic HTML5 Tags, Source: W3Schools.com
Accessibility Checklist
Finally, here is a checklist that you may want to use.
Add valid DOCTYPE declaration
Keep the content simple, avoiding jargon and complex words
Avoid justified text, as users with dyslexia find it harder to read than left-aligned text
Use sans-serif (eg Verdana, Calibri, Arial)
Avoid images of text
Allow that font size can be adjusted
Allow for large clickable area of links
Use descriptive links (avoid ‘click here’) This is important for users with visual impairment who rely on screen reader software.
Provide a sitemap
Provide ‘Back to Top’ and ‘Skip’ links
Ensure functionality of keyboard and mouse (eg tab)
Use images and icons
Provide meaningful alternative text for images: <alt>
Provide enough contrast in your colours of text and background
Avoid distracting animations and sounds or allow for them to be paused, skipped or switched off
Make use of white space (empty space around filled space with either text or images)
Provide a consistent design and navigation throughout the website
(The checklist is an altered version based on the original that can be found in ‘How to Design Websites’ by Alan Pipes, Laurence King Publishing, 2011, p.73.)
Feedback
Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!
Let us continue with were we finished off last week: businesses or brands that we associate with excellent or even good customer service and those that we accociate with bad custumer service.
Let us list both groups by everyone in class on the white board.
Found at Inc.com
Customer Service varies from brand to brand and business to business. It can be classified by attitude of a business and its employees as well as their behaviours. The behaviour really consists of what an employee does as well as what they do not do.
Finally, we can look at customer service from the customer’s point of view, the experience and how the customer feels.
We will write down our emotions and associations that we have with the brands. Use the attached document to document the class discussion:
Table of Content from Textbook – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Jenga, photo courtesy of: Design-Crit.com
Good Morning! Photo: wallyir, from: morgueFile.com
Setting the grid up.
Photomontage: Amir Ebrahim Photography
Vista Lighting Effect – Courtesy of: Tutorial9
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Image source: Data Center Knowledge
ruthworkx -http://ruthworkx.files.wordpress.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Multimedia Production Cycle – This image is under the Creative Common Agreement, you can use it but will need to reference this site: www.classoffederico.wordpress.com
Example of applied changes
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Based on image by hotblack on morgueFile.com – F.Viola
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Lines and Gradients- Courtesy of: psdtuts+
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Courtesy of The Art of Mass Effect Universe’, 2012
Light Streaks – Courtesy of: PhotoshopEssentials
Constructivism Reference – by Lylah Livingston
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Couple found at http://frenchbydesign.blogspot.com.au
Peace- Swiss International Style Reference – by Maryam Chananeh
Based on a photo by delboysafa from morgueFile.com
Courtesy of The Art of Mass Effect Universe’, 2012
Work by Egon Schiele, found at Mom.org
Typographic with Colours and Photos – The use of large numbers is effective and the low opacity of the boxes works, personally, I find it looks a bit dated- found at: JuxtaPost.com
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Illustration by Jessie Ford, found on DzineBlog.com
Based on photo by dhester from morgueFile.com
Source: morgueFile, Photo by matei
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
He loves OHS! – Photo by Karpati Gabor on morgueFile
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Image from morgueFile by lemai13
Based on photo by xandert found on morgueFile
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Photo by frenchbyte on morgueFile
Illustrator unknown – found at: Ephemera – World of Rare Books
Photo by mconnors on morgueFile
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Examples of Output and Display for web-content. Image: live.surveyshack.com
Geese in Ameland, Photo by Frans Schouwenburg
Photo by ariadna on morgueFile
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Photo by dharder on morgueFiles.com
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Text and Shapes – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)
Illustration: Jamie McKelvie – Art Brut Record
The concept was used on the German side as well with this ‘Auch du sollst beitreten zur Reichswehr’ [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss
I Want You – Emily Strange, The lovable Emily Strange came to life in 1991, designed by Nathan Carrico for Santa Cruz Skateboards. She is referred to as a counterculture icon. I would just call her a sceptic. Image found at: Kollectable Kaos
Illustration by Tavis Coburn found on DzineBlog.com
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Photo by hotblack on morgueFile.com
A Beautiful Piece by Aerosol found on his Facebook
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Photo by omdur on morgueFile
Image Source: www.photoshopessentials.com
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
“Step into my office” Source: The Age, click image for link
The Face by drfranken found on ChromoArt.de
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
Photo by agathabrown on morgueFile
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Close-up at Fed Square, Federico Viola 2013
This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Grassy Rabbits
Photo by DTL on morgueFiles
Massive Attack – The Essential Mix
Screenshot from What’s Your Story by Joyce Hostyn
Work by Jo W
Text-based Table of Content – Very Graphic and Black and White- found at: Smashing Magazine (click image for inspiring article on table of content design)
Free Transform and Ctrl – I am loving it!!!
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
What Time is it Now? by King_Bobbles
Italian movie poster found on Abduzeedo.com
Illustration by Kate Miller, found on DzineBlog.com
Photo by clarita on www.morguefile.com
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Based on photo by hotblack from morgueFile.com
Found at Inc.com
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Work by Justin Anderson
Luminescent Lines – Courtesy of: PSDLearning
Layers in Photoshop are like a Collage of images stuck on top of each other…
Experimental Photomontage by Robert Heinecken
Photo by matthewbridges on morgueFile.com
Photo by clarita on morgueFile
The gentle curve of the river and the light green tones of the grass give this image a calming feel. The montains and the clouds have a less calming effect. Image: courtesy of Icon Photography School – http://www.photographyicon.com/line/
Illustration by Jessie Ford, found on DzineBlog.com
Photo by Seemann on morgueFile.com
Photo by mcconnors on morgueFile
Concept for Gallery Screnshot
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
![The concept was used on the German side as well with this 'Auch du sollst beitreten zur Reichswehr' [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss](https://classoffederico.files.wordpress.com/2014/04/world-war-propaganda_auch-du-sollst-beitreten.jpg?w=234&resize=234%2C299#038;h=299 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 