Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Jun 1, 2014

jQuery - Syntax, Method, Event and Animation Effects

Many tools are useful for Fast Prototyping to develop Mobile Web Apps, jQuery and jQuery Mobile are one of the most popular solution. Before you start studying jQuery, you should know how to write simple HTML, CSS and JavaScript programs.

May 19, 2014

PhoneGap - Introduction to Mobile Web Apps

Cross-platform mobile applications are hard to develop due to different OS platforms with diverse programming languages on various IDE (Integrated Development Environment), such as Android / Java / Eclipse, iOS / Objective-C / Xcode, Windows Phone / C# / VS.NET. It is a hard technical challenge to launching mobile applications on major mobile platforms, developers must be familiar with these programming languages and IDEs to develop mobile Apps for Android, iOS and Windows.
From: http://www.slideshare.net/Martin82/introduction-to-phonegap-and-phonegap-build

Mar 2, 2013

Chrome "Super Sync Sports": HTML5 game makes kids happy


Chrome Super Sync Sports: Sync your mobile to your computer to Run! Cycle! Swim! Choose from 50 athletes and get racing! Play solo or challenge friends.

Based on technology integration on HTML5, CSS3, WebSockets, and Google App Engine, this game should be the best demo for recent Mobile Web applications.
  • All client/server services are WebKit compatible, so that you just connect the URL and play the game.
  • In a game pool, at most four players (client-sides) just user their smartphones or tablets to connect the URL (http://http://chrome.com/supersyncsports/#/en-US/) and input the code for the selected game. Chrome, Safari, or other WebKit-based browser (maybe) are workable to play the game.
  • The Mobile Web tech also supports good experiences on gestures defined in three sports.
  • Although the user interaction is not as good as native apps or online games (install modules on client desktops), it proves Mobile Web is approaching to the UX (User eXperience) of native apps.
  • The most successful part is the "clipart & visual art" jobs, 50 avatars with animations on loss or win are very cute and really attract kids to enjoy and to be exciting.
It's a little pity that the services is not stable on connections. Sometimes, one or two players may disconnect, and the game may be disconnected so that all players must reload and reconnect.

When I watched the demo video, I totally guess right technologies applied in the games and mobile devices. The only one miss is "why not use QR codes?" Input 5-char code is easy. However, if one creates the game, the page can present "4 QR codes" so that each player takes a photo on one QR code to get one of four players. In this way, it will be more interesting.

Dec 21, 2012

HTML5 - New Semantic/Structural Elements






HTML5 <article>

Published: 
The article tag is used to layout an independent content, such as forum, blog, news or comment posts (articles). <header>, <time>, <section>, <cite>, <aside>, <blockquote>, <div>, <>, <>, and <footer> tags are widely writen in <article> to compose the complete article elements.


HTML5 Tags: <article> | <footer> | <time> | <section> | <cite> | <aside> | <blockquote> | <div> | <details> |
NOTE: Use Visual Studio as the HTML editor so that you can copy the "clickable tag" and use "Paste Alternate" to paste the anchor with HTML source directly!


<time>

For the following example on the LHS (source code included)", specifying datetime attribute in <time> to denote the date of symbole text (e.g. Valentines day). Thus, JS codes can access the time attribute "datetime". The onetime attribute pubdate is an optional boolean attribute for denoting the publish date of the article. Note that pubdate applies only to the parent <article> element, or to the whole HTML document.

ValueDescription
YYYY-MM-DDThh:mm:ssTZDThe date or time being specified. Explanation of components:
  • YYYY - year (e.g. 2011)
  • MM - month (e.g. 01 for January)
  • DD - day of the month (e.g. 08)
  • T - a required separator if time is also specified
  • hh - hour (e.g. 22 for 10.00pm)
  • mm - minutes (e.g. 55)
  • ss - seconds (e.g. 03)
  • TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
"We open at every morning. I have a date on . "



<section>

Articles should contain sections (chapters), in which contents within a <section> may consist of <h1-h6>, <footer>, <p>, etc. "article" denotes an independent content (such as a news article) with more specific semantics than "section" that may specify only a block of related content like abstraction and introduction.



1.1 HTML5 section

Section content here .... The second paragraph ...
* footer note ...



<cite>

In HTML5, the <cite> tag defines the title of a work. For example, the following references are useful to realize the different between article, section, and div.
HTML5 articles and sections: what’s the difference?
The article element has the following suggestions:
  • Would the content would make sense on its own in a feed reader? If so use <article>
  • Is the content related? If so use <section>
  • Finally if there’s no semantic relationship use <div>



  • <aside>

    The aside element is a block level element and can be used with block level elements, such as headings (h1 - h6) and inline elements (emphasize, black, font. etc.). <aside> block should be put before the surrounding content block. Try to used <aside>, <div>, and <blockquote> to observe differences among them. The effect of <aside> and <div> on the page layout are almost the same. But if you want to remove some content block without harming the complete of article content, using <aside> is a right solution due to the HTML parser can easily remove the <aside> DOM-node. On the other hand, the parser can not get a favor from <div>. The usage of <blockquote> is only appropriate for denoting the "quote" of a section of paragraph. For example, the following senctence should be "quoted".
    The Semantic Web is a new form of Web content that is meaningful to computers will unleash a revolution of new possibilities.
    By Tim Berners-Lee, James Hendler and Ora Lassila.



    <details>

    The details tag specifies additional details that the user can view or hide on demand. Without specifying "open" attribute in <details>, the detain content, except for texts within <summary> tag, will be hidden until the user click the link denoted by <summary>. That is, by specifying "open" attribute in <details>, all the content will initially become visible. The tag is useful to hide large pictures and make the page layout clear!
    Click here to open hidden texts! (Currently supported by Chrome)
    All Rights Reserved by iLearnBlogger.
    HTML5 logo
    Creative Commons Attribution-ShareAlike License

    Dec 18, 2012

    寫部落格學HTML5



    HTML5 tags used in this article: <video> | <textarea> | <div> | <style> | <span> |
    HTML5最吸引人的的是整合Video的播放,並可偵測瀏覽器對於影像格時的支援,自動選取適合的codec。影片播放器控制項 (controls)、影片preload、poster圖片、和影片來源<source src="...">等,都可以簡單的tag attributes來表示。以下簡單HTML5 <video>寫法就可以製作影片播放器於網頁中。



    順便談談HTML5 <textarea>的新功能,在此範例用於顯示HTML5 codes,避免瀏覽次再次解讀<textarea>內的<video>內容。設定rows和cols屬性,如同程式碼的行列數,按照指定行列數大小顯示文字內容。使用style float=left主要是為了讓兩區塊可以浮動,若寬度夠,會顯示在同一列,如同兩欄顯示。

    要排版整齊,就要善用<div> tag,以定義文件的區塊概念,讓版面整整齊齊。但這些工作要做好,就必須先瞭解CSS,也就是HTML5 <style>的運用。在此範例中,設計4個styles: content, explain, exp-left, exp-right,分別用於顯示部落格文字、解釋HTML碼和對應的效果區塊,所以exp-left,right分別用於設定左右區塊的大小位置。以現今設計HTML文件的趨勢和習慣,盡量用<div>而少用<table>,以免DOM結構過於複雜。過去習慣以<table>建立網頁區塊概念,在各區塊再獨立設計內容呈現,因此很容易照成<table>內的<td>再度使用<table>,DOM tree的巢狀深度過深,也就是DOM結構太複雜,造成DOM parser效能差。

    但是自訂CSS styles和部落格網站內定版面styles可能衝突,導致網頁呈現變得很奇怪,又找不出錯誤在哪?因此,最好命名要特殊,在此都以 "il-" 為開頭,例如:"il-content" 可避免和常用的 "content" style衝突。

    結論:以部落格撰寫HTML5測試功能可以,但是使用到複雜的CSS使用方式,建議還是自己開新檔案測試,畢竟網站設計的版面CSS實在太雜亂了,導致偵錯困難!