Sunday, April 1, 2012

Mobile Telephony GSM & CDMA

Mobile Internet and telephony

A mobile or cell(ular) (tele)phone is a long-range, portable electronic device for personal telecommunications over long distances. Personal Access Communications System (PACS) is a type of wireless telephone network compatible with telephone sets, answering machines, fax machines, and computers. A PACS can be used like a local area network (LAN) with voice capability and can be part of a larger network or can be connected into the telephone system. A typical PACS resembles a cellular telephone … network in miniature. It contains numerous radio port control units (RCPUs), each of which is the equivalent of a cellular repeater, but with a shorter communications range, linking subscriber sets within a radius of a few hundred feet. RPCUs are located on utility poles, atop buildings, and in other unobtrusive places that offer good coverage for several hundred feet in all directions. RPCU transmitter power is limited to 800 milliwatts. The operating frequency is in the UHF (ultra-high-frequency) radio range at 1.9 GHz.
Most current mobile phones connect to a cellular network of base stations (cell sites), which is in turn interconnected to the public switched telephone network (PSTN) (the exception are satellite phones). Cellular networks were first introduced in the early to mid 1980s (the 1G generation). Prior mobile phones operating without a cellular network (the so-called 0G generation), such as Mobile Telephone Service, date back to 1945. Until the mid to late 1980s, most mobile phones were sufficiently large that they were permanently installed in vehicles as car phones. With the advance of miniaturization, currently the vast majority of mobile phones are handheld. In addition to the standard voice function of a telephone, a mobile phone can support many additional services such as SMS for text messaging, email, packet switching for access to the Internet, and MMS for sending and receiving photos and video.
The world's largest mobile phone manufacturers include Audiovox, BenQ-Siemens, High Tech Computer Corporation, Fujitsu, Kyocera, LG, Motorola, NEC, Nokia, Panasonic (Matsushita Electric), Pantech Curitel, Philips, Sagem, Samsung, Sanyo, Sharp, Siemens SK Teletech, Sony Ericsson, T&A Alcatel and Toshiba.The world's largest mobile phone operators include Orange SA, China Mobile and Vodafone.There are also specialist communication systems related to, but distinct from mobile phones, such as Professional Mobile Radio. Mobile phones are also distinct from cordless telephones, which generally operate only within a limited range of a specific base station. Technically, the term mobile phone includes such devices as satellite phones and pre-cellular mobile phones such as those operating via MTS which do not have a cellular network, whereas the related term cell(ular) phone does not. In practice, the two terms are used nearly interchangeably, with the preferred term varying by location.



Mobile Technology

