You are here: dMarkWeb-Web Design Company » Blog
Latest technology News

Android Nexus One with Android2.2

Posted by admin at 5:58 pm

The Google Nexus One's Hidden Secret: Wireless NThe Nexus One’s hardware supports wireless N networks. The phone’s software, well, sort of. But! Super-fast Wi-Fi may hit the Nexus one in the next Android update—and if you’re feeling adventurous, you can have it sooner.

Google and Broadcom have just released a new wireless driver, which evidently makes the Nexus One much better at connecting to 802.11n networks. (Previously, Google had taken N support off of the Nexus One’s official spec sheet, and users reported inconsistent results in connecting to N networks.) The driver, when sewn into a current build of Android, enables N networks across the board.

So, theories: Google is prepping to roll this driver, finally, into Android, just in time for the 2.2 release, codenamed Froyo. Or this new driver incidentally improved wireless N performance, which will remain a silent, uncertain feature on the Nexus One for the foreseeable future. Either way, it’ll end up in custom Android builds like Cyanogen’s in short order, so you’ll be able to try it yourself. [AndroidandMe]

Categories: Blog, Programming
Tags: ,

Drag Drop with HTML5

Posted by admin at 6:30 pm

As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature. Note we are displaying this via an iframe so if your having any trouble viewing the demo please let us know, another reason it may not show will be due to your browser, this is working fine in FireFox 3.5 ^ Safari.

Basic HTML 5 layout code:

<!DOCTYPE HTML>

<html>

<head>

<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/>

<center><title>HTML5 Drag and drop demonstration</title>

<style type=”text/css”>

#boxA, #boxB, #boxC {

float:left; width:165px; height:165px; padding:10px; margin:10px;

}

#boxA { background-color: #474747; }

#boxB { background-color: #474747; }

#boxC { background-color: #474747; }

#drag, #drag2, #drag3 {

width:30px; height:30px; padding:5px; margin:5px;

-moz-user-select:none;

}

#drag { background-color: #e8e8e8;}

#drag2 { background-color: orange;}

#drag3 { background-color: purple; border:3px brown solid;}

</style>

<script type=”text/javascript”>

function dragStart(ev) {

ev.dataTransfer.effectAllowed=’move’;

//ev.dataTransfer.dropEffect=’move’;

ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));

ev.dataTransfer.setDragImage(ev.target,0,0);

return true;

}

function dragEnter(ev) {

var idelt = ev.dataTransfer.getData(“Text”);

return true;

}

function dragOver(ev) {

var idelt = ev.dataTransfer.getData(“Text”);

var id = ev.target.getAttribute(‘id’);

if( (id ==’boxB’ || id ==’boxA’) && (idelt == ‘drag’ || idelt==’drag2′))

return false;

else if( id ==’boxC’ && idelt == ‘drag3′)

return false;

else

return true;

}

function dragEnd(ev) {

ev.dataTransfer.clearData(“Text”);

return true

}

function dragDrop(ev) {

var idelt = ev.dataTransfer.getData(“Text”);

ev.target.appendChild(document.getElementById(idelt));

ev.stopPropagation();

return false; // return false so the event will not be propagated to the browser

}

</script>

</head>

<body>

<h1>Drag and drop HTML5 demo</h1>

<div>there are many other variables that can be used also, we will coer this another day.

</div>

<div id=”boxA”

ondragenter=”return dragEnter(event)”

ondrop=”return dragDrop(event)”

ondragover=”return dragOver(event)”>

<div id=”drag” draggable=”true”

ondragstart=”return dragStart(event)”

ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag2″ draggable=”true”

ondragstart=”return dragStart(event)”

ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag3″ draggable=”true”

ondragstart=”return dragStart(event)”

ondragend=”return dragEnd(event)”>drag me</div>

</div>

<div id=”boxB”

ondragenter=”return dragEnter(event)”

ondrop=”return dragDrop(event)”

ondragover=”return dragOver(event)”>

</div>

<div id=”boxC”

ondragenter=”return dragEnter(event)”

