Real World - CSS3

If you’re reading this, the chances are you’ve seen some of the amazing things that have been done in CSS3. Unfortunately, most of them aren’t practical for you, or your clients.

No longer, I say!

Below is a carefully-curated list of real-world examples and snippets of CSS3 that can be safely used to enhance any piece of work you create.

To use any of the following snippets,

you’ll need to include a CSS file.

Please, feel free to ask me for the CSS file.

1. Recreating the <blink> tag

   This was, by far, the best tag in HTML. Unfortunately, it got dropped due to its lack of semantics. Well, it’s back.
   
   

   This is some blinking text.

   This is some <span class="blink">blinking</span> text.

2. Recreating the <marquee> tag

   You know when I said that <blink> was the best tag? Well, I lied. Presenting: a valid CSS3 marquee.
   
   

   You spin me right round, baby. Like a record, baby. You spin me right round, baby. Like a record, baby.

   <div class="marquee" style="width: 380px;"><p><span>You spin me right round, baby.

   Like a record, baby.</span><span>You spin me right round, baby. Like a record, baby. 

   </span></p></div>

3. Peekaboo!

   Is your client not listening to any of your opinions, is throwing a tantrum when it comes to the invoice, or is generally acting like a toddler? They might be a toddler. If so, this will help.
   
   

   I see you!

   <p class="peekaboo">I see you!</p>

4. Wibble-Wobble

   Got a fidgety client, who makes lots of stinging remarks? They’ll bee happy when their page wobbles, then.
   
   

   The 2^nd man to walk on the moon was Buzz Aldrin.

   The 2nd man to walk on the moon was <span class="wobble">Buzz</span> Aldrin.

5. The Third Degree

   It won’t take too much detective work to find this handy little snippet.
   
   

   Something’s not quite level here.

   <span class="third-degree">Something&rsquo;s not quite level here.</span>

6. WordArt

   Finally, a standards-compliant way to unleash the best type in the world!
   

   WordArt

   <h1 class="wordart" title="WordArt!">WordArt!</h1>

7. Nausea

   Remember spinning on roundabouts as a kid? I hated ‘em. After seeing this, hopefully you will too!
   Woah-oah-oah!

   <span class="nausea">Woah-oah-oah!</span>

8. The Perfect Typography

   Why bother choosing a font, when you know what you and your client wants?
   
   
   

   It’s perfect!

   <p class="perfect">It's perfect!</p> 

Style Scope with HTML5 Canvas

When working with HTML5 Canvas, we're constantly interacting with the canvas context object, which contains an abundance of cool styling properties and drawing methods.  For a typical block of code that draws something onto the canvas, we draw a path, set a handful of context properties to style whatever it is we're drawing, and then use methods like fill() and stroke() to actually draw things onto the canvas.  Piece of cake, right?
But what happens if we're creating large, complex canvas applications, and we have lots of methods and functions that draw things onto the canvas which can be executed in any order?  We certainly don't want styles from different parts of our code base leaking into other parts of the code base.  Here's an example:

Code Editor

As you can see, we're calling drawTransparentSquare() followed by drawSquare().  Since objects can be modified by reference in JavaScript, when the first function set the global alpha property to 0.5, the style leaked over into the next function call and made the second square transparent as well.  This obviously wasn't the desired result.
So what can we do do?  Should each of our methods and functions reset the context styles like a CSS reset for each function?  Although this could be achievable by creating a resetStyles() function which loops through all of the styling properties and sets them to their default values, it seems a bit odd to constantly reset all of the style properties each time a function call is made.  Is there a better way?

Style Scope Induction

Style scope refers to the scope of styling inside of code blocks, similar to the notion of variable scoping inside of code blocks.  When writing JavaScript code, for example, it's good practice to split the code base into a collection of modular methods and functions, such that variables created within each function are scoped only to that particular function, and aren't accessible outside of it.  This is called variable scope induction.  What we need here, is a way to induce style scope within a function, or any other block of code, in such a way that the styles applied to the context don't leak over into other functions or blocks of code.