Mobile phones and the network they operate under vary significantly from provider to provider, and even from nation to nation. However, all of them communicate through electromagnetic radio waves with a cell site base station, the antennas of which are usually mounted on a tower, pole, or building.
The phones have a low-power transceiver that transmits voice and data to the nearest cell sites, usually 5 to 8 miles (0.8 to 13 kilometres) away. When the cellular phone or data device is turned on, it registers with the mobile telephone exchange, or switch, with its unique identifiers, and will then be alerted by the mobile switch when there is an incoming telephone call. The handset constantly listens for the strongest signal being received from the surrounding base stations. As the user moves around the network, the mobile device will "handoff" to various cell sites during calls, or while waiting (idle) between calls it will reselect cell sites.
Cell sites have relatively low-power (often only one or two watts) radio transmitters which broadcast their presence and relay communications between the mobile handsets and the switch. The switch in turn connects the call to another subscriber of the same wireless service provider or to the public telephone network, which includes the networks of other wireless carriers.
The dialogue between the handset and the cell site is a stream of digital data that includes digitized audio (except for the first generation analog networks). The technology that achieves this depends on the system which the mobile phone operator has adopted. Some technologies include AMPS for analog, and TDMA, CDMA, GSM, GPRS, EV-DO, and UMTS for digital communications. Each network operator has a unique radio frequency band.
In cellular service there are two main competing network technologies: Global System for Mobile Communications (GSM) and Code Division Multiple Access (CDMA). Cellular carriers including Sprint PCS, Cingular Wireless, Verizon and T-Mobile use one or the other. Understanding the difference between GSM and CDMA will allow you to choose a carrier that uses the preferable network technology for your needs.
The GSM Association is an international organization founded in 1987, dedicated to providing, developing, and overseeing the worldwide wireless standard of GSM. CDMA, a proprietary standard designed by Qualcomm in the United States, has been the dominant network standard for North America and parts of Asia. However, GSM networks continue to make inroads in the United States, as CDMA networks make progress in other parts of the world. There are camps on both sides that firmly believe either GSM or CDMA architecture is superior to the other. That said, to the non-invested consumer who simply wants bottom line information to make a choice, the following considerations may be helpful.
Coverage: The most important factor is getting service in the areas you will be using your phone. Upon viewing competitors' coverage maps you may discover that only GSM or CDMA carriers offer cellular service in your area. If so, there is no decision to be made, but most people will find that they do have a choice.
Data Transfer Speed: With the advent of cellular phones doing double and triple duty as streaming video devices, podcast receivers and email devices, speed is important to those who use the phone for more than making calls. CDMA has been traditionally faster than GSM, though both technologies continue to rapidly leapfrog along this path. Both boast "3G" standards, or 3rd generation technologies.
EVDO, also known as CDMA2000, is CDMA's answer to the need for speed with a downstream rate of about 2 megabits per second, though some reports suggest real world speeds are closer to 300-700 kilobits per second (kbps). This is comparable to basic DSL. As of fall 2005, EVDO is in the process of being deployed. It is not available everywhere and requires a phone that is CDMA2000 ready.
GSM's answer is EDGE (Enhanced Data Rates for GSM Evolution), which boasts data rates of up to 384 kbps with real world speeds reported closer to 70-140 kbps. With added technologies still in the works that include UMTS (Universal Mobile Telephone Standard) and HSDPA (High Speed Downlink Packet Access), speeds reportedly increase to about 275—380 kbps. This technology is also known as W-CDMA, but is incompatible with CDMA networks. An EDGE-ready phone is required.
In the case of EVDO, theoretical high traffic can degrade speed and performance, while the EDGE network is more susceptible to interference. Both require being within close range of a cell to get the best speeds, while performance decreases with distance.
Subscriber Identity Module (SIM) cards: In most of the countries only GSM phones use SIM cards. The removable SIM card allows phones to be instantly activated, interchanged, swapped out and upgraded, all without carrier intervention. The SIM itself is tied to the network, rather than the actual phone. Phones that are card-enabled can be used with any GSM carrier.
The CDMA equivalent, a R-UIM card, is only available in parts of Asia but remains on the horizon for the U.S. market. CDMA carriers in the U.S. require proprietary handsets that are linked to one carrier only and are not card-enabled. To upgrade a CDMA phone, the carrier must deactivate the old phone then activate the new one. The old phone becomes useless.
Roaming: For the most part, both networks have fairly concentrated coverage in major cities and along major highways. GSM carriers, however, have roaming contracts with other GSM carriers, allowing wider coverage of more rural areas, generally speaking, often without roaming charges to the customer. CDMA networks may not cover rural areas as well as GSM carriers, and though they may contract with GSM cells for roaming in more rural areas, the charge to the customer will generally be significantly higher.
International Roaming: If you need to make calls to other countries, a GSM carrier can offer international roaming, as GSM networks dominate the world market. If you travel to other countries you can even use your GSM cell phone abroad, providing it is a quad-band phone (850/900/1800/1900 MHz). By purchasing a SIM card with minutes and a local number in the country you are visiting, you can make calls against the card to save yourself international roaming charges from your carrier back home. CDMA phones that are not card-enabled do not have this capability.
According, CDMA networks support over 270 million subscribers worldwide, while tallies up their score at over 1 billion. As CDMA phones become R-UIM enabled and roaming contracts between networks improve, integration of the standards might eventually make differences all but transparent to the consumer.
The chief GSM carriers in the United States are Cingular Wireless, recently merged with AT&T Wireless, and T-Mobile USA. Major CDMA carriers are Sprint PCS, Verizon and Virgin Mobile.

Instructional designing