ondrop=”return dragDrop(event)”

ondragover=”return dragOver(event)”>

</div>

<div style=”clear:both”>Example created by <a href=”http://html5tutorial.net/”>HTML Tutorials</a>.</div>

</body></center>

</html>

We will cover JavaScript in depth at a later date, for now copy and paste the code above and have a play around with it and see what you can come up with, this was more or less an example to demonstrate HTML5’s tremendous power.

Categories: Blog
Tags:

HTML5 Raw Power

Posted by admin at 6:20 pm

Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)

Please click “Read More” to see the full HTML5 code .

To render what you see above you will need the following code:

[stextbox id="alert" caption="Status monitoring" color="ffffff" ccolor="ffffff"]Network monitoring:

<code><!DOCTYPE html></code>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

<title>HTML5 Demo: online connectivity monitoring</title>

<style>

body {

font: normal 16px/20px Helvetica, sans-serif;

background: #F4F4F4;

margin: 0;

margin-top: 40px;

padding: 0;

}

section, header, footer {

display: block;

}

#wrapper {

width: 550px;

margin: 0 auto;

background: #fff;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-top: 1px solid #fff;

padding-bottom: 76px;

}

h1 {

padding-top: 10px;

}

h2 {

font-size: 100%;

font-style: italic;

}

header,

article > p,

article > h3,

article > code,

footer a,

footer p {

margin: 20px;

}

footer > * {

margin: 20px;

color: #999;

}

#status {

padding: 5px;

color: #fff;

background: #ccc;

}

#status.offline {

background: #c00;

}

#status.online {

background: #0c0;

}

</style>

<script>

// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/

(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while (i–){document.createElement(e[i])}})()

</script>

<script>

function online() {

var status = document.querySelector(‘#status’);

if (status) {

status.className = navigator.onLine ? ‘online’ : ‘offline’;

status.innerHTML = navigator.onLine ? ‘online’ : ‘offline’;

}

}

document.addEventListener(‘DOMContentLoaded’, online, true);

window.addEventListener(‘online’, online, true);

window.addEventListener(‘offline’, online, true);

</script>

</head>

<body>

<section id=”wrapper”>

<header>

<h1>Status Monitoring</h1>

</header>

<article>

<p>Current network status: <span id=”status”>checking…</span></p>

</article>

<footer><a href=”http:html5tutorials.net/”>HTML5 Tutorial</a></footer>

</section>

<script>

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);

document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

</script>

<script>

try {

var pageTracker = _gat._getTracker(“UA-1656750-18″);

pageTracker._trackPageview();

} catch(err) {}</script>

</body>

</html>[/stextbox]

Categories: Blog, Programming
Tags:

HTML5 Tags Reference

Posted by admin at 2:37 pm

Below is a complete list of HTML 5 tags, in the next few weeks our site will provide you with a downloadable tag list so that you can learn HTML 5. As you will notice with the HTML 5 tags below there are several new code inclusions.

  • 4* The element is defined in HTML 4+
  • 5* The element is defined in HTML 5

