Archive for the ‘HTML’ Category

Five reasons why HTML5 is much better to Flash

Monday, June 14th, 2010

If the war was popular in internet browsers, then the standards, now is the HTML5 versus Flash . Which is better? – Why prefer one over another? I think HTML5 is the future. I also believe that Flash has always been a nuisance rather than an asset (and I think since 1999, eight years before it becomes a problem on the table by Apple ).

I believe the right way is to develop on HTML5 for everyone involved, and these are my five reasons why it is better to Flash:

  1. It is native. No need for plugins , extra amenities or load external components to the browser. Flash, unfortunately, being heavy and often need to consume so many resources faster the battery and use a large percentage of the processor.
  2. It does not belong to anyone, is a markup language that can be used by anyone and is supported by all modern browsers. Flash, however, is the owner, serves the interests of one company, Adobe. May be altered to taste them if needed (for whatever reason, economic, by company policy, etc.)
  3. Maintains the overall user experience the web, run the previous and next buttons in the browser, does not operate within a “sandbox” as with Flash, is not limited to the area assigned to the plugin.
  4. All items with all effects and all hierarchies needed to build a fully functional graphical interface to support a web application is 100% possible using HTML5 + CSS + Javascript. Flash was used as a replacement. Gmail is the perfect example. Even more so if viewed from a mobile device. Did you know that the version of Gmail for IPAD is much higher than the native application made by Apple?
  5. Adaptable, flexible, scalable platform. While insisting Adobe, Flash on mobile phones remains a goal too far, meanwhile build interfaces for the desktop or the mobile is quite real today on the two platforms.

Is there hope for Flash? Of course, but not in the platform development of applications or in building web sites made of 100% with this plugin. I think that Flash works well for games and animation elements for certain very particular, very far away from this “solution for anything” that Adobe (or Macromedia before being acquired) tried to sell for years.

Tags: ,
Posted in HTML | No Comments »

Doodle.js, library for working with canvas

Friday, July 3rd, 2009

Doodle.js is a library that allows us to easily work with the element <canvas /> and everything that entails. With a similar aesthetic to jQuery, drawing on the canvas that is <canvas /> is as simple as this:


  <head>
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    function init() {
      (function(oo) {
  oo.canvas('#my_canvas');
  oo.rect({x:25, y:25, width:50, height:50}).draw();

})($doodle);

    };
  </script>
  </head>
  <!--init() is called when the canvas is ready for us.-->
  <body onload="javascript:init();">
    <canvas id="my_canvas" width="600" height="400">
      <p>Fallback: Canvas element is not supported in this browser!</p>
    </canvas>
  </body>

Examples

Do not miss some of the examples available on the homepage of the library:
Spiral multicolor
Rebounds multiple

Tags: , , ,
Posted in HTML, JAVASCRIPT | No Comments »

Proposal subtitle for HTML5 video tag

Friday, July 3rd, 2009

In Ginger’s Thoughts I read a very interesting proposal which I believe is that in just a proposal. Although the idea is very good and it might be interesting to have this in the new HTML5. The proposal is for December 2008 and so far no developments.
The idea is to include the tag HTML5′s ability to handle subtitles:

<video src="http://example.com/video.ogv" controls>
<text category="CC" lang="en" type="text/x-srt" src="caption.srt"></text>
<text category="SUB" lang="de" type="application/ttaf+xml" src="german.dfxp"></text>
<text category="SUB" lang="jp" type="application/smil" src="japanese.smil"></text>
<text category="SUB" lang="fr" type="text/x-srt" src="translation_webservice/fr/caption.srt"></text>
</video>

As we can see in the above code, we would be including the text tag that would allow us to establish the lang attribute of the subtitle language and select it from your control in your browser (the preset default language of your browser) .

The tag <text />
Only indicate the location of the subtitle file to load src indicating the language lang and type type of a subtitle that we carry.

For now …
At the moment we can make use of SRT jQuert to simulate the result with Javascript.

<!-- Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>

<!-- HTML  -->
<video src="http://example.com/video.ogv" id="video" controls>
<div class="srt"
data-video="video"
data-srt="http://example.com/video.srt" />

The idea is interesting when the films arrive officially to the Internet. Huh?

Tags: , ,
Posted in HTML | 1 Comment »

YouTube HTML5 Demo

Wednesday, June 3rd, 2009

A page that demonstrates the ability to show videos HTML5 without using Flash for this. Obviously, it is necessary to use a browser compatible with HTML5 to see it properly.
Link: http://www.youtube.com/html5

External Link: What is HTML5 via WiseCodes

Tags: , ,
Posted in HTML | 2 Comments »

Javascript Image combobox, give your life to select

Wednesday, June 3rd, 2009

Javascript Image ComboBox is a jQuery plugin that allows our items <select/> have a life that until now could not have.

comboboximage_030608

This is an extension that allows items of <select /> have an image to facilitate the selection of items within a list of options.
To do this using an attribute (not standard) element <option /> named icon which will indicate where we’ll take the image next to <option />

?View Code HTML
 <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

After a line of JavaScript with this attribute will be housed within an image <select />

?View Code JAVASCRIPT
 MSDropDown.init();

If you want to see a demo of how to be, you can take a look here.

Tags: , ,
Posted in HTML | 2 Comments »

Mastered the accordion with MooTools

Wednesday, June 3rd, 2009

Call accordion those dynamic elements of our Web pages that show an item to move the mouse (or click on it) to conceal the other components. This technique very convenient for displaying large amounts of information in a small space usually give a headache to match all the information.

byslidermenu

With BySlideMenu never have problems. This is a MooTools plugin that allows us to make a wide variety of accordions, with very few lines of code.