Instructional Design
Instructional Design is the systematic process of translating general principles of learning and instruction into plans for instructional materials and learning.
Instructional Design as a Process:
Instructional Design is the systematic development of instructional specifications using learning and instructional theory to ensure the quality of instruction. It is the entire process of analysis of learning needs and goals and the development of a delivery system to meet those needs. It includes development of instructional materials and activities; and tryout and evaluation of all instruction and learner activities.
Three Purposes of the Instructional Design Process
1.      To identify the outcomes of the instruction
2.      To guide the developing the instructional content (scope and sequence)
3.      To establish how instructional effectiveness will be evaluated.
Stages of Instructional Design
 Stage 1: Define instructional goals.
A goal may be defined as a general statement of desired accomplishment. It does not specify exactly all of the components or steps or how each step will be achieved on the road to accomplishing the goal. Example Goals: (1) Students will master the procedure of a generic history and physical. (2) Students will understand the biochemistry of diabetes.
 Stage 2: Conduct an instructional analysis
Identify what learning steps will be involved in reaching the goal. This is done through a task analysis, which identifies each step and the skills needed in order to complete that step, and an information processing analysis, which identifies the mental operations the learner needs to employ in performing that skill. The task analysis is performed by asking "What are all of the things the student must know and/or be able to do to achieve the goal?"
 Stage 3: Identify entry behaviors/learner characteristics 
Having determined via the instructional analysis which steps and skills the learner must accomplish, it is now necessary to identify the knowledge and skill level that the learner possesses at the outset. Although there may be pronounced differences from learner to learner in in their knowledge and skill levels, the instruction must be targeted as much as possible to the level of the learners' needs.
 Stage 4:  Develop performance objectives.
At this stage, it is necessary to translate the needs and goals into objectives that are sufficiently specific to guide the instructor in teaching and the learner in studying. In addition, these objectives form the blueprint for testing as a means of evaluating both the instruction and the learning that has occurred. Example: The student will be able to explain the role of the Krebs cycle to thermogenesis.
 Stage 5:  Select an instructional method.
The purpose of selecting an instructional method is to identify and employ teaching strategies and techniques that most effectively achieve the performance objectives. Current educational theory and research support the use of instructional methods that make students active learners (e.g., lecture, lab, small group discussion, case-based study, simulations, independent study, etc.).
 Stage 6:  Assemble instructional material.
Once the instructional methodologies have been identified for each objective or unit of content, it is important to assemble the necessary instructional materials. The materials may be in various forms: print, computer, audio, audio-video, etc. Although the necessary instructional materials may already exist, they may need improvement or revision. For example, slides that have been used in the past but that have been problematic, need to be modified. The danger of settling on preexisting instructional materials is that some instructors may allow the materials to determine the direction of the instruction rather than vice versa. Currently, more instructors are using the Web as a way of making didactic information available to students, rather than using lectures or transcripts.
 Stage 7:  Plan and conduct formative evaluation.
Formative evaluation, evaluation that occurs from feedback while the instruction is in progress, provides data for revising and improving the instructional materials that were used and those that are yet to be used. It is important to remember that sometimes the plans that look so good on paper actually fail in practice. When possible, test instructional materials with one or a small group of students to determine how students use the materials, how much assistance they need, etc. Considering the teaching methods implemented and the course materials provided, are students learning what they should be?
 Stage 8:  Plan and conduct summative evaluation.
Summative evaluation, evaluation that occurs at the end of the instructional effort (unit, course, etc.), provides data on the effectiveness of the instructional effort as a whole. This is the evaluation that provides information on how the whole instructional unit enabled the learner to achieve the objectives that were established at the outset.

Instructional design models

Perhaps the most common model used for creating instructional materials is the ADDIE Model. This acronym stands for the 5 phases contained in the model:
  • Analyze - analyze learner characteristics, task to be learned, etc.
  • Design - develop learning objectives, choose an instructional approach
  • Develop - create instructional or training materials
  • Implement - deliver or distribute the instructional materials
  • Evaluate - make sure the materials achieved the desired goals
Most of the current instructional design models are spin-offs or variations of the ADDIE model; other models include the Dick & Carey and Kemp ISD models. One commonly accepted improvement to this model is the use of rapid prototyping. This is the idea of receiving continual or formative feedback while instructional materials are being created. This model attempts to save time and money by catching problems while they are still easy to fix.
Instructional theories also play an important role in the design of instructional materials. Theories such as behaviorism, constructivism, social learning and cognitivism help shape and define the outcome of instructional materials.

