Maha Elbasuony

This user hasn't shared any biographical information

Homepage: http://mahaelbasuony09.wordpress.com

jQuery UI


an open source library of interface components (interactions, full-featured widgets, animation effects ) based on jQuery javascript library , that you can use to build highly interactive web applications ,  download it .

From this link Customize your jQuery UI download by selecting the version and specific modules you need.

Also you can Select the theme  you want to include or design a custom theme

Some of this Components

Interactions ( Draggable , Droppable , Resizable ,  Selectable ,  Sortable)
Widgets (Accordion , Autocomplete ,  Button , Datepicker ,  Dialog , Progressbar , Slider , Tabs)
Effects (Color Animation ,Toggle Class , Add Class ,Remove Class ,Switch Class , Effect ,Toggle , Hide ,Show)

Some Examples

Once you’ve downloaded jQuery UI, you’ll get a zip containing the following files:

  • /css/
  • /development-bundle/
  • /js/
  • index.html

you can replace the index.html page with your index page by include these 3 files on any page to use jQuery UI widgets and interactions:

<link type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

Once you’ve included the necessary files, you can add some jQuery widgets to your page.

For example, to make

datepicker widget

datepicker

Just give Id attribute to a text input element or div tag ……, etc  to your page

HTML Code :

<div id="datepicker"></div>

then call .datepicker();on it

JS Code:

 $("#datepicker").datepicker( ); 

Tabs widget

Tabs

HTML Code :

<div id="tabs">
   <ul>
     <li><a href="#joinus">Join Us</a></li>
     <li><a href="#contactus">Contact Us</a></li>
     <li><a href="#home">Home</a></li>
   </ul>

   <div id="joinus">join us </div>
   <div id="contactus">contact us</div>
   <div id="home">home</div>
</div>

JS Code

$('#tabs').tabs();

accordion widget

accordion

HTML Code :

<div id="accordion">
     <div>
        <h3><a href="#">Required Information</a></h3>
        <div>Required Information</div>
     </div>
     <div>
        <h3><a href="#">Personal Information</a></h3>
        <div> Personal Information</div>
     </div>
     <div>
        <h3><a href="#">Technical Information</a></h3>
        <div>Technical Information</div>
     </div>
</div>

JS Code

$("#accordion").accordion({ header : "h3"});

Sortable Interactions

sortable

HTML Code :

<ul id="sortable">
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Home Page</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>News</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Photos</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Contact Us</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>About Us</li>
</ul>

JS Code

$( "#sortable" ).sortable();

Selectable Interactions

selectable

HTML Code :

<ul id="sortable">
    <li  class="ui-<code>widget-content</code>">Home Page</li>
    <li  class="ui-<code>widget-content</code>">News</li>
    <li  class="ui-<code>widget-content</code>">Photos</li>
    <li  class="ui-<code>widget-content</code>">Contact Us</li>
    <li  class="ui-<code>widget-content</code>">About Us</li>
</ul>

JS Code

$( "#selectable" ).selectable();

So Simple , Just try 🙂

This is a tutorial to learn it

http://jqueryui.com/docs/Getting_Started

Good Luck 🙂

1 Comment

SEO… تهيئة الموقع لمحركات البحث

مقدمه

الكل يتمنى اعلان بمنتدى ما  لموقعة ..ويتمنى لو يوضع بنر خاص لموقعة في كل المواقع العربية لكي يأتى اليه  اكبر عدد ممكن من الزوار . تهيئة الموقع لمحركات البحث هو نفس طريقة الاعلانات والبنرات لكن بطريقة مختلفه تماما ً والرائع في هذا انها افضل من الاعلانات والبنرات بمليون مرة وايضاَ مجاني للجميع


ما هى تهيئة الموقع لمحركات البحث

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

ما هى اهميه ظهور موقعك ف الصفحات الاولى لدى محركات البحث … .؟

-يضع لموقعك مكانه مفضله لدى محركات البحث وبالتالى زياده ترتيبك وتصنيفك

-يعتبر جزءا مهما من التسويق الالكترونى