The HTML5 Canvas State Stack: A Diamond in the Rough

One of the most powerful, and probably the most overlooked features of the HTML5 canvas, is the state stack.  The state stack stores snapshots of styles and transformations in a stack data structure via the save() method of the canvas context.  What's even more important is that we can also use the state stack to restore snapshots of styles and transformations with the restore() method.
So how can we use the state stack to induce style scope?  If we use the save() method at the beginning of a function definition, we can save the state of the canvas context in the state stack.  Once the state is saved, we can apply several context styles, draw things, and then restore the state stack back to the initial state with the restore() method.  Viola, we've just induced style scope.

HTML5 Canvas

Welcome to Basic Tutorials! In these tutorials we'll focus on the fundamental drawing capabilities of the HTML5 Canvas.

HTML5 Canvas Basic Tutorials Prerequisites

All you need to get started with Basic Tutorials is a modern browser such as Google Chrome, Firefox, Safari, Opera, or IE9, a good working knowledge of JavaScript, and a simple text editor like notepad.

HTML5 Canvas Element Tutorial

The HTML5 Canvas element is an HTML tag similar to the div, a or table tag, with the exception that its contents are rendered with JavaScript.  In order to leverage the HTML5 Canvas, we'll need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

When using canvas, it's important to understand the difference between the canvas element and the canvas context, as often times people get these confused.  The canvas element is the actual DOM node that's embedded in the HTML page.  The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.  The context can be 2d or webgl (3d).
Each canvas element can only have one context.  If we use the getContext() method multiple times, it will return a reference to the same context object.

Differences Between HTML4 And HTML5

Now that we've seen how to use some of the newer whiz-bang features of the draft HTML5 standard, it's time to take a few steps back and take a look at some of the other differences between HTML4 and HTML5.

This article is intended to be a useful overview, not an exhaustive reference, but remember that things are still and always changing. You also may want to refer to this document for the actual details of the HTML5 specification itself.

The first thing you should know is that, perhaps for the first time, the development of a language standard is acknowledging the real world. In order to keep file compatibility with the current standard - which is technically HTML 4.01 - the brave decision was made to separate the way the web browser renders files from the way we, as developers, must write them. So the browser, or "user agent", must still process HTML4 constructs like the center element, because there will still be millions of files on the Internet that happen to use it. But we won't be writing any more HTML with center; it's simply being dropped from the language (use CSS instead). This compatibility goes both ways: older browsers can (and will) simply ignore HTML5 code without screwing things up.

No More Frames

This is great news to those of us who slogged through the 1990s. To be exact, the elements frame, frameset, and noframes are being removed from the language, as well as acronym, applet, basefont, big , blink, center , dir, font, isindex, strike , tt and u. All of these can be handled using CSS or other methods.

You'll also have to learn to get along without using tables for layout; while tables themselves are still part of HTML5, they're not intended for placing pixels any more. Here's what the spec says:

"Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results."

So all the attributes that let people create those perfectly laid-out, tinted tables are gone, like align, bgcolor, border, cellpadding, cellspacing, height, nowrap, rules, valign, and the big one: width. The mantra: use CSS instead.

I've been trying my best to break it to you slowly, but frankly, all presentational elements are coming out of HTML5. My advice: learn lots more CSS, until you can quote chapter and verse in your sleep.

 

Good News

The good news is that even though this is a big change, it's a change for the better. Browsers of the future (just another month or two!) will become more powerful because of the move towards the cloud, so that they'll be able to handle more on their own. We've already seen that with things like Ajax, and now with video/audio embedding and such, it will be far easier for us to code in a straight forward manner and let the browser figure out the details. For instance, new structure elements include article, aside, figcaption, figure, footer, header, hgroup, nav, section, and summary, all of which refer to the structure of the document itself and leave rendering to the browser.