Tag Description 4 5
<comment> Defines a comment 4 5
<DOCTYPE> Defines the document type 4 5
<a> Defines a hyperlink 4 5
<abbr> Defines an abbreviation 4 5
<acronym> Not supported. Defines an acronym 4
<address> Defines an address element 4 5
<applet> Not supported. Defines an applet 4
<area> Defines an area inside an image map 4 5
<article> Defines an article 5
<aside> Defines content aside from the page content 5
<audio> Defines sound content 5
<b> Defines bold text 4 5
<base> Defines a base URL for all the links in a page 4 5
<basefont> Not supported. Use CSS instead 4
<bdo> Defines the direction of text display 4 5
<big> Not supported. Defines big text 4
<blockquote> Defines a long quotation 4 5
<body> Defines the body element 4 5
<br> Inserts a single line break 4 5
<button> Defines a push button 4 5
<canvas> Defines graphics 5
<caption> Defines a table caption 4 5
<center> Not supported. Defines centered text 4
<cite> Defines a citation 4 5
<code> Defines computer code text 4 5
<col> Defines attributes for table columns 4 5
<colgroup> Defines groups of table columns 4 5
<command> Defines a command button 5
<datagrid> Defines data in a tree-list 5
<datalist> Defines a dropdown list 5
<datatemplate> Defines a data template 5
<dd> Defines a definition description 4 5
<del> Defines deleted text 4 5
<details> Defines details of an element 5
<dialog> Defines a dialog (conversation) 5
<dir> Not supported. Defines a directory list 4
<div> Defines a section in a document 4 5
<dfn> Defines a definition term 4 5
<dl> Defines a definition list 4 5
<dt> Defines a definition term 4 5
<em> Defines emphasized text 4 5
<embed> Defines external interactive content or plugin 5
<eventsource> Defines a target for events sent by a server 5
<fieldset> Defines a fieldset 4 5
<figure> Defines a group of media content, and their caption 5
<font> Deprecated. Defines text font, size, and color 4
<footer> Defines a footer for a section or page 5
<form> Defines a form 4 5
<frame> Not supported. Defines a sub window (a frame) 4
<frameset> Not supported. Defines a set of frames 4
<h1> to <h6> Defines header 1 to header 6 4 5
<head> Defines information about the document 4 5
<header> Defines a header for a section or page 5
<hr> Defines a horizontal rule 4 5
<html> Defines an html document 4 5
<i> Defines italic text 4 5
<iframe> Defines an inline sub window (frame) 4 5
<img> Defines an image 4 5
<input> Defines an input field 4 5
<ins> Defines inserted text 4 5
<isindex> Not supported. Defines a single-line

input field

 4
<kbd> Defines keyboard text 4 5
<label> Defines a label for a form control 4 5
<legend> Defines a title in a fieldset 4 5
<li> Defines a list item 4 5
<link> Defines a resource reference 4 5
<mark> Defines marked text 5
<map> Defines an image map 4 5
<menu> Defines a menu list 4 5
<meta> Defines meta information 4 5
<meter> Defines measurement within a predefined range 5
<nav> Defines navigation links 5
<nest> Defines a nestingpoint in a datatemplate 5
<noframes> Not supported. Defines a noframe section 4
<noscript> Defines a noscript section 4 5
<object> Defines an embedded object 4 5
<ol> Defines an ordered list 4 5
<optgroup> Defines an option group 4 5
<option> Defines an option in a drop-down list 4 5
<output> Defines some types of output 5
<p> Defines a paragraph 4 5
<param> Defines a parameter for an object 4 5
<pre> Defines preformatted text 4 5
<progress> Defines progress of a task of any kind 5
<q> Defines a short quotation 4 5
<rule> Defines the rules for updating a template 5
<s> Not supported. Defines strikethrough text 4
<samp> Defines sample computer code 4 5
<script> Defines a script 4 5
<section> Defines a section 5
<select> Defines a selectable list 4 5
<small> Defines small text 4 5
<source> Defines media resources 5
<span> Defines a section in a document 4 5
<strike> Not supported. Defines strikethrough text 4
<strong> Defines strong text 4 5
<style> Defines a style definition 4 5
<sub> Defines subscripted text 4 5
<sup> Defines superscripted text 4 5
<table> Defines a table 4 5
<tbody> Defines a table body 4 5
<td> Defines a table cell 4 5
<textarea> Defines a text area 4 5
<tfoot> Defines a table footer 4 5
<th> Defines a table header 4 5
<thead> Defines a table header 4 5
<time> Defines a date/time 5
<title> Defines the document title 4 5
<tr> Defines a table row 4 5
<tt> Not supported. Defines teletype text 4
<u> Not supported. Defines underlined text 4
<ul> Defines an unordered list 4 5
<var> Defines a variable 4 5
<video> Defines a video 5
<xmp> Not supported. Defines preformatted text 4

Categories: Blog, Programming
Tags:

Beginning with HTML5

Posted by admin at 2:34 pm

