Posts Tagged HTML5

Hear Web part 1 (intro)


هل يمكننا تصفح مواقع من خلال جهاز الراديو مثلا؟؟
ان كانت الاجابة لا ستكون مقنعة جدا اما لو كانت نعم فكيف سنرى الكلام والصور والالوان واللنكات مثلا؟؟
السؤال الاصعب هو ماذا على المصمم ان يفعل ليجعلك تتصفح موقع بدون شاشة؟؟

sound


الحقيقة ان الاجهزة الصوتية تستطيع تصفح المواقع اذا توافر بها اتصال بالانترنت ومتصفح يناسب الجهاز مثل الاجهزة التى يستخدمها المحرومون من البصر ولكن هل سيستخدم المصمم ادوات اخرى لتصميم المواقع الصوتية؟؟ الاجابة لا نفس ادوات التصميم تستخدم
HTML , CSS , javascript
المتصفحات تقوم بتحميل الاتش تى ام ال ثم قراءته للمستخدم والمتصفحات الرائدة فى هذا المجال هما
Opera 9 , firevox not firefox


دا لنك احصائيات عن البراوزرات على نظم التشغيل المختلفة التى بتدعم المواقع الصوتية
http://www.codestyle.org/css/media/aural-BrowserSummary.shtml


والمتحكمة فى التصميم الصوتى هى السى اس اس .. شىء اخر قبل البداية ان كان الموقع مثلا عن التاريخ قد يقوم المصمم بوضع ورق بردى وسيوف قديمة فى الخلفية لاعطاء جو التاريخ و ان كان الموقع يتكلم عن الموسيقى يستطيع المصمم وضع الحان موسيقية و صور جيتار مثلا مع الوان فاتحة لادخال المشاهد فى جو الموسيقى وهذا ايضا مطلوب من المصمم فى تصميم الموقع الصوتى ان يدخل المستمع قى جو الموضوع


عليك كتابة ملف سى اس اس واحد لاعطاء تنسيقات لكل الاجهزة

@media


تقوم هذه الخاصية باعطاء التنسيق المناسب حسب نوع الجهاز المتصفح وتأخذ القيم
aural , braille , embossed , handheld , print , projection , screen , tty , tv


@media screen{
/*هنا توضع التنسيقات الخاصة باجهزة الكمبيوتر العادية*/
}
@media handled{
/*هنا توضع التنسيقات الخاصة بالاجهزة المحمولة*/
}
@media aural{
/*هنا توضع التنسيقات الخاصة بالاجهزة الصوتية التى نتحدث عنها*/
}


تستطيع من خلال كتابة تنسيقات داخل
aural
ان تتحكم فى طريقة قراءة الصوت للمستخدم واعدادتها

1- 3D sound Effects


تستطيع عمل مؤثرات صوتية ثلاثية الابعاد على البرنامج

3D Sound Effects

3- User Interaction


تستطيع التحكم فى طريقة التفاعل الصوتى بين الانسان والبرنامج مثل التفاعل الموجود فى الايفون

interaction

3- Speak Controlling


تستطيع التحكم فى نبرة و جودة الصوت والاعدادات الصوتية

Sound control

..التفاصيل فى الجزء القادم


ماكان فيه خطأ فمنى ومن الشيطان وماكان فيه توفيق فمن عند الله

aHmEd DaIf

, , , , , , , , , , , , , , , , , , , , , , ,

4 Comments

Become HTML5 developer ,right now

Hello every body,

first I am HTML5 geek so i will take about it in some articles,
but in first article I want to tell you why i love HTMl5 in 10 reasons

1 – Accessibility:

HTML5 makes creating accessible sites easier for two main reasons:
semantics: The new (some currently available) HTML headings like: <header> , <footer> , <nav> , <section> , <aside> , etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class.

ARIA : ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes.For a more in depth discussion on HTML5 and ARIA please visit the WAI.

2 – Video and Audio Support:

Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags,It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly(will eplain later in upcoming articles),

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
</video>

3 – Doctype

<!DOCTYPE html>

Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting andpasting some long unreadable line of code and no more dirty head tags filled with doctype attributes.

4 – Cleaner Code

If you are passionate about simple,HTML5 is the beast.
Consider this typical and simple header code with navigation:

<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
<h1><code>Header Text</code></h1>
<ul>
	<li><code><a href="#">Link</a></code></li>
	<li><code><a href="#">Link</a></code></li>
	<li><code><a href="#">Link</a></code></li>
</ul>
</header>

5 – Smarter Storage

One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database.
Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins.
for more info.

6 – Better Interactions

