OCBT

ASSIGNMENT IN WEB DESIGN AND DEVELOPMENT

HND in Computing

H.L JANIKA SHEHANI 5/16/2011

WEB DESIGN AND DEVELOPMENT 2011

INRODUCTION
Designing and developing a website is an important phase in the computing field. As a HND student in computing, this is the assignment based on the module website designing. Assessment becomes necessary nowadays as the web becomes gradually a platform of complex applications with increased interactivity and the front end of databases and corporate information systems. In designing a website there are many heuristic rules. In this assignment I have evaluated the storyboard of the website using those. Anyhow there should be a browser to run the website through the web. So I have explained and illustrated about them. As that in this assignment I have described and evaluated many sections in relation to the web deigning field.

WEB DESIGN AND DEVELOPMENT 2011

Users of a university website

WEB DESIGN AND DEVELOPMENT 2011

TASK (P1) Q 01
In this era of developing there are many types of institutes around the entire world. Institute or a university is a place where various students study. In the present the world has being a global village. Mainly it is because of the World Wide Web (WWW). So each and every university or institute has a website. A vast range of users are using these types of websites to collect information as well as for other needs. Universities have large audiences composed of many different users and user scenarios.

the prospective undergraduate students the current undergraduate students the prospective postgraduate students the current postgraduate students alumni current faculty current staff parents visitors potential staff and faculty local community visitors interested in news, events, etc researchers investors

WEB DESIGN AND DEVELOPMENT 2011

Researchers Students Visitors for news Potential faculty Potential staff Investors Visitors Users of a university website Current staff Current faculty Alumni

Parents

1.Users of a university website University department web pages are the focal point for prospective students, current students, parents, staff and Alumni who want to explore the university. Users visiting these sites expect to find particular pieces of information, perhaps most notably contact information for various people within the department, but also a wide range of information. (Frank E. Ritter, Andrew R. Freed, and Onida L. Haskett 2002)

One would want to use a universitys website for many reasons including looking up a staff members phone number, getting directions to a building, application materials and procedures, and much more. People are visiting university department websites in large numbers. (Frank E. Ritter, Andrew R. Freed, and Onida L. Haskett 2002)

There currently is a wide divergence in styles and content of university department sites. This could be due to a difference in department philosophies and the wide range of tasks each department must support. Certain departments will prefer a flashy design, while others will

WEB DESIGN AND DEVELOPMENT 2011

prefer a more straight forward approach. Content will vary simply because different departments have different information to present, and some may put more or less effort to their design. (Frank E. Ritter, Andrew R. Freed, and Onida L. Haskett 2002)

There is likely, however, numerous common users and tasks all of these sites should support. We can believe a task analysis is the first place to start to create a successful department website. To know what content to provide to users, we must first determine how they want to use department websites. (Frank E. Ritter, Andrew R. Freed, and Onida L. Haskett 2002)

There are various users who use a university website. And the needs of them are really different from each other. Needs of a student in a university website.. At a glance if we take students as an example. We can see mainly that there are two types of students in a university. Current students Prospective students Current students may have the following needs. Current circulars Messages Career Service Library Materials Statutes and regulation Finance related forms Account Enquiry

WEB DESIGN AND DEVELOPMENT 2011

While the current students are in need of those elements the prospective students may need something different from those. So the prospective students may have the following needs. Campus life Courses Course details Accommodation Facilities Sports and Article The culture May be the Gallery Admissions Important days Download prospectors

As this there are hundreds of needs for students in a university website. Not only the students the teachers and the staff too has many different needs. Needs of the staff in a university website Starting from the Principal or the chief operational officer, the teachers, clerks, receptionist, including all the others who work for the University for Wages goes to the staff category. Their needs vary from the others.

HR procedure HR forms Salaries Online payments Annual leave Online payments

WEB DESIGN AND DEVELOPMENT 2011

As that there are many users and the needs of those users are different from each other. When designing and developing a website of a university or other element first of all we should identify the needs of the users who use the website usually. If we identify them correctly the designing task would be more easier and more accurate..I t would be a success.

WEB DESIGN AND DEVELOPMENT 2011

Story board and the evaluation using heuristics and rules of a good website

WEB DESIGN AND DEVELOPMENT 2011

TASK(P1) Q 02

Home page

About

10

WEB DESIGN AND DEVELOPMENT 2011

Courses

Registration

Contacts

11

WEB DESIGN AND DEVELOPMENT 2011

TASK(P1) Q 03
Visibility of system status When evaluating we can find out that the navigational bar is not visible enough for the users and the images might be too much for a educational institute website. Match between system and the real world The terminology used in the website found very precise, clear and appropriate for typical users. Hence in this category there is not anything worth mention in terms of usability problem. User control and freedom In the evaluation the evaluator can find that in the website there are 10-12 pages and some of the pages have a long content. When we click for a page and when the page is open, if the user need to look for a content which is in the bottom of the page and if the user is in the bottom of the page there is no link to go to the top of the page. The user has to scroll to the top by the arrow. Another problem detected is that once the user visit to a page through the navigational bar there is no link that can lead to the main page of the category. Consistency and standards General guidelines and standards are followed across the site. In the evaluation could find some consistency problems though. There is a variation of fonts and font sizes in some pages compared with the majority of the pages. Finally in the top menu in some cases there is not clear with the first site which is the link and which is the header of a group which is not a link. Error prevention As the writer has to evaluate the storyboard the evaluator could not see any errors.

