Category Archives: Uncategorized

“About Me” pages

“So I have been reflecting on portfolio sites and I have arrived at the point of viewing my about page…its pretty lame.” – Design Ninja

You have just put together a portfolio site linking to all your amazing designer work and you come to that link “About Me” and you are fresh out of ideas. Now what??? The great thing about this page is that you’re free to design like a crazy monkey and personalize it to communicate who you are. Here is the good news…online users browsing your site would love to know about you! About pages are important when people want to know more about the designer and therefore get a feel of the type of person you are. Don’t fear! I have rounded up a few good links to help get you started on that “About Me” page.

Web Design Ledger has some basic yet vital tips to create a great about me page. Tips include:

  • Profile info

Too much info about yourself is a tad bit annoying so don’t rave on about how awesome you are and how much you love playing sudoku. Make it interesting and make it relevant, unless you’re just making an about page to make friends. Mention your skills and achievements and any work you have done. Many well designed about pages start with, “Hi” or “Whose that guy? Its me!”, but be more original (in Design Ninja’s opinion).

  • The photo

The picture must portray your star personality. If you are a sweetheart, have a soppy picture of you eating ice-cream, if you’re a tart put up a picture of you adorned in fishnets whatever tickles your fancy. Professional photos look good, but then there are also really funny pictures which are great to laugh with. You get goodlooking photos that remind you of Facebook profile pictures or really pimped out photoshop pictures.

Smashing Magazine also comments that in today’s web age being personal and friendly and engaging with your audience is important because there are just sooooo many sites out there. Below is a page by French web designer Jean Delbrel. He is a great graphics and cartoon designer which we can tell just by the about page. He has incorporated his theme throughout even through his links. Impressive to say in the least. For more examples like this one check out net tuts+ for inspiring sites.

 

Online videos part 2 HTML5!

HTML5

HTML5’s production began in 2003 and the standard is said only to be published in 2022. The W3C Consortium proposed HTML5 as a concept with video specifications which describe a standardized video player that all browsers and web interface’s can build directly into their software. The ultimate goal is to allow online users to watch videos without plugins, which Flash uses now. Those in HTML5’s corner believe in its potential power to surpass its rival once all the kinks are ironed out.

The future of online video

Advantages:

  • HTML5 is open source programming accessible to all, but it is especially advtangeous for content creators and video marketers.
  • When using a standards-based coding like JavaScript, the user can interact directly with the HTML5 video. How? Well you can build your own player controls, control playback speed and set video events on other areas of the page.
  • HTML5 can collect certain data valuable for a creator to review such as the percentage of the video the user watch before navigating away from the page and total number of views stats.
  • Creators have the ability to allow a window to appear within a certain point in time on the video eg. An online person watches a highlight of a basketball match slam dunk and ten seconds in BLIP! A Nike advert pops up in a window – developers can make this happen using HTML5.
  • With HTML5 comes a nifty poster frame feature. It’s a still image which represents your video which displays before and after your video plays.
  • Once HTML5 becomes standardized and implemented across browsers which will reduce amount and complexity of code needed to embed videos.
  • HTML5 runs with iOS, Android, WM7 devices, laptops and desktops.


Disadvantages:

  • HTML5, contrary to popular belief, does not provide animation or interactivity within web pages. To animate on HTML5, CSS3 or JavaScript is needed.
  • HTML5’s browser specification is not yet fully known.
  • This year browsers such as Mozilla Firefox, Google Chrome, Apple Safari and Opera started using HTML5, but online users with older browsers such as Internet Explorer 6 do not have the compatibility to support HTML5. 68% of online users are not using a browser that supports HTML5 video.
  • When adding videos with HTML5 using CSS and HTML the measurements on a sub-pixel scale are rounded up or down, depending on the browser, which leads to unrealibity of the display of these pages. Flash adds videos with specific measurements in sub-pixel increments which allow for a better display on Flash sites.
  • At this stage HTML5 has no live video streaming capabilities, no protected video streams and no video conferencing.

