MohamedIbrahim

System.out.println("Student at the Faculty of Computers and Information") ;

Homepage: http://MohamedIbrahim.wordpress.com

كل عام وانتم بخير

كل عام وانتم بخير بمناسبة مرور عام علي انشاء فريق ديفميكس

في مثل هذا اليوم منذ عام كنا نجتمع سويا مخططين للفريق ولاهدافه ونشاطاته
وبعد مرور عام من انشاء الفريق نحب ان نذكركم بنشاطات الفريق في الفترة السابقة
حيث انه في يوم 10 فبراير كان اول اجتماع رسمي للفريق
ثم اجتمعنا مرة اخري بعدها بيومان وكان حصاد الاجتماعين مجموعة من السيشنز قدمها بعض من الاعضاء المؤسسين للفريق وهم
مهندس مدحت داوود– مهندسة مها بسيوني– مهندس عمار عاشور -مهندس محمد ابراهيم -مهندس محمد جبريل – مهندس احمد يوسف – مهندسة ايمان المعصراوي
ثم بعدها توالت نشاطات الفريق وقد كانت في شكل استدي جروب بي اتش بي ثم مونجو داتا بيز
ثم قمنا بالحدث الكبير

Devent1

:ومن بعده قدم الفريق كورسات مجانية في
الجافا وقدمه مهندس عمار عاشور
الفيديو برودكشن وقدمه مهندس ابراهيم محسن
اتش تي ام ال فايف وقدمه مهندس احمد يوسف
ثم بعد ذلك اقمنا حدث صغير بأسم

semiDevent1

ثم قمنا بعمل استدي جروبس في كل من
جافا اس اي تحت اشراف عمار عاشور
بايثون تحت اشراف محمد جبريل
ثم بعد ذلك قام الفريق بسلسلة من المقالات في

HTML5CSS3

وقمنا بعمل مسابقة في الويب ديزاين تحت اسم

EBDA3

ثم قمنا بعدها بعمل صالون ثقافي تحت اسم

DevTalk1:about cloud computing

ومن بعده

DevTalk2 :about open & Closed source

ومن بعده

DevTalk3: about Mobile Development

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

DEVENT II

ثم بعد ذلك قدم الفريق دبلومة مجانية للويب لعشرين طالب
ومع كل ذلك يشعر الفريق بالتقصير في تقديم الخدمات لكم
ونتمني ان نقدم لكم المزيد في الفترة القادمة

مع تحيات فريق ديفميكس

8 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

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