Assignment 5: How to Install XAMPP for Windows

How to Install XAMPP for Windows

XAMPP is a free and open source cross-platform web server solution stack package, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. This blog post is on the installation process. Since I have finished installing XAMPP I will be using images taken from the web for each step. So the version number may change in those images. Since the process is the same it will not be a problem.

Visit the page for windows in the official site of the publisher using the link below, http://www.apachefriends.org/en/xampp-windows.html

Click ‘XAMPP’ in downloads. There are several options to continue. Since it is very easy to install using the ‘Installer’ I will use it here. It is also the most suitable way for a beginner. Just click on the link for the ‘Installer’.

Select ‘Save’. (it will take some time to download)

Select ‘Run’.

Select the language

Select ‘Next’

Select components and select ‘Next’. (It is better to leave the ones selected for a beginner who doesn’t know much about XAMPP)

 Choose the location to install XAMPP and select ‘Next’.

Wait for the installation

Select ‘Finish’ (Check/uncheck the option to start the control panel)

If the option to start the control panel was selected then the panel will appear. Start the required modules. (Can start it later by:  start-all programs -xampp-control panel)

Type http://localhost in the web browser and the welcome screen will appear.

Sources & references

  1. http://www.apachefriends.org/
  2. http://webterranean.net/
  3. http://sawmac.com/
  4. http://phpjavascriptroom.com/
  5. http://svejo.net/
  6. http://howstuffswork.theaffiliategoldmine.com/
  7. http://3.bp.blogspot.com/
  8. http://pad3.whstatic.com/
  9. http://www.mytoptutorials.com/
  10. http://crazyfornet.com/
  11. http://blog.dh42.com/
  12. http://wiki.jetbrains.net/
  13. http://en.wikipedia.org/wiki/XAMPP

Assignment 4: Java Applets

What is a JAVA Applet?

 A Java applet is a small application delivered to users in the form of bytecode. Though this program is usually written in Java it can also be written in another language like Jython, JRuby, or Eiffel that compiles to Java bytecode. An applet is embedded inside a web page. When the user launch it the program executes within a Java Virtual Machine (JVM) in a process separate from the web browser itself, yet it can appear in a frame of the web page, in a new application window, or in Sun‘s AppletViewer, a stand-alone tool for testing applets. Since Java’s bytecode is cross-platform (or platform independent), Java applets can be executed by browsers (or other clients) for many platforms, including Microsoft Windows, FreeBSD, Unix, OS X and Linux.

History and evolution

Java applets were created by programmers at Sun Microsystems in 1995. They were James Gosig, Patrick Naughton and Mike Sheridan who called themselves the Green Team. Java Applets were originally meant to be part of products from the cable company, but developers of Java Applets could not convince the cable industry to use their invention. The most popular web browsers in the 1990s were Netscape and Mosaic. Both browsers displayed still images and text. Java applets allowed the programmer to write applications for the web. For the first time, using Java Applets, images could move. Animation allowed webpages to come alive.  Applets immediately took the web world by storm because they added the ability to display dynamic web content within browsers in what was essentially a static HTML world.

Sun filed a lawsuit in 1997 after Microsoft created a modified Java Virtual Machine of their own, which shipped with Internet Explorer. Sun sued Microsoft for breach of trademark, as the point of Java was that there should be no proprietary extensions and that code should work everywhere. Microsoft agreed to pay Sun $20 million, and Sun agreed to grant Microsoft limited license to use Java without modifications only and for a limited time.

Microsoft continued to ship its own unmodified Java virtual machine. Over years it has become extremely outdated yet still default for Internet Explorer. In 2002 Sun filed an antitrust lawsuit, claiming that Microsoft’s attempts at illegal monopolization have harmed the Java platform. Sun demanded Microsoft distribute Sun’s current, binary implementation of Java technology as part of Windows, distribute it as a recommended update for older Microsoft desktop operating systems and stop the distribution of Microsoft’s Virtual Machine (as its licensing time, agreed in the prior lawsuit, had expired).  Microsoft paid $700 million for pending antitrust issues, another $900 million for patent issues and a $350 million royalty fee to use Sun’s software in the future

 Google has developed their own Android platform that uses Java features and concepts, yet is incompatible with standard libraries. This may be a violation of conditions under which Sun granted OpenJDK patents to use open source Java for all. In 2010, Oracle sued Google for using Java “in a wrong way”, claiming that “Google’s Android competes with Oracle America’s Java” and that “Google has been aware of Sun’s patent portfolio since Google hired certain former Sun Java engineers”. In May 2012 the jury in this case found that Google did not infringe on Oracle’s patents, and the trial judge ruled that the structure of the Java APIs used by Google was not copyrightable