Technical Writing

Technical Writing
Technical writing is the presentation of information that helps the reader solve a particular problem. Technical communicators write, design, and/or edit proposals, manuals, web pages, lab reports, newsletters, and many other kinds of professional documents.

While technical writers need to have good computer skills, they do not necessarily have to write about computers all their lives. "Technical" comes from the Greek techne, which simply means "skill".

Every profession has its own special specialized forms of writing. Police officers, lawyers and social workers all write specialized reports -- and someone has to learn, perform, critique, and teach each one. Every major politician hires staff members to design, administer, and analyze surveys -- and to write the secret reports that get leaked to reporters. Somebody has to design tax forms and the accompanying instruction books, assembly instructions for toys, and scripts for product demonstrations or multimedia presentations.

For a large project, a technical writer may work with a graphic designer, an interface designer, several computer programmers, and a staff of freelance writers to design a huge web site. For a small project, or for a small company, the tech writer may be expected to do all of the above, all alone.

The first rule of technical writing is "know your audience." Writers who know their audiences well are in a position to suggest and implement solutions to problems that nobody else identifies.  Whenever one group of people has specialized knowledge that another group does not share, the technical writer serves as a go-between. But technical writers are not just translators, accepting wisdom from experts and passing it on unquestioningly; they also are in the business of generating truth, by choosing what gets written, and for whom, with the full knowledge that later readers will depend on the accuracy of what has been written. 

Technical editing may involve working with brilliant researchers and scientists, who may be world-class experts in fluid dynamics or swine reproduction, but who may not know a paragraph from a participle. Some of these will be eternally grateful for your help, and others may resent your interference.

Good technical writers are also good teachers. They excel at explaining difficult concepts for readers who will have no time to read twice. Technical writers have an excellent eye for detail. They know punctuation, syntax, and style, and they can explain these rules to authors who need to know why their drafts need to be changed.

Although they typically work on their own for much of the time, they also know how to coordinate the collaborative work of graphic artists, programmers, marketers, printers, webmasters, and the various "subject matter experts" (SMEs), who know all the answers but have never bothered to write them down anywhere

Wednesday, February 29, 2012

Use of Flash and Maya in Web page

Use of Flash in webs designing
Adobe Flash (formerly Macromedia Flash) is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast. More recently, it has been positioned as a tool for "Rich Internet Applications" ("RIAs").
Flash manipulates vector and raster graphics to provide animation of text, drawings, and still images. It supports bidirectional streaming of audio and video, and it can capture user input via mouse, keyboard, microphone, and camera. Flash contains an object-oriented language called ActionScript and supports automation via the JavaScript Flash language (JSFL).

Flash content may be displayed on various computer systems and devices, using Adobe Flash Player, which is available free of charge for common web browsers, some mobile phones, and a few other electronic devices (using Flash Lite).
Some users feel that Flash enriches their web experience, while others find the extensive use of Flash animation, particularly in advertising, intrusive and annoying, giving rise to a cottage industry that specializes in blocking Flash content. Flash has also been criticized for adversely affecting the usability of web pages.

Format:  SWF
Flash files are in the SWF format, traditionally called "ShockWave Flash" movies, "Flash movies," or "Flash applications", usually have a .swf file extension, and may be used in the form of a web page plug-in, strictly "played" in a standalone Flash Player, or incorporated into a self-executing Projector movie (with the .exe extension in Microsoft Windows). Flash Video files[spec 1] have a .flv file extension and are either used from within .swf files or played through a flv-aware player, such as VLC, or QuickTime and Windows Media Player with external codecs added.

The use of vector graphics combined with program code allows Flash files to be smaller—and thus for streams to use less bandwidth—than the corresponding bitmaps or video clips. For content in a single format (such as just text, video, or audio), other alternatives may provide better performance and consume less CPU power than the corresponding Flash movie, for example when using transparency or making large screen updates such as photographic or text fades.

Flash Player is a browser plugin, and cannot run within a usual e-mail client, such as Outlook. Instead, a link must open a browser window. A Gmail labs feature allows playback of YouTube videos linked in emails.

