Project 6 – Task 2 -BEEF Showcase Evaluation

June 8, 2011 § Leave a comment

For this project we had to design a showcase for our team called BEEF to show our personal portofolios. After the first meeting with the group, we decided to not use any flash technology because it is not compatible with all devices. Through research I found ways to use animation without using flash.

Technology used: HTML, CSS, CSS3, Javavascript, Jquery.

Library used: Jquery (latest version)

Navigation: In the navigation I used font-face, and CSS3 to give  shadows;

Small Fly animation: For the small fly flying around the screen I used a script called moveobj.js ( source;

Web site scrolling: To animate the scrolling I used a Javascript that make the scrolling smooth (source;

Pictures Gallery: The icons are made by images to which I applied a class that gave the rotation and shadow with CSS3  and the gallery is a Javascript called SlimBlox 2.0 (source;

Logo BEEF: The logo BEEF (wich back to homepage), in internal page,  is animated by CSS3;

Sounds: All the sounds work with a Dreamweaver script called MM_sound;


The team is happy with the result because it functions well, the graphics have impact and the animations give the showcase dynamism much like a flash video but without the downsides of flash in terms of device compatibility.


Project 6 – Task 1 – Employment Opportunities

June 6, 2011 § Leave a comment

Freelancing opportunities ( source “Is Freelancing for you?” by Chris Wright on Web Designer Magazine)

In today’s economy, Freelancing is very relevant because long term job safety is becoming a thing of the past. Companies are taking advantage of freelance market to mitigate risks, but freelancing is also preferred by many individuals for the lifestyle it promotes. There are two ways to get in freelance market: directly, through CV and send it to people you want to work for, or through agencies. Sometimes can be useful to use a good recruitment agent. Another way is to use one of the many jobs boards on the web. Payment can vary hugely depending on the role, and contract length can be negotiated and agreed.

Freelancing resources

FreelanceAdvisor –   A site with all kind of advice, tips, tricks and guides for the freelancer

Web Designer Magazine –   A useful guide to the top agencies out there.


Project 6 – Design Show Case – BEEF ‘A yummy Brighton collective’

June 6, 2011 § Leave a comment

For this project we have to design a team showcase. After the first meeting we decided to call the team BEEF. The team’s members are David, Corinne, Mikey, Lucie and me. My role in the group is website’s coding and implementation. Mikey made the layout, illustrations and graphic elements, Corinne made the logo and all the documentation, and all together we decided the showcase’s style and colours, the kind of font and the technology to use; in fact after the first meeting we decided as well not to use any flash animation.

Project 6 – Final Work – Personal Portfolio

June 6, 2011 § Leave a comment

One of the last project’s tasks is to design our personal portfolio. After  researching  portfolios (see the post) , I decided to use a minimalist style, with a white background and  few elements on the screen. I didn’t use any flash: only HTML and CSS, two jquery, one for the scrolling effect and slimbox for the pictures gallery in Portfolio page; both using Jquery library. For the gallery and for the arrows in the Homepage‘s navigation I also used a new CSS3 code that make image tags rotate. I made the illustrations in the About page and in the Contact page with Illustrator. The result is a simple and clean web site, easy to navigate and at the same time quick: in less than 3 minutes you can see all the website which is good for usability. For the introduction I used a new software called Hype 1.0 that allowed me to make an animation without using any flash, so the web site can be displayed on mobile devices such as the Iphone and the Ipad. index




Project 6 – Task 1 – Personal Portfolio Research

June 5, 2011 § Leave a comment

Project 5 – Task 1 : What is Web 2.0

June 4, 2011 § Leave a comment

Web 2.0 basically refers to the transition from static HTML Web pages to a more dynamic Web that is more organized and is based on serving Web applications to users. Other improved functionality of Web 2.0 includes open communication with an emphasis on Web-based communities of users, and more open sharing of information

The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them. Examples of Web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies. (Wikipedia)

At the end of 2006, Time magazine’s Person of the Year was ‘You’. On the cover of the magazine, underneath the title of the award, was a picture of a PC with a mirror in place of the screen, reflecting not only the face of the reader, but also the general feeling that 2006 was the year of the Web – a new, improved, ‘second version’, ‘user generated’ Web.

You’ve probably heard the phrase “Web 2.0”. You may’ve even read some of the various definitions of it. And Web 2.0 does appear to mean different things to different people, so you would be forgiven for still feeling confused about the term. Here are some of the definitions of Web 2.0 floating about:

Web 2.0 = the web as platform

Web 2.0 = the underlying philosophy of relinquishing control

Web 2.0 = glocalization (“making global information available to local social contexts and giving people the flexibility to find, organize, share and create information in a locally meaningful fashion that is globally accessible”)

Web 2.0 = an attitude not a technology

Web 2.0 = when data, interface and metadata no longer need to go hand in hand

Web 2.0 = action-at-a-distance interactions and ad hoc integration

Web 2.0 = power and control via APIs

Web 2.0 = giving up control and setting the data free

Web 2.0 is social, it’s open (or at least it should be), it’s letting go of control over your data, it’s mixing the global with the local. Web 2.0 is about new interfaces – new ways of searching and accessing Web content. And last but not least, Web 2.0 is a platform – and not just for developers to create web applications like Gmail and Flickr. The Web is a platform to build on for educators, media, politics, community, for virtually everyone in fact! (ZDnet).

Design Elements in Web 2.0 Interfaces ( Web Design from scratch source)

Simplicity – 2.0 design means focused, clean and simple.

Central layout – This “2.0″ style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.

Separate top sections – This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).

Simple and Permanent navigation – your global site nav that appears on every page as part of the page template – needs to be clearly identifiable as navigation, and should be easy to interpret, target and select.

Bold logos – A clear, bold, strong brand – incorporating attitude, tone of voice, and first impression – is helped by a bold logo.

Bigger text – Lots of “2.0″ web sites have big text, compared to older-style sites.


Cute icons and Star flashes – Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning. Icons can be useful when they’re easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.

Where Am I?

You are currently viewing the archives for June, 2011 at Giorgio Scappaticcio's Blog.