Archive for category Courses

DevMix Mini-Courses

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

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

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

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

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

:اولا

C# Fundamentals

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

:ثانيا

PHP

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

واخيرا

Java Study Group

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

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

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

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

Leave a 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

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

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

Detecting HTML5 Features

How can I know that my browser support HTML5?

HTML5 is not one big thing; it is a collection of individual features like canvas, video or …ects
Detection Techniques
There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:
#1:Check if a certain property exists on a global object (such as window or navigator).For an example of testing for geolocation support.
#2:Create an element, then check if a certain property exists on that element.For an example of testing for canvas support.
#3:Create an element, check if a certain method exists on that element, then call themethod and check the value it returns.For an example of testing which video formats are supported.
#4:Create an element, set a property to a certain value, then check if the property hasretained its value.For an example of testing which <input> types are supported.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
Why use Modernizr?
Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers.When it runs, it creates a global object called Modernizr that contains a set of Boolean properties for each feature it can detect. For example
if (Modernizr.feature) {
// return true if your browser support feature like canvas, video
} else {
// return false if your browser dosent support feature
}

Canvas
HTML5 defines the<canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”.and defines a set of functions (“the canvas API”) for drawing shapes, defining paths, creating gradients, and applying transformations You can check for canvas support using this function:
function supports_canvas() {
return !!document.createElement(‘canvas’).getContext;
}

or we can use Modernizr for check if your browser support canvas.
if (Modernizr.canvas) {
// let’s draw some shapes!
} else {
// no native canvas support available 😦
}

Video
HTML5 defines a new element called for embedding video in your web pages.Checking for video support uses detection technique #2.if your browser dosent support video there is a solution called Video for Everybody!
This solution uses no JavaScript whatsoever, and it works in
virtually every browser, including mobile browsers.
You can check for video support using this function:
function supports_video() {
return !!document.createElement(‘video’).canPlayType;
}

or we can use Modernizr for check if your browser support Video.
Video Formats
Video formats are like languages.The “language” of a video is called a “codec”.Checking for video format support uses detection technique #3.
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement(“video”);
return v.canPlayType(‘video/mp4,ogg or webm; codecs=”avc1.42E01E, mp4a.40.2″,”theora, vorbis”or”vp8, vorbis”‘);
}

The canPlayType() function doesn’t return true or false. In recognition of how com-
plex video formats are, the function returns a string:
“probably”
If the browser is fairly confident it can play this format.
“maybe”
If the browser thinks it might be able to play this format.
“” (an empty string)
If the browser is certain it can’t play this format.
or we can use Modernizr for check if your browser support Video Formats
Local Storage
HTML5 Storageprovides a way for websites to store information on your computer
and retrieve it later.
Checking for HTML5 Storage support uses detection technique #1.You can check for local
storage support using this function
:
function supports_local_storage() {
return (‘localStorage’ in window) && window[‘localStorage’] !== null;
}

Instead of writing this function yourself, you can use Modernizr.
Web Workers
Web workers provide a standard way for browsers to run JavaScript in the background.
With web workers, you can spawn multiple “threads” that all run at the same time,more or less.Checking for web workers uses detection technique #1.This function checks for web
worker support
:
function supports_web_workers() {
return !!window.Worker;
}

Instead of writing this function yourself, you can use Modernizr.
Geolocation
Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust.
Checking for geolocation support uses detection technique #1 Here’s how to checkfor geolocation support:
function supports_geolocation() {
return !!navigator.geolocation;
}

Instead of writing this function yourself, you can use Modernizr
Input Types
Checking for HTML5 input types uses detection technique #4.
function supports_Input_Type() {
if (!supports_Input_Type()) { return false; }
var i = document.createElement(“input”);
i.setAttribute(“type”, “color”);
return i.type !== “color”;
}

Instead of writing this function yourself, you can use Modernizr.
Placeholder Text
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.
Checking for placeholder support uses detection technique #2.Here’s how to check for placeholder support:
function supports_input_placeholder() {
var i = document.createElement(‘input’);
return ‘placeholder’ in i;
}

Instead of writing this function yourself, you can use Modernizr.
Form Autofocus
use to focus the first input field of a web form automatically.
Checking for autofocus support uses detection technique #2.
You can detect autofocus support with this function:
function supports_input_autofocus() {
var i = document.createElement(‘input’);
return ‘autofocus’ in i;
}

Instead of writing this function yourself, you can use Modernizr.

DevMix Team 😉