-زياده عدد زوار الموقع نظرا لكثافه الباحثين عن مختلف المجالات وتصفح اغلب المواقع على محركات البحث

-المواقع صاحبه الترتيب والتصنيف العالى  لدى محركات البحث المختلفه تعتبر مصدر ثقه من الزوار وايضا من المواقع والمؤسسات والمنظمات المحليه والعالميه المختلفه

-عند الوصول الى ترتيب عالى من محركات البحث يسهل الحصول ع شهادات الثقه  والامان والجوده العالميه

كيفيه تهيئه موقعك للظهور ف محركات البحث …؟


يجب اختيار الكلمات الرئيسية  وهي الأساس لتهيئه موقعك  لمحركات البحث،  فاذا كان اختيارك للكلمات الرئيسيه خطأ فان ذلك سيكون مكلفا ومستغرقا للوقت  وان تكون مناسبه لعملك او الخدمه التى يقدمها موقعك و يجب ان يكون موقعك ايضا حسن المظهر لكى يكون مرغوب من قبل المستخدمين   وان يكون وضع الكلمات الاساسيه مختار بعنايه ليسهل ع محركات البحث ان تربط بكل سهوله بين الصفحات والكلمات الاساسيه

دى كانت مقدمه بسيطه وان شاء الله تابعونا هيبقى ف مقالات تانيه وتطبيقات ع المقال فيما بعد باذن الله

Maha Elbasuony

, ,

Leave a comment

جوله سريعه حول مؤسسين فريق ديف ميكس


بعد مرور 8 شهور ينقص منهم يومين 🙂 من العمل والجهد المتواصل للارتقاء بالفريق

وبناء ع رغبه الكتير لمعرفه المؤسسين للفريق سنقوم سويا باستعراض المؤسسين للفريق

لكى نتيح لكل المتابعين سهوله التواصل معهم

———————————————————————–

مؤسس الفريق منذ ان كانت فكره حتى الان

مدحت داود

خريج 2011 كليه حاسبات ومعلومات – قسم علوم حاسب

================================

اعضاء الفريق

مها البسيونى

خريجه 2011 كليه حاسبات ومعلومات – قسم تكنولوجيا المعلومات



عمار عاشور

الفرقه الثالثه كليه حاسبات ومعلومات

محمد ابراهيم

الفرقه الثالثه كليه حاسبات ومعلومات

محمد جبريل

الفرقه الثالثه كليه حاسبات ومعلومات

احمد يوسف

الفرقه الثالثه كليه حاسبات ومعلومات

محمد الشهاوى

الفرقه الثالثه كليه حاسبات ومعلومات

مى محمد

الفرقه الثالثه كليه حاسبات ومعلومات

ايمان المعصراوى

خريجه 2011 كليه حاسبات ومعلومات – قسم علوم الحاسب

محمد اشرف

الفرقه الثالثه كليه حاسبات ومعلومات

احمد ضيف

الفرقه الثالثه كليه حاسبات ومعلومات

دينا واصف

الفرقه الثالثه كليه حاسبات ومعلومات

هاجر صقر

الفرقه الثالثه كليه حاسبات ومعلومات

الفرقه الثالثه كليه حاسبات ومعلومات

ياسمين راقت

الفرقه الثالثه كليه حاسبات ومعلومات

اسماء البسيونى

الفرقه الثالثه كليه حاسبات ومعلومات

*************************************************

هؤلاء الاعضاء الحالين للفريق

انتظروا قريبا مفاجاءات وسفراء جداد ف الفريق

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

3 Comments

CSS3 – transitions

  1. Introduction
  2. Transition Properties
  3. Shorthand transitions

                  *********************************************************

Introduction

النهارده هنناقش سوا ف الترانزيشنز/ الانتقالات …. خلونا نبدء بمثال بسيط عشان نفهم الدنيا ماشيه ازاى

لو عاوزه  اما اقف ع لينك اغير الخلفيه بتاعه من لون لاخر ياترى اعمل  ايه ؟

اكيد اى حد هيقولى ببساطه خالص استخدمى ال
hover

 وغيرى الخلفيه بيه وهيغيرها بكل بساطه ذى كده