12

WEB DESIGN AND DEVELOPMENT 2011

Recognition rather than recall In general all options are possible and all actions are visible. Flexibility and efficiency of use In general the site does not pose flexibility and efficiency problems. The problem here focuses the section undergraduate. In the site it has not separated as business degrees and IT degrees. So that the user has to go through each and every course detail. Aesthetic and minimalist design In some cases the designer has to make to steps in order access a webpage instead of navigate straight to the target. Finally in the section of education too much color has been used.

13

WEB DESIGN AND DEVELOPMENT 2011

Web browsers

14

WEB DESIGN AND DEVELOPMENT 2011

TASK(P1) Q 04 Internet Explorer 8
Operating System

Windows XP 32-bit with Service Pack 2 (SP2) or bit higher

Windows XP Professional x64 Edition Windows Vista 32-bit Windows Vista 64-bit Windows Vista with Service Pack 1 (SP1) or higher

2- IE8 icon

Windows Server 2003 32-bit with Service Pack 2 (SP2) or higher bit Windows Server 2003 64-bit with Service Pack 2 (SP2) or higher bit Windows Server 2008 32-bit or higher bit Windows Server 2008 64-bit or higher bit

Bookmark management One of the areas where Microsofts Internet Explorer is lagging behind is favorites management. Favorite is just another term for bookmarks in Internet Explorer. Even the latest beta of Internet Explorer 8 does not come with effective tools to manage the favorites in the web browser. One of the main functions missing is a favorites search. Internet Explorer does not offer a way to search in the favorites which is one of the most fundamental functions for many users. The users functions have to scroll through thousands of favorites to find the one you are looking for.

15

WEB DESIGN AND DEVELOPMENT 2011

Download management In the internet explorer 8 there is a major disadvantage. And that is that there is no download manager. A dialog opens when something like a software is downloading. But there is no window showing the recent downloads and the remainder of the downloads.

3- Download dialog

Password and form management

When you enter a user name and password, Internet Explorer may ask if you want it to remember the password. Click on Yes and it will automatically fill in the password next time you enter that user name. But if you check Don't offer to remember any more passwords, then whether you click on Yes or No, passwords, you won't be prompted again. Internet Explorer's AutoComplete feature lets you more quickly fill out web forms and navigate to websites you have visited in the past. AutoComplete collects and stores in the reg registry on your

16

WEB DESIGN AND DEVELOPMENT 2011

computer the data you type in web form text boxes and the Address bar. If you choose to use AutoComplete for passwords, they will be stored in encrypted form on your computer. AutoComplete information is not shared with other users of your computer. The first time you submit a web form, you will see a message box that asks if you'd like to turn the AutoComplete functionality on. (Microsoft 2011) Spell check Auto spell checking is not done in IE8. But we could install spell checkers such as Google tool bar and check the own spellings.

4- google toolbar

The Free Spell Check Software is Google Toolbar. Most of you must be familiar with Google Toolbar add on which is available for both Internet Explorer and Firefox users. Google toolbar also provides grammar check and free online spelling suggestions in the toolbar. Just press the Spell checker button whenever you want to Spell check the entire webpage or the filled form (This feature is not available in IE Spell add on) and you will find spelling errors in the particular web page! (Blogote 2010) Search engine tool bar Located on the top right hand corner of the screen right across the address bar is the Search Bar in Internet Explorer 8. It can be customized according to our like to either Google, Bing, Wikipedia, yahoo plus a lot of other search options are available since Microsoft has teamed up with all the major search providers to make searching easier for you. Visual content in the search results helps you save time by choosing the best match related to your keyword. Simply type in a

17

WEB DESIGN AND DEVELOPMENT 2011

word in the search box and select the search engine of your choice and you will instantly see a list of related results. To manage the search providers select the drop down menu and choose Manage Search Providers. (Fusion 2011)

5-Search bar

Tabbed browsing Internet Explorer 8 introduces an easy to use Tabbed browsing option with its color coded feature! Now when you open one tab from the other with a left click open in a new tab ,

both of them will have a similar color which will enables us to figure out at a glance which tabs to view for similar content. (Fusion 2011) Advantage of Internet Explorer 8s Tabbed browsing is that when one tab from a similar tab group is closed, you will be taken to the next tab containing similar content from which it was opened. This decreases the time lost by jumping back and forth between unwanted and dissimilar

18

WEB DESIGN AND DEVELOPMENT 2011

tabs. A definite advantage that Internet explorer 8 over other browsers. (Fusion 2011) To close a particular tab or a group simply left click the tab and choose close or close

group. Lets say that you need to refresh multiple tabs to watch live scores of a cricket match, do you individually do that? No! Internet explorer 8 lets you refresh one or all of the tabs by simply a left click on the tab and refresh or refresh all. See the image below to understand this

