Archive for category Books
CSS3 – Introduction
Posted by Medhat Dawoud in Books, StudyGroups, web on August 25, 2011
متابعى مدونة فريق ديف ميكس الأعزاء .. بعد التحية .. نقدم لكم مجموعة من المقالات فى السي اس اس 3 متابعة لسلسلة الويب والتى تم الاعلان عنها منذ فترة وقررنا الكتابة فى هذا الجزء باللغة العربية تقديرا لرغبة القراء واثراءا لمحتوى اللغة العربية على الانترنت ونتمنى ان تنال اعجابكم
فى هذا المقال تقرأون
مقدمة
بعض الاحصائيات عن دعم المتصفحات للسي اس اس 3
ما الجديد فى السي اس اس 3 ؟
ملاحظات لابد ان تأخد فى الاعتبار
مقدمة
الى الجحيم بهذه المتصفحات .. كلمة قالها جيفيري زيلدمان سنة 2001 ومن بعدها بدأت ثورة التطوير الحقيقي لمتصفحات الويب والسبب فى ذلك هو تحول مصممي صفحات الويب لاستخدام السي اس اس 1 فى اشياء اكثر من الالوان والخطوط واصبحت المتصفحات فقيرة لدعم الخصائص التى يرديها المصممون.
فى 2006 بدأ الكلام عن دعم السي اس اس يقل حيث ان معظم المشكلات التى كانت تظهر ، تم حلها من قبل المتصفحات واصبحت المتصفحات تتطور بشكل اسرع خصوصا فايرفوكس وسفاري ، وفى نهاية الامر .. المتصفحات تتطور بتطور لغات الويب الخاصة بالديزاين مثلا السي اس اس والاتش تي ام ال.
Top
بعض الاحصائيات عن دعم المتصفحات للسي اس س 3
لم تدعم كل المتصفحات السي اس اس 3 بشكل كامل وهناك ما يدعم بعض الخصائص ولا يدغم بعضها واليكم جدول بدعم المتصفحات لبعض الخصائص الجديدة فى سي اس اس 3
اذن لا يزال الدعم مستمر فى الاصدارات القادمة من المتصفحات
Top
ما الجديد فى السي اس اس 3 ؟
Borders
هناك الكثير والكثير جديد فى السي اس اس 3 مما سهل مهمة مصممي المواقع ومنها ميزة الحدود فتستطيع إختصار ما كنت تفعله في الإصدارة الثانية إذا كنت تريد عمل حواف دائرية لصندوق عن طريق الحدود في السي اس اس أو إستبدال الحدود بصورة من الصور كما هو موضوح بالصورة:
ففى الاصدار الثانى كنا نستخدم اربع صور مختلفة للحواف الاربعة داخل صندوق ملون عادي ولكن فى الاصار الجديد تستطيع ببساطة ان تفعل نفس الموضوع وبكفاءة اكبر عن طريق ميزة
border-radius
واللى تمكنك من عمل حواف دائرية بسهولة جرب لكود التالي
HTML code
</pre> <div id="Box"> <h1>عنوان</h1> نص مكتوب للتجربة</div> <pre>
CSS code
#box{ text-align:right; margin: 10px auto; padding: 7px; width: 238px; height: auto; background-color: #e6e9ed; border: 1px solid #666666; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -opera-border-radius: 10px; }
RGB Color system
RGB بالتأكيد أسهل بكثير مما سبق ومن الجديد ايضا خاصية تغيير الالوان بصيغة ال
انظر المثال التالى
ايضا ينطبق نفس الشكل فى الانظمة الاخرى مثل
(CMYK,HSL,HSLA)
Fonts
من الاشياء الجديدة والمفيدة جدا استخدام فونتس جديدة باستخدام ميزة جديدة اسمها
@font-face
وتستخدمها بالشكل التالى
CSS code
@font-face { font-family: "devmixfont"; src: url('atlandsketchesbb_reg.TTF'); } h1 { font-family: "devmixfont"; color: #3e87f5; font-size:100px; }
HTML code
<h1>DevMix Team</h1> <p> DevMix Team was founded in February 2011 and it is the best teamwork in Mansoura Universty collected by students, we are the best </p>
فتكون النتيجة كالتالى
ملحوظة: تقدر تنزل اى فونت من هنا
Shadow
إضافة جديدة وجميلة تساعد على وضع ظل للنصوص والعناصر أو الصناديق الاتش تي ام ال أيضاً ، هذه الظلال يكون تكوينها عن طريق خاصية
box-shadow و text-shadow
ويمكن حساب قيمها بهذه الطريقة:
هيا بنا نرى مثال ونتيجة له ، جرب الكود التالى
HTML code
<div id="Box"> <h1>فريق ديف ميكس</h1> فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه</div>
CSS code
#box { padding: 13px; margin: 0 auto; width: 450px; text-align: left; background-color: #e9ecf2; -moz-box-shadow: 7px 7px 10px #9c9c9c; -webkit-box-shadow: 7px 7px 10px #9c9c9c; -o-box-shadow: 7px 7px 10px #9c9c9c; }
وتكون النتيجة عمل ظل للصندوق كما فى الصورة التالية
اما عن عمل ظل للكلام والذي يعطى تنسيقا متميز للكلام انظرالكود والنتيحجة التاليين
CSS code
h1, p { text-shadow: 3px 2px 7px #9f9f9f; }
HTML code
<h1>فريق ديف ميكس</h1> <pre> فريق تقني يقدم خدمات للمهتمين بمجال تكنولوجيا المعلومات .. رغم نشأته الحديثة فى فبراير 2011 الا انه اثبت كفاءته وكفاءة اعضاءه
فتكون نتيجة هذا الكود كالتالى
يوجد الكثير من الخصائص الجديدة الاخرى والتى سوف يثم مناقشتها فى الدروس والمقالات القادمة باذن لله مثل
- Transitions
- opacity
- Multiple Backgrounds
- Animation
- and more …
ملاحظات لابد ان تأخد فى الاعتبار
لم يدعم كل المنتصفحات كل الخصائص بنفس الطريقة لذلك فى كتابة السي اس اس 3 يعتبر اختلاف دعمهم للخصائص احدالعيوب والتى تكلفك كتابة الخاصية اكثر من مرة ولعلكم رأيتم اكثر من مرة فى الامثلة كتابة الخاصية ببعض الحروف قبلها انظر الصورة بكل متصفح وامامه الكلمة المختصرة المستخدمة فى السي اس اس 3 مع خصائصها
border-radius ومثال على خاصية الحدود الدائرية
-moz-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; -ms-border-radius:10px; -chrome-border-radius:10px;
وفى النهاية اتمنى ان اكون قد اوصلتك لبعض خصائص السي اس اس 3 المهمة وعرضت عليك مقدمة تجعلك تستخدم السي اس اس 3 اليوم قبل غدا وانتظروا باقى مقالاتنا فى القريب العاجل باذن الله ننتظر تعليقاتكم ومقترحاتكم .. بالتوفيق:)
CSS3 .. Track II of web with DevMix Team
Posted by Medhat Dawoud in Basics, Books, web on August 21, 2011
السلام عليكم ورحمة الله وبركاته
كما وعدناكم من قبل مع سلسلة الويب والتى بدأت بمجموعة من المقالات فى الــ
HTML5
مستمرين معكم فى نفس السلسلة .. ويسر فريق ديف ميكس ان يعلن عن الآتى
CSS 3
مجموعة اخرى من المقالات التقنية فى مجال الويب نهتم فيها بمحتوى هذا الكتاب الذي سوف نعتبره الماتيريال الخاصة بهذا التراك ..عن السي اس اس 3
حيث انه تم نشر 3 مقالات فى الفيرجن 2 من نفس اللغة والتى تعتبر فى المقام الاول ليست لغة برمجة انما هى طريقة لتنسيق صفحات الويب
انتظروا فى اقرب وقت جدول بالمقالات القادمة فى هذا التراك .. ممكن تنزلوا الكتاب ده من اللينك ده
CSS–Advanced Topics
Posted by Gabrail in Basics, Books, Courses, StudyGroups on August 21, 2011
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 :
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; }
HTML Code :
<a
href=”https://developersmix.wordpress.com”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<ahref=”https://developersmix.wordpress.com/”target=”_blank”>DevelopersMix</a>
<p>These Links </p>
<p>belong</p>
<p>to </p>
<p>DevMix blog.</p>
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
10 Articles Introduction to HTML5 is Done !
Posted by Medhat Dawoud in Basics, Books, Courses, web on August 18, 2011
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 🙂
HTML5 – Fantastic Form
Posted by Medhat Dawoud in Books, web on August 17, 2011
2- Dive into HTML5 Form of madness
3- PlaceHolder Text
4- Autofocus fields
5- E-mail Addresses
6- Web Addresses
7- Numbers As Spinboxes
8- Numbers As Sliders
9- Data Pickers
10- Search Boxes
11- Find more
————————————————————————————————————————————
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>
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..
i’m waiting for your feeds 🙂
HTML5-What Is MiCroData?
Posted by Dina Wasef in Books, web on August 17, 2011
What Is MiCroData?
One of the most overlooked new features of HTML5 is Microdata. Microdata allows us to more specifically categorize and label our web content in a machine-readable way. Why this is important is because it may positively affect your search results
When you search for something on Google or elsewhere, you get a list of links with a few sentences of description below them. We all use these descriptions—which Google calls “Rich Snippets”—to determine which link to click on
Why would you want to do this??? There are lots of reasons
>>>>Here a few possible one
you can mark up the date of an event, so a browser can automatically offer to add it to a visitor’s calendar .
You can mark up your contact information, so a browser can automatically offer to add it to a visitor’s address book .
You can mark up your blog post, so feed readers can just look at your HTML and automatically extract a feed from it .
You can mark up your resume, so that when you use a site like LinkedIn you can just point it at your resume page and it can automatically extract all the information it needs
Microdata is about applying additional semantics to data that’s already visible on your web page
With just a few simple lines of code, easily memorable HTML5 Microdata allows you to mark up pages with semantic meaning
Microdata is not designed to be a standalone data format. It’s a complement to HTML
Microdata is part of the html5 spec though, and it currently has the backing of
Google, Bing, and Yahoo and so has a good chance of becoming a standard we all support
.
How It WorKs?
To use Microdata, we must add at least three new attributes to our existing HTMl
To use Microdata all we have is really just adding some extra attributes to your existing HTMl . Where microformats uses classes, microdata primarily uses 3 new attributes
>Itemscope
>Itemtype
>Itemprop
The itemscope attribute is a boolean attribute that tells any machine that is reading our document that there is Microdata on this page, and this is where it starts. You are creating the item with the use of itemscope Any element with an itemscope can also have the itemtype attribute. .
The itemtype attribute, if specified, must have a value that is a valid URL that is an absolute URL.
Itemprop defines a property of the item that means it giving the context of our itemAnd
here there is example to show this
And the result is this
The MiCroData DOM API
Microdata becomes even more helpful when you start using the associated DOM API to manipulate items and properties on a page programmatically, perhaps to present the information in a searchable/filterable manner, or deliver it to another application somewhere else.
The API is very simple — you use the document.getItems() method to grab a nodelist containing the microdata items on a page. If you leave the arguments blank, you’ll just grab all items; or you can specify a specific itemtype URL as an argument to just grab items of that type. For example
Would grab our biography item and store it in a variable. Once you’ve grabbed your item(s), you can then access the different properties with the properties attribute
MiCroData ; PeOpLE aNd BuisEness
if you have ever searched someone’s LinkedIn results, you might have seen something like this
BUT Google will process three formats currently. They are RDFa, Microformats, and you Guessed >>> Microdata & While LinkedIn uses Microformats,
We can now provide context from our HTML to give better search results.
after using microdata and TESTing google result
That will show
And that is the extra context that google has shown
MiCroData: EvEnts
The final example to talk about is the ability of giving some context of upcoming events through Microdata. Events are a common searched item. You may well be working on a website that has scheduled events, which you want to show. Let’s give a little more context for machines and see how it might be use
and the result will be
Google could use this additional data in search results
HTML5 – Local Storage
Posted by Maha Elbasuony in Books, web on August 16, 2011
For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data , This data may be stored in the registry, INI files, XML files, or some other place according to platform convention.
Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because
- Cookies are included with every HTTP request, there by slowing down your web application by needlessly transmitting the same data over and over
- Cookies are included with every HTTP request, there by sending data unencrypted over the internet
- Cookies are limited to about 4 KB of data — enough to slow down your application, but not enough to be terribly useful
What we really want is?
- a lot of storage space
- on the client
- that persists beyond a page refresh
- and isn’t transmitted to the server
Before HTML5, all attempts to achieve this were ultimately unsatisfactory in different ways.
HTML5 Storage
it’s a way for web pages to store named key/value pairs locally, within the client web browser.
HTML5 offers two new objects for storing data on the client:
- sessionStorage – stores data for one session
- localStorage – stores data with no time limit
HTML5 Storage is based on named key/value pairs. You store data based on a named key, and then you can retrieve that data with the same key.
The sessionStorage Object
To create a sessionStorage:
<script type=”text/javascript”>
sessionStorage.Fname=”Maha”;
sessionStorage.lname=”Elbasuony”;
document.write(“The FirstName: “+sessionStorage.Fname+” And The LastName : “+sessionStorage.Lname”);
</script>
OUTPUT
the FirstName: Maha & The LastName: Elbasuony
The localStorage Object
To create a localStorage
<script type=”text/javascript”>
localStorage.Fname=”Maha”;
localStorage.lname=”Elbasuony”;
document.write(“the FirstName: ” + localStorage.Fname + ” & The LastName: “+localStorage.lname);
</script>
OUTPUT
the FirstName: Maha & The LastName: Elbasuony
Also API is extremely straight forward and basically consists of 4 main methods:
- setItem(key, value)
- getItem(key)
- removeItem(key)
- clear()
to Set a key/value pair & Retrieves the current value associated with the Web Storage key use getItem() & setItem() methods
<script type=”text/javascript>
var foo = localStorage.getItem(“bar”);
localStorage.setItem(“bar”, foo);
document.write(localStorage.getItem(“bar”));
</script>
OUTPUT
foo
To remove the value for a given named key
<script type=”text/javascript>
localStorage.removeItem(“bar”);
document.write(localStorage.getItem(“bar”));
</script>
OUTPUT
NULL
Clear the entire storage area
localStorage.clear();
Tracking Changes to the HTML5 Storage Area
If you want to keep track programmatically of when the storage area changes, you can trap the storage event. The storage event is fired on the window object whenever setItem(), removeItem(), or clear() is called and actually changes something.
HTML5 Storage in Action
In Halma game, There’s a small problem with the game, if you close the browser window mid-game, you’ll lose your progress. But with HTML5 Storage, we can save the progress locally, within the browser itself
Make a few moves, then close the browser tab, then re-open it. If your browser supports HTML5 Storage, the demonstration page should magically remember your exact position within the game, the position of each of the pieces on the board, and even whether a particular piece is selected.
Try 😀
http://diveintohtml5.org/examples/localstorage-halma.html
With My Best Wishes
Maha Elbasuony