Archive for category Technologies

Hear Web part 1 (intro)


هل يمكننا تصفح مواقع من خلال جهاز الراديو مثلا؟؟
ان كانت الاجابة لا ستكون مقنعة جدا اما لو كانت نعم فكيف سنرى الكلام والصور والالوان واللنكات مثلا؟؟
السؤال الاصعب هو ماذا على المصمم ان يفعل ليجعلك تتصفح موقع بدون شاشة؟؟

sound


الحقيقة ان الاجهزة الصوتية تستطيع تصفح المواقع اذا توافر بها اتصال بالانترنت ومتصفح يناسب الجهاز مثل الاجهزة التى يستخدمها المحرومون من البصر ولكن هل سيستخدم المصمم ادوات اخرى لتصميم المواقع الصوتية؟؟ الاجابة لا نفس ادوات التصميم تستخدم
HTML , CSS , javascript
المتصفحات تقوم بتحميل الاتش تى ام ال ثم قراءته للمستخدم والمتصفحات الرائدة فى هذا المجال هما
Opera 9 , firevox not firefox


دا لنك احصائيات عن البراوزرات على نظم التشغيل المختلفة التى بتدعم المواقع الصوتية
http://www.codestyle.org/css/media/aural-BrowserSummary.shtml


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


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

@media


تقوم هذه الخاصية باعطاء التنسيق المناسب حسب نوع الجهاز المتصفح وتأخذ القيم
aural , braille , embossed , handheld , print , projection , screen , tty , tv


@media screen{
/*هنا توضع التنسيقات الخاصة باجهزة الكمبيوتر العادية*/
}
@media handled{
/*هنا توضع التنسيقات الخاصة بالاجهزة المحمولة*/
}
@media aural{
/*هنا توضع التنسيقات الخاصة بالاجهزة الصوتية التى نتحدث عنها*/
}


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

1- 3D sound Effects


تستطيع عمل مؤثرات صوتية ثلاثية الابعاد على البرنامج

3D Sound Effects

3- User Interaction


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

interaction

3- Speak Controlling


تستطيع التحكم فى نبرة و جودة الصوت والاعدادات الصوتية

Sound control

..التفاصيل فى الجزء القادم


ماكان فيه خطأ فمنى ومن الشيطان وماكان فيه توفيق فمن عند الله

aHmEd DaIf

, , , , , , , , , , , , , , , , , , , , , , ,

4 Comments

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

introduction to Java Script (part 1)

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

ما معني جافا سكريبت ؟

 تطلق كلمة “سكريبت” على النصوص التي تصف عملا أو حدثا معينا. وتستخدم الكلمة كثيرا عند التحضير للأعمال الفنية حيث يتم تحويل الفكرة أو القصة إلى سكريبت

في لغة الكمبيوتر تطلق هذه الكلمة على البرامج التي عادة ما تكون أقصر من البرامج الكبيرة كبرامج التشغيل والبرامج التطبيقية الأخرى. كما أن عمل هذه البرامج الصغيرة المتكاملة عادة ما يكون محدد بغرض معين ومهمة محددة من أجل أن تكون الصفحة أكثر جاذبية وإبهارا واكثر ديناميكية .

الفرق بين جافا وجافا سكريبت؟

جافا عبارة عن لغة برمجة بطريقة التوليف Compiled Programming Language وهي مشابهة للغة البرمجة C أو C++. وهي من القوة للدرجة التي يمكنك فقط أن تكتب بها وتنتج برامج تطبيقية صغيرة لعمل أو أعمال محددة. تسمى هذه البرامج التطبيقية الصغيرة باسم “أبليتس” applets. وتقوم بتأدية مهمات قليلة محددة. إن جافا تتطلب أيضا جهدا معتبرا حتى يكون باستطاعتك التمكن منها.
جافا سكريبت مبنية أيضا على لغة البرمجة جافا ولكنها تختلف عنها باساليب عديدة منها أنها أكثر بساطة من لغة البرمجة الأصيلة ، ولهذا فهي نسبيا أسهل بالتعلم. والواقع أنها تميل أكثر لميزان HTML منها عن لغات البرمجة الحقيقية مثل جافا .