There are still some new elements that deal with text on a detailed level, however: you'll code wbr when you think it's possible to do a line break, but the browser will decide for you. Another hint element is bdi, used to mark an area where bidirectional text formatting can be done (primarily for mixing left-right and right-left languages in a single document). Its complement, bdo, lets you explicitly override and force a particular directionality. For even more slick internationalization, the elements ruby, rp, and rt are included for ruby annotations, which are meant for pronunciation aids rather than for Ruby On Rails programmers.

The more high-level new elements include things like canvas, meant for specifying an area for drawing a bitmapped graphic on the fly, such as a data graph or game graphic; meter is a placeholder for a numeric measurement of an expected size (and is eerily similar to format in ancient FORTRAN), while progress is its graphical counterpart, to be used where you want a progress bar. Last, but not least, there are the multimedia elements (audio, video, source, embed).

 

Connecting with IPv6 in Windows 8

IPv6 is the future 

Microsoft, along with other technology companies, has been working on the deployment of IPv6 to ensure that end-users continue to have high-quality Internet access, despite the performance and connectivity limitations brought about by IPv4 address exhaustion

The most immediate benefit of IPv6 is that it provides more than 3×10³⁸ IP addresses, enough for every person to have billions of addresses all to themselves, or enough to give every star in the universe a unique address. This will allow the Internet to grow and evolve. IPv6 also provides for many security and performance improvements, like built-in support for IPsec. (What happened to IPv5, you ask? Bing can help you find out why it’s being “skipped.”)

Upgrading the entire Internet to IPv6 isn’t something that can be done instantly. It has taken many years to get to where we are today, and we still have many years of work to do. Currently, around 1% of devices can connect to the Internet using only IPv6.

During the transition period, most networks will fall into three categories:

• IPv4-only networks. This is probably what you have today, as most Internet Service Providers have only just started rolling out IPv6 support. Many devices that connect to the Internet might only support IPv4 as well.
• IPv4 and IPv6 networks (dual-stack). This means your Internet Service Provider is configuring your PC with both IPv4 and IPv6 addresses. This model is common in cable and dial-up networks that are transitioning.
• IPv6-only networks. This means your Internet Service Provider is configuring your device with only IPv6 addresses. Because many websites are still only on the IPv4 Internet, ISPs must use a translation device to allow access from your IPv6 network to the IPv4 Internet. This device is called a NAT64. This mode is becoming popular in the mobile environment, because having only one kind of Internet Protocol between the mobile device and the operator’s infrastructure is simpler to deploy and cheaper than a dual-stack configuration. Also, mobile operators are feeling the IPv4 address exhaustion pinch most severely. Here is a basic diagram of this configuration:

You might be wondering what kind of connection you have right now. We have a widget at the bottom of this post that can show you.

Windows 8 is designed to ensure connectivity across all types of network configurations. In Windows 8, you can launch DNS look-ups using the Resolve-DNSname cmdlets in Windows PowerShell. Open up PowerShell and run the below command, and you will see both IPv6 and IPv4 records returned. Only websites that support IPv6 will have IPv6 records

Windows 8 on IPv4-only networks

On an IPv4-only network, devices are configured with IPv4 addresses only. This model continues to work in Windows 8 as it has in the past. In addition, Windows hosts also provide IPv6 connectivity by tunneling that traffic inside various transition technologies – an example of which is Teredo, where IPv6 packets are encapsulated in IPv4 UDP packets. Now that we are starting to see the emergence of IPv6-only servers and services, Windows 8 automatically attempts IPv6 connectivity when the server does not offer an IPv4 address. Note that Teredo is enabled by default only on non-domain networks, and Teredo may not be available if your network blocks UDP

Windows 8 on dual-stack networks

During the transition period, dual-stack networks will be the common deployment model. On a dual-stack network, devices will be configured with both IPv4 and IPv6 addresses.

Our primary focus during this transition has always been to minimize the impact of the transition for everyday users. It shouldn’t matter whether your connection is over IPv4 or IPv6. You should have an Internet experience that is fast and reliable, with little evidence of the IPv6 transition, so you can just enjoy the content.