6-Tabs bar

Pop-up blocking Internet Explorer's Pop-up Blocker helps to block some unwanted pop-up windows from appearing without blocking the pop-up windows you deliberately launch. Pop-up Blocker is turned on by default. History You can find the very convenient, very organized History in the new Internet Explorer 8. You can now organize and view your history by date, by site, by most visited or by order visited on a particular day. To change the settings of viewing history go to Favorites down menu and select. history drop

19

WEB DESIGN AND DEVELOPMENT 2011

Another change in the new explorer is that you can even search your history for the sites visited earlier. Go to Favorites Ad filtering It can be easily accessed by pressing the shortcut [Ctrl Shift F] which will open the In Private Filtering settings. It is however not as easy to use as it will only allow to block elements that are appearing on multiple websites. This can be either automatic or manual. There is however no obvious way of blocking an element on a single website right away. (Martin Brinkmann 2010) A user of the DSL Reports forum has converted the Ad block Plus list of blocked advertisement into an XML format that can be imported into Internet Explorer 8. All that needs to be done is to download the xml file from the website and import it into Internet Explorer 8 so that all of the ads and ad providers on that list are blocked automatically in Internet Explorer 8. (Martin Brinkmann 2010) history drop down menu and select Search history.

7- managing ads

20

WEB DESIGN AND DEVELOPMENT 2011

Zoom in on a webpage With Microsoft Internet Explorer 8 you can make WebPages easier to read by magnifying the page (zooming in). If you zoom in, everything on the webpage will be magnified (including text, images, and controls). Zooming will change the magnification of the website, regardless of the website's formatting. 1-Zooming No. Mouse actions 1 On the Start menu:

Keyboard actions Display the Start menu by pressing the Windows logo key .

Select Internet Explorer 8.

Select Internet Explorer 8 by using the arrow keys, then ENTER.

To zoom in or out on a webpage:

To zoom in or out on a webpage:

Click the Magnifying glass icon at the bottom right corner of the Internet Explorer window. Or, select the arrow to open the list of options and select one.

Press CTRL + PLUS SIGN (+) to zoom in, or CTRL + HYPHEN (-) to zoom out.

Text to speech

Text-to-Speech (TTS) capabilities for a computer refer to the ability to play back text in a spoken voice. In Internet Explorer 8 there is no special option for it. But there are extensions which people can use instead of the inbuilt option.

21

WEB DESIGN AND DEVELOPMENT 2011

Privacy mode In Private Browsing can help keep your browsing history private on shared computers such as in the home, Internet caf or public kiosk. History data that is accumulated while browsing the web in an Internet Explorer In Private window, such as temporary Internet files, web address history, or cookies, will be removed when you close the window. History in other Internet Explorer Windows (not using In Private), will not be affected. The In Private Browsing experience prevents local storage on your computer of the following:

New cookies are not stored New history entries will not be recorded New temporary Internet files will be deleted after the Private Browsing window is closed Form data is not stored Entered passwords are not stored Addresses typed into the Address bar are not stored Queries entered into the search box are not stored

In Private Browsing is not designed to obscure your identity to your internet provider or web servers on the Internet. It does not prevent data, such as your IP address, from being sent to websites you visit. (Microsoft 2011) This option is enable in the Internet Explorer 8.

22

WEB DESIGN AND DEVELOPMENT 2011

8- IE 8

Auto Updater The Automatic Update is likely to change the situation significantly. All IE6 and IE7 users on Windows XP, Vista, Server 2003 and Server 2008 will receive an IE8 update notification. It will be marked as High-priority in XP and 2003, and Important in Vista and 2008. However, IE8 will not install automatically and a welcome screen will give users the option to install, ask later, or abandon the upgrade.

Firefox 3

Operating Systems

Windows 2000 Windows XP

9- Firefox icon

23

WEB DESIGN AND DEVELOPMENT 2011

Windows Server 2003 Windows Vista Bookmarks management Firefoxs bookmarks management capabilities are limited. It is for instance not possible to check for duplicate bookmarks or dead links in the bookmarks manager or to comfortably change the bookmarks that are displayed in one of the web browser toolbars. Download management Two other features users may find helpful are the Download Manager and the Find feature. The Download Manager is available to help users keep track of their web downloads, monitor the download progress of those large downloads, and even allow users the ability to pause and resume downloads in progress. The Downloads Window opens by default when a web download is started, showing the current status of your active downloads and your download history. Users can clear their current list at any time with the Clear List button at the bottom, left of the window. Individual downloads can also be removed, opened, or even located on your system by right clicking the download. (Fusion 2011)

10- Download management

24

WEB DESIGN AND DEVELOPMENT 2011

Password management If you dont have the memory of an elephant or dont want to write down all of your passwords (good thinking), Firefox can remember them for you. Firefoxs Password Manager is enabled by default and will prompt you, at the top of the web page, to store a password when entering it for the first time. You can choose to remember it, never ask again for that site, or just ignore it for now. Once one of the first two options is chosen, the setting will be saved and you wont be prompted again for that site. No additional setup is required. (Fusion 2011)

11- Password bar

