Archive for category StudyGroups

DevMix Mini-Courses

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

  Mini Coursesيتقدم فريق ديف ميكس بمجموعه من ال

فى اجازه نصف العام الحاليه

سارع بالتسجيل معنا فالاولويه باسبقية التسجيل

المينى كورسز عباره عن

:اولا

C# Fundamentals

وسيقدمها بشمهندس عمر عبد العزيز المعداوى

:ثانيا

PHP

وسيقدمه بشمهندس احمد ضيف

واخيرا

Java Study Group

وسيقدمها بشمهندس محمد ابراهيم

وسيتم البدء ان شاء الله مع بداية الاسبوع المقبل

سارع بالتسجيل معنا

https://docs.google.com/spreadsheet/viewform?formkey=dFZSRmhNWU90TGVLdjVYNWtZUTR5MVE6MQ

Leave a comment

CSS3 – Introduction

متابعى مدونة فريق ديف ميكس الأعزاء .. بعد التحية .. نقدم لكم مجموعة من المقالات فى  السي اس اس 3 متابعة لسلسلة الويب والتى تم الاعلان عنها منذ فترة وقررنا الكتابة فى هذا الجزء باللغة العربية تقديرا لرغبة القراء واثراءا لمحتوى اللغة العربية على الانترنت ونتمنى ان تنال اعجابكم

Top


مقدمة
الى الجحيم بهذه المتصفحات .. كلمة قالها جيفيري زيلدمان سنة 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 …

Top


ملاحظات لابد ان تأخد فى الاعتبار
لم يدعم كل المنتصفحات كل الخصائص بنفس الطريقة لذلك فى كتابة السي اس اس 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 اليوم قبل غدا وانتظروا باقى مقالاتنا فى القريب العاجل باذن الله ننتظر تعليقاتكم ومقترحاتكم .. بالتوفيق:)

, ,

2 Comments

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

CSS Basics ||

 

Background

  • Background Color
  • Background Image

Demo:
<html>

<style>
p{background-color:gray;}
h3{background-image: url(images.jpg);}
</style>
<body>
<p> DevMix Team </p>
<h3>pla pla pla pla pla…… </h3>
</body>
</html>

Text

  • Text Color
  • Text Decoration
  • Text Alignment
  • Text Indentation
  • Text Transformation

Demo:
<html>

<style type=”text/css”>
p{color: maroon;}
h1{text-decoration: underline;}
h2{text-align: center;}
h3{text-transform: uppercase;}
h4{text-indent:30px;}
</style>
<body>
<p>DevMix Team</p>
<h1>i love Orange :)</h1>
<h2>Hello! </h2>
<h3>mohamed </h3>
<h4>CSS Styling </h4>
</body>
</html>

Fonts

  • Font Family
  • Font Size
  • Font Style

Demo:
<html>
<style type=”text/css”>
p.family{font-family: Arial,sans-serif;}
p.size{font-size: 40px;}
p.style{font-style:italic;}
</style>

<body>
<p> Font Family ,arial ,sans_serif </p>
<p>Font Size with pixels </p>
<p>Font Style Italic </p>
</body>
</html>

Lists

  • List Type
  • List Image

Demo:
<html>

<style type=”text/css”>
ol.m{list-style-type: lower-alpha;}
ul.n{list-style-type: square;}
ul.i{list-style-image: url(images2.jpg)}
</style>
<body>
<ul>
<li>first </li>
<li>second</li>
</ul>
<ol>
<li>pla pla pla </li>
<li>pla pla pla pla pal </li>
</ol>
<ul>
<li> image </li>
</ul>
</body>
</html>

Links

  • a:link \\ unvisited link
  • a:visited \\ visited link
  • a:hover \\ mouse over link
  • a:active \\ selected link

Demo:
<html>

<style type=”text/css”>
a:link{color:blue;}
a:visited{color: red;}
a:hover{color: maroon;}
a:active{color: gray;}
</style>
<body>
<a href=”www.google.com” >Google</a>
</body>
</html>
</body>
</html>
By: Mohamed Ibrahim 🙂

,

3 Comments

HTML5- Let’s Take This Offline

        At first you must know the purpose of this article and what is this strange title refer to!!

of course it’s about HTML5 offline applications and how this offline application work

dont be confused i know that Web pages are things you download and render. Downloading implies a network

connection. How can you download when you’re offline ???????????

At its simplest, an offline web application is just a list of URLs pointing to HTML, CSS,
or JavaScript files, images, or any other kinds of resources that may be present.

The home page of the offline web application points to this list, called a manifest file
HTML5 offline applications will read the list of URLs from the manifest file, download
the resources,. When you try to access the web application without a network con-
nection, your web browser will automatically switch over to the local copies instead.

Now it’s up to you as a Web-Developer  …