At the same time, it’s also a priority for us to help the IPv6 transition move ahead. To this end, Windows prefers native IPv6 connectivity over IPv4 connectivity, if both connection modes are available.

In summary we have the dual goals of ensuring a reliable user experience, and enabling the IPv6 transition. As you might imagine, this can sometimes involve subtle tradeoffs, which have been the subject of much debate in the Internet community.

In an effort to sort out those sometimes competing goals, major websites around the world--including Bing.com, Microsoft.com, and Xbox.com–organized an event called World IPv6 Day last year. During this one-day test of the IPv6 Internet, participating websites turned on IPv6 in addition to IPv4.

The good news is that most things worked. All that goes into the Internet’s correct functioning—servers, end-user devices, and content delivery networks—were able to work at scale without issue.

However, we also observed that a small subset of the population (0.01% of the world) was misconfigured with IPv6, seemingly because of a router or ISP issue. That’s not too surprising, as IPv6 is a fairly new technology, and mistakes happen. But for those unlucky users, it could cause a significant impact on everyday experiences with the Internet.

Ready for the future of IPv6-only networks

On an IPv6-only network, the best way to improve a user’s experience is to increase the number of services and experiences that are available over IPv6. On such a network, access to the IPv4 Internet is through a NAT64. These devices can be a fragile point of failure for connectivity, and can have severe performance limitations that lead to dropped packets. They also break IPv4 peer-to-peer connectivity, needed for some multiplayer games.

Across Microsoft, we have done a lot of work to enable the growth of IPv6 deployments, both in enterprise and Internet settings. One of our most important efforts is to ensure that our server products support IPv6. IPv6 support is part of our Common Engineering Criteria (CEC). This is part of a broad company-wide commitment to customers that our business products, such as Exchange Server and SharePoint, support IPv6 in either dual-stack or IPv6-only configurations. Most Microsoft products built since 2007 have supported IPv6, but you can find out about IPv6 support in other Microsoft products on Technet. Through this effort, developers and solution providers can support IPv6 in their own products

Microsoft is also working on IPv6 support for our own services. Earlier this year, the Internet Society announced the World IPv6 Launch, a major milestone in the process of upgrading the Internet to IPv6. In June, Bing and other websites will start serving traffic over IPv6 on a permanent basis. Hardware vendors are working on IPv6 support in home routing devices, and many ISPs will start large-scale deployments of IPv6. CDNs (content delivery networks) have also started enabling support for IPv6 within their networks.

With the release of Windows 8, some of our infrastructure services will deploy IPv6 support.
Windows Update is a critical service providing ongoing support and updates to millions of users every day. More and more PCs are going to be connected to mobile broadband networks, where IPv6-only is a popular configuration. We have to make sure that downloads are reliably available to you on those networks.

For this reason the Windows Update service now supports both IPv6 and IPv4. Windows Update utilizes CDNs for worldwide distribution of updates and we are partnering with them to enable IPv6 support. Windows 8 will use IPv6, if available, to download Windows Updates so that users always get the best possible connectivity when downloading updates

We are working with CDNs to extend IPv6 support beyond Windows 8. Once that work is complete, even Windows 7 and Windows Vista will automatically use IPv6, where it is available, for connecting to Windows Update.

Leading the way

Windows 8 is connected and ready to use, and our support of IPv6 is a key part of ensuring that connectivity for years to come. Because IPv4 wasn’t designed to handle the scale of connectivity today, the Internet is undergoing a radical change in its foundation. Every connection to every website, every multiplayer game, and every video call will gradually move to IPv6

As part of that transition, Microsoft is leading the way by ensuring that Windows 8 provides the most resilient connectivity to the Internet while providing IPv6-ready products and services.

Introduction to the C# Language and the .NET Framework

C# is an elegant and type-safe object-oriented language that enables developers to build a variety of secure and robust applications that run on the .NET Framework. You can use C# to create traditional Windows client applications, XML Web services, distributed components, client-server applications, database applications, and much, much more. Visual C# provides an advanced code editor, convenient user interface designers, integrated debugger, and many other tools to make it easier to develop applications based on version 4.0 of the C# language and version 4.0 of the .NET Framework.