تاريخ جافا سكريبت

قامت شركة نتسكيب عام 1995 بابتكار لغة تدعي “Mocha” والتي سميت بعد ذلك بـ”LiveScript” وفي النهاية استقرت علي “java script” لانها كان تشبه الي حد ما لغة الجافا واختصارها هو js .

نترك التاريخ الان ونبدأ بتعلم اسياسيات الـjs

طرق كتابة الجافا سكريبت

body أو في الـ head ويمكن كتابة هذا التاج في الـ  script ويكون داخل تاج(internal) كتابته بداخل الصفحة-

 ثم استدعائه داخل الصفحة المراد وضعه بها عن طريق هذا الكود  js وحفظه بامتداد(external) كتابته في ملف خارجي 

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

سنتسخدم الطريقة الاولي وسوف نتسخدم برنامج notepad لكتابة اول صفحاتنا باستخدام js , في البداية ننشئ ملف تكست جديد ونسميه اي اسم بامتداد .html ونكتب بداخله هذا الكود

<html>
       <head>
       </head> 
      <body>
            <script type=“text/javascript”>
                     document.write(‘hello world!’);
            </script>   
       </body>
</html>

اذا حفظنا الكود وفتحنا الملف باستخدام اي متصفح ستظهر لك رسالة hello world
 شرح الكود : اكواد الجافا تكتب بداخل تاج والكود الوحيد الذي كتبناه هو كود طباعة جملة hello world
 و يفضل ان ينتهي كل امر بفاصلة منقوطة(;)

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

jsوالان نبدأ بشرح اهم نقاط اساسية في الـ

اولا : المتغيرات

var يمكنك تعريف متغير اي كان نوعه عن طريق كلمة
var x=5; : مثال

(loops)ثانيا: التكرارات 

التكرارات في الجافا سكريبت هي نفسها التي في الـc# والجافا والـ++c وسخنوض فيها سريعا

1-for

for  (var=startvalue ; var<=endvalue ; var+=increment)
{
      Code to be executed
}

2- while

while  (var<=endvalue)
{
Code to be executed
}

 do while -3

do
 {
       Code to be executed
}
while  (var<=endvalue)

 if – if else :ثالثا

ايضا هي نفسها التي في معظم لغات برمجة

if

If  (condition)
 {
       Code to be executed if the condition is true
}

If else

if  (condition)
{
code to be executed if the condition is true
}
else
{
code to be executed if the condition is not true
}

(function) رابعا : الدوال 

الدوال تقوم باداء وظيفة معينة عن استدعائها في الصفحة وتبقي خاملة بدون وظيفة اذا لما لم تستدعي و لعمل دالة لاداء وظيفة معينة نكتب الكود التالي

Function functionName ( )
{
       Code to be executed
}

( POPUP boxes) خامسا : النوافذ الاضافية

وهي شاشات اضافية تظهر للسمتخدم للتنبية او لطلب ادخال قيمة معينة وسنتعلم اليوم ثلاث انواع من النوافذ

Alert Box :اولا

وهي شاشة تظهر للتنبيه بشئ ما و يتم كتابتها كالأتي
Alert();
: مثال

<html> 
      <body>      
            <script type=“text/javascript”>         
                  Alert(“hello user”);
            </script>   
      </body>
</html>

Confirm Box :ثانيا