In other words, HTML5 can take your web application offline, but what you do once you’re there is up to you.

Browsers that subbort HTML5 offline application:

         Firefox                             Safari                         Chrome                            I-Phone                     Android
 
 
The Cache Manifest:
you need to point to the manifest file, using the manifest attribute on your <html>element:
 <!DOCTYPE HTML>

<html manifest="/cache.manifest">

 <body>
 ...
 </body>

</html>
Your cache manifest file can be located anywhere on your web server, but it must be
served with the content type text/cache-manifest.Lets build itsupose you built web game and wanna to run it offline
To do that, we need a manifest that lists all the resources the game needs. Well, there’s
the main HTML page, a single JavaScript file that contains all the game code,
and…that’s it. There are no images, because all the drawing is done programmatically
via the canvas API and all the necessary CSS styles are in a <style>
element at the top of the HTML page. So, this is our cache manifest:
CACHE MANIFEST
game.html
../game-localstorage.js
*********************
A word about paths.
I’ve created an offline/ subdirectory in the examples/ directory,
and this cache manifest file lives inside the subdirectory. Because the HTML page will
need one minor addition to work offline (more on that in a minute), I’ve created a
separate copy of the HTML file, which also lives in the offline/ subdirectory. But because
there are no changes to the JavaScript code itself since we added local storage support
which lives in the parent directory (examples/). Altogether, the files look like this:
/examples/localstorage-game.html
/examples/game-localstorage.js
/examples/offline/game.manifest
/examples/offline/game.html
In the cache manifest file (/examples/offline/game.manifest), we want to reference two
files. First is the offline version of the HTML file (/examples/offline/game.html), which
is listed in the manifest file without any path prefix because the two files are in the same
directory. Second is the JavaScript file, which lives in the parent directory (/examples/game-localstorage.js)
and is listed in the manifest file using relative URL notation: ../
game-localstorage.js. This is just like how you might use a relative URL in an
<img src> attribute. As you’ll see in the next example, you can also use absolute paths
(that start at the root of the current domain) or even absolute URLs
(that point to resources in other domains).
Now, in the HTML file, we need to add the manifest attribute that points to the cache
manifest file:
<!DOCTYPE html>
<html lang=”en” manifest=”game.manifest”>
And that’s it!   When an offline-capable browser first loads the offlineenabled HTML
page, it will download the linked cache manifest file and start downloading all the
referenced resources and storing them in the offline application cache. From then on,
the offline application algorithm will take over whenever you revisit the page. You can
play the game offline, and since it remembers its state locally, you can leave and come
back as often as you like
 
 
 
Further Reading
 Standards:
 • Offline web applications in the HTML5 specification
 Browser vendor documentation:
 • “Offline resources in Firefox” on the Mozilla Developer Center
 • “HTML5 Offline Application Cache”, part of the 
   “Safari Client-Side Storage and Offline Applications Programming Guide”
 Tutorials and demos:
 • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 1”, by
 Andrew Grieve
 • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 2”, by
 Andrew Grieve
 • “Gmail for Mobile HTML5 Series: Using Appcache to Launch Offline - part 3”, by
 Andrew Grieve
 • “Debugging HTML 5 Offline Application Cache”, by Jonathan Stark
 • “An HTML5 offline image editor and uploader application”, by Paul Rouget
 
 
 
at end thanks to all of you
By : Amar Omar Ashour
 

2 Comments

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>

<html>

<head>

<meta charset=”utf-8″ />

<title>DevMix Geolocation Api</title>

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

</head>

<body>

<script type=”text/javascript”

src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;

<article>

<h1>DevMix geolocation </h1>

<p>My Page</p>

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

</article>

</body>

</html>

Caching

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 :-

navigator.geolocation.clearWatch(watchHandler);

_________________________

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!

,

2 Comments

HTML5 getStarted();


  • The Doctype:                      
               <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     

                 *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:

        <section>

                -Represent a generic section of a document or application.

                –such as: Book divided into section called chapters.

       <header>

               -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:

                      <header>
                           <h1> DEVMIX <h1>
                      </header>

      <hgroup>

              -Represent the heading of the section .

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

                  *EX:-

             <header>
                <hgroup>
                  <h1> DEVMIX </h1>
                     <h3> HTML5 </h3>
                </hgroup>
             </header>

    <article>
               -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>
                 *EX:-

           <article>
                <header>
                   <hgroup>
                         <h1> DEVMIX <h1>
                         <h3> HTML5 <h3>
                    </hgroup>
                </header>
            </article>

      *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.

               *EX:-

               <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
                </time> 

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

             *EX:-

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

         *footer:-

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

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

             *EX:-

 
                      <footer>

                           <p> DEVMIX </p>

                      </footer>

By : Mohammed Ashraf

,

1 Comment