Flash Video

Virtually all browser plugins for video are free of charge and cross-platform, including Adobe's offering of Flash Video, which was first introduced with Flash version 6. Flash Video has been a popular choice for websites due to the large installed user base and programmability of Flash.

Flash Audio
Flash Audio is most commonly encoded in MP3 or AAC (Advanced Audio Coding) however it does also support ADPCM, Nellymoser (Nellymoser Asao Codec) and Speex audio codecs. Flash allows sample rates of 11, 22 and 44.1 kHz. It does not support 48 kHz audio sample rate, which is the standard TV and DVD sample rate.

For web designers, Autodesk Maya™ or simply Maya; is the ultimate 3-D animation tool used for the television and filming industry. It is also used in the web for animations and computer games and provides high-level of control over their 3D content workflows and pipelines.Artists and designers select Maya because of it has a perceptive graphic user interface that facilitates workflow customization and fine-tuning. Technical directors and programmers also use this because it is very reliable at work, has open architecture, supports almost all platforms, and is very easy to incorporate into any existing or new production pipeline. With Maya one can animate characters and other scene elements with a comprehensive range of specialized keyframe, nonlinear, and advanced character animation editing toolsets, including animation layers, graph etc.

Web designing

Web Designing

A website is collection of documents written in the HTML language. When a user looks at a website with a browser (e.g. Netscape), the browser is able to follow the instructions presented to it in HTML to make a website look a certain way.

An Average Website

An Average Website

This is an average website. 
The above HTML code for "the average website" is static. That is, if the user were to reload a static website, they would see the same content every time. Its content was written directly by an author, and when the user goes to the site, that code is downloaded into a browser and interpreted.
Static websites are the cheapest to develop and host, and many smaller companies still use these to get a web presence.
Advantages of static websites
•          Quick to develop
•          Cheap to develop
•          Cheap to host
Disadvantages of static websites
•          Requires web development expertise to update site
•          Site not as useful for the user
•          Content can get stagnant

Dynamic sites on the other hand can be more expensive to develop initially, but the advantages are numerous. At a basic level, a dynamic website can give the website owner the ability to simply update and add new content to the site. For example, news and events could be posted to the site through a simple browser interface. Dynamic features of a site are only limited by imagination. Some examples of dynamic website features could be: content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site (dynamic publishing).

Advantages of dynamic websites
•          Much more functional website
•          Much easier to update
•          New content brings people back to the site and helps in the search engines
•          Can work as a system to allow staff or users to collaborate
Disadvantages of dynamic websites
•          Slower / more expensive to develop
•          Hosting costs a little more
In contrast to a static website, a dynamic website is one whose content is regenerated every time a user visits or reloads the site. When you click open a new browser window to a dynamic page which tells the time at the particular second that it was accessed. If you click on the "Reload" button several times, you should notice that the time will change.
There are a variety of languages available to make a dynamic website but the most popular language is PHP: Hypertext Preprocessor. An advantage of PHP (besides that it is available at no cost AND that it is Free Software so you have the Freedom to run, copy, distribute, study, change and improve it) is that it offers cross-platform compatibility. In other words, it will not matter what platform (Microsoft Windows, Macintosh, or a version of Unix) your users are running, since there is no need for any additional software in order to see PHP's dynamic content. This is because the dynamic content is processed on the server side, and then sent as if it were static.

When you create a static web page, you simply write HTML code. Writing a dynamic page with PHP is similar, except you embed the PHP code inside of the HTML code. For this reason PHP is called an HTML-embedded scripting language.

Static Vs Dynamic websites - what's the difference?
Dynamic (in the website sense of the word) means that the data or content can change 'dynamically'
Dynamic websites are database driven which means the content is stored separate from the layout or template. When the user requests a web page, the layout and content are merged together and displayed, which is not the case with a static website. Your layout/template and your content become one using a static website and are not flexible.
Dynamic content like your text and images are fed from a database or Content Management System (CMS) so when the data is updated, the content on the website is also updated. This method opens up a lot of options for the flexibility and functionality of your website.