It appeared that using Java applets was the best way to add dynamic content to web pages at the beginning.  When Dynamic HTML finally started taking shape, things changed severely. The Document Object Model (DOM) exposes elements within a web page as programmable components with their own set of properties and methods. Even though the implementation of dynamic HTML within the Internet Explorer and Netscape Navigator browsers is vastly different, the underlying theme of programmatically changing content using scripting code within the displayed page itself was a BIG hit. Applets suddenly started to look old and primitive. The W3C’s endorsement of Dynamic HTML finally set the tone for the new breed of sophisticated, dynamic web pages.

Real life usage

Apart from being used primarily for playing online games, Java Applets are still used in many different ways. For example Java applets are used in remote control devices. The applets direct the movement of the electronic devices. In smart homes java applets are used to program light switches, preprogram the TV, and the house alarm. Java applets are also used in smart phones like the Iphone and Blackberry. They can be used from a cell phone to keep track of daily appointments, read current stock trend or make a reservation at your favorite restaurant.

Example:

NASA World Wind (open source) is a second generation applet that makes heavy use of OpenGL and on-demand data downloading to provide a detailed 3D map of the world.

 NASA World Wind (open source) is a second generation applet[6] that makes heavy use of OpenGL and on-demand data downloading to provide a detailed 3D map of the world.


Browser compatibility

 Internet Explorer

Internet Explorer is the most widely used web browser in the world and offers complete support for Java applets. Internet Explorer is currently available for the Windows operating system.The newer versions utilize Sun Microsystems Java Virtual Machine (VM). While Microsoft had developed it’s own VM, it no longer offers its customers that option.

Apple Safari

Apple Safari offers full support for Java applets. Safari uses Sun’s Java Virtual Machine and has supported Java since first release. Safari is available on Windows and Mac operating systems.

Firefox

Mozilla’s Firefox browser is a very popular web browser and Java is fully supported via the Java Plug-in for Firefox. To properly run Java applets you must also install Java 6 Update 15 from Sun Microsystems. Firefox runs on all major desktop platforms.

Opera

Opera is another browser that is fully capableof running Java applets. It directly accesses the Java virtual machine, as opposed to accessing it through a plug-in. Opera is available for all major desktop operating systems.

Chrome

Google’s Chrome browserwas designed to offer a full Java experienceand  accesses Java via a plug in. Chrome is available for Windows, Mac and Linux

Mobile Browsers

Several mobile browsers support Java applets. The mobile edition of Java is called Java Platform, Micro Edition (Java ME). Java ME browsers don’t normally offer the full Java experience, and usability will differ from device to device. The mobile virtual machine is known as the K Virtual Machine, and in most cases most be installed on the phone by the manufacturer. Notable exceptions are Apple’s IOS devices and Google’s Android devices. IOS devices do not run applets. Android offers limited applet support.

 

Advantages and Disadvantages

 Advantages:

  • Java applets have increased interactivity for users.
  • Java is designed to be cross-platform compatible, meaning the same program can be used on multiple operating systems.
  • Safety (Before downloading and running on your computer, Java applets must have the user’s approval. This protects your computer by not allowing unwanted applets to download. Java also has built-in security that protects applets from doing anything harmful to your computer. )
  • Unlike most web programming languages, Java allows  dynamic server and client communication.)
  • Java makes it easy to integrate the use of a database in an applet.

Disadvantages:

  •  It requires the Java plug-in.
  • Some browsers, notably mobile browsers running Apple iOS or Android do not run Java applets at all.
  • Java automatic installation or update may fail if a proxy server is used to access the web.
  • As with any client-side scripting, security restrictions may make it difficult or even impossible for an untrusted applet to achieve the desired goals.
  • Some applets require a specific JRE. If an applet requires a newer JRE than available on the system, or a specific JRE, the user running it the first time will need to wait for the large JRE download to complete.

Sources & references;

  1. http://www.javathings.com/java-applets-and-their-advantages/
  2. http://www.ehow.com/list_6183415_advantages-java-applets.html
  3. http://www.codeproject.com/Articles/571/Java-to-JavaScript-Communication
  4. http://en.wikipedia.org/wiki/Java_applet#1997_Sun_vs_Microsoft
  5. http://docs.oracle.com/javase/tutorial/deployment/applet/
  6. http://www.princeton.edu/~achaney/tmve/wiki100k/docs/Java_applet.html
  7. http://voices.yahoo.com/java-applets-history-current-today-6033802.html?cat=15
  8. http://www2.gsu.edu/~matpxp/SwIG/talks/java_applets.pdf
  9. http://jhippjava.blogspot.com/2011/08/historical-history-of-java-applets.html
  10. http://solitarygeek.com/java/five-different-uses-of-java-applets