If youre rather handle your passwords the old fashioned way, the feature is easily disabled by visiting the Security section of the Options panel and un-checking the Remember passwords for sites option. If you do choose to use the feature, a number of additional choices are available in the Options panel. More advanced users can manually manage their password list, choose or modify which sites to allow or exclude, and even encrypt their password list with a master password for added security. This option can be useful if others have access to your system; just dont forget the master password. Without it, all of the stored passwords will remain encrypted and cannot be used, as Firefox requires the master password when starting to unlock the information. (Fusion 2011) Spell check one new addition to Firefox that is often overlooked is its built-in spell checker. With web-mail, blogs, and on-line forms (just to name a few), Firefox checks your spelling as you go. There is no longer a need for special add-ons or extra steps. Misspelled words are highlighted (underlined in red, shown below) right in the browser. The spell checker works just like any standard word processor, allowing users to choose from a list of suggested spellings with a simple right click of the word. (Fusion 2011)

25

WEB DESIGN AND DEVELOPMENT 2011

Spell checking is enabled by default, but if you would like to disable it, go to the Advanced section of the Options panel and un-check the box next to the Check my spelling as I type option in the General Tab. (Fusion 2011)

Search Engine toolbar Web searches are performed on a regular basis by most every Firefox user, and the quick search field (shown in blue) provides instant searching directly from the toolbar.

12- Search bar

Click in the search field, type in your search, and hit enter or click the magnifying glass icon on the right of the field. The current window will then display your results. Its that simple. Firefox will even help you search by providing suggested searches as you type. While suggestions may not be available for every search engine, they are available for most and can prove extremely useful for finding the right search terms. To accept a suggested search, simply click on the search term in the drop down list and Firefox will display its results. (Fusion 2011)

13-Search engine

26

WEB DESIGN AND DEVELOPMENT 2011

Its great that the quick search field is right at your fingertips, but its most powerful feature is that the search box is designed to work your way. Not only does it include the most popular search engines, but users can also access news and information sites, social sites, and even their favorite shopping sites (Amazon and Best Buy, for example). The quick search field isnt just for Google and Yahoo anymore. Hundreds of search engines are available to choose from and users can switch between them with a few simple clicks. Clicking the icon on the left of the search field will display your most popular search engines and selecting one will activate it for your next search. The bottom link (Manage Search Engines) provides access to the search engines currently installed and provides a link below the list (Get more search engines ) to install additional ones. (Fusion 2011)

14-Manage Search engines

Tab browsing

27

WEB DESIGN AND DEVELOPMENT 2011

Tabbed browsing is a great feature available to help users stay more organized when working with multiple web pages. Instead of having multiple browser windows open at once, inevitably cluttering your desktop, you can open additional pages as tabs (shown in red). To open a new web page or view a link in a tab, visit the File menu (File New Tab) or right

click a link and choose Open Link in New Tab . Tabbed browsing allows you to keep all open web pages together in one window, simply clicking on the name of the page (or tab) you wish to view. (Fusion 2011)

15-Tabs browsing

The active tab (tab displaying the current web page) will be highlighted for quick reference to your current location.

16-Tab current using

28

WEB DESIGN AND DEVELOPMENT 2011

Firefox Tip #1: If you have a large number of web pages open and cant see the full page name, clicking the arrow button on the far right of the tab bar (or far left, depending on your current theme) will display a list of all open tabs for you to choose. This is a quick and simple way to navigate tabs without having to resize the browser window. If you dont want to have Firefox save your session (the pages you were viewing when you quit Firefox) every time, or struggle to remember a word or phrase for the Awesome Bar to find, a nice alternate is to use the Session Restore feature. This feature is only available when you are closing multiple tabs or windows at once, but can be an extremely useful feature none the less. With multiple tabs or windows open, all you have to do is Exit Firefox (File Exit) and you will be asked if you want Firefox to save your information for next time. If you change your mind, you can always quit without saving or Cancel and leave Firefox running if you choose. If you would like Firefox to handle exiting the same way every time, simply check the Do not ask next time box before picking an option and Firefox will store that preference for you. (Fusion 2011)

17- Data saving

If you change your mind later, you can always reset the preference from the Options panel. Check the box for Warn me when closing multiple tabs from the Tabs section of the Options panel and Firefox will restore the prompt to its original setting (shown above). Additional preferences relating to tabs can be found in the Tabs section of the Options Panel. (Fusion 2011)

29

WEB DESIGN AND DEVELOPMENT 2011

Pop-up blocking

Banish pop-ups (and pop-under windows) from your surfing experience once and for all. Or, find a happy medium: choose to view blocked pop-ups or create an allow list of sites whose pop-ups youre okay with seeing. (firefox 2011)

Form management

When youre filling out an online form like your shipping address, Firefox will suggest information for each field based on your most common answers for similar fields in other forms. Tired of typing out the same answers over and over? Youll be zipping through the forms in no time! (firefox 2011) Page Zooming Want to see captions and pictures in a larger size? An elegant new zoom feature lets you swoop in and see the details on web pages, zeroing in on what matters. The pages will scale equally, with all the elements of layout changing at the same level. (firefox 2011) Search of history Clear all your private data or just your activity over the past few hours with a few quick clicks. You have full control over what to delete, and then your info is gone for goodon your own computer or the one at your local library. Its that easy. (firefox 2011) Ad Filtering The Add-ons Manager has been redesigned to let you discover and install add-ons without ever leaving Firefox. Browse ratings, recommendations, descriptions and pictures of the add-