To learn how to embed a video using HTML5 watch the video below.

 

Online videos with FLASH!

Oh yeah...Flash is that good

Flash

Flash over the last 15 years has built up a huge base of developers and clients therefore there are so many programs and sites featuring this nifty component. It is powerful, flexible and boasts features such as online video streaming, hardware acceleration, 3D effects, advanced test support and dynamic streaming for online videos.

Advantages:

  •  For web designers wanting to create interactive sites Flash offers a dependable record of speed and security.  Flash runs on: Microsoft Windows, Linux, Android 2.2+, Mac OS X, Google TV, RIM QNX and even gaming consoles such as PS3 and PSP.
  •  Flash trumps other applications, because it is compatible with various browsers and all it takes to set it up is a simple download and installation of the Flash app. Most infrastructures support Flash.
  • Interactive Flash maps displays floor plans, street maps, locations of offices etc.
  • Flash offers web cam and DRM support which HTML5 does not.
  • Flash supports for inline advertising (important for video monetization) and branding opportunities are created as Flash has highly customizable video player skins.

Disadvantages:

  • Users have complained about the high CPU usage of Flash for videos, especially users on Mac OS X and Linux. CPU spiking up to 100%, resoure hogging and crashes are a few of the complaints.
  • Although creating Flash websites with Adobe is easier than integrating HTML5 into a site, Adobe software is very expensive.
  • Flash has a lot of security and exploitation issues.
  • Flash uses proprietary code – Actionscript and building a Flash video player is complicated. To make use of the full feature ability of Flash, developers must specialize in Actionscript.
  • Embedding a video into a web page has loads of code.

Publishing a video using Flash:

Flash like every other Adobe invention is really simple to use and its all about putting the right things in the right places. Open Flash and a new Actionscript 3 document. Save this document in the same folder as the video you want to publish. Now you add your video to the white empty stage open on Flash by clicking in the toolbar file>import>import video. You then browse for your video, load it externally with playback component, choose a skin and click on finish. Check the video format to see if it’s compatible with Flash formats, fortunately Flash accepts a very wide range of formats. If your video format is incorrect then click on this link to find out how you can convert it using Adobe Media Encoder.

Once your video is on the stage and it is the right format (if it’s the wrong format then you have converted it)  you can then modify the size of your stage on the properties panel. Adjust the width and height to fit the size of your video clip. Once that is done simply click file>publish and your video is up on Flash.

Now we want our Flash file up on our site right? Remember the file that houses your video and your actionscript 3 document you created on Flash? Well once you publish your video those and other swf documents will be in the folder (it is CRUCIAL that they all stay in the same folder). You need those 3 files:

  1. Your video
  2. Your skin (swf)
  3. And the swf file that is your video player

Good? Good. Now you take your video document and simply drag it onto a html document in Dreamweaver – the rest just magically happens!

If you get it and you know it clap your hands…

BBM Users go BBMD (BB manic depressive) over crash

Good news for BB addicts…your beloved BBM seems to be up and running again as noted by fellow peers at UCT. Many mourned together as articles and posts pop up on the web such as: BBM not working? You’re not alone! The BBM crash has highlighted some great social concerns regarding the avid use of BB and social networks, some even say this is a turning point for cellphone technology – can we survive without it?

On e-news last night I could not help but chuckle at disgruntled BB owners expressing deep concern when a magazine editor commented saying that BBMers should embrace the wonderful inventions of telephone calls and sms services. Millions of users across the globe from Europe to the Middle East and here down to Africa have been unable to send or receive e-mails and messages through their phones. The company acknowledged the tensions over the glitch and commented: “We are working to resolve an issue currently impacting some BlackBerry subscribers in Europe, the Middle East and Africa. We’re investigating, and we apologise to our customers for any inconvenience caused while this is resolved.”