Interactive Components - Interactive components allows the client or customer visiting your website to interact with things like discussion forums, polls, comments, user registration processes and newsletter subscriptions. Interactive components also give you the ability to have complex e-commerce based websites such as online storefronts, ticket and accommodation booking systems for hotels, etc. The list can go on and on. These interactive compnonents mentioned here are only a few of the many things you can do with a dynamic website .

Image, banner and text management functionalities –  enables clients to upload images, banners and text to the website without having to wait for their webmaster to update it for them. With Stevenson Illustration websites clients don’t have to purchase any special software or spend weeks or even months learning how to use it, as would be the case with a static website if you, the client, wanted to manage the content yourself. With Stevenson Illustration’s dynamic websites, clients can update their own content virtually from anywhere in the world where they can get online and login with minimal training.

Powerful query functionalities:  Translated, means you can have a powerful ‘search’ tool, for instance, with more options to choose from than the typical ‘one’ item in your search box. For example, if you were a car dealer you could have multiple criteria to choose from to get one result. Year, Make, Model would give you all the results for vehicles that matched those three criteria. With a static website this is near to impossible to create. You can have a ‘search’ but there are normally no multiple options in the search form, only one.

Restrictive role based access: It means you can allow users to have different levels of access to the website and have password protected pages. For instance, say you want your secretary to be the one to keep the website current. You want her to have to ability to upload images, change text, upload new text, etc. She would have a user access level that would allow that. Visitors to your site who wanted to login, however, would only be allowed to participate in a user discussion forum like comment on an article or view webpages designed for registered users only. They would not be allowed to make any changes to the website.  All your visitor comments, etc. can be held for approval from you before they go live on the website. 
Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser. Web designers utilize markup language, most notably HTML for structure and CSS for presentation as well as JavaScript to add interactivity to develop pages that can be read by web browsers.
As a whole, the process of web design can include conceptualization, planning, producing, post-production, research, and advertising.

CSS stands for Cascading Style Sheet. It was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on - the markup of content, without worry about the design and layout.

Style sheet refers to the document itself. Style sheets have been used for document design for years. They are the technical specifications for a layout, whether print or online. Print designers use style sheets to insure that their designs are printed exactly to specifications. A style sheet for a Web page serves the same purpose, but with the added functionality of also telling the viewing engine (the Web browser) how to render the document being viewed.

Cascade is the special part. A Web style sheet is intended to cascade through a series of style sheets, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in Web style sheets.

Every Web page is affected by at least one style sheet, even if the Web designer doesn't apply any styles. This style sheet is the user agent style sheet - the default styles that the Web browser will use to display a page if no other instructions are provided. But if the designer provides other instructions, the browser needs to know which instructions have precedence.

Where is CSS Used?

CSS is used to style Web pages. But there is more to it than that. CSS is used to style XHTML and XML markup. This means that anywhere you have XML markup (including XHTML) you can use CSS to define how it will look.

CSS is also used to define how Web pages should look when viewed in other media than a Web browser. For example, you can create a print style sheet that will define how the Web page should print out and another style sheet to display the Web page on a projector for a slide show.

Why is CSS Important?
CSS is one of the most powerful tools a Web designer can learn because with it you can affect the entire mood and tone of a Web site. Well written style sheets can be updated quickly and allow sites to change what is prioritized or valued without any changes to the underlying XHTML.

But because CSS can cascade, and combine and browsers interpret the directives differently, CSS is more difficult than plain HTML. But once you start using it, you'll see that harnessing the power of CSS will give you more options and allow you to do more and more things with your Web sites.

 Best practices in development of web pages is all about writing code that is valid HTML and CSS which make it easier to correct problems, and edit pages. HTML and CSS are the fundamental technologies for building web pages: (X)HTML for structure, accompanied by CSS for style and layout. By separating the presentation style of documents from the content of documents, CSS simplifies web authoring and site maintenance. For example, having a separate CSS file allows for making aesthetic changes to the entire website rather than just to a single web page. If CSS rules are included within a single HTML page, changes would have to be made to each and every page that used the element in question. The reasoning is that HTML should only be used for raw content and CSS be used to manipulate the content for aesthetic style.