30

WEB DESIGN AND DEVELOPMENT 2011

ons in action to help you make your selection. Your Add ons Manager even lets you view, Add-ons manage and disable third-party plug in a few easy clicks, checking and auto-updating any of party plug-in updating your installed add-ons every time you open the Manager pane. ons

18-Add-ons

Emphasis on Accessibility By minimizing keystrokes, allowing users to zoom in on Web pages and supporting screen readers, Firefox is that much easier to use for those with mobility disabilities and visual impairments.

31

WEB DESIGN AND DEVELOPMENT 2011

Chrome 7

Google Chrome showing Wikipedia

Developer(s)

Google Inc.

Initial release

September 2, 2008 2 years ago 2008;

Stable release

11.0.696.68 (May 13, 2011; 3 days ago)[+/ +/]

Preview release

12.0.742.53 (Beta) (May 13, 2011; 3 days ago ago) 13.0.761.0 (Dev) (May 13, 2011; 3 days ago ago)

32

WEB DESIGN AND DEVELOPMENT 2011

[+/]

Written in Operating system

C++, Assembly, Python, JavaScript Linux Mac OS X (10.5 and later, Intel only) Windows (XP SP2 and later)

Engine Available in

WebKit (based on KHTML) 50 languages

Development status Activ Type License Web browser Google Chrome Terms of Service; WebKit: BSD/LGPL\ V8: BSD Website google.com/chrome

33

WEB DESIGN AND DEVELOPMENT 2011

Operating systems

Linux Mac OS X (10.5 and later, Intel only) Windows (XP SP2 and later)

Security mode

19-Chrome icon

Chrome periodically retrieves updates of two blacklists (one for phishing and one for malware), and warns users when they attempt to visit a harmful site. This service is also made available for use by others via a free public API called "Google Safe Browsing API". Google notifies the owners of listed sites who may not be aware of the presence of the harmful software. Chrome will typically allocate each tab to fit into its own process to "prevent malware from installing itself" and prevent what happens in one tab from affecting what happens in another; however, the actual process-allocation model is more complex. Following the principle of least privilege, each process is stripped of its rights and can compute, but cannot write files or read from sensitive areas (e.g. documents, desktop)this is similar to the "Protected Mode" used by Internet Explorer on Windows Vista and Windows 7. The Sandbox Team is said to have "taken this existing process boundary and made it into a jail"; for example, malicious software running in one tab is supposed to be unable to sniff credit card numbers entered in another tab, interact with mouse inputs, or tell Windows to "run an executable on start-up" and it will be terminated when the tab is closed. This enforces a simple computer security model whereby there are two levels of multilevel security (user and sandbox) and the sandbox can only respond to communication requests initiated by the user.[72] On Linux sandboxing uses the seccomp mode.

34

WEB DESIGN AND DEVELOPMENT 2011

Typically, plugins such as Adobe Flash Player are not standardized and as such, cannot be sandboxed as tabs can be. These often must run at, or above, the security level of the browser itself. To reduce exposure to attack, plug ins are run in separate processes that communicate with the renderer, itself operating at "very low privileges" in dedicated per-tab processes. Plug-in will need to be modified to operate within this software architecture while following the principle of least privilege. Chrome supports the Netscape Plug-in Application Programming Interface (NPAPI), but does not support the embedding of ActiveX controls. On March 30, 2010 Google announced that the latest development version of Chrome would include Adobe Flash as part of the browser, eliminating the need to download and install it separately. Flash would be kept up to date as part of Chrome's own updates. Java applet support is available in Chrome with Java 6 update 12 and above. Support for Java under Mac OS X was provided by a Java Update released on May 18, 2010. (Wikimedia Foundation 2011)

Search history This is a feature Chrome borrowed from Google Desktop / Google Web History. Type Ctrl+H to open your browser history and search for a term.

20- History search

35

WEB DESIGN AND DEVELOPMENT 2011

Bookmarks management To save the webpage youre on, click the star icon on the address bar. In the bookmarks bubble that pops up, select the folder where youd like to file the bookmark. Learn more about creating bookmarks. The bookmarks bar and bookmark manager are handy tools for managing your bookmarks. All your bookmarks and bookmark folders show up on the bookmarks bar. You can dock the bookmarks bar under the Google Chrome toolbar by pressing Ctrl+B on your keyboard. To search or edit your bookmarks and bookmark folders, open the bookmark manager by pressing Ctrl+Shift+B. (CMS. 2009) Search Engine tool bar This is brilliant. If you visit a website that includes site search (for instance:search.labnol.org) - Chrome will automatically recognize and add that search engine for you so the next time you can perform a search on that site via the Chrome address bar itself.

21-Search engine