we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas> ,
Beyond <canvas> , HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:
1) Drag and Drop (DnD)
2) Offline storage database
3) Browser history management
4) document editing
5) Timed media playback

7 – Game Development

Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.
for more Info. wait our upcoming articles.

8 – Cross Browser Support

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers.
HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

9 – Mobile, Mobile, Mobile!!!

mobile technology is becoming more popular these days.The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays.
you can also make mobile apps with HTML5!!!(wait upcoming articles).
For more info on how to mobilize your site via HTML5, check out “Mobifying” Your HTML5 Site.

10 – It’s the Future, Get With It!!!!

it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary,
You really don’t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too.

finally

I hope you start to use HTML5,
Happy new year 🙂

AhmedYousef

, , , ,

7 Comments

مسابقة إبداع لتصميم صفحات الويب

بسم الله الرحمن الرحيم

متابعى فريق ديف ميكس وأنشطته الاعزاء .. نقدم لكم نشاط جديد وهذه المرة بمشاركتكم انتم وهى مسابقة إبداع فى تصميم صفحات الويب باستخدام XHTML+HTML5+CSS+CSS3 مع مراعاة عدم استخدام أدوات أخرى مثل ال JavaScript ويكمن ابداعكم فى هذه المسابقة فى اختياركم للافكار المعبرة عن التصميم وسوف يتم التقييم على الافكار قبل الادوات من قبل مصممين ذات كفاءة عالية سوف يعلن عنهم لاحقا لذا ارجو التركيز فى هذه الاعمال التى سوف تقدم.

مسابقة إبداع

قواعد المسابقة:

للمسابقة قواعد بسيطة لو تم الالتزام بها سوف تعم الفائدة على الجميع باذن الله، وهى كالتالى:

1 – اهمها الالتزام بمواعيد تسليم التصميمات التى سوف ينوه عنها واى تأخير لن يتم قبول هذه التصميمات للاسف فهناك died-line للمسابقة لا يمكن تعديه.

2 – كان هناك قاعدة بالزام العمل فى فريق ولكن .. طلب الكثير بعدم التحتم عليها حيث ان هناك الكثير بمفردهم .. لذا فمن الممكن ان تشترك منفردا ولكن من حقك تكوين فريق لا يتعدى ال 4 افراد.

3 – ارسال الاعمال فور الانتهاء منها فى سرية تامة الى devmix2011@gmail.comحتى يتم عرضها على لجنة التحكيم دون عرضها على العامة لتقيمها قبل انتهاء ميعاد المسابقة الاصلي.. وعند الانتهاء سوف يتم عرضها مفتوحة المصدر كما فى المثال التالى:

fci_design1

Download Design

Designed By:

  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII
  • IIIIIIIIIIIIIIIIIIIII

Evaluation From Here

يستطيع الجميع انزال التصميم بملفاته من Download Design ويقوم بعدها بوصضه التقييم فى مكان التقييم المبين فى لينك Evaluation واتنى يكون التقييم فعلا على الاعمال بعيدا عن المجاملات والصداقات وسوف تعرض كل الاعمال فى موضوع واحد ان شاء الله مفتوحة المصدر.. اما عن اعلان الفائز فسوف يكون بعد يوم من التقييمات واهداء الجوائز فى أول ايفينت للفريق ان شاء الله فى القريب العاجل ليكون تكريم امام الجميع.


لجنة التحكيم:

عندما فكرت فى عمل لجنة لتحكيم الاعمال المقدمة وتقييمها .. قررت اختيار احسن المصممين على الاطلاق المعروفين لدى الكثير منكم فلجنة التحكيم تتكون من 3 افراد هم:

مهندس محمود متولى – مهندس UI/UX فى شركة كلود نينرز.

مهندس تميم ابراهيم – مهندس تصميم صفحات ويب ومدير شركة TameemGroup .

مهندس مدحت داود – مطور صفحات ويب ومنظم المسابقة.

تم الاتفاق على ان التقييم لن يكون فقط على جمال التصميم او كفاءة التول بل سيتوسع التقييم الى الفكرة الابداعية التى وراء التصميم .. فكن مبدعا 🙂


نظام المسابقة: {المطلوب فى المسابقة}

المطلوب الاول: مطلوب عمل تصميم فى احد المواضيع التالية:

-تصميم موقع لمدينة علمية

-تصميم موقع لمكتبة

-تصميم موقع لصفحة شخصية لاي من الشخصيات (مهندس -دكتور – مدرس – بياع سندوتشات :))

المطلوب الثانى: مطلوب عمل تصميم من ابداعك .. فكرة ابداعية من خيالكم تنفذ بشكل يجعلنا عندما ننظر اليها نستطيع ان نستشف الفكرة من التميم ولاى غرض تم.


طريقة تسليم الأعمال:

كما نوهت من قبل سيتم ارسالها على devmix2011@gmail.com ولكن الان انوه عن ما سيتم ارساله ، مطلوب وضع كل الملفات فى ملف واحد مضغوط zip/rar وارساله وتسميته باسم المجموعة المقدمة واذا كان التصميم الاول واسم المجموعة مثلا FCI سيتم تسمية الملف fci_design1.zip وارساله على الفور وبالطبع لو كان الديزاين الثاني سيكون fci_design2.zip بهذه الطريقة يكون الموضوع اكثر تنظيما، وسوف يتم ارسال الاعمال من المتحدث باسم الفريق الذي سيسجل فريقه فقط وليس مطلوب ان كل فرد فى الفريق ان يسجل.


طريقة التسجيل:

تم عمل فورمة تسجيل خاصة بالمسابقة يسجل فيها شخص واحد من لفريق ويكتب باقى اسماء الفريق بنفسه واذا كان منفردا فيكتب نفسه فقط.

التسجيل مفتوح من الان وحتى غدا 2 سبتمبر 2011 الساعة 12 منتصف الليل وبعدها يتم اغلاق التسجيل وتبدأ المسابقة ولمدة 4 ايام باذن الله.

نتمنى من الله ان يجعلنا سبب فى ان نساعد الناس فى العلم والتعلم .. بالتوفيق 🙂

, , , , , , ,

5 Comments

CSS3-Background

السلام عليكم ورحمة الله وبركاته ..

فى المقالة دى إن شاء الله هنتكلم عن موضوع مهم جدا ,
وفى نظرى من ضمن الأضافات الأكثر تأثيرا وظهورا فى السى اس اس 3 .
قبل البدء فى الشرح أود أن أطرح بعض الأسئله والتى سوف نجيب عليها فى أثناء المقاله :-
أولا:-ماهو الجديد فى الخلفيات فى السى اس اس 3 ؟
ثانيا:-هل يمكن إضافة أكتر من صورة كخلفية لصفحة الأتش تى إم إل؟؟!!
ثالثا:-هل يمكن تغيير حجم الخلفية لصفحة الأتش تى إم إل؟؟!!
رابعا:-هل يمكن تغيير درجة لون الخلفيه ؟؟!!

دعونا نبدأ فى البدايه مع السؤال الأول .ماهو الجديد فى الخلفيات كخصائص موجودة مسبقا فى السى اس اس2 ؟؟؟
أو ماهى الأضافات فى خاصية الخلفيات فى السى اس اس 3 ؟؟
فى البددايه كيف نكتب خاصية الخلفيه فى السى اس اس عامة

Body{
background:url(imagename.jpg)   left   bottom  no-repeat
}

, فإنه توجد العديد والعديد من الخصائص الجديدة فى السى اس اس 3
-:ولكن من أفضل الخصائص الموجودة فى السى اس اس 3 هى الخلفيه ففى هذة النسخه يمكنك
(1        إضافة أكتر من صورة فى الخلفيه
(2         التحكم فى حجم الخلفيه
(3         التحكم فى درجة اللون
وهذة الخصائص الجديدة تقودنا إلى السؤال الثانى وهو ,هل يمكن إضافة أكتر من صورة للخلفيه ؟؟!!
لو سألتنى مثلا منذ عدة سنوات هذ السؤال لقلت إن ذلك مستحيلا ولكن مع السى اس 3 لايوجد مستحيل
(مع ديف ميكس مفيش مستحيل )تستطيع عمل ذلك من خلال هذا الكود البسيط

Body{
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
background:url(imagename.jpg)   left   bottom  no-repeat;
}

نوصل لنقطه مهمه وبتضايق ناس كتير من السى اس اس 3 ألا وهى دعم المتصفحات لهذة الخاصيه :-
Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) andInternet Explorer (9.0+) 😀

وبكدا نكون وصلنا للسؤال الثانى ألا وهو هل يمكن التحكم فى حجم خلفية الصورة ؟؟!
بدون إطاله فى الكلام يمكن هذا وبكل سهوله عن طريق هذا الكود الصغير والمميز من السى اس اس 3

div {
background-image: url(imagename.png);
background-repeat: no-repeat;
background-size: 100% 100%
}

وكالعاده فى كل الخصائص هنشوف دعم المتصفحات وهيكون كالتالى
Opera 9.5, Safari 3

بعد كدا إن شاء الله نوصل للنقطه المهمه وهى إزاى أعمل صفحه مدرجه أو جزء مدرج فى الصفحه زى الشكل دا

الكود واضح مع تغير لون الصورة

, , , , , ,

1 Comment

CSS–Advanced Topics

Alsalamo alekom .. we will continue what we started which is css reviews … so u have to check this links befour we start CSS Basics || and CSS Basics | Now we will talk about something advanced about CSS .. our topics will be

  • CSS – Cursor

  • CSS – Position

  • CSS – Layer

  • CSS – Display

CSS – Cursor

we will change cursor icon when we do action like “we are over text” we have many cursors like :

  • default – Display the normal mouse cursor

  • iconwait – The mouse icon to represent the computer “thinking”

  • crosshair – A cross hair reticletext – An “I” shaped icon that is displayed when selecting textpointer

  • A hand icon that you see when you hover over an
    HTML link-help

  • A question mark (usually)

Lets Try it now .. Just make Style tag and copy this :

 p { cursor: wait }
 h4 { cursor: help }
 h5 { cursor: crosshair }

and make your mouse over each one and see what happended 🙂 … and tell me

CSS Position

You will be able to manipulate the exact position of your HTML elements

Position Relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we can make it abit to right or to left , up , down or mix of them … i like “mix” remeber me “DevMix” 🙂 so the css code will be :

 

 h3 { 
 position: relative; 
 top: 15px;
 left: 150px;
 }
 p { 
 position: relative; 
 left: -10px;
 }

See this to understand more :

BeforeCSS    After Positioning

Position Absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the browser’s viewable area, so be sure you are measuring from that point.

CSS Code :

 h3 { 
 position: absolute; 
 top: 50px;
 left: 45px;
 }
 p{ 
 position: absolute; 
 top: 75px;
 left: 75px;
 }

CSS –  Layers

In CSS, each element is given a priority. HTML elements that appear later in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other. To manually define a priority, set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:

 h4{ 
 position: relative; 
 top: 30px;
 left: 50px;
 z-index: 2;
 background-color: #336699;
 }

 p { 
 position: relative; 
 z-index: 1; 
 background-color: #FFCCCC;
 }

CSS – Display

Display Block and Inline

are you bored from using <br/> tag ?? yes me too .. what will we so if we have ablock of links … wil we using <br/> tag alot and alot ?? no css will make it easy for you let’s have an example :

CSS Code:

 a { display: block; }
 p { display: inline; }

Display:

Developers Mix
Developers Mix

Developers Mix

Developers Mix

Developers Mix

    These Links     belong   to     DevMix blog

 

Display None (Hidden)

At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of JavaScript, you can create collapseable menus.This is a simple example of how to hide an element.

CSS Code:

p.show { display: block }
p.hide { display: none; }

HTML Code:

<p class="show">This paragraph is displayed correctly because 
it has a display value of "block".</p>

<p class="hide">This paragraph is hidden because 
it has a display value of "none". Why am I even
writing anything in here?</p>

Display:

This paragraph is displayed correctly because it has a
display value of “block”.

Finally

I hope add something new to ur knowleadge ,,, thanks for reading …
we wait your feedback ….. ohhh Dont Forget we will make articles
about CSS3 … Don’t Miss it 😀

By : Mohammed Gabrail

, , , , , ,

6 Comments

10 Articles Introduction to HTML5 is Done !

Hey all, devmix promise with a few articles of HTML5 in 3 days .. and it’s done 🙂
we promise also with other articles in HTML5 in the other sides of this language, wait us very soon isA .. we only need one thing from you .. Your feed Back

The 10 articles are as follow:

HTML5 — How came to be ? By Mohamed Gebril
Detecting HTML5 Features By Mohamed Ibrahim
HTML5 getStarted(); By Mohamed Ashraf
HTML5 – Canvas element By Mai Mohamed
HTML5 – Video element By Medhat Dawoud
HTML5 – Geolocation By Eman Elma3sarawi
HTML5 – Local Storage By Maha Elbasuony
HTML5 – Let’s Take This Offline By Amar Ashor
HTML5 – What Is MiCroData? By Dina Wasef
HTML5 – Fantastic Form By Medhat Dawoud

We hope that these articles were useful for you, wait us soon for more articles and keep contacting us:

DevMix Official Page on facebook
DevMix Page on GooglePlus
DevMix Team group on facebook
DevMix2011@gmail.com
http://twitter.com/DevMixTeam

🙂 Good Luck For All 🙂

, , , , ,

3 Comments

HTML5 – Fantastic Form

————————————————————————————————————————————

1- Web Forms before HTML5

Everybody knows about web forms, right? Make a <form>, add a few <input type=”text” /> elements and maybe an <input type=”password” />, finish it off with an <input type=”submit” /> button, and you’re done.

try it now:

  <form>
	username: <input type="text" name="username"/>
	password: <input type="password" name="pass"/>
	<input type="submit" name="submit" value="submit"/>
  </form>

With these few types of elements in the above code, you can make a login form like this :

it’s so classic .., the following table collect the input types in HTML4 :

ok , let’s make more sense with HTML5 🙂

————————————————————————————————————————————

2- Dive into HTML5 Form of Madness

Yes, it’s a form of madness when you make some thing which was taking hours of your time only in a moment with one line or with adding one attribute.. no more words to say, only look at the following examples of forms wrtten in HTML5 and then let’s learn each new feature

example1

example2

example3 – this example uses also CSS3 🙂

ok let’s explore the features 😀

————————————————————————————————————————————

3- PlaceHolder Text

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.

Create a new HTML form and add a form element inside the body element as follow :

<html>
	<head>
		<title>DevMix Web Series</title>
	</head>
	<body>
		<form>

		</form>
	</body>
</html>

then, start with the first new feature today write this inside the form element

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

then the result simply will be as follow:

it’s done now 😀

————————————————————————————————————————————

4- Autofocus Fields

Google is the most famous search engine all over the world .. because they care of the HCI that make the visitor come again, and from these aspects of HCI when you login to Google.com the design is very simple and the search box is autofocused, google used to use javascript for that till HTML5 come to life .. which make this in a very simple way.

ok, add more than element in a form like this:

<form>
	<input type="text" />
	<input type="text" />
	<input type="text" />
</form>

and the result will be as follow (no text is focused when running the page) :

and to add the autofocus feature you will make the following change:

<form>
	<input type="text" />
	<input type="text" autofocus/>
	<input type="text" />
</form>

try it your self and you will get the centered text focused .. as you see the autofocus attribute is a naked attribute that take no value

very simple 🙂

————————————————————————————————————————————

5- E-mail Addresses

HTML5 looks for the most important types that we were using javascript for and it might be quit complicated and make it easy for us, one of them is the Email address type, all browsers support that type.

using the Email type like the following:

<form>
   <input type="email">
   <input type="submit" value="Go">
</form>

then try to write any thing without the structure of the email addresses and press the Go button and the result will be as follow:

it makes a validation for the entered text .. automatically 🙂

Make sense, doesn’t it ?

————————————————————————————————————————————

6- Web Addresses

the same as the Email addresses making a validation .. try it your self

<form>
	<input type="url">
	<input type="submit" value="Go">
</form>

and if you enter a not valid URL this message will appear

————————————————————————————————————————————

7- Numbers As Spinboxes

My point is, you don’t often ask for “just a number” It’s more likely that you’ll ask for a number in a particular range, and you may only want certain kinds of numbers within that range—maybe whole numbers but not fractions or decimals, or something more esoteric like numbers divisible by 10. HTML5 has you covered. Let’s look at an example:

<form
      <input type="number"
       min="0"
       max="10"
       step="2"
       value="6">
</form>

this shot from Opera browser

it represents the numbers good ..

————————————————————————————————————————————

8- Numbers As Sliders

The same as the number as spinbox but with another GUI (a slider), the example will clear it.

try it your self:

<form>
    <input type="range"
       min="0"
       max="10"
       step="2"
       value="6">
</form>

and the result will be:

i think it makes the whole difference.. 🙂

————————————————————————————————————————————

9- Data Pickers

HTML5 finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six: date, month, week, time, date + time, and date + time – timezone.

supporting the data picker in browsers

Opera give the support for the datapicker in all flavors..  you will find one of them if you try this code out:

<form>
	<input type="datetime"/>
</form>

this will give the following result only on Opera:

there are a lot of the Data Pickers .. explore them your self 😉

————————————————————————————————————————————

10- Search Boxes

Try this out:

<form>
  <input name="q" type="search">
  <input type="submit" value="Find">
</form>

this make some special features to this text box, like a small x in the end of the text box when clicking on it, it clears the box, this appear in the Safari and the chrome browsers.

the result will be as follow:

using the CSS you can change the shape of the textbox as you like..

————————————————————————————————————————————

11- Find more..

this article is a push for you to explore the fantastic forms in HTML5 not collecting all features .. you can get the others and read more from these links .. thanks

i’m waiting for your feeds 🙂

, ,

3 Comments