Posts Tagged ‘HTML’

« Older Entries

Rotating text with CSS

Tuesday, August 4th, 2009

Jonathan Snook, published an interesting article that shows how to rotate text using CSS.

RotatingText_040809

The code is clear that it is not standard and only works in Safari / WebKit, Firefox and Internet Explorer.

RotatingText02_040809

 //CSS
.year {
width:10px;

/* WebKit, Safari */
-webkit-transform: rotate(-90deg);

/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

An alternative standard, although more laborious, we propose the boys CSS-Tricks.

Tags: , ,
Posted in CSS | 1 Comment »

What we can do ajax

Tuesday, July 14th, 2009

* Modifications to the browser, adding buttons, toolbars, bookmarks, icons, ….
* Access to local files
* Running music files or apply effects
* HotKeys gives conflicts in other browsers
* Access Hardware
* Comnicaciones extended HTTP and other protocols.
* Interaction with the Operating System

Anyway time to time 

Tags: , , ,
Posted in Ajax | 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 | No Comments »

Detection of faces on canvas with Javascript

Wednesday, June 17th, 2009

Detect faces and is not just for Google Images. Now you can implement it on your website using Javascript and the canvas properties.

Venu

How it works?

To do this we need to work only 2 files in our <head />

?View Code HTML
<script type="text/javascript" src="dat.js"></script>
<script type="text/javascript" src="detector.js"></script>

Dat.js the file shows how to detect and detector.js the file has the logic of the script can detect faces in any photo.
1 can detect faces in the photos, the process becomes slower depending on what we choose (of course).

1 Face

?View Code JAVASCRIPT
face_detect_one( document.getElementById("myCanvas") );

Multiple Faces

?View Code JAVASCRIPT
face_detect_multi( document.getElementById("myCanvas") , progress_callback, result_callback );
function progress_callback( StepsCompleted, TotalSteps){
....
}

Answer

The response functions that returns the values we obtain a rectangle that contains the person’s face.

?View Code JAVASCRIPT
var myCanvas = document.getElementById("mycanvas");
 
var result = face_detect_one( myCanvas );
if (result) draw_rect(result, myCanvas);
 
function draw_rect(r, myCanvas){
	var CanvasContext = myCanvas.getContext("2d");
 	CanvasContext.strokeRect( r.x, r.y, r.w, r.w );
}

Link: via Percobaan

Tags: , ,
Posted in JAVASCRIPT | No Comments »

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 | No 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 | No Comments »

« Older Entries