<html>
	<head>
		<style type="text/css">
			a.foo
			{
			background:#9c3;
			}
			a.foo:hover
			{
			background:#690;
			}
		</style>
	</head>
	<body>
		<a href="#" class="foo"> Transition me !</a>
	</body>
</html>


اوك تمام
ده اللى كلنا بنعمله بس لو انا واحد عاوز اعمل شىء مختلف شويه
عارفين الفلاش لما اجى ف كل فريم واغير لون الخلفيه مثلا لباتون او لينك بحيث ان اللون يتغير بالتدريج ؟
اهو انا عاوزه ده من غير فلاش عاوزاه بالسى اس اس

هل اقدر اعمله ؟!

 🙂 مفيش شىء مستحيل
طب اعمله ازاى ؟

هعمله بالترانزيشنز/الانتقالات
تمام يبقى انا عرفت الترانزيشنز حالا انها بتسخدم  لما اعمل اى ايفكت/ تاثير ع باتون او لينك او غيرهم

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

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

transition: property  “duration ” == transition width 2s

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

<html>
	<head>
		<style type="text/css">
			a.foo
			{
			background:#9c3;
			-webkit-transition:background 6s; /* safari and Chrome */
			}
			a.foo:hover
			{
			background:#690;
			}
		</style>
	</head>
	<body>
		<a href="#" class="foo"> Transition me !</a>
	</body>
</html>


انا حاليا قبل ما احط الماوس ع اللينك هيكون لون الخلفيه اخضر هنا بقوله انا هعمل الترانزيشن ع الخلفيه وبديها لون اخضر غامق

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

طبعا ممكن تطبق ع اى خاصيه اخرى او اكثر من خاصيه عن طريق دمجهم سوا

مثال
width & height & rotate

<html>
	<head>
		<style type="text/css">
			div
			{
			width:100px;
			height:100px;
			background:red;
			-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* safari and Chrome */
			}
			div:hover
			{
			width:100px;
			height:100px;
			-webkit-transform:rotate(180deg);  /* safari and Chrome */
			}
		</style>
	</head>
	<body>
		<div>Hover over me to see the transition effsct ! </div>
	</body>
</html>

Try With Yourself 😀

                  *********************************************************

Transition Properties

عندنا اربع خصائص بتستخدم مع الترانزيشنز

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

1-transition-property

transition-property: none|all|property;

من اسمها هى الخاصيه اللى هطبق عليها الترانزيشن سواء
width, height , background ,……,etc

بتاخد قيم اما انها ماتعملش اى الترانزيشنز وطبعا بحتاجها ف حالات معينه

او انها تطبق ع كل البروبرتز او تطبق  ع بروبرتى معينه وف الحاله دى بكتب اسمها

2-transition-duration

transition-duration: time;

وهى المده اللى هياخدها الترانزيشنز عشان يتنفذ
مثال لو هغير لون من ازرق لاسود مثلا الانتقال او التدريج بيبقى ف فتره اد ايه
هل ثانيه ولا اتنين ولا اكتر

3-transition-timing-function

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

ازاى السرعه اثناء الترانزيشن بتكون  ودى بتاخد قيمه من القيم دى

(ease (Default value) ,linear, ease-in, ease-out, ease-in-out, and cubic-bezier)

4-transition-delay

transition-delay: time;

بيحدد الوقت اللى الترانزيشن هيبدء فيه الديفولت بتاعه “صفر” اى انه يبدء الترانزيشن

علطول , ممكن اخلى الترانزيشن يتاخر شويه ثانيه او اتنين وهكذا

<html>
	<head>
		<style type="text/css">
			div
			{
			width:100px;
			height:100px;
			background:red;
			-webkit-transition-property:width ;
			-webkit-transition-duration:1s;
			-webkit-transition-timing-function:linear;
			-webkit-transition-delay:2s;
			}
			div:hover
			{
			width:200px;
			}
		</style>
	</head>
	<body>
		<div> </div>
	</body>
</html>

                  *********************************************************

Shorthand transition