Assignment 3: Cascading Style Sheets

Cascading Style Sheets (CSS) is a mechanism for adding style (e.g., fonts, colors, spacing) to web documents. It was first developed in 1997, as a way for developers to define the look and feel of their web pages. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). It can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.

How CSS works

null

When a browser displays a document, it must combine the document’s content with its style information. It processes the document in two stages:

The browser converts the markup language and the CSS into a structure called the DOM (Document Object Model). The DOM represents the document in the computer’s memory. It combines the document’s content with its style. The browser displays the contents of the DOM.

A markup language uses elements to define the document’s structure. You mark an element using tags, which are strings beginning with ”. An element can have a start tag, which is just the name of the element, inside ”, and an end tag, which has the element name with a ‘/’ after the ‘<’. Depending on the markup language, some elements have only a start tag, or only a tag where the ‘/’ comes after the name. An element can be a container, with other elements between its start tag and end tag.

A DOM has a tree-like structure. Each element and run of text in the markup language becomes a node in the tree structure. DOM nodes are not containers. Instead, they can be parents of child nodes.

Example:

In a sample document, the <p> tag and its end tag </p> create a container:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

In the DOM, the corresponding P node is a parent. Its children are the STRONG nodes and the text nodes. The STRONG nodes are themselves parents, with text nodes as their children:

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

Understanding the DOM helps developers to design, debug and maintain their CSS, because the DOM is where the CSS and the content of document meet up.

History of CSS

As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance, at the cost of more complex HTML. Variations in web browser implementations, such as ViolaWWW and WorldWideWeb, made consistent site appearance difficult, and users had less control over how web content was displayed. Robert Cailliau wanted to separate the structure from the presentation. The ideal way would be to give the user different options and transferring three different kinds of style sheets: one for printing, one for the presentation on the screen and one for the editor feature.

To improve web presentation capabilities, nine different style sheet languages were proposed to the World Wide Web Consortium’s (W3C) www-style mailing list. Of the nine proposals, two were chosen as the foundation for what became CSS: Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). CHSS, a language that has some resemblance to today’s CSS, was proposed by Håkon Wium Lie in October 1994. Bert Bos was working on a browser called Argo, which used its own style sheet language called SSP. Lie and Yves Lafon joined Dave Raggett to expand the Arena browser for supporting CSS as a testbed application for the W3C. Lie and Bos worked together to develop the CSS standard (the ‘H’ was removed from the name because these style sheets could also be applied to other markup languages besides HTML).

Unlike existing style languages like DSSSL and FOSI, CSS allowed a document’s style to be influenced by multiple style sheets. One style sheet could inherit or “cascade” from another, permitting a mixture of stylistic preferences controlled equally by the site designer and user.

Lie’s proposal was presented at the “Mosaic and the Web” conference (later called WWW2) in Chicago, Illinois in 1994, and again with Bert Bos in 1995. Around this time the W3C was already being established, and took an interest in the development of CSS. It organized a workshop toward that end chaired by Steven Pemberton. This resulted in W3C adding work on CSS to the deliverables of the HTML editorial review board (ERB). Lie and Bos were the primary technical staff on this aspect of the project, with additional members, including Thomas Reardon of Microsoft, participating as well. In August 1996 Netscape Communication Corporation presented an alternative style sheet language called JavaScript Style Sheets (JSSS). The spec was never finished and is deprecated. By the end of 1996, CSS was ready to become official, and the CSS level 1 Recommendation was published in December.

Development of HTML, CSS, and the DOM had all been taking place in one group, the HTML Editorial Review Board (ERB). Early in 1997, the ERB was split into three working groups: HTML Working group, chaired by Dan Connolly of W3C; DOM Working group, chaired by Lauren Wood of SoftQuad; and CSS Working group, chaired by Chris Lilley of W3C.

The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997. It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was started in 1998, is still under development as of 2009.

In 2005 the CSS Working Groups decided to enforce the requirements for standards more strictly. This meant that already published standards like CSS 2.1, CSS 3 Selectors and CSS 3 Text were pulled back from Candidate Recommendation to Working Draft level.

Variations

CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets.

Browser support