BlackBerry systems receive and send emails  and messages through encrypted connections to RIM servers globally.  Canadian company Research in Motion – RIM however seem to be hush hush about the whole situation leaving users even more upset as no news of what really happened has come out.

Blackberry help on twitter seems to be tweeting the same message over and over: Hi. Apologies for delays, we are working hard to fix the issue. You can check here for all updates: http://bbry.lv/BBHelpUpdate ^PM.

So what the hell happened? We have yet to find out but this is quite bleak for BB prospects as their sales have already suffered against tougher competition: Android and Apple iPhones. A service crash is the last thing they need right now.

Well no more fretting! Your beloved BBM is back and all should be rightwith the world again…

Steve Jobs – an apple a day sent success his way

A younger Jobs

February 24th 1955 was a great day for the world and no one knew it. Steve Jobs was born and given up for adoption, but his biological parents did not know the gift they were giving up. Jobs was adopted by Clara and Paul Jobs and his father taught him about constructing and dismantling electronics which turned out to be a billion dollar hobby.  Besides his hobbies Jobs was a very smart student although he wasn’t very keen with the formal schooling system.  When he wasn’t at school he was at Hewlett-Packard where he met Stephen Wozniak…great things can only come of this meeting.

Stephen

After high school Jobs went on to enroll in college and not graduate. After only 6 months Jobs left and later went on to work for Atari as a video game designer. At the age of 21 Jobs then started working at Apple Computer and resigned as CEO in 1985.

It seems like hooking up with an IT genius buddy and spending copious amounts of hours in a garage produces great new technology. Mark Shuttleworth did this when he started up an Internet security company, Thawte, from his parent’s garage in Cape Town and Steve Jobs did this too with Apple Computers. Jobs and buddy Stephen Wozniak started Apple computers in Jobs’ garage, which revolutionized technology today and produced the iPod, iPhone, iPad and i-everything else.

After his resignation from Apple his business ventures did not stop there, he started a software and hardware company called NeXT and bought over Pixar Animation Studios. NeXT was not a booming success and when Apple absorbed this company Jobs was sky rocketed to his former CEO position. It was then in the 1990s that Jobs began to take Apple up and up to the elevated success it enjoys now. Jobs did all this with a salary he granted himself of only $1 per year.

2003 was a solemn year for Jobs as he was diagnosed with pancreatic cancer. Jobs enjoyed 7 years of continuing success until October 5th, 2011, 56 year old Steve Jobs passed away. He died in his Californian home of respiratory arrest caused by the tumour.

 

Contact Form…If you don’t know…now you know!

Better late than never to know this information for your site!

Contact forms are necessary for your web page: To request specific information from your website’s users. Usually for site feedback or to join mailing lists. How does the whole process work? Well once you fill in a contact form you hit the “Submit” button. The browser takes what you have submitted and automatically encodes it so that it can send it to the server’s web application. The web application then processes this info by adding the person (who filled in his/her details on the contact form) and their e-mail address to the server’s database. The web app sends a response to let the person know that their contact form has gone through. BINGO! Below is the basic HTML for a CONTACT form.

<HTML>

<head>

<title>Mailing List Signup </title>

</head>

<body>

<h1>Mailing List Signup</h1>

<form action=“/cgi-bin/mailinglist.pl” method=“post”>

<fieldset>

<legend>Join our email list</legend>

<p> Get news about my website. </p>

<ol>

<li><label for=“name”>Name:</label>

<input type=“text” name=“name” id=“name” /></li>

<li><label for=“email”>Email:</label>

<input type=“text” name=“email” id=“email” /></li>

</ol>

<input type=“submit” value=“Submit” />

</fieldset>

</form>

</body>

</HTML>

 

Some tags may be new to you so I will explain what they are there for.

  • <form>

The form element is a container for all form element controls. The form tag also has attributes that interact with the browser about form-processing features.

  • <form action=“/cgi-bin/mailinglist.pl”

This tag is to communicate to the browser to process all information sent out with this form.