To see this in action, open cnn.com or search.labnol.org in your Chrome browser and then type cnn.com followed by the tab key to search CNN. Simple. (Agarwal 2008) Tab Navigation We got classic tab system which are appearing above the URL bar which is new style that you do not fine in other browsers which is new in chrome. A new tab button to add the tabs in the browser.

36

WEB DESIGN AND DEVELOPMENT 2011

22-Tabs

Under the tabs you had the forward, back buttons and Reload button, bookmark button and address bar. Using the address bar you can navigate to site and can use it for searching the Internet. Privacy mode 1. Incognito mode When you don't want your website visits or downloads to be recorded in your browsing and download histories, you can browse in incognito mode. In addition, any cookies created while in incognito mode are deleted after you close the incognito window. When you're browsing in incognito mode, you'll see the incognito icon in the corner.

Incognito mode is particularly handy since it's an easy way to browse the web in a private way without needing to change your privacy settings back and forth between browsing sessions. For example, you can have one regular session as well as one incognito session in separate windows at the same time. 2. Privacy preferences You can control all your privacy preferences for Chrome from the Options dialog, under the Privacy section located at the top of the Under the Hood tab.

37

WEB DESIGN AND DEVELOPMENT 2011

23-privacy options

3. Clearing your browsing data With Chrome, you can clear your browsing data at any time so that this information is not stored in your browser. You have full control over which types of browsing data you'd like to erase from your browser, including browsing and download histories, cookies, saved passwords, and saved form data. 4. Controlling privacy preferences for cookies, images, JavaScript, and plugins Under Chrome's content settings, you can control your privacy preferences for cookies, images, JavaScript, and plugins on a site-by-site basis. For example, you can set up cookie rules to automatically allow cookies only for a specified list of sites that you trust, and then manually manage cookie blocking and setting for all other sites. 5. Opting out of ad personalization Advertisers use cookies to personalize your ads and improve your experience, so that you see ads you are interested in. Advertising companies that are members of the Network Advertising Initiative (NAI) and other self-regulatory efforts allow you to opt out of this personalization.

38

WEB DESIGN AND DEVELOPMENT 2011

6. Understanding other data sent by the browser We've taken great care to make sure that Chrome is designed with your privacy in mind. It only communicates with Google services where absolutely necessary to deliver features and functionality. You can disable features that require this kind of communication in Chrome's options so you are in control of what is sent to Google when you use Chrome. (Google 2011)

Pop-up Blocker

Dont let pop-up windows get in the way of your browsing. Adjust your settings for pop-up blocking: 1. Click the Tools menu. 2. Select Options. 3. Click the Under the Hood tab. 4. If you want to see pop-ups, select the Notify me when a pop-up is blocked checkbox. 5. Click the Close button. If you allow pop-ups, youll be able to see the number of pop-ups for a given webpage at the bottom right-hand corner of the browser window. Click the pop-up alert to expand any of the pop-ups. To dismiss the pop-up, click the X. If you dont want pop-ups to display at all, deselect the Notify me when a pop-up is blocked option in any pop-up alert or in the Options menu. At this time, its not possible to choose specific websites where pop-ups should be blocked (CMS. 2009)

Password management

Google Chrome can save usernames and passwords for websites where you need to sign in. The browser can then fill in the sign-in fields for you automatically when you next visit these websites.

39

WEB DESIGN AND DEVELOPMENT 2011

1. Click the Tools menu. 2. Select Options. 3. Click the Minor Tweaks tab. 4. In the Passwords section, select one of the following options:

Offer to save passwords: Every time you sign into a new website, Google Chrome will display a message at the top of the page, asking whether youd like to save the password you just typed.

Never save passwords: Select this option if you dont want Google Chrome to offer to save your passwords.

5. Click Close. If you allow Google Chrome to store your passwords, youll see the following message every time you sign into a new website. Click Save password if youd like Google Chrome to save you the trouble of retyping your username and password every time you go to the website. Alternatively, click Never for this site if you dont want Google Chrome to store the password you just used for the website. Auto updater To make sure that you are protected by the latest security updates, Chrome checks for updates regularly to make sure that it's always kept up-to-date. The update check ensures that your version of Chrome is automatically updated with the latest security features and fixes without any action required on your part.

Interested in the technical details? Read our blogposts on sandboxing, Safe Browsing, and new security features to protect users against threats such as XSS and click-jacking. You can also learn more about security, sandboxing and Safe Browsing in the Chrome comic book. (Google 2011)

40

WEB DESIGN AND DEVELOPMENT 2011

Web designing languages

41

WEB DESIGN AND DEVELOPMENT 2011

TASK(P2) Q 05
XHTML
24-XHTML icon

(EXtensible HTML) A markup language for Web pages from the W3C. XHTML combines HTML and XML into a single format (HTML 4.0 and XML 1.0). Like XML, XHTML can be extended with proprietary tags. Also like XML, XHTML must be coded more rigorously than HTML. Over the years, HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding. With XHTML, coders must conform to the rules. (Cooperation 2011)

CSS