by:MohamedIbrahim

,

2 Comments

HTML5 — How came to be ?

HTML gone throughtoo manystepsto bein this form we will
talk about this as we can :
Must to know

In 1993, Dave Raggerr proposed HTML+ as an evolution of the HTML standard. the proposal was never implemented, and it was
superseded by HTML 2.0. HTML 2.0 was a“retro-spec
,” which means it formalized features already in common use. “this specification
brings together, clarifies, and formalizes
a set of features that roughly corresponds to the
capabilities of HTML in common use prior to June 1994.”
Dave later wrote HTML 3.0, based on his earlier HTML+ draft. Outside of the W3C’s ownreference implementation, Arena), HTML 3.0 was never implemented, and it was superseded by HTML 3.2, another “retro-spec”: “ HTML 3.2 adds widely deployed features such as tables, applets and text flow around images, while providing full backwards compatibility with the existing standard HTML 2.0.”
Dave later co-authored HTML 4.0, developed HTML Tidy , and went on to help with XHTML, XForms, MathML, and other modern W3C specifications. Let us imagine HTML not Changed from long time
they have its rules and all browser walk on there steps ,yes
lets say :

  • HTTP still exists. HTTP
  • successfully evolved from 0.9
    into 1.0 and later 1.1. And still it
    evolve
  • HTML still exists. that
    rudimentary data format — itdidn’t even support inline images!
    —successfully evolved into 2.0, 3.2, 4.0. HTML is an unbroken line
  • HTML has always been a conversation between browser
    makers, authors, standards wonks, and other
  • None of the browsers from 1993 still exist in any recognizable
    form. Netscape Navigatorwas abandoned in 1998 and rewritten from
    scratch to create the Mozilla Suite, which
    was then forked to create Firefox. Internet Explorer had its humble
    “beginnings” in “Microsoft Plus! for Windows 95,”
  • Some of the operating systems from 1993 still exist, but none of
    them are relevant to the modern web.
A TIMELINE OF HTML DEVELOPMENT FROM 1997 TO
2004

In December 1997, the World Wide Web Consortium (W3C) published HTML4.0 and promptly shut down the HTML Working Group

Less than two months later, a separate W3C Working Group published XML 1.0 theW3C re-chartered the HTML Working Group to create this “suite of XML tag-sets.” their first step,

in December 1998, was a draft of an interim specification that simply reformulated HTML in XML without adding any new elements or attributes their next target was web forms.
In August 1999, the same HTML Working Group published
a first draft of XHTML Extended Forms.

A few months later, “ XHTML Extended Forms” was renamed “XForms” and moved to its own Working Group. that group worked in parallel with the HTML Working Group and finally published the first edition of XForms 1.0 in October 2003

In May 2001, they published the first edition of XHTML 1.1, that added only a few minor features on top of XHTML 1.0, but also eliminated the “Appendix C” loophole. Starting with version 1.1, all XHTML documents were to be served with a MIME type of application/xhtml+xml

EVERYTHING YOU KNOW ABOUT XHTML IS WRONG



Are you think that your document written in XHTML??, I think you are wrong.Browsers have always been “forgiving” with HTML. If you create an HTML page but forget the </head> tag, browsers will display the page anyway.You are supposed to nest tags hierarchically — closing them in last-in-first-out order — but if you create markup like <b><i></b></i>, browsers will just deal with it (somehow) and move on without displaying an error message.

By some estimates, over 99% of HTML pages on the web today have at least one error in them. But because these errors don’t cause browsers to display visible error messages, nobody ever fixes them. so you use the synatx Not the rules of XML, and if we do 99% of the Web-pages all over the world will not work !!

WHAT WORKING GROUP?

simply it was unofficial group of developers that focus in web applications at the beginning W3C ignored them but ….. !!
by October 2006, it was clear that the WHAT Working Group had picked up serious momentum, while XHTML 2 was still languishing in draft form, unimplemented by any major browser. In October 2006, TimBerners- Lee, the founder of the W3C itself, announced that the W3C would work together with the WHAT Working Group to evolve

HTML5w3c

Finally

One of the first things the newly
re-chartered W3C HTML Working Group decided was to rename “Web
Applications 1.0” to “HTML5.” And here we are, diving into HTML5

And here we are 😀 … at all i
know that post not technical as u expect but you have to know these
information
thanks for your reading and wait us soon with new
posts …. so so
nice …bye
by : Mohammed Gabrail

, , , , , ,

1 Comment