Even though CSS-capable browsers make it a viable technology, designers struggle with browsers’ incorrect CSS implementation and patchy CSS support. These problems continue to make the business of CSS design more complex and costly than it was intended to be, and cross-browser testing remains a necessity. Other reasons for the continuing non-adoption of CSS are: its perceived complexity, authors’ lack of familiarity with CSS syntax and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing.

 

Some common CSS browser compatibility Issues/Bugs for Internet Explorer:

1.  The IE/Win Disappearing List-Background Bug

IE bug caused by placing a list with a background set within a floated <div> that has been relatively positioned.

2. IE6 Duplicate Characters Bug

 This bug causes duplicate characters to appear, which is caused by HTML comments.

 3. Float-Width Bug

 When a floating element is followed by a block-level element with a width defined, Internet Explorer incorrectly redefines the content area for the block-level element.

4. The double-margin float bug

 It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size.

 

Advantages of CSS:

  • Separation of content from presentation
  • More precise control of layout;
  • Saves bandwidth
  • Improved indexing
  • Improved accessibility

 

Limitations of CSS:

  • Cannot include styles from a rule into another rule
  • Cannot target specific text without altering markup
  • Absence of expressions
  • Lack of column declaration
  • Cannot explicitly declare new scope independently of position

Though there are limitations in CSS it has helped developers immensely to improve the presentation of their websites both efficiently and effectively. It is considered as the universal language for designers and developers alike.

Sources and references;

  1. http://www.w3.org/Style/CSS/Overview.en.html
  2. http://en.wikipedia.org/wiki/Cascading_Style_Sheets
  3. http://twiki.org/cgi-bin/view/Codev/PositionalCssIsImmatureTechnology
  4. http://www.cssnewbie.com/double-margin-float-bug/#.UfyiL6ykKG8
  5. http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/
  6. http://www.webdevout.net/browser-support-css#css3standards

Assignment 2: Responsive Web Design

 

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Why?

“Day by day, the number of devices, platforms and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

– Jeffrey Veen

2012 has been a very unusual year in the PC market. For the first time since 2001, PC sales are projected to be lower than they were in the previous year.

Tablet sales are expected to exceed 100 million this year. Their sales numbers may top notebooks next year. Smartphones, of course, are also a hot commodity — according to Nielsen, the majority of U.S. mobile subscribers now own smartphones, not feature phones. Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too.

For those who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and they need to build for all of them. Building apps may seem like the obvious solution. There’s no doubt that having mobile apps for the major platforms is better than having no apps at all, and yet how can they build for every app store? Last month, for instance, Mashable was accessed on more than 2,500 different devices. They could certainly build apps to reach a good number of those platforms, but probably not all of them. When it comes to news sites like Mashable, there’s even more data suggesting that the mobile web is key. According to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app. Although media companies should certainly offer apps, it’s clear that having a great mobile website should be the priority

While mobile devices are changing the display landscape, with the appearance of more and more small screens, displays are also getting larger and larger. Instead of responding to today’s needs for a mobile version (often specific to a single mobile device), along with a particular desktop Web version, the idea is to approach the issue the other way around: use a responsive web design that adapt to almost any screen.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. The solution, of course, is to make a flexible, fluid and adaptive web site with a responsive web design that works equally well on every device addressing the ever-changing landscape of devices, browsers, screen sizes and orientations.

Responsive web design is a way of making a single website that works effectively on both desktop browsers and the myriad of mobile devices on the market. Responsive architecture gives the best quality browsing experience – whether on a smartphone, tablet, netbook or e-reader, and regardless of the operating system. People who browse while on-the-go have very different needs than those sitting at a desk. Responsive web sites re-organize themselves automatically according to the device viewing them, so that the same website provides a great experience everywhere. Desktops get a full-blown interface with videos, large images and animations. Smartphones get a simplified website that runs fast without the bells and whistles. Tablets and netbooks get something in between.

Delivering an App-Like Experience.

Mobile environments require simpler navigation, focused content and fast page loads. If a website has a responsive design, the user does not have to manipulate the site using “pinch and zoom,” and the flow of content is more appropriate for a smaller screen. The site may reduce the amount of content presented to the mobile visitor, so it has less clutter and is easier to use

The Concept Of Responsive Web Design

Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:

“Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”

Core Concepts in Responsive Web Designing

Three key technical features are the heart of responsive Web design:

1. Media queries and media query listeners

2. A flexible grid-based layout that uses relative sizing

3. Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented. The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design. While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