HTML is essentially how people communicate and acknowledge each other on the World Wide Web as it is the core markup language. The latest version of Hypertext Markup Language, HTML5, has recently been launched with new features and elements to boast about. Here is some information to help you learn HTML 5.

HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. Its goal is to reduce the need for proprietary RIA technologies, which include the likes of Adobe Flash, Microsoft Silverlight and Sun JavaFX.

The ideas for the revised HTML began all the way back in 2004 by the WHATWG and are just now making way. Although parts of the revision have been completed and are ready for use, it is an ongoing work that is expected to continue for many years to come.

It certainly features a number of new elements and attributes that will assist modern web sites. Some of the basic elements that have been added include semantic replacements for common uses of generic block and inline elements. Other elements will work with standardized interface like <audio> and <video> elements.

As you learn HTML 5, you will find there are some elements that have been dropped from HTML 4.01. One such feature is the presentational elements of <font> and <centers> which are now achieved using CSS.

Lastly, you will find the HTML syntax is no longer based on SGML. It now comes with a new introductory line that is similar to SGML document type declaration, allowing standards-compliant rendering in all browsers that use “DOCTYPE sniffing.”

 

Categories: Blog, Programming
Tags:

Gesture Search App-Android

Posted by admin at 8:28 pm

Google Labs AndroidGoogle have released a new Google Labs application that enables Android users to search their phones by drawing letters on their screens.

The new app known as Gesture Search searches the phones contacts, audio tracks, apps and bookmarks based on what letter is drawn on the handsets touchscreen.

Today we’re pleased to announce Gesture Search, a new Google Labs application for Android-powered devices running Android 2.0 or above in the US. Gesture Search lets you quickly find a contact, an installed application, a bookmark or a music track from hundreds or thousands of items, by simply drawing alphabet gestures on the touch screen.

The app is also capable of returning results for multiple interpretations should it be unsure if the letter drawn is a ‘H’ or an ‘A’ for example.

android gesture search app

The application is available to download from the Android Market from today, just search for ‘Gesture Search’.

Categories: Blog
Tags: ,

WordPress Menus Customizations

Posted by admin at 6:48 pm

I have been Looking for a way to add some description to my Menu items on my reconstructed website in WordPress. I google and found some useful ways to customizing the wordpress menus. We can customize the Primary and Secondary menus in your WordPress theme. Add descriptive sub-title links to menu items like some popular WordPress themes and sites. Filter the menu of a WordPress theme to hide/show some pages. Add special CSS classes to wp_page_menu, and finally, how to hand-code your own WordPress menu for the ultimate in control.

Let’s Start!

Primary and Secondary Menus

This one’s really easy with wp_page_menu. Instead of adding it once to our theme, we’ll add it twice!—but including only select pages each time.

  1. <?php wp_page_menu(‘exclude=24,27,28&menu_class=menu menu-primary’); ?>
  2. <?php wp_page_menu(‘include=24,27,28&menu_class=menu menu-secondary’); ?>

Because wp_page_menu generates all the code we’ll need for a menu we simply have to exclude pages from the first menu and include some in the other. With new menu classes of menu-primary and menu-secondary we’re all set.

Here’s how to do it with a Thematic Child Theme—or any in any Child Theme where the parent theme is using wp_page_menu. Also easy, but with wp_list_pages so we can avoid any CSS styling problems with multiple drop down menus. Just use this code snippet in your Child Theme functions file.

  1. // Remove the default Thematic Access
  2. function remove_thematic_actions() {
  3.     remove_action(‘thematic_header’,‘thematic_access’,9);
  4. }
  5. add_action(‘init’,‘remove_thematic_actions’);
  6.  
  7. // Recreate the Thematic Access with menu-primary and menu-secondary
  8. function childtheme_page_menu() { ?>
  9.  <div id=“access”>
  10.   <div class=“skip-link”><a href=“#content” title=“<?php _e(‘Skip navigation to the content’, ‘thematic’); ?>”><?php _e(‘Skip to content’, ‘thematic’); ?></a></div>        
  11.         <?php wp_page_menu(‘exclude=24,27,28&menu_class=menu menu-primary’); ?>
  12.         <div class=“menu menu-secondary”>
  13.             <ul>
  14.                 <?php wp_list_pages(‘title_li=&include=24,27,28′); ?>
  15.             </ul>
  16.         </div>
  17.     </div><!– #access –>    
  18. <?php }
  19. add_action(‘thematic_header’,‘childtheme_page_menu’,’9′);