A style sheet format for HTML documents endorsed by the World Wide Web Consortium. CSS1 (Version 1.0) provides hundreds of layout settings that can be applied to all the subsequent HTML pages that are downloaded. CSS2 (Version 2.0) adds support for XML, oral presentations for the visually impaired, downloadable fonts and other
25-CSS icon

enhancements.

CSS3 has been in ongoing development for several years and extends Version 2 with vertical text, elaborate borders and backgrounds, user interaction and speech, among the highlights. (Cooperation 2011)

42

WEB DESIGN AND DEVELOPMENT 2011

XML EXtensible Markup Language) An open standard for describing data from the W3C. It is used for defining data elements on a Web page and business-to-business documents. XML uses a similar tag structure as HTML; however, whereas HTML defines how elements are displayed, XML defines what those elements contain. While HTML uses predefined tags, XML allows tags to be defined by the developer of the page. Thus, virtually any data items, such as "product," "sales rep" and "amount due," can be identified, allowing Web pages to function like database records. By providing a common method for identifying data, XML supports business-to-business transactions and has become "the" format for electronic data interchange and Web services. (Cooperation 2011) Java script

26-javasript icon

A popular scripting language that is widely supported in Web browsers and other Web tools. It adds interactive functions to HTML pages, which are

otherwise static, since HTML is a display language, not a programming language. JavaScript is easier to use than Java, but not as powerful and deals mainly with the elements on the Web page. On the client, JavaScript is maintained as source code embedded into an HTML page. On the server, it is compiled into bytecode (intermediate language), similar to Java programs. JavaScript evolved from Netscape's LiveScript language. First released with Navigator 2.0, it was made more compatible with Java. JavaScript does not have the programming overhead of Java, but can be used in conjunction with it. For example, a JavaScript script could be used to display a data entry form and validate the input, while a Java applet or Java servlet more thoroughly processes the information. JavaScript is also used to tie Java applets together.

43

WEB DESIGN AND DEVELOPMENT 2011

Php PHP Hypertext Preprocessor) A scripting language used to create dynamic Web pages. With syntax from C, Java and Perl, PHP code is embedded within HTML pages for server side execution. It is commonly used to extract data out of a database and present it on the Web page. NT/2000 and Unix Web servers support the language, and it is widely used with the mSQL database. PHP was originally known as "Personal Home Page." (Cooperation 2011) Relationships

XHTML and CSS are both languages that are used to make web pages.

XHTML is very similar to HTML and serves the same purpose. XHTML & HTML are both used to set the structure of the page - to define images, links, text, headlines, etc.

CSS (Cascading Style Sheets) is used to define the style of the page - colors, spacing, etc.

If you were to think of a web page as a person, XHTML would be the skeleton, and CSS would be the skin, clothing, make-up, etc. (Cooperation 2011) HTML (Hyper Text Markup Language) is the most widely accepted language used to build websites. It is the main structure of a website. It builds tables, creates divisions, gives a heading message (In the title bar of programs), and actually outputs text. XHTML (eXtensive Hyper Text Markup Language) is the same as HTML, except it has a cleaner syntax. XHTML uses the same tags as HTML, so people who know HTML know messy XHTML. New rules apply in XHTML, such as tags always needing to be ended; Tags need to be "Nested" properly, and such. dHTML (Dynamic Hyper Text Markup Language) is not a language, but the art of

44

WEB DESIGN AND DEVELOPMENT 2011

using HTML, JavaScript, and CSS together to create dynamic things, such as navigation menus. (Cooperation 2011) HTML and XHTML are the primary technology used to mark up web pages. Proper use of these technologies simply marks up the meaning of the pages. To specify the layout and visual design, you use CSS. All of these languages (HTML / XHTML, and CSS) are markup languages, which means they are not 'true' programming languages. They are used to set up a page, but they do not allow more advanced techniques like saving files, storing data, sending emails, and interacting with database systems. (Cooperation 2011)

If you want to make your web page more interactive, you need to add a programming language. Web programming languages come in two flavors: Client-side languages are embedded into the web browser. Of these, JavaScript is most popular, because it interacts directly with the web page and is included with nearly every browser. (Java and Flash applets are also popular, but they are logically separated from the page.) (Cooperation 2011)

PHP is the most commonly used server-side programming language. When you write a program in PHP, the web server sends the code through the PHP interpreter. PHP programs produce HTML / XHTML and CSS as output, which is sent to the client. An HTML page with a form can send its data to a PHP program on the server. (Cooperation 2011)

Essentially, PHP uses HTML as its user interface mechanism. The user never sees any PHP. By the time it gets to the user, it's HTML or XHTML. This means PHP programs can be written without much concern about what type of browser the user has. (Cooperation 2011)

The most common use of PHP (and other server-side languages) is to interface with relational database management systems like MySQL. This allows the developer to

45

WEB DESIGN AND DEVELOPMENT 2011

build a dynamic web site with much of the content embedded in a database. Content management systems are an example of data-driven web development. Such systems allow a user with little technical knowledge to update a web site by interacting with online forms. Most commercial websites today use some form of a content management system. Drupal and Joomla are the most commonly-used CMS systems today, and both are based on PHP and MySQL. (Cooperation 2011)