Once you start building Web pages, you will want to learn the languages that build them. HTML is the building block of Web pages. CSS is the language used to make those Web pages pretty. And XML is the markup language for programming the Web. Understanding the basics of HTML and CSS will help you build better Web pages, even if you stick with WYSIWYG editors. And once you're ready, you can expand your knowledge to XML so that you can handle the information that makes all Web pages function.


XML was designed to transport and store data.
HTML was designed to display data.

What is XML?
XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML is a W3C Recommendation

The Difference between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is
HTML was designed to display data, with focus on how data looks
HTML is about displaying information, while XML is about carrying information.

XML Does Not DO Anything
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.

What is JavaScript?

·        JavaScript was designed to add interactivity to HTML pages
·        JavaScript is a scripting language
·        A scripting language is a lightweight programming language
·        JavaScript is usually embedded directly into HTML pages
·        JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
·        Everyone can use JavaScript without purchasing a license

Javascript can enhance user experience by creating transitional effects such as fading and sliding animation.

What Can JavaScript do?
·        JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
·        JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
·        JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
·        JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
·        JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
·        JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

Web Design Principles Checklist

·        Primary audience
·        needs
·        interests
·        technology level of audience
·        computer equipment (special software requirements, available memory, speed/mhz)
Purpose for the site
·        personal
·        profit earning business
·        non-profit organization
·        educational
·        entertainment
Location of the site
·        commercial Internet service provider (ISP)
·        educational institution server
·        organization server
·        personal server
Types of content
·        text
·        graphics
·        video
·        applets
·        sound
·        forms or surveys for users to fill out (some servers do not accomodate forms).
Information provided on the "home" page
·        a "who we are" or "who I am" message
·        a mission or purpose statement
·        contact information *
·        update notice
·        copyright notice
·        disclaimer (for ex: Though we try to keep the information up-to-date, some information may not be the most current.  OR  "This list does not constitute an endorsement of any one or more of the products .")
* If the site is for a business or organization, it is important to include an address, phone number and email contact.
If the site is a personal site, disclosing an address or phone number is not advised because of privacy issues.
Content ( the key to a good site):
·        should match the purpose
·        should be well organized
·        should be spellchecked
·        should observe correct english (or the appropriate language).  Some sites have information in more than one language, depending upon the possible audiences.
·        should be current information
·        should be appropriate for the audience
Level of Web technology to best suit the purpose:
·        Minimal style - mostly text, little or no graphics (quick loading, does not require lots of memory or a high end graphic card)
·        Middle of the road style - some graphics to add an element of design or style, which compliments the information, but does not detract from the main purpose (still easy to load, may be more appealing than minimalism
·        High tech style - Lots of graphics, animation, java applets, "art" text, video clips, etc. (could be suitable for an audience of tekkies with high-end equipment, but could lose the average audience waiting for the images to load or trying to navigate links not clearly identified as such).
Style to best suit the purpose
·        professional
·        scholarly
·        casual
·        child friendly
·        teen oriented
·        artistic
Page design - consistency, clarity, user friendliness:
·        Include a "back to home" link
·        Use a consistent template on each page
·        Create a uniform color scheme (with limited color palate)
·        Be sure there is sufficient contrast between background and text
·        Avoid a too large font that SHOUTS*
·        Avoid a too small font that is hard to read*
·        Place important information near the top
·        Avoid long lists of links if possible.
·        Categorize lists in smaller chunks and provide internal tags
·        Provide a  table of contents (with links to find information in a long list)
·        Organize your material to too much scrolling to find content
* The user can override your fonts by setting her/his browser font size and style.
Standard for screen resolution is 800 (width) by 600 (height). If you design for a higher resolution the user may have to scroll back and forth or up and down to view your full content.

.jpg image format (compressed file format for high quality images - photographs).  While working on photographs, save in .tiff format, or program default, until the final quality and size is achieved, then save in .jpg.  This saves the image quality.
.gif image format (for graphics files, buttons, clip art not photographic quality).  The quality does not degrade when working with .gif files.
animated .gif files (Use sparingly.  Is animation appropriate to the theme or a distraction from your main purpose?
flash animation (Provide a "turn off" option for flash).  Too many "bells and whistles" can be overpowering.  Does the flash compliment the site? Or is it there to say "See what I can do?"
Background and text colors:
·        Patterned backgrounds produce "noise" that interferes with reading the text.
·        Provide sufficient contrast between background and text
·        Limit your font colors - "Hot" colors (like bright pink and orange) are, in general less professional for business sites. (If the business is "hot" graphics, however, that caution would probably not apply.) Primary colors (red, blue, green) might be best suited for sites that appeal to children. Black backgrounds can give a "hard edge" to a site or make it seem "gloomy" or counterculture.
Use of frames (out of favor):
·        Hard to bookmark
·        Hard to navigate
·        Hard to figure out which frame you are in to print content.
·        Search engines can't always index their contents.

What is protected by copyright rules on the WWW
Everything -
The unique underlying design of a Web page and its contents,  including:
·        links
·        original text
·        graphics
·        audio
·        video
·        html and other unique markup language sequences
·        List of Web sites compiled by an individual or organization and all other unique elements that make up the original nature of the material.
When creating a Web page, you CAN:
·        Link to other Web sites. [However, some individuals and organizations have specific requirements when you link to their Web material. Check a site carefully to find such restrictions. It is wise to ask permission. You need to cite source, as you are required to do in a research paper, when quoting or paraphrasing material from other sources. How much you quote is limited.]
·        Use free graphics on your Web page. If the graphics are not advertised as "free" they should not be copied without permission.
When creating a Web page, you may be liable if you:

·        Put the contents of another person's or organizations web site on your Web page
·        Copy and paste information together from various Internet sources to create "your own" document. [You CAN quote or paraphrase limited amounts, if you give credit to the original source and the location of the source. This same principle applies to print sources, of course.]
·        Copy and paste others' lists of resources on your own Web page
·        Copy and paste logos, icons, and other graphics from other web sites to your web page unless it is clearly advertised as "free" and you follow the original source's guidelines for posting material.
·        Some organizations are happy to let you use their logos, with permission - it is free advertising.  But they want to know who is using it.  It is best to notify a source to which you want to link. The source might not approve of all sites who want to use their logo.
Protect your privacy and reputation online:

·        Don't disclose private information about yourself or others.
·        Don't give out home phone numbers or home addresses.
·        What you link to helps define who you are and what your organization represents.
·        Avoid exaggerated claims if promoting a product or organization.
·        Cite sources of information.
·        Observe copyright rules.
·        Use original graphics or free graphics or clipart.


The Principles of Design

There are many basic concepts that underly the field of design. Balance
•          Rhythm
•          Proportion
•          Dominance
•          Unity
Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.
Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.
Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.
•          Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
•          Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
•          Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.
Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.
•          Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
•          Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
•          Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.
In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

Similarity, Proximity and Alignment
Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

The concept of proximity says that related items should be grouped together. Likewise, items that are not related should not be close to each other. The process of grouping related information creates visual cues, which accomplishes Jakob's principle of facilitating scanning. An example of proximity is the relationship between subheading for my paragraphs (such as Proximity above), and the Paragraphs below them. Williams also suggests never having the same amount of white space between elements that aren't a part of a list.

The concept of alignment says that everything on a page should be visually connected to something else on the page. Nothing should be placed arbitrarily. When elements are aligned they are connected to each other, even if they are separated on the page. You may have noticed that the alignment of the subheading "Alignment" was centered. As it is said, "Good design is transparent." The lack of alignment between the subhead and the related paragraph made your eye have to travel across the page, and it was probably enough for you to notice.

The concept of repetition says that you repeat design elements throughout the entire piece. The element can be a font style, graphic, line, icons, colors, the list is endless. The web makes this easy to do in several ways. First there are style sheets, which allow you to set elements of a web page to certain fonts, colors, locations on the screen, etc. It is fairly easy, and I recommend you copy my stylesheet, just to see what one looks like. If nothing else, add the style information for "A:Hover", it will makes links change color when the user mouses over them. You can also view the source of this web page to see how I linked up to the stylesheet.

The concept of contrast says that if two items aren't the same, make them very different. Contrast adds visual interest to your page. You can create visual interest by using color (as in the banner portion of this page contrasted with the content space), size and weight (as in the contrast between the headings and the paragraphs in font and weight), or any other property of an element. Again, you can utilize style sheets to make this easier by setting contrasting values for heading font and paragraph font.