ستخرج بمعلومات ، كتلك التي يمتلكها كبار مصممي مواقع الويب


  • استخدم تقنيات الجافا " لتوجيه الزوار " :
    لعل من المناسب جدا ً لمن يهتمون بأن يكون شكل الموقع ملائم تماما ً ومتشابه 100 % في جميع الأجهزة ، تصميم أكثر من تصميم ولعل هذه الطريقة لا تُستخدم إلا في تصاميم الجرافكس المُراد أن تظهر في جميع الأجهزة بنفس الشكل ! ، هذا الأمر يلزم مصمم الموقع تصميم تصميمان أو ثلاثة لتلائم أكثر من قياس ، فتصميم لـ 800 * 600 ، وتصميم لـ 1024 * 768  وهكذا " تلميح : قم بتصميم التصميم الأكبرفي البداية ثم قم بعمل إعادة تحجيم له ، لكيلا تتأث جودة التصميم " ... إلى هنا الأمر قد يبدو خال ٍ من التعقيد ، ولا يوجد تساؤل في بالك سوى :
    كيف أعرف قياس العرض لزائر موقعي ؟
    الجواب : هناك تقنيات جافا قد تفيدك في هذا الأمر بالذات سأطرح لك اثنان منها هنا ! :)

    - كود اخبار الزائر بمقاس عرض الشاشة :
    وهنا يمكنك أن تقوم بعمل صفحة توجيه عند الدخول المباشر لموقعك وإدراج هذا الكود في صفحتك ، وتقوم بوضع وصلتين للتصاميم أحدهم لـ 800 * 600 ، والآخر لـ 1024 * 768  ، وتكتب عبارة " اختر الوصلة المناسبة لمقاس شاشاتك ! " :) وبذلك يدخل الزائر ولايواجه أي صعوبات إن شاااء الله تعالى :) .
     
    كود إخبار الزائر بمقاس عرض شاشته             " الكود باللون الأحمر كود متغيّر "

    document.write(screen.width + " x " + screen.height)



    - كود توجيه الزائر تلقائيا ً :
    وهذا الكود أفضل وأكثر احترافا ً من السابق ، حيث يقوم الكود بالكشف عن مقاس عرض الشاشة لزائر الصفحة عن طريق نفس الكود بواسطة أحد دوال الجافا ، بعد ذلك يوجه الزائر من دون أن يعلم ، للصفحة التي تناسب مقاس عرضه .. وإلا طبع له رسالة تبين له أن مقاس شاشة العرض لديه لا تتوافق مع الموقع أو أي شئ من هذا القبيل .
     

    كود توجيه الزائر تلقائيا ً إلى الصفحة التي تناسب  مقاس عرض شاشاته           " الكود باللون الأحمر كود متغيّر "

    <html>
    <head><title>
    عنوان صفحتك هنا </title>
    <
    /head>
    < script language = "JavaScript" >
    <!--
    var screen_width = null ;
    var screen_height = null ;
    var resolution = null ;
    // -->
    <
    /script>
    <script language = "JavaScript1.2">
    <!--
    screen_width = screen.width;
    screen.height = screen.height;
    //-->
    <
    /script>
    <script language = "JavaScriptg1.1" >
    <!--
    if (navigator.appName == "Netscape" && navigator.javaEnabled()){
    var toolkit = java.awt.Toolkit.getDefaultToolkit();
    if (screen_width) {
    var screen_size = toolkit.getScreenSize();
    screen_width = screen_size.width ;
    screen_heigth = screen_size.height ;
    }
    resolution = toolkit.getScreenResolution();
    }
    //-->
    <
    /script>
    <script language = "JavaScript" >
    <!--
    if ( screen_width && screen_height ) {
    if ( !resolution ){
    if ( screen_width <700)
       location.href  = "page1.htm";
    else if ( screen_width <900 )
       location.href = "page2.htm";
    else
       location.href = "page3.htm"
    } else {
    if ( resolution <80 )
       location.href = "page4.htm";
    else
       location.href = "page5.htm";
    }
    } else {
    document.write ("<table width=486><tr><td><font color = 'red'>"
    + " You do not have Java proply installed in order to facilitate "
    + "parsing your screen size and resolution ."
    + "<
    /font></td></tr></table>");
    }
    //-->
    <
    /script>
    <
    /html>



  • استخدم النوافذ المخصخصة !  " الطائرة "  :
    هل جربت يوما ً خلال تجوالك على الانترنت أن تضغط على وصلة ما ، ووجدت أن محتواها خرج لك عن طريق نافذة طائرة كالتي تخرج في إعلانات كثير من المواقع ، هذه الطريقة قمت بإيرادها في درس " حفظ الموقع من السرقة واللطش " ، وأجدها كذلك تصلح هنا في درس التحكم في القياسات ، إن من الطرق الفعّالة في هذا الأمر هي هذه الطريقة ، تفيدك في إجبار الزائر في فتح مقاس العرض المناسب لك ، لكن ينبغي عليك جعل هذه الصفحة صغيرة إلى حد ما ، ويمكنك التحكم في خيارات هذه النافذة من إظهار للأدوات وإظهار لشريط الإنزلاق وإعادة تحجيم النافذة . كل ما عليك فعله هو  إدراج الكود الرئيسي الخاص بصنع النافذة وتشكيلها ، ثم بعد ذلك عمل ارتباط تشعبي بواسطة الكو الثاني .
    مثال :
     

    كود صنع النافذة                            " الكود باللون الأحمر كود متغيّر "


    <script language = "JavaScript" type= "text/javascript">
    <!--
    function NewWindow(link)
    {
    var Window = window.open(link,'Window','toolbar = no , location = no , status = no , menubar = no , resizeable=yes ,scrollbars =yes , width=200 ,height=200');
    }
    // ->
    </script>


    بعد ذلك استعمل هذا الكود لعمل الارتباط :
     

    كود لعمل الوصلات                   " الكود باللون الأحمر كود متغيّر "

     <a href ="javascript:NewWindow('عنوان الصفحة.htm')"> اسم الوصلة </a><br />



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


جديدنا القادم ... في بناء المواقع   " إن شاء الله تعالى "   :
- نحو موقع ناجح - 2
  
( سنناقش مواضيع هامة مثل الجداول و استعمال أوراق الأنماط لتحديد المواضع ، واستعمال الأطر في المواقع ) .