HTML is the language in which web pages are written to be interpreted by the server
as a graphic interface. Javascipt is similar, but is actually a web-adapted version of actual programming code, intended to write applets (small, web-based applications) for use on websites. They are both a type of code, but html is NOT a programming code. The HTML defines what the webpage looks like, the javascript handles things like counters, games, etc. Other web-based scripting languages, such as php and asp can be used to create entire webpages, but, like Javascript, are generally confined to handling what goes beyond the cosmetics of a website. The cosmetics are what HTML is for. (Cooperation 2011) PHP is a server-side scripting language, which means that it is executed by the server (computer) where the webpage is hosted, and only results of this execution are sent to your browser. These results are usually in the form of HTML page. (Cooperation 2011)

JavaScript is a client-side scripting language, which means that the script is delivered into your browser in the first place, which then executes it. It's like it runs a little piece of code that can interact with things on the page which browser has already loaded, but this interaction is only happening in your browser, locally, not on the page which is on the server (unless it utilises AJAX). (Cooperation 2011)

46

WEB DESIGN AND DEVELOPMENT 2011

Commercial Tools

47

WEB DESIGN AND DEVELOPMENT 2011

TASK(P2) Q 06
Adobe Photoshop

Automatic lens correction Save time with automatic correction of lens distortions, chromatic aberration, and vignetting. Photoshop CS5 uses an image file's EXIF data to make precise adjustments based on the type of camera and lens you used.

Lens Correction filter improvements Work more intuitively with the Lens Correction filter. Grid display is off by default; chromatic aberration correction sliders allow decimal point adjustments; a third slider can correct common green/magenta aberrations; and more.

Straighten Image tool Quickly straighten any crooked image. Simply drag a straight line from the Ruler tool onto your image, and the image will snap to the line.

48

WEB DESIGN AND DEVELOPMENT 2011

Gradient tool preset for neutral density Use the Neutral Density preset to emulate a neutral density filter, clicking once to have the Gradient tool darken an overexposed patch of a photo while leaving the rest unaltered.

Superior HDR imaging Create photo-realistic or surreal HDR images with unprecedented speed and control. Get better-than-ever results thanks to automatic ghost removal and greater control with tone mapping and adjustments, and even give single-exposure photos the look of HDR.

Black-and-white conversion Explore an endless variety of black-and-white looks. Use the integrated Lab B&W Action to interactively color images, create gorgeous HDR black-and-whites with greater ease and speed, and experiment with a variety of presets. HDR Toning Give any single-exposure image the photo-realistic or wildly surreal look of an HDR image. The HDR Toning feature offers an easy way to bring the rich aesthetic of high dynamic range to your 8-bit images. Industry-leading color correction Use Dodge, Burn, and Sponge tools that intelligently preserve color and tone details, Curves controls that let you make automatic adjustments with included presets or those you create, a histogram, color channel lines, and more.

Noise removal Remove noise common to high-ISO images and consumer-camera shots while preserving color and detail. Maintain a photo's natural look, avoiding an oversharpened feel as you

49

WEB DESIGN AND DEVELOPMENT 2011

maximize quality.

Better conversions with new demosaicing Process raw images with the industry-leading Adobe Photoshop Camera Raw 6 plug-in, which offers powerful demosaicing technology for unmatched conversion quality.

Support for more cameras and Photoshop Lightroom Enjoy tight integration with Adobe Photoshop Lightroom software as well as support for over 275 camera models.

Additive grain Make a digital photo look more organic or film-like by using a simple slider to add grain. Save grain settings as presets that you can apply to other photos to achieve a consistent look. Post-crop vignetting Enjoy more control when performing post-crop vignetting, and save favorite vignette effects as presets. Complex selections made easy Select specific areas within an image in fewer clicks. Easily select intricate image elements, such as hair; eliminate background color around selection edges; and automatically vary selection edges and perfect masks using new refinement tools.

50

WEB DESIGN AND DEVELOPMENT 2011

Content-Aware Scaling Automatically recompose an image as you resize it, smartly preserving vital areas as the image adapts to the new dimensions. Get the perfect image in one step without time-intensive cropping and retouching. Content-Aware Fill Remove any image detail or object and watch as Content-Aware Fill magically fills in the space left behind. This breakthrough technology matches lighting, tone, and noise so it looks as if the removed content never existed. Puppet Warp Precisely reposition any image element to create a more visually appealing photo. For example, easily straighten an arm that's bent at an awkward angle. Selection and mask refinement tools Automatically vary selection edges and perfect masks using convenient refinement tools. Color decontamination Eliminate background color around the edges of your selection with the Quick Selection tool's automatic color decontamination capabilities. Expert retouching Retouch images easily and precisely by previewing source pixels within the cursor of the Clone Stamp and the Healing Brush. Set multiple source points, scale, and rotate in the Clone Source palette. Perspective-based editing Create packaging mockups and more with Vanishing Point, which lets you create multiple planes in an image; connect them at any angle; and then wrap graphics, text, and images around them. Smart Filters Add, adjust, and remove filters on an image without resaving the image or starting over to

51

ERROR: stackunderflow OFFENDING COMMAND: ~ STACK: