Archive for category Books

HTML5 – Geolocation

1-HTML5 geolocation and the Google Maps API
2- Geolocation Position mechanism
3- Browser geolocation
4- Determine position and Caching
5- Follow-up Location
6- Privacy
7- Mobile and Geolocation
8- To read …..


1-HTML5 geolocation and the Google Maps API

The Geolocation API provides the best estimate of the user’s position using a number of sources (called location providers).


2- Geolocation Position mechanism

Be used several ways to find and identify places by HTML5 to ensure the greatest degree of accuracy in determining the place: –

IP                GSM/CDMA                Bluetooth             GPS


3- Browser geolocation                                        



4- Determine position and Caching

  • Obtain the user’s current position, using the getCurrentPosition method
  • Watch the user’s position as it changes over time, using the watchPosition method
  • Quickly and cheaply obtain the user’s last known position, using the lastPosition property

<!DOCTYPE html>



<meta charset=”utf-8″ />

<title>DevMix Geolocation Api</title>

<script type=”text/javascript” src=”geo.js”></script>



<script type=”text/javascript”



<h1>DevMix geolocation </h1>

<p>My Page</p>

<div id=”map”></div>





You can summon a copy is stored and not to account for the place again to ease your application and increase the speed of implementation

navigator.geolocation.getCurrentPosition(showMap , showError,{maximumAge:60000});


5- Follow-up Location

If you want to continue to place the visitor if the visitor is moving in a vehicle, for example you can use another function and is

var watchHandler = navigator.geolocation.watchPosition(scrollMap,showError);

 And to stop it :-



6- Privacy

More secure , Can not access the site or application of any information on the location of the user without his permission.


7- Mobile and Geolocation

  • iOS
  • Android
  • IPhones
  • Blackberry OS
  • Browsers with Google Gears support (Android, Windows Mobile)
  • Nokia Web Run-Time (Nokia N97,…)
  • webOS Application Platform (Palm Pre)
  • Torch Mobile Iris Browser
  • Mozilla Geode


8- To read …..

I hope that this tutorial has given you a head start into the world of geolocation APIs. Good luck and try to make your next project take advantage of geolocation benefits!



HTML5 – Video element

2-Video container files
3-Browsers that Support for videos codecs
4-Encoding Ogg Video with Firefogg
5-The Markup Tag (Video)
6- Some resourcesto read more


1- Introduction

First thing you should know in this article it the goal of this article, and the goal of this article is very simple, it’s to enable you to use the new markup element in html5 (video), and i want to introduce the video first to make it easy for you to understand what to do.

Note that: you should use the latest version of some browser to support this element and test it, i promote to use firefox 4 or 5 , or opera 11 or later, or IE 9, or test your current browser if it support HTML5 or not from here


2- Video Container files

Ok, get ready for a reality that may shock you, the AVI files or the MP4 files are just a container formats,  Just as a ZIP file can contain any sort of file within it, the video container formats just define the way things store in it, not the kind of data it self.

A video file usually contains multiple tracks: a video track (without audio), plus one or more audio tracks (without video).

There are lots of video containers such as:

  • MPEG-4 : it’s usually with the extension .mp4 or m4v.
  • Flash Video : usually with the extension .flv as we see in the downloaded videos of youtube before it use HTML5.
  • Ogg : it’s usually .ogv , Firefox 3.5, Chrome 4, and Opera 10.5 offer native support, as we said before, the container contain video and audio, in the ogg case, the video called Theora and the audio called Vorbis.
  • and others … you can find other from Here


3- Browsers that Support for videos codecs

The support of the video and audio codecs in the browsers is clear in the following table:

so, you must have one of tose browsers that support the video element of HTML5 to enjoy the next practise .. 🙂


4- Encoding Ogg Video with Firefogg

Because HTML5 don’t support all containers of videos, we are going to use “Ogg video” as a shorthand for “Theora video and Vorbis audio in an Ogg container” ..

Firefogg is an open source, GPL-licensed Firefox extension for encoding Ogg video. To use  it,  you’ll  need  to  install  Mozilla  Firefox  3.5  or  later,  then  visit  the  Firefogg website

as shown in this image

after installing this plugin and restarting the firefox .. the following window will appear

then click on Make Web Video link and you will get the following window

now you should select a video file .. i expect you select the default movie that is with any windows in the documents which called “Wildlife.wmv”.. then the following window will appear

then simply click on Encode to file .. whic make you select a place to save the file with the extension .ogv and loading as follow

Now you have a file with the extension of .ogv …. so this level is done and the result is a file called “Wildlife.ogv”


5- the Markup Tag (video)

after the last section we get a file in the container Ogg that HTML5 can work with, then we reach the easiest step which is writing the HTML5 code for a video, ok lets make a folder and put the “Wildlife.ogv” file in it and create an other file with the name “TestVideo.html” inside the same folder.. then oper it and start writing the following:



<title>DevMix Web Series</title>



<video src=”Wildlife.ogv” width=”300″ height=”225″ ></video>



then, what do you see?  it’s just a black box , then where is the video ? you should here use what the creators of HTML5 called a naked attributes which mean that no value for that so you should add a naked attribute to the video element called controls ok lets edit it with this line of code

<video src=”Wildlife.ogv” width=”300″ hight=”225″  controls></video>

and now run the code you will find it as follow:

you can play it now and enjoy writing HTML5 videos … 🙂

Note : the controls bar is autohiding and there are a lot of other features for videos you can search for them or ask us and wait for other articles in the same field in the near future isA


6- some resources to read more

i collect some resources to enable you to learn more in HTML5

  1. first one is our Blog … here 🙂
  5. and Google 😀

hope that the article was useful for all of you .. wait your feeds 🙂

, ,


HTML5 – Canvas element

<canvas> element :
    • a resolution-dependent bitmap canvas which can be used for rendering graphs, 
      game graphics,or other visual images on the fly.
    • canvas is a rectangle on your page in which you can use JavaScript
       to draw anything you want.
    • A <canvas> element has no content and no border of its own.
How to make canvas :

     <canvas id=”b” width=”300″ height=”225″></canvas>

Drawing using <canvas> :

                   function draw_b() 


                        var b_canvas = document.getElementById(“b”);

                      var b_context = b_canvas.getContext(“2d”);

                     b_context.fillRect(50, 25, 150, 100);


First we find canvas element by using getElementById() method, then we determine context by getContext() and set
 it to 2d, then draw the rectangle.

Drawing methods and properties :
  • The fillStyle property can be a CSS color, a pattern, or a gradient. 
    (More on gradients shortly.) The default fillStyle is solid black, 
    but you can set it to whatever you like. 
    Each drawing context remembers its own properties as long as the page is open, 
    unless you do something to reset it.
  • fillRect(x, y, width, height) draws a rectangle filled with the current fill style.
  • The strokeStyle property is like fillStyle—it can be a CSS color, a pattern, 
    or a gradient.
  • strokeRect(x, y, width, height) draws a rectangle with the current stroke style.
  • strokeRect doesn’t fill in the middle; it just draws the edges.
  • clearRect(x, y, width, height) clears the pixels in the specified rectangle.
canvas coordinates :
The canvas is a two-dimensional grid. 
The coordinate (0, 0) is at the upper-left corner of the canvas.
now we will do the same as the previous picture :
<canvas id="c" width="500" height="375"></canvas>
var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");
now we want to draw lines so we will use :
  • moveTo(x, y) moves the pencil to the specified starting point.
  • lineTo(x, y) draws a line to the specified ending point.

Let’s begin by drawing the off-white grid:

       for (var x = 0.5; x < 500; x += 10)
            context.moveTo(x, 0); 
           context.lineTo(x, 375);
       for (var y = 0.5; y < 375; y += 10) 
          context.moveTo(0, y); 
          context.lineTo(500, y);
Now we need ink method to make aur lines appear: 

 context.strokeStyle = "#eee"; context.stroke();

Now we will draw horizontal arrow, We want to draw the arrow in a different color ink—black 
instead of off-white—so we need to start a new path:  

 context.moveTo(0, 40); 
 context.lineTo(240, 40);
 context.moveTo(260, 40); 
 context.lineTo(500, 40);
 context.moveTo(495, 35); 
 context.lineTo(500, 40); 
 context.lineTo(495, 45);

Now we will draw vertical arrow, Since the vertical arrow is the same color asthe horizontal 
arrow, we do not need to start another new path:   

 context.strokeStyle = "#000"; 

now we do that:
It is time to write text
  • font can be anything you would put in a CSS font rule. 
    That includes font style, font variant, font weight, font size, line height,   
    and font family.
    • textAlign controls text alignment. 

It is similar (but not identical) to a CSS text-align rule. Possible values are start, end, left, right, and center.

  • textBaseline controls where the text is drawn relative to the starting point.  
    Possible values are top, hanging, middle, alphabetic, ideographic, and bottom.
Let’s draw some text:

   context.font = "bold 12px sans-serif"; 
 context.fillText("x", 248, 43); 
 context.fillText("y", 58, 165); 
 context.textBaseline = "top"; 
 context.fillText("( 0 , 0 )", 8, 5);
 context.textAlign = "right";
 context.textBaseline = "bottom"; 
 context.fillText("( 500 , 375 )", 492, 370);
This will be the final result :

Gradient :
The canvas drawing context supports two types of gradients:
  • createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).
  • createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles. 
    The first three parameters represent the starting circle, with origin (x0, y0) 
    and radius r0. 
    The last three parameters represent the ending circle, with origin  (x1, y1) 
    and radius r1.
Let’s make a linear gradient:
 Gradients can be any size, but we’ll make this gradient 300 pixels wide, like the canvas: 

 var my_gradient = context.createLinearGradient(0, 0, 300, 0);

 Because the y values (the second and fourth parameters) are both 0, 
 this gradient will shade evenly from left to right.

Let’s define a gradient that shades from black to white: 

 my_gradient.addColorStop(0, "black"); 
 my_gradient.addColorStop(1, "white");

To draw a gradient, you set your fillStyle to the gradient and draw a shape,
 like a rectangle or a line: 

 context.fillStyle = my_gradient; 
 context.fillRect(0, 0, 300, 225);

This will do the following :  
And this will do a gradient from top to bottom : 

 var my_gradient = context.createLinearGradient(0, 0, 0, 225);
 my_gradient.addColorStop(0, "black"); 
 my_gradient.addColorStop(1, "white"); 
 context.fillStyle = my_gradient;
 context.fillRect(0, 0, 300, 225);

Images : 
The canvas drawing context defines several methods for drawing an image on a canvas:
  • drawImage(image, dx, dy) takes an image and draws it on the canvas. 
    The given coordinates (dx, dy) will be the upper-left corner of the image. 
    Coordinates (0,0) would draw the image at the upper-left corner of the canvas.
  • drawImage(image, dx, dy, dw, dh) takes an image, 
    scales it to a width of dw and a height of dh,
     and draws it on the canvas at coordinates (dx, dy).
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) takes an image, 
    clips it to the rectangle (sx, sy, sw, sh), scales it to dimensions (dw, dh), 
    and draws it on the canvas at coordinates (dx, dy).
To put an image inside a canvas :
 <img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113">
 <canvas id="e" width="177" height="113"></canvas> 
 <script> window.onload = function() {
 var canvas = document.getElementById("e"); 
 var context = canvas.getContext("2d"); 
 var cat = document.getElementById("cat");
 context.drawImage(cat, 0, 0); }; 

If you’re creating the image object entirely in JavaScript, 
you can safely draw the image on the canvas during the Image.onload event: 

  <canvas id="e" width="177" height="113"></canvas>
 var canvas = document.getElementById("e"); 
 var context = canvas.getContext("2d");
 var cat = new Image(); 
 cat.src = "images/cat.png"; 
 cat.onload = function() { 
 context.drawImage(cat, 0, 0); };

 By: Mai Mohamed


1 Comment

HTML5 getStarted();

  • The Doctype:                      
               <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">     

                 *These lines of code called the doctype.  it isn’t HTML tag.
                 *specifies rules for the markup language ,do that the browsers render the content correctly.
                 *The structure of the web page like as a tree.
                 *It consist of node (parent)  and some child’s that divided into ancestors.
                 *Elements that don’t have any children’s called leaf node.

  • Character Encoding:

                 -Computers don’t deal with character’s .they deal with bit’s and bytes.
                 -You can think character encoding as a kind of decryption key for text.
                 –utf-8 used in HTML for encoding character’s.

⇒ New semantic elements in HTML5:


                -Represent a generic section of a document or application.

                –such as: Book divided into section called chapters.


               -header element is usually intended to contain section’s heading <h1> ………  <h6>

               -HTML5 defines <header> element to get rid of the oldest formula  of defining the header ⇒ <dev id=”header”>.

               -the new formula will be:

                           <h1> DEVMIX <h1>


              -Represent the heading of the section .

              -Acts as wrapper for two or more related heading elements.


                  <h1> DEVMIX </h1>
                     <h3> HTML5 </h3>

               -Presents a self contained composition in document , page , application or site that is intended to be independently 

                 distributable or reusable.

               -HTML5 provides a more specific elements for the common case of marking up an article named <article>

                         <h1> DEVMIX <h1>
                         <h3> HTML5 <h3>

      *Date and Time:-
                  -HTML5 provides the <time>  element.
                  -It consists of 3 parts:

        1. A machine readable time stamp .
        2. Human readable text content .
        3. Optional pubdate flag.


               <time date-time=”2011-08-15” pubdate> August 15, 2011 </time>

                         -to add time:

                <time date-time=”2011-08-15T18:59:47” pubdate>
                         August 15, 2011  6:59am

                    -Navigation bar is one of the important parts of any website.
                    -HTML5 provide semantic way to mark up navigation section called <nav>


                    <li> <a href=”#” >Home </a> </li>
                     <li> <a href=”#” >contact </a> </li>


            -HTML5 provide a specific element for footer is  called <footer>

            -footer contains information about its section , links , copyrights,….



                           <p> DEVMIX </p>


By : Mohammed Ashraf


1 Comment

HTML5 book – summaries

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

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

HTML5 Book

اتمنى نلاقى منكم فيد باك كل يوم بالمقال ومدى تأثيره ومدى اهميته

بالتوفيق للجميع

, ,

Leave a comment

Python-study group

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

اولا انا هعرف بنفسي انا الطالب محمد جبريل – ثالثه حاسبات المنصوره – بلبس نضاره …. وان شاء الله هكون معاكم مع اول استدي جروب للفريق في شهر رمضان المبارك وهتكون عن البايثون .. وان شاء الله هكون معاكم يوم بيوم ولحظه بلحظه في اي سؤال او اي استفسار .. لان هدفنا كفريق اننا ننشر علم صح وننقل معارف ونرسخ مبادئ تهم كل واحد فينا .. اتمني بجد ان ربنا يوفقنا ونقدر نفيدكم بجد ولو بمعلومه … بس ايد لوحدها لا تصفق كل انسان وله ما له وعليه ما عليه يعني لازم تجتهد علشان تلاقي نتيجه ترضيك .. بالتوفيق للجميع ان شاء الله تقدروا تتابعونا عن

طريق البلوج دا




DevMix Group


DevMix Official Page

ان شاء الله الاستدي جروب هتبتدي من بكره وطبعا الناس اللي حجزت لازم تبعت تأكيد علشان نعمل حسابنا معانا وكمان المواعيد هتتبعت للناس علي الميل ان شاء الله … ويارب نكون عند حسن ظن حضراتكم

, , , , , ,

1 Comment

Begining visual C# 2008 [wrox] free download

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

Download Now

وانتظروا المزيد من الكتب ولو هناك كتاب معين محتاجينه يا ريت تكتبوا اسمه وهنحاول نوصله ان شاء الله ونرفعه


1 Comment