Adding Sub-Titles To Menu Links

Sometimes you’re going to want to add descriptive text underneath your WordPress menu links like in the Grid Focus theme,

grid-focus

or like you’ve seen around the web on static, and non-WordPress sites.

creative-display

Usually this is done by hand editing the menu but it can be accomplished using WordPress custom fields. Simply add a custom field to the pages in question named “subtitle” with a value of “whatever you want your descriptive subtitle text to be”. Then make sure you have the following code snippet (adapted from the clearskys.net blog ) in the functions file of your WordPress Child Theme—as long as the parent theme is using wp_page_menu. If you’re simply editing a WordPress theme directly, cut the code from the childtheme_page_menu function and use it to replace your existing menu in header.php.

  1. // Adds descriptive text to link titles
  2. // With help from http://blog.clearskys.net/2008/12/17/how-to-adding-menu-sub-titles-to-a-theme/
  3. function sub_page_list() {
  4.  global $wpdb;
  5.  $sql = “SELECT p.ID, p.post_title, p.guid, pm.meta_value FROM “ . $wpdb->posts . ” AS p LEFT JOIN “;
  6.  $sql .= “(SELECT post_id, meta_value FROM “ . $wpdb->postmeta . ” AS ipm WHERE meta_key = ‘subtitle’) “;
  7.  $sql .= “AS pm ON p.ID = pm.post_id “;
  8.  $sql .= “WHERE p.post_type = ‘page’ AND p.post_parent = 0 AND p.post_status = ‘publish’ “;
  9.  $sql .= “ORDER BY p.menu_order ASC “;
  10.  $sql .= “LIMIT 0, 10″;
  11.  $rows = $wpdb->get_results($sql,OBJECT);
  12.  if($rows) {
  13.   foreach($rows as $row) {
  14.    echo “<li>”;
  15.    $link_url = get_permalink($row->ID);
  16.    echo “<a href=\”$link_url\”“ . “\”>$row->post_title</a>”;
  17.    echo “<span style=\”display:block;\”>$row->meta_value</span>”;
  18.    echo “</li>”;
  19.   }
  20.  }
  21. }
  22.  
  23. // Filter the menu to add the list
  24. function childtheme_page_menu() { ?>
  25.     <div class=“menu”>
  26.         <ul>
  27.             <?php if (is_front_page()) { ?>
  28.             <li><a href=“<?php bloginfo(‘home’) ?>/” title=“<?php echo wp_specialchars( get_bloginfo(‘name’), 1 ) ?>” rel=“home”>
  29.                 Home <span style=“display:block;”>This is the home page</span>
  30.             </a></li>                      
  31.             <?php } else { ?>
  32.             <li><a href=“<?php bloginfo(‘home’) ?>/” title=“<?php echo wp_specialchars( get_bloginfo(‘name’), 1 ) ?>” rel=“home”>
  33.                 Home <span style=“display:block;”>Return to the home page</span>
  34.             </a></li>                                
  35.             <?php } ?>
  36.            
  37.             <?php sub_page_list(); ?>
  38.                
  39.         </ul>
  40.     </div>    
  41. <?php }
  42. add_filter(‘wp_page_menu’,‘childtheme_page_menu’);

Adding Class To Your Menu List