That was it! Luckily, the W3C improved media queriesin CSS3, moving them a big step forward. Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more. There are three ways to implement media queries:

  1. Use the @import rule to import  style rules from other style sheets:

  1. Put media queries directly in the style sheet, as shown in Figure 1. This is the most common approach.

Figure 1 Implementing Media Queries Directly in a Style Sheet

  1. Include a query in a linked style sheet’s media attribute:

Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten. The following images present an example of a responsive Web design approach that uses media queries.Figure 2 and Figure 3 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 4 shows the same responsive site on a Windows Phone, also with Internet Explorer 9. Figure 2 Navigation Appears on the Left Figure 3 In an 800×600 Resized Window, Navigation Switches to the Top

Figure 4 The Same Site on a Windows Phone

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered. Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen. So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various Web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive Web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing. By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result

Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5

This results in the following CSS style:

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is: 12 ÷ 24 = 0.5 And the CSS style is:

You can also use percentages. The calculation algorithm is the same; you just end up with percentages. Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an“Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content. Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications. How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width. In the first example, the HTML for defining the content consists of one header and three different blocks of text (see Figure 6).

Figure 6 Defining Content for the Grid You start by laying out the blocks of content under each other so that the content fits smartphones (see Figure 7). You can add background colors as shown in Figure 8 to make it clearer that you’re working with grid items.

Figure 7 Laying Out Blocks of Content

Figure 8 Blocks of Content with Background Colors

In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions (see Figure 9). The results are shown in Figure 10.

Figure 9 Defining a New Layout for a Larger Screen Figure 10 A New Layout with Two Adjacent Columns

The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between (see Figure 11). The results are shown in Figure 12.

Figure 11 Defining a Layout for Wider Screens Figure 12 Three Side-by-Side Columns with a Spanning Header

The Grid specification is a welcome addition for implementing responsive web designs. Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Web sites. Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change. The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive Web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property. Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

An alternative to scaling images is cropping them with CSS. For example, applying overflow: hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment. Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the Web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive Web design evolves and becomes the basis for many quality Web sites.

Legacy Browsers

What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

Responsive Web Design Features

By essentially giving a custom solution for each mobile platform, responsive website design makes for a better user experience on a wider range of devices.


Responsive Web Design Testing Tool

This tool has been built to help with testing responsive websites while designing. Enter a website’s URL into the address bar at the top of the page in the following site to test a specific page.

http://mattkersley.com/responsive/

Example:

Here’s a video on responsive web design

Sources and references;

  1. http://en.wikipedia.org/wiki/Responsive_web_design
  2. http://mashable.com/2012/12/11/responsive-web-design/
  3. http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
  4. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  5. http://www.abookapart.com/products/responsive-web-design
  6. http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
  7. http://alistapart.com/article/responsive-web-design
  8. http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
  9. http://mediaqueri.es/
  10. http://webdesignledger.com/tools/12-helpful-tools-for-responsive-web-design

Assignment 1: BitTorrent Live

BitTorrent Live is a powerful new web-based live streaming technology. Designed to deliver high quality video to large audiences – with significant reduction in infrastructure cost and network delays, Live is an entirely new protocol to eliminate barriers to broadcast. It took nearly half a decade before BitTorrent’s live stream service was released to the public. One of the main reasons is that it has been quite a challenge to make it work seamlessly. BitTorrent Live is currently in open beta.

Hoping to revolutionize live broadcasting on the Internet, Bram Cohen has filed a patent application for the new BitTorrent Live streaming protocol. BitTorrent’s inventor has worked on the new technology for several years and believes his new protocol can be world-changing. “Doing live streaming well on the Internet has long been a problem. Peer to peer live-streaming has always suffered from high latency, meaning there is typically a lot of delay between when a broadcast happens and when end users see it, typically dozens of seconds or minutes,” Cohen says.

“BitTorrent Live allows a broadcaster to stream to millions of people with just a few seconds of latency. This is new, and unique, and potentially world-changing,” he adds.

 

How it works (Basics)

BitTorrent Live is a complex technology but basically works by dividing peers into various “clubs” of peers who share data among each other via a UDP screamer protocol. “To get slightly more technical, the way BitTorrent Live works is by making subsets of peers responsible for subsets of data. High robustness and low latency is achieved by using a screamer protocol between those peers,” Cohen explains.

“For the last hop it uses a non-screamer protocol to regain congestion control and efficiency. There is redundancy and some waste in the screaming, but that’s kept under control by only using it to get data to a small fraction of the peers.”

Those who are interested in trying out BitTorrent Live can do so here. The more people  join, the better it gets.