C# Language

C# syntax is highly expressive, yet it is also simple and easy to learn. The curly-brace syntax of C# will be instantly recognizable to anyone familiar with C, C++ or Java. Developers who know any of these languages are typically able to begin to work productively in C# within a very short time. C# syntax simplifies many of the complexities of C++ and provides powerful features such as nullable value types, enumerations, delegates, lambda expressions and direct memory access, which are not found in Java. C# supports generic methods and types, which provide increased type safety and performance, and iterators, which enable implementers of collection classes to define custom iteration behaviors that are simple to use by client code. Language-Integrated Query (LINQ) expressions make the strongly-typed query a first-class language construct.

As an object-oriented language, C# supports the concepts of encapsulation, inheritance, and polymorphism. All variables and methods, including the Main method, the application's entry point, are encapsulated within class definitions. A class may inherit directly from one parent class, but it may implement any number of interfaces. Methods that override virtual methods in a parent class require the override keyword as a way to avoid accidental redefinition. In C#, a struct is like a lightweight class; it is a stack-allocated type that can implement interfaces but does not support inheritance.

In addition to these basic object-oriented principles, C# makes it easy to develop software components through several innovative language constructs, including the following:

• Encapsulated method signatures called delegates, which enable type-safe event notifications.
• Properties, which serve as accessors for private member variables.
• Attributes, which provide declarative metadata about types at run time.
• Inline XML documentation comments.
• Language-Integrated Query (LINQ) which provides built-in query capabilities across a variety of data sources.

If you have to interact with other Windows software such as COM objects or native Win32 DLLs, you can do this in C# through a process called "Interop." Interop enables C# programs to do almost anything that a native C++ application can do. C# even supports pointers and the concept of "unsafe" code for those cases in which direct memory access is absolutely critical.

The C# build process is simple compared to C and C++ and more flexible than in Java. There are no separate header files, and no requirement that methods and types be declared in a particular order. A C# source file may define any number of classes, structs, interfaces, and events.

.NET Framework Platform Architecture

C# programs run on the .NET Framework, an integral component of Windows that includes a virtual execution system called the common language runtime (CLR) and a unified set of class libraries. The CLR is the commercial implementation by Microsoft of the common language infrastructure (CLI), an international standard that is the basis for creating execution and development environments in which languages and libraries work together seamlessly.

Source code written in C# is compiled into an intermediate language (IL) that conforms to the CLI specification. The IL code and resources, such as bitmaps and strings, are stored on disk in an executable file called an assembly, typically with an extension of .exe or .dll. An assembly contains a manifest that provides information about the assembly's types, version, culture, and security requirements.

When the C# program is executed, the assembly is loaded into the CLR, which might take various actions based on the information in the manifest. Then, if the security requirements are met, the CLR performs just in time (JIT) compilation to convert the IL code to native machine instructions. The CLR also provides other services related to automatic garbage collection, exception handling, and resource management. Code that is executed by the CLR is sometimes referred to as "managed code," in contrast to "unmanaged code" which is compiled into native machine language that targets a specific system. The following diagram illustrates the compile-time and run-time relationships of C# source code files, the .NET Framework class libraries, assemblies, and the CLR.

Language interoperability is a key feature of the .NET Framework. Because the IL code produced by the C# compiler conforms to the Common Type Specification (CTS), IL code generated from C# can interact with code that was generated from the .NET versions of Visual Basic, Visual C++, or any of more than 20 other CTS-compliant languages. A single assembly may contain multiple modules written in different .NET languages, and the types can reference each other just as if they were written in the same language.

In addition to the run time services, the .NET Framework also includes an extensive library of over 4000 classes organized into namespaces that provide a wide variety of useful functionality for everything from file input and output to string manipulation to XML parsing, to Windows Forms controls. The typical C# application uses the .NET Framework class library extensively to handle common "plumbing" chores.

Microsoft Student Partners | J&K

Technology is King. Everyone uses it. But YOU embrace it, explain it, and share it. Now, go for it.

The Microsoft Student Partners (MSP) program offers technical training, incredible connections, and extraordinary opportunities. We designed this program to showcase students on the rise. The MSP program is for students who realize the best technology careers come to those chase their dreams.

Microsoft Student Partners are social, friendly and approachable students who like to meet new people. MSPs are the game changers of the future. Many go forth to create innovative solutions that address the world's toughest challenges. They think and act boldly.

Get Seen Get Known: As an MSP, you'll be informed about the latest Microsoft technologies. You will acquire the tools and training to lead technology discussions on your campus. You will demonstrate the newest technologies, host tech events, and connect with like-minded students and faculty. You will be the one everyone turns to for answers and insights.

Come build your skills, ignite your career. And become a Microsoft technology leader on your campus. 

This year #Kashmir will be witnessing a good number of New MSP's viz.,

Asim Danish, Sajid Khaki, Murfad Hussain, Uzair bhat, Khalid Majeed, Danish Mehraj & Abrar Khan.
It is very fortunate that our youth is also becoming part of various such activities. I wish them great luck ahead and it will be very fantastic to work with them. And we hope they will bring change in 2013.

Sharing a little chat with, which we had lately:

ASIM DANISH

A 21 year old guy, MSP, First and yet only Windows Ucrew member from J&K says he is very enthusastic about new technologies, especially networking. He want to create awareness among youth in R&D controls and Windows server families. He is pursuing his B.Tech in C.Sc. at Islamic University of Science and Technology.
You can read his Blog or reach him via Twitter or Facebook

UZAIR BHAT

Another 21 year old guy, MSP very much into networking stuff, wanna be developer has qualified for this year MSP program with his dedication and robust development skills. He is presently persuing majors in computer Sciences.
He says "What actually inspired me for this program: Microsoft on its own is a very big corporation and are providing opportunities, like this one, is very helpful and interactive for the students. So why not take an advantage by being part of such a program."
His goal for this season will be interacting with enthusiastic students and is already dived into Windows 8 development.
You can reach him via Twitter or Facebook

SAJID KHAKI

Another wanna be developer, C# freak and having hands on windows phone 8 development lately. Sajid marks it that, "I am very crazy about developing and I like everything related to developing and designing but i want to be the master of one."
In year 2012 i was the volunteer for Microsoft Dreamspark, and as a volunteer i learnt alot about new technologies through Microsoft Msp’s and from Microsoft's great personalities. so I decided to be the part of Microsoft as MSP, and I did it by cracking certain rounds of selection, I even took Help from the existing MSP's. I am very thankful to them as well. As a MSP i would spread New technologies and trends among people,by organising technical events,sessions.debates etc.
His focus for 2013 season will be Developing Windows 8 applications and publishing same to marketplace.
You can reach him via Facebook

MURFAD A KHAN

It doesn't matter what we study, but what matters is what inspires us.

Murfad Khan is a bussiness student, But his passion for technology has turned him to be next geek. His love for XAML and XNA has turned him to Kinect X-BOX developer. But the recent trend in technology has turned him to be Windows 8 Metro application developer and he says he is already into it. His core focus till next fall will be on WP8 and Win 8 Development.
You can reach him via Facebook

KHALID MAJEED 

Being associated with technology and making use of it are two different scenarios and i am with the later. Being recognized as MSP this year isn't achievement for me but is just first step towards my goal, that's what i think. I am obsessed with technology, I love the development flow of Windows 8 Metro Applications and i simply have crush on it. Metro style Apps. turned me a XAML programmer from a .net programmer. I love presenting my skills as i did last year in Microsoft DreamSpark Yatra, and i got chance to show my Hands on Windows Phone 7
You can reach him via Facebook

HTML5 New Elements

New Elements in HTML5

The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those elements are removed or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.

• The New Canvas Element

• New Media Elements

• New Form Elements

• New Semantic/Structural Elements

 HTML5 offers new elements for better structure: We will discuss all these elements in next article.