Category Archives: Tutorials

Php , Jquery, Html and Css tutorials

Bootstrap Framework Plans to Give Twitter the Boot

Web development toolkit Bootstrap is getting ready to part ways with Twitter. The open source project began life at Twitter, but with its two primary developers leaving Twitter for other companies, Bootstrap will be spun off on its own.

Bootstrap co-creators Mark Otto and Jacob Thornton are both leaving Twitter and have announced thatBootstrap will continue but as “its own open source organization.” For now nothing is changing; Bootstrap will remain a Twitter project on GitHub. But eventually the pair plan to give Bootstrap a life of its own.

The Bootstrap project is designed to help you get your website up and running as fast as possible. Somewhere between a framework and a “theme,” Bootstrap offers an HTML, CSS and JavaScript base for your designs, including built-in forms, buttons, tables, grids and navigation elements. Among Bootstrap’s more impressive tricks is the grid layout tool with support for advanced features like nested and offset columns. Bootstrap is also impressively lightweight, weighing in a just 10kb (gzipped).

Bootstrap 2.0, released earlier this year, added some much-needed responsive design tools for creating fluid layouts, including a new flexible 12-column grid system.

The move away from Twitter should be good news for Bootstrap users, particularly with Twitter’sincreasingly hostile attitude toward developers. Otto assures anyone worried that Bootstrap will become abandonware that both he and Thornton are dedicated to Bootstrap. “The project has grown beyond us and the Twitter brand,” writes Otto on the Bootstrap blog. “It’s a huge project playing a pretty awesome role in the web development industry, and we’re excited to see it continue to grow.”

Adobe Takes an Open-Source Swing at Open Video

Adobe announced two open-source initiatives Tuesday, both of which are intended to make it easier for web publishers to create rich media web experiences based in Flash.

The Open Source Media Framework (formerly code-named Strobe) is a set of components released under the Mozilla Public License that let developers build applications based around Flash video. The other code release, the Text Layout Framework, is a set of ActionScript tools for using a wider array of fonts and producing better-looking text content in Flash and AIR apps.

Though these development will likely present new opportunities for publishers who want to get video and rich text layouts online with minimal hassle and a lower up-front cost, it’s difficult to see Adobe’s move as anything but a defenses against open video initiatives like Ogg Theora.

One of the great promises of HTML 5 is an open video experience on the web — the ability for people to watch videos play back in the web browser natively, without having to download a plug-in like Flash or Silverlight to see it. Though still in draft, HTML 5 has provisions in place to allow for embedding of audio and video on web pages through the use of tags, with the playback codecs bundled in the browser. Of course, the web standards crowd prefers to recommend browsers use codecs believed to be free of patent restrictions, such as Ogg Theora and Dirac.

The technology is already being used in the wild — both YouTube and DailyMotion are experimenting with Flash-free video playback with Ogg Theora, and Google Chrome, Opera and Firefox 3.5 offer support for such features.

At the end of June, however, the HTML 5 working group removed the codec requirement from the draft specification after the various browser makers couldn’t come to a consensus over which codec to support.

This left the door open for Flash to hold on to developers who would have otherwise jumped ship for free software alternatives. Tuesday’s OSMF code release extends that hand even further — by freeing up the tools under an open-source license, Adobe is only strengthening its position among developers building rich internet apps.

It’s important to note that the tools needed to create video-playing Flash apps, Flash CS 4 and Flash Builder, are only available commercially, and that the playback technology is patented — Adobe must license it from the patent holders.

The timing of the Text Framework Layout release is no less curious. Just last month, a new project calledTypekit was launched with the goal of allowing developers to license and use more complex fonts in their web designs. Once Typekit gets off the ground, licensed fonts will be downloaded by users in a protected environment and laid out on a page using open web standards.

Right now, this is exactly the kind of thing designers use Flash for. With technologies like sIFR, designers can go beyond the handful of fonts supported by the current web browsers, creating more complex type displays.

But newer, emerging standards like CSS3 allow for many of the same layout options as Flash, so if a service like Typekit can free up more typefaces for designers to use, the threat against Flash is obvious.

Adobe’s code releases are more than just insurance policies against losing developers to Flash-free technologies. They are also reminders that, while HTML 5 looks promising, there’s already a technology here and in abundant use that can solve many of the same problems HTML 5 hopes to. And after Tuesday’s release, it’s more attractive to the fence-sitters.

Microsoft Wants to Separate the Canvas 2D API from HTML5

In an e-mail sent to the public-html@w3.org mailing list on Wednesday, Microsoft’s Eliot Graf proposedremoving the Canvas element, which is used to create complex vector animations in the browser without plug-ins, from the HTML5 specification. Graf also proposed launching a new, separate specification for the Canvas 2D API.

His e-mail:

In his mail describing why he created a separate Canvas 2D API specification, Doug Schepers wrote [1]:

> There is a chance that currently Canvas could be a blocker on progress

> for the HTML5 spec, and at this point, Canvas is so widely implemented

> that I don’t think it’s at risk, so I hope this isn’t disruptive. I am

> available to help with any editing that needs doing, but I hope that

> others will also work with this draft, and step into the editor role.

At Microsoft, we agree with the sentiments expressed by Doug, Maciej [2], and others about creating a separate Canvas 2D API specification. [3] We are prepared to offer editorial resources to aid in the completion of this separate specification. We have looked over Doug’s initial document, made some editorial enhancements, and are prepared to follow through in taking feedback and maintaining the specification.

We believe that some sort of accessibility API functionality is needed in the canvas element. However, the exact nature and depth of that functionality presents a dilemma that may block progress on the HTML5 spec. We also think that the Canvas 2D API may be a desirable feature used in other technologies such as SVG.

Starting with Doug Schepers’ initial draft, we made changes to get the document to adhere to the W3C PubRules [4], enhance readability, and improve logical flow of the document. In addition, we foresee adding sample code throughout the specification, where appropriate. No normative changes have been made. As with all drafts, the Canvas 2D API specification is still a work in progress. We would like to solicit feedback about the changes that were made (see below TODO) and about further changes that the working group would like to see.

Our updated version is published at http://dev.w3.org/html5/canvas-api/canvas-2d-api.html.

[1] http://lists.w3.org/Archives/Public/public-canvas-api/2009JulSep/0002.html

[2] http://lists.w3.org/Archives/Public/public-canvas-api/2009JulSep/0007.html

[3] http://lists.w3.org/Archives/Public/public-html/2009Aug/0628.html

[3] http://www.w3.org/2005/07/pubrules

[…]

Microsoft Internet Explorer is the only modern browser with no plans to support Canvas — Firefox, Chrome, Safari and Opera all do. Redmond’s opposition makes sense, as the animation capabilities Canvas provides would conflict with Microsoft’s plans to speed adoption of its Silverlight platform, which affords web authors many of the same capabilities using a proprietary plug-in and commercial development software.

Several list members pointed out that if Microsoft has the resources to author the spec independent of HTML5, those resources could be better spent building support for Canvas into the browser.

A follow-up response from Ian Hickson, a Google employee who is the primary editor of the HTML5 spec, points out a few clear problems with this strategy and stresses that it doesn’t seem list a good idea:

IF we’re going to split out the 2D API — and I’m not really sure if at this point that’s something we should do, frankly — then I would much rather we do it based on the text in the HTML5 spec now, and would much rather we have an editor who is able to give this the full-time attention that it needs.

However, I’m really not sure at this point that it even makes sense to extract the API anymore. The API intergrates pretty tightly with the rest of HTML, for example it refers to HTMLVideoElements, the HTML5 “structured clone” feature is defined in terms of canvas interfaces, and so on. There would have to be a two-way reference, which would be a maintenance nightmare, and which would just delay the progress of both documents.

What are the problems that we are trying to solve by splitting out the API at this point?

HTML5 File API Brings Drag-and-Drop File Uploads to the Web

The coming HTML5 specification has several tools that take HTML well beyond its humble beginnings as a markup language and give web developers some powerful scripting tools. The W3C, the group that oversees the development of HTML5, has just published a draft spec of yet another powerful tool — the HTML5 File API.

The File API is designed to improve the way browser-based webapps handle file uploads, and it even makes it possible to create pages with drag-and-drop upload fields. The draft defines a new input option,<input type="file">, for handling uploads.

Even better, the API gives developers a way to hook into the upload data and display upload progress and other information.

The downside is that, because it’s so new, very few browsers have implemented the File API. The furthest along appears to be Firefox, which supports enough of the File API to have created a drag-and-drop demo. If you’ve got a copy of the latest alpha build of Firefox 3.6, try dragging a file from your desktop into the black box on the demo page.

Still, while widespread support might be a ways off, the File API promises to give web apps a way to behave a bit more like their desktop cousins — drag-and-drop support, the ability to handle multiple simultaneous uploads and show upload progress — all without the need for Flash or other outside tools.

Tim Berners-Lee Sees Promise, Challenges in HTML5

The man credited with founding the world wide web is both excited and cautious about its future.

Sir Tim Berners-Lee, the British physicist who first designed the way web servers deliver pages to web browsers nearly 19 years ago, sees great promise in HTML5, the much-anticipated rewrite of the language used to build web pages.

“I think (HTML5) is great,” he said at the Worldwide Web Consortium’s (W3C) annual member gathering, taking place here this week.

HTML5 is a mixture of several different technologies that allow content creators to do more with web pages. It defines rules for presenting video, audio, mathematical equations, complex layouts, 2-D animations and non-standard typefaces. Each bit of technology has its own working group within the W3C chartered with developing that one component.

“We’ve had the pieces for a while,” he says. “Seeing all these things finally coming together is exciting, and it multiplies the power of each one,” Berners-Lee says.

HTML5 also enhances the way browsers can store and process data, which has led to the creation of more complex and rich web applications that run in the browser like Gmail, Facebook and apps that allow real-time data sharing, like Google Wave.

“Yes, this is a markup language for web pages,” he says, “but the really big shift that’s happening here — and, you could argue, what’s actually driving the fancy features — is the shift to the web becoming a client-side computing platform.”

The HTML5 specification is close to completion. The most recent releases of browsers like Firefox, Chrome, Safari and Opera all support most of the technologies being rolled in to HTML5. Microsoft’s Internet Explorer supports fewer of HTML5′s advancements, but it’s catching up. HTML5 is expected to become an official recommendation by late 2010 or 2011.

Now that the web has been elevated to a more powerful computing platform by HTML5, Berners-Lee says it has also given rise to complicated security issues.

“You got a piece of code from site A, and you’re person B running a browser you got from company C, and that code wants to access data stored with company E for the purposes of printing it on a printer owned by company D — How do you build that so that it’s not susceptible to all kinds of nasty attacks?”

“The technology is very exciting, but there’s actually a lot of work to do in these corridors to make it work on the real web in a secure way.”