وهي نافذة مثل نافذة alert ولكن مضاف اليها زر ok و زر cancel
و يتكتب كودها هكذا :
;(“confirm (“welcome
هذا الامر يأخذ قيمة true اذا ضغط المستخدم علي زر ok و false اذا ضغط علي cancel

مثال يوضح ذلك

<html>
      <body>
              <script type=“text/javascript”>           
                    var x=confirm(“how are you ?”);           
                   if (x==true)
                   {
                         document.write(“good”);
                   }
                  else  
                   {
                         document.write(“why?”);
                  }
           </script>
   </body>
 </html>

شرح الكود : عرفنا متغير x علي انه القيمة الناتجة من نافذة confirm اي انها ستصبح true اذا ضغط اليوزر علي ok وfalse اذا ضغط علي cancel بعد ذلك كتبنا اذا كانت قيمة x بتساوي true اطبع كلمة good و اذا كانت غير ذلك “اي false” اطبع why ؟

 Prompt Box :ثالثا

و هي نافذة تأخذ input من المستخدم وطريقة كتابة الكود كالأتي
;(“الرسالة التي ستظهر في النافذة” ,”القيمة الافتراضية التي ستظهر في البداية”)Prompt
سنوضح ذلك بمثال

<html>
    <body>
           <scripttype=“text/javascript”>
                   var x =prompt(“x=??”,”0″);
                   document.write(x);
           </script>
   </body>
</html>

شرح الكود : عرفنا متغير سيأخذ القيمة التي سيدخلها المستخدم من نافذة prompt وبداخل propmt كتبنا الرسالة التي ستظهر في النافذة والقيمة الابتدائية للx وفي النهاية طبعنا قيمة الx

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

Mohamed Fouad

,

11 Comments

No more random, if you are a geek

هل تعرف كيف يتم حساب القيم العشوائية بالبرمجة ؟؟(Random values )

يتم حسابها عن طريق مجموعة من المعادلات المعقدة

وتعتمد المعادلات هذه علي القيمة المدخلة للدالة المسئوله عن اخراج قيم عشوائية

ففي لغة الجافا علي سبيل المثال

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

فكر في هذا جيدا

يمكنك التلاعب  بهذا الموضوع كثيرا

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

كل ما عليك هو فهم هذه المعادلات والبدئ بالعبث معها

لانك عندما تفهم هذه المعادلات وتكسرها لن تعد القيم العشوائية عشوائية

لنرا ما اذا كان هذا الكلام صحيحا؟

فهذا الكود يخرج لك الناتج

1 1 1 1 1 1 1 1 1 1

Random random = new Random(441287210);
for(int i=0;i<10;i++)
System.out.print(random.nextInt(10)+” “);

///////////////////////////////////////////////////////////////

 اما هذا الكود فيخرج لك

0 1 2 3 4 5 6 7 8 9
 
Random random = new Random(-6732303926L);
for(int i=0;i<10;i++)
System.out.print(random.nextInt(10)+” “);
///////////////////////////////////////////////////////////////

وفي النهاية اقول لك انه يمكنك ان تصنع بأستخدام القيم العشوائية البرنامج المشهور

hello world

لنرى هذا الكود

😀
public static void main(String [] args)
{
       System.out.println(randomString(-229985452)+’ ‘+randomString(-147909649));  
}
public static String randomString(int seed){
       Random rand = new Random(seed);
       StringBuilder sb = new StringBuilder();
      for(int i=0;;i++){
           int n = rand.nextInt(27);
          if (n == 0) break;
              sb.append((char) (‘`’ + n));
      }  
      return sb.toString();
}
///////////////////////////////////////////////////////////////
 
NOTE:
       dont forget to import java.util.Random
      😀 😀

finally i say :

           “If you know what is behind your code you can do more fast and intelligent applications

and you can make programming make impossible “.

 
 

thanks for your time

Amar Ashour

, ,

10 Comments

DevTalk1 ….from DevMix

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

السلام عليكم … منذ ان انشأنا هذا الفريق ونحن نؤمن بقيمه الحوار البناء والارتقاء باداءه بالارتقاء بالانشطة التي تهدف الي غايتنا ولهذا … ندعوكم  ان شاء الله لحضور اول دوائر الحوار ومشاركه الاراء والافكار في فريق ديف ميكس يوم الاربعاء الموافق 21 / 9 / 2001 وذلك لمناقشه موضوع ما او تكنولوجيا جديده … ولكن حتي نصبح اكثر مرونه وتفاعل مع كل متابعينا ومحبينا .. طرحنا 3 مواضيع جديده لمناقشه احدهم ان شاء الله وعليك التصويت لاختيار الموضوع المفضل لديك  بالدخول علي جروب الفريق- شارك برايك الان :

DevMix Group

وايضا يمكنك تتبع ديف توك ومعلومات اكثر عنه من هنا :

DevTalk1 Event

ولكن عليك التسجيل معانا لحضور ديف توك

Register Now !!

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

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

🙂 السلام عليكم

, , ,

Leave a comment

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