The ‘action’ attribute gives the location for the application or script that is used to process the form’s info. The ‘action’ attribute sends the data to a script called ‘mailinglist.pl’.

[You may want to know ‘.pl’ is for… well…

‘.pl’ is a Perl script which is used to process the form. Perl is scripting lanugage. Others that can be used are .php, .asp, .jsp. Once we get into scripting languages we will learn more about this.]

The script is the cgi-bin directory on the same server as the one that has your HTML document for the form.

  • method=“post”>

The method attribute indicates how the info should be sent to the server. There are 2 types of methods: Post and Get, in this example we are using the Post method so this is the one I’ll explain to you. With this method the browser sends a separate request to the server containing some special headers then the data. Only the server can see this info sent so Post is the best method for sending info you wan kept secured (credit card details/personal info).

  • <fieldset>

This element is used to indicate a group of form controls.

  • </legend>

The ‘fieldset’ element may include this ‘legend’ element that provides captions for every field.

  • <li><label for=“namer”>Name:</label>

<input type=“text” name=“name” id=“name” /></li>

On the visual browser we see the label for Name right next to a text field where we insert our name (the field), but in the HTML document the label and field may be separated such as when they appear in separate table cells. The ‘label’ element id used to associate descriptive text with its form field.

  • <input type=“submit” value=“Submit” />

Hitting the ‘submit’ button takes all the data filled in on the form to the server. The ‘submit’ is added by using the ‘input’ element. This button does not need you to enter any data, all you do is click it therefore this is a form control element that does not required a ‘name’ element. This Is simple, just slot the HTML in at the end of the form and you have a submit button done.

Example of a basic contact form which you can find on CrazyLeaf Design Blog.

Web Designers have jokes too…heehee

JQuery

Okay the next thing on our list beginning with a ‘J’ is JQuery! Yay! So um…what’s that?

If you have started playing around with JavaScript you would have noticed it is quite a lot to grasp and daunting at times. JQuery to the rescue! JQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It’s a free open source software and the most popular JavaScript library in use. Created by web author John Resig it was released in 2006.

JQuery’s syntax was developed to make navigating a document, creating animations, dealing with events, selecting DOM elements and develop Ajax applications easier. It also lets you create plug-ins to develop advanced effects and themed widgets. It modifies the look of your web page and changes the content of a page. It alters the way the user interacts with the page and provides Ajax support. It also irons out browser quirks.

 

 

JavaScript

So we’ve tackled <html> done </html>. We’ve tackled style sheets <css> done </css>. Now we’re on to bigger things .js

Designed by Brendan Eich and developed by Netscape Communications Corporation, JavaScript was released in 2009. JavaScript is a client-side scripting language that can be used to make a web page more interactive, dynamic and enhance user interfaces. Browsers have limited functionality in terms of being able to produce text, tables, images and frames. What JavaScript does is that it manipulates elements of a web page or specific browser window functions to allow for a more interactive site. Adding JavaScript can enhance the look of your website and works across desktop, online and mobile platforms. JavaScript is not to be confused with Java, but it is influenced by it by copying naming conventions from Java.

With JavaScript you could create a checking form for valid entries or swop styles for an element or an entire site. You could even programme the browser to remember an online user’s details for the next time he/she uses the web. It’s a fully independent programming language embedded in the HTML page as simple programming statements combined with HTML tags.

The best way to get your head into JavaScript is to grasp the basics and then scout around the web for other web designer’s scripts. JavaScript is a whole new, special sort of syntax very different from the CSS and HTML coding we’ve been learning so far.

This is a basic JavaScript statement:

<html>

<head><title>My Page</title></head>

<body>

                                    <script language=”JavaScript”>

                                    document.write(‘This is my first JavaScript                   Page’);

                                    </script>

</body>

</html>

For more examples head to:                  http://www.w3schools.com/js/js_examples.as

So ultimately what can I achieve by adding JavaScript to my page? Hmmmm, well: statements, alert boxes, pop ups, timing and fading features on texts etc.