One of the problems of using wp_page_menu is that the HTML is all wrapped in the function. You can’t get at it. Which is a pain if you want to use the function but also want to add special classes for implementing javascript drop-down menus or do some trickier CSS without giving yourself a headache. Luckily, you can filter it. Here’s how to filter wp_page_menu and add a unique class to the first instance of the ul tag, using PHP’s preg_replace to find the first ul tag and adding in id and class attributes.

  1. // Add ID and CLASS attributes to the first <ul> occurence in wp_page_menu
  2. function add_menuclass($ulclass) {
  3. return preg_replace(‘/<ul>/’, ‘<ul id=”nav” class=”something-classy”>’, $ulclass, 1);
  4. }
  5. add_filter(‘wp_page_menu’,‘add_menuclass’);

Basically, wp_page_menu can be filtered with any content (I often use “bacon” as test content—mmm, bacon) which is handy to know if you ever want to code your own custom menu.

Hand Coding a Dynamic WordPress Menu

And sometimes you are going to want to code your own menu. I’ve done it and I’ll probably do it again. You could just create a simple list of links but it’s better to create a dynamic list that checks to see if you’re currently on a particular page and adds a class of current_page_item to the list item if you are. This’ll let you create more usable menus with a little bit of CSS.

If you’re doing this in a Child Theme and the Parent Theme is using wp_page_menu this’ll be pretty straight forward, we’re just going to filter wp_page_menu. And if you’re editing your theme directly just grab the code out of the function in this snippet and plop it into the appropriate spot of your theme.

  1. function childtheme_menu() { ?>
  2. <div id=“menu”>
  3. <ul>
  4.  <li class=“<?php if ( is_page(‘about’) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a href=“<?php echo get_option(‘home’) ?>/about/” title=“About This Blog”>About</a></li>
  5.  <li class=“<?php if ( is_page(‘advertising’) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a href=“<?php echo get_option(‘home’) ?>/advertising/” title=“Advertise on My Blog”>Advertise</a></li>
  6.  <li class=“<?php if ( is_page(‘contact’) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a href=“<?php echo get_option(‘home’) ?>/contact/” title=“Contact Me”>Contact</a></li>
  7. </ul>
  8. </div>
  9.  
  10. <?php }
  11.  
  12. add_filter( ‘wp_page_menu’, ‘childtheme_menu’ );

The key in this example is what’s happening in the list items between the li tags. If you look at line 4 you’ll see we’re checking to see if we’re on the about page, and if we are we get a class of current_page_item, otherwise, page_item. Simple!

Categories: Blog
Tags: ,

IPad Ready for development

Posted by admin at 12:51 pm

Web developers behind the sites on Apple’s approved list of iPad-ready online destinations have confronted an issue that the device-maker is forcing to the fore: are official World Wide Web Consortium standard languages sufficient tools to deliver cutting edge functionality, or do plug-ins lead the way in design innovation?

Soon after Apple unveiled the iPad in January, one point quickly became clear for Web developers: Just as with the iPhone, the device would not support Adobe Flash, or any other Web plug-in.

Instead, if Web developers wanted all the dynamic content on their pages such as videos and animations to appear correctly on Apple’s new device, they had to create it using only the next generation markup language for the Web, HTML5, and related open standards.

At first glance, it appears like a logical move to stick with open standards, rather than technology largely controlled by a single company.

“A lot of the things that Flash has traditionally been used for, were Flash’s domain, because there weren’t any credible open standards available. Now there are,” said Bruce Lawson, a vocal HTML5 advocate who also works on the Opera Software as a developer relations (for this interview, he stressed that his opinions were his own, and not those of Opera).

But a casual search on Google reveals that there are at least 74 million web pages that use the Shockwave Flash (SWF) format. It is a tall order to ask all of them to change for a single company’s line of products, even if Apple sold more than 500,000 of these devices last weekend.

Observers also note that the developer tools for HTML5 aren’t as advanced as those for Flash, and the standard is not finished yet, which could lead to more work for developers down the road to readjust pages to meet the finalized standard.

And by eschewing the Web’s plug-in model, the iPad may potentially miss out on cutting edge features enjoyed elsewhere on the Web.

For photo-sharing site Flickr, the chief feature on the site that needed to be addressed was video, which the company has been gradually introducing into its service.

“It was not a huge effort,” said Flickr Project Manager Markus Spiering, though quickly adding the site’s developers were already familiar with the standards that Apple was requiring for the device.

“We were using Flash for our video content, but the iPad doesn’t support Flash,” Spiering said. “The iPad has a built-in HTML5 video player, which we could leverage.”

The Web development team were already testing HTML5, and had already borrowed some of the work it did for the Apple TV, which worked well in the iPad format.

“It was a couple of days of testing and then we enabled it,” Spiering said.

Now, when an iPad user visits the Flickr site, the site’s servers determine the visitor is using that device and switches from sending the video to a Flash player to sending it to Apple’s HTML5 video player.

Spiering said that to offer video for all Flickr visitors using HTML5 would be a larger challenge, because additional controls — such as full screen capability — would need to be added to bring the browsers up to feature parity with the iPad.

Apple itself has released guidelines on how to prepare Web pages for the iPad. In a nutshell: All the capabilities you seek can be found by using Javascript, Cascading Styles Sheets (CSS) and a set of still-evolving standards loosely associated with the World Wide Web Consortium’s HTML5. What could not be used are plug-ins of any sort, including Adobe Flash.

Adobe has been, understandably, defensive over Apple’s stance, and playing up Flash’s use on other portable devices, as a way to deflect attention away from Apple’s decision.

However, Dave McAllister, Director of Open Source and Standards (OSS) at Adobe Systems suggests that Apple itself may be putting the iPad at a disadvantage by not including plug-ins.

“From our viewpoint, it’s not just the lack of Flash, it’s the lack of being able to use plug-ins that are not owned, controlled and approved, that is an issue,” McAllister said.

McAllister noted that innovation with the Web format has historically taken place not with the standards themselves, but rather plug-ins. Standards take years to ratify and tend to center around technology that has been so widely replicated, it has in effect been commoditized.

“Standards don’t lead innovation. To innovate means to build on or out from the existing platform,” McAllister said. “You don’t want to have to wait for the consistent commodity approach to catch back up to the innovation. You want innovation to happen, and [standardize] the best from it.”

It’s been the plug-in model that introduces new functionality to the Web, he argued. Think of Sun Microsystems’ Java plug-in, for instance, which introduced rich graphical functionality for the Web in the mid-1990s. By eschewing plug-ins, the iPad could potentially lose out on some of the cutting edge features enjoyed on other Web browsers.

Another issue that McAllister notes is that Web development shops will have to come up with two versions of their sites, ones that run Flash and ones that don’t. “Most of these [shops] already have Flash as part of their workflow, so now they are adding a second part of the workflow,” McAllister said.

For its part, HTML5 is starting to prove itself to be a very capable markup language, able, in theory, to replicate much if not all that Flash could offer. HTML5 and associated standards such as CSS and Scalable Vector Graphics (SVG), will be an “open platform for rich Web applications,” said Philippe Le Hégaret, who is the W3C’s interaction domain leader overseeing graphics, HTML, and video, in an e-mail.

Last week, Google engineers posted a version of Quake II that they ported to HTML5, using Javascript. Elsewhere in Google, a beta version of YouTube has been created that uses HTML5.

HTML5 and its related standards can cover a lot of Flash functionality, Lawson said. Simple animations can be recreated in CSS. More complex animations can be done with the HTML5 canvas tag in conjunction with Javascript.

But unlike Flash, HTML5 doesn’t yet have a lot of production-ready integrated developer environments. “Flash has very good authoring tools,” Lawson said. As McAllister noted, Dreamweaver and FlashBuilder are already incorporated into the day-to-day operations of many Web development shops.

In contrast, the tools for HTML5 and related technologies are still being developed. Worse yet, many are aimed more at the programmer than the run-of-the-mill Web designer. As one media company told the Valleywag industry gossip site, “Guess what, we don’t have a bunch of code junkies in our newsroom.” (Though Adobe itself seems to be in the early stages of incorporating the HTML5 standards into its own production tools, if this prototype of Dreamweaver that converts artwork into HTML5′s Canvas tag is any indication).

Another potential problem: The HTML5 standard has not actually been finalized yet.

“The HTML5 standard is still a work in progress,” Le Hégaret admitted. The problem is that until it is finalized, HTML5 may change. And if it does, all the pages affected by the changes will have to be revamped.

One bit of unfinished business is the HTML5 video tag. HTML5 allows pages to run video directly within the browser window, without a plug-in. The problem is, the browser makers are split over which video codec to use.

Google Chrome and Apple Safari natively support the high-definition H.264 MP4 format for this task. Neither Opera nor Firefox support this codec, due to concerns over licensing fees. Opera and Firefox, on the other hand, use open-source codec Ogg Theora, which Apple and Google have been reluctant to support, citing performance concerns. Microsoft hasn’t committed to either.

Overall, however, HTML5 may be closer to the finish line than its critics suggest. Lawson does not think that the W3C will make dramatic changes to the HTML5. “It seems to me that the main work on inventing new features is pretty much over,” he said. “It is possible that one or two features might get dropped because they are not being supported by any browsers, but the features that will be dropped are by definition ones not being widely used.”

For the foreseeable future, anyway, Web developers interested in tweaking their sites for the iPad, but also using continuing to use Flash, may have no choice but to build, as Flickr did, hooks specific for the iPad. And Flash itself, despite Steve Jobs’ wishes, is not going anywhere soon.

“I don’t think HTML5 will kill Flash in anything but the very long term. There is so much Flash content out there that will need to be supported,” Lawson said.

Categories: Blog
Tags:

Android Triples US Market

Posted by admin at 12:51 pm

Android has almost tripled its share of the smartphone market in the US in just three months, comScore found today. Its share of the market jumped from 3.8 percent in November to 9 percent in February. The move likely helped keep Apple’s iPhone in check as it stayed nearly flat at 25.4 percent.

RIM’s 10.5 million BlackBerries shipped also helped it consolidate its lead with a slight climb to 42.1 percent. Windows Mobile continued a downward slide with a 4-point drop to 15.1 percent, and Palm declined as well with a 1.8 percent drop.

Among individual hardware makers, Motorola still holds the lead but saw its gap narrow to less than one point: it slipped to 22.3 percent while LG stayed flat at 21.7 percent. Samsung moved slightly to 21.4 percent, and Nokia’s share shrunk further, down to 8.7 percent. Despite RIM leading in smartphones, its actual share of the US accounted for 8.2 percent even after posting the only significant gain.

Most of the rapid rise of Android can be attributed to Verizon, where the Motorola Droid and HTC Droid Eris have become rare blockbusters for the normally conservative carrier. T-Mobile’s addition of the Behold II and Cliq also helped, as did the Hero at Sprint.

Categories: Blog
Tags:

Android Domination Continues

Posted by admin at 12:50 pm

comScore has just released its latest report on smartphone marketshare, and the trend we saw last month has continued: Google’s Android is gaining quickly on the iPhone, as Palm and Microsoft’s shares continue to dip. The report compares smartphone market share averaged over the three-month period ending November 2009 against the three months ending February 2010.

The report concluded that 45.4 million people in the United States were using smartphones in the period ending in Feb. 2010, which is a 21% increase over period ending last November. RIM still has a strong lead over the field, with 42.1% of the smartphone market share, and it rose by 1.3% over this period. But the most interesting story is the rapid rise of Android, whose share grew 5.2%. Apple’s share has remained stable, with a .1% drop.

It’s important to note that while Android is clearly growing quickly, it still has a long ways to go to match Apple’s mobile user base.  Apple’s iPhone OS is also used by the iPod Touch (and now, the iPad); Android still hasn’t been deployed on any popular devices that aren’t phones.

Categories: Blog
Tags:

Navigation

Latest News

Archives

Tags

+ Top

Latest From Blog

Services

Archives

Miscellaneous

Contact Us

[contact-form 1 "Quick Contact"]

© Copyright 2009-2010 Web Design Company - dmarkWeb.
All Rights Reserved by dmarkWeb.
Stay up to date with the latest Web Design News.
Follow me on social networks