دى طريقه مختصره لكتابه الكود بدل ما اكتب كل بروبرتى وقيمتها لا هعمل طريقه مختصره بحيث انى اكتب القيم بس

طب نجرب نفس المثال السابق بس بالطريقه المختصره دى

<html>
	<head>
		<style type="text/css">
			div
			{
			width:20px;
			height:50px;
			background:red;
			-webkit-transition:width 1s linear 2s;
			}
			div:hover
			{
			width:60px;
			}
		</style>
	</head>
	<body>
		<div> </div>
	</body>
</html>





                  *********************************************************

Good Luck 🙂
Maha Elbasuony

,

Leave a comment

CSS Basics |

  1. Introduction to CSS
  2. How to use CSS
  3. CSS Syntax
  4. CSS Class & Id

1-Introduction to CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language.Its most common application is to style web pages written in HTML and XHTML and others.A CSS file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.


2-How to use CSS

At this point you have some choices of how to use the CSS, either inline , internally , externally.

Inline Styles

Inline styles are defined right in the (X)HTML file along side the element

you want to style. See example below.

Internal Stylesheet

This way you are simply placing the CSS code within the <head></head>
tags of each (X)HTML file youwant to style with the CSS.

The format for this is shown in the example below.

<head>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>

With this method each (X)HTML file contains the CSS code needed to style the page.

Meaning that any changes you want to make to one page, will have to be made to all.

This method can be good if you need to style only one page, or if you want different

pages to have varying styles.

External Stylesheet

An external CSS file can be created with any text or HTML editor such as “Notepad”

or “Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You simply save it

with the .css file extension. You can link to the file externally by placing one of

the following links in the head section of every (X)HTML file you want to style with the CSS file.

<link rel=”stylesheet” type=”text/css” href=“PathTostylesheet.css”/>

Or
you can also use the @import method as shown below

<style type=”text/css”>@import url(Path To stylesheet.css)</style>

Either of these methods are achieved by placing one or the other in the head section
as shown in example below.

<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head>

Or

<head>
<title><title>
<style type=”text/css”> @import url(PathTo stylesheet.css ) </style>
</head>

By using an external style sheet, all of your (X)HTML files link to one CSS file in order to

style the pages. This means, that if you need to alter the design of all your pages, you

only need to edit one .css file to make global changes to your entire website.

3-CSS Syntax

Once you take a look at it. It consists of only 3 parts.

selector { property: value }

The selector is the (X)HTML element that you want to style.

The property is the actual property title.

the value is the style you apply to that property.

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

selector
{
property1: value1;
property2: value2;
property3: value3;
.
.
.
}


Combining Selectors

You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6
{
color: #009900;
font-family: Georgia, sans-serif;
}

.



3-CSS Class & Id


The Class Selector

The class selector allows you to style items within the same (X)HTML element differently. Similiar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an (X)HTML file.

To put it more simply, this sentence you are reading is defined in my CSS file with the following.

p {
font-size: small;
color: #333333
}

Pretty simple, but lets say that I wanted to change the word “sentence” to green bold text, while leaving the rest of the sentence untouched. I would do the following to my (X)HTML file.

<p>
To put it more simply, this <span class=”greenboldtext”> sentence</span> you are reading is styled in my CSS file by the following.
</p>

Then in my CSS file I would add this style selector:

.greenboldtext
{
font-size: small;
color: #008080;
font-weight: bold;
}

The final result would look like the following:

To put it more simply, this sentence you are reading is styled in my CSS file by the following.

The Id Selector

IDs are similar to classes, except once a specific id has been
declared it cannot be used again within the same (X)HTML file.

I generally use IDs to style the layout elements of a page that will only be needed once,

whereas I use classes to style text and such that may be declared multiple times.

The main container for this page is defined by the following.

<div id=”container”>
Everything within my document is inside this division.
</div>

I have chosen the id selector for the “container” division over a class, because I only need

to use it one time within this file.Then in my CSS file I have the following:

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

.

Maha Elbasuony

6 Comments

HTML5 – Local Storage

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:

  1. setItem(key, value)
  2. getItem(key)
  3. removeItem(key)
  4. 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

,

2 Comments