HTML:

The HTML code we use to generate our accordion will be based on a list of elements:

?View Code HTML
<ul id="pinclickmenu">
    <li><img src="creditcards.jpg" /></li>
    <li><img src="games.jpg" /></li>
    <li><img src="computer.jpg" /></li>
    <li><img src="eiffeltower.jpg" /></li>
    <li><img src="electronic.jpg" /></li>
</ul>

Each <li/> will be one of the elements that make up the accordion.

JavaScript:

?View Code JAVASCRIPT
var pinclickmenu = new BySlideMenu('pinclickmenu', {pinMode: 'click'});

As we see fewer lines is impossible :D

Demos and Downloads:

You can see more demos and download the plugin from the project page.

Happy Programming!!! ;-)

Tags: , ,
Posted in HTML, JAVASCRIPT | 2 Comments »

What is HTML5

Wednesday, June 3rd, 2009

HTML 5 (Hyper Text M Language Version 5) is the fifth largest in the revision of basic language World Wide Web, HTML. HTML 5 specifies two variants of the same language: a ‘classic’ HTML text/html the variant known as HTML 5 and a variant XHTML called XHTML 5. This is the first time in HTML and XHTML have been developed in parallel.
The development of this code is governed by the Consortium W3C.

New Elements

HTML 5 provides a number of new elements and attributes that reflect the typical use of modern web sites. Some of them are technically similar to the labels
<div> and <span> but have a semantic meaning, eg <mav> (block site navigation) and <footer> Other elements provide new functionality through an interface such as elements <audio> and <video>
Some elements of HTML 4.01 are obsolete, including purely presentation as <font> and <center> whose effects are handled by the CSS. There is also a renewed emphasis on the importance of scripting DOM for behavior on the web.

HTML 4

html4

HTML 5

html5

External Link: via W3C

Tags: , ,
Posted in HTML | No Comments »

Multi-Language In Any Web Page With Google API

Monday, March 16th, 2009

Multi-language In Any Web Page (HTML, PHP, ASP.NET etc) With Google API

live_preview Demo      downloadDownload Code

Mostly Web Programmers Multilanguage in ASP.NET is by using Localization & Resource rules. But this rule cant use with HTML, PHP etc. Now I’m changing to new rules with Google AJAX Language API. It is very useful for programmers. Click here to read about Localization & Resource

Advantage & Disadvantage

Advantage:
1: Reduce programming time
2. Reduce file size, In Localization & Resource rules, we need resource files by each language
3. No need to find meaning of unknown language for creating site
4. Only one language to store in XML or..5. No need C# & VB.NET.

Disadvantage:
1. Need Internet connection for connecting to Google AJAX Language API’s Script

Click here to read about Google Language AJAX API.
I have a sample program as below. I Hope you will understood.

?View Code HTML
 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 
<script type="text/javascript">
 
google.load("language", "1");
 
 
function fnTrans(strTransText,strTransField, strTransFLang, strTransTLang)
{
 // Translation
 google.language.translate(strTransText, strTransFLang, strTransTLang, function(result) {
          var strcontainer = document.getElementById(strTransField);
          strcontainer.innerHTML = result.translation ;
 
      });
}
 
function initialize(strToTxtBox, strFromTxtBox) {
 
 // Translate English to German
 
 strFLang = 'en' //English
 strTLang = 'de' //German
 
 var strText = document.getElementById(strFromTxtBox).innerHTML; //Get Lable Name
 
 fnTrans(strText,strToTxtBox, strFLang,strTLang)
 
}
 
 function fnhi()
  {
 
  initialize('ToLableName_FN', 'FrmLableName_FN' ); // First Name
 
  initialize('ToLableName_LN', 'FrmLableName_LN' ); // Last Name
 
  }
</script>
 
  </head>
  <body onload="fnhi()">
 
      <label id="FrmLableName_FN" >First Name</label>
      <br />
  <label id="ToLableName_FN"></label>
  <input type="text" name="txtFname" />
</br>
</br>
 
      <label id="FrmLableName_LN" >Last Name</label>
      <br />
  <label id="ToLableName_LN"></label>
  <input type="text" name="txtFname" />

live_preview Demo      downloadDownload Code

Tags: , , , ,
Posted in HTML, JAVASCRIPT | 3 Comments »

Mapping .html file to ASP.NET

Tuesday, February 24th, 2009

Step one: Open IIS, in your site to set up virtual directory property page tab, click on the “Application Settings (Application Settings)” under the “configuration (Configuration..)” Button, open the “application configuration (Application Configuration ) “window” App Mappings (App Mappings) “Tab page, click on the” Add (Add..) “button, the pop-up” Add / Edit Application Mapping suffix (Add / Edit Application Extension Mapping ) “window, in the” executable program (Executable) “the right of the text box, type C: \ WINNT \ Microsoft.NET \ Framework \ v1.1.4322 \ aspnet_isapi.dll (file path will be. net framework version of the different different for the sake of safety, you can in the “App Mappings (App Mappings)” tab under the list of double-mapping “. aspx”, in the pop-up window to select its “executable program (Executable)” text Copy the text box and then out), in the “name suffix (Extension)” text box you want to add the suffix of “. html”, then click OK to save all open windows to complete the property settings in IIS; 

Step two: open you want to configure the site or virtual directory under the root directory of the web.config file, configuration section in <system.web> add the following configuration sections: 

<httphandlers>
<add verb=”*”
path=”*.html”
type=”System.Web.UI.PageHandlerFactory” />
</httphandlers>


Save web.config file, Now we are set !!! :-)

Tags: , , ,
Posted in ASP.NET, HTML | No Comments »