السلام عليكم.. استكمالا لدروس CSS التي أحبها وأود أن أفيد غيري فيها خاصة المبتدئين. هناك ما يسمى بقوالب اختصار الوقت كفكرة ليس بها أي اختلاف ولكن ما يميزها هو لمن يكثرون على نفس النمط كثير. هذا هيدر.. هذا فوتر.. هذا جانب.. وهكذا، هي جمع لبعض الأوامر التي تسهل عليك الكثير، ويمكن لأي شخص التعديل والإضافة … إقرأ المزيد …
السلام عليكم تحية طيبة، هذه التدوينة سوف نتحدث فيها عن الـ HTML5 والجديد فيه بصفة عامة لحين الاستفاضة والتخصص -إن شاء الله تعالى- في المقالات الأخرى. بدأ الحديث منذ فترة عن ال HTML5 والـ CSS 3 لوصلوهم في نفس الوقت في الغالب وارتباطهم ببعض القوى. حتى الآن اغلب المتصفحات الحديثة تدعم هذه التطورات فايرفوكس واوبرا … إقرأ المزيد …
8 يونيو, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس الرابع عشر عن طريقة ربط الملفات الخارجية بخريطة الـ Brainstrom بغض النظر عن نوع الملف الذي تم ربطه .. مشاهدة ممتعة ..
8 يونيو, 2011الضغط Click هو حدث من ضمن الأحداث Events التي يمكن للمستخدم إحداثها على الخريطة – أو أي كائن آخر – للتفاعل معه ، ومنها أيضًا تمرير مؤشر الفأرة على الخريطة أو خارجها أو الضغط مرتين متتاليتين على الخريطة …. إلخ .
لدينا كذلك الأحداث الخاصة مثل : تغيير زوم الخريطة ، ويمكنك معرفة جميع الأحداث الممكنة من هذا الرابط .
لكل حدث ردة فعل وهي الـ function التي ستؤثر على الخريطة ، وقد تحمل هذه الـ functions متغيرات مثل latLng وهي قيمة النقطة التي ضغطت عليها .
لإضافة حدث إلى الخريطة :
قوالب توفر الوقت في CSS
نظرة على الـ HTML5 والجديد فيها
google.maps.event.addListener(map, 'click', function() {
// codes
});
أما العلامات على الخريطة ( البلالين 
) فهي كائن object أحتاج عند تعريفها إلى المعلومات التالية :
١: موقعها بالتحديد ( على خط الطول والعرض ) .
٢ : اسم الخريطة .
ومن الممكن كذلك إضافة معلومات أخرى مثل ..
٣ : المعلومات التي ستظهر عند مرور المؤشر عليها .
٤ : صورة الأيقونة التي ستظهر بدلا من البالون .
var myLatlng = new google.maps.LatLng(31.25982,34.68565);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"هنا العالم العربي !",
icon : "image.png"
});
وهذا كود كامل لإضافة بالون على النقطة التي قمت بالضغط عليها في الخريطة :
function setMarker() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
google.maps.event.addListener(map, 'click', function(overlay,latLng) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
في حال أردت السماح للمستخدم بإضافة بالون واحد فقط يمكنك إضافة هذا السطر بداية الـ function :
map.clearOverlays();
وفي حال أردت حفظ قيمة الـ Lat والـ Lng في قاعدة بيانات أو ملف XML استعن بأداة مربع النص
<input type="text" id="lat" value="" /> <input type="text" id="lng" value="" />
ليصبح الكود كاملاً :
<html>
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=<em>true_or_false</em>&amp;key=ABQIAAAApGxVMx8Y2JXexxqlVql-PBRlP00RlZyqDBcg1q9-cyhfXS1xnBR4hbaquE1rSdO5gPZOJ6rMUczI8g" type="text/javascript"></script>
<script type="text/javascript">
function createMap()
{
var mapCenter= new google.maps.LatLng(31.25982,34.68565);
var mapOptions=
{
zoom:13 ,
center: mapCenter ,
mapTypeId : google.maps.mapTypeId.HYBIRD
}
var myMap = new google.maps.map(document.getElementById('mapDiv') , mapOptions);
google.maps.event.addListener(muMap, 'click', function(overlay,latLng) {
myMap.clearOverlays();
var marker = new google.maps.Marker({
position: latLng,
map: myMap
});
<pre>document.getElementById('lat').value = latLng.lat();
document.getElementById('lng').value = latLng.lng();
}
}
</script>
</head>
<body onLoad="CreateMap">
<div id="mapDiv" style="height:300px; width:300px">
</div>
<input type="text" id="lat" value="" />
<input type="text" id="lng" value="" />
</body>
</html>
28 مايو, 2011
سأتجاوز المقدمات الطويلة التي توضح الأهمية التي اكتسبتها خرائط جووجل على مستوى تطبيقات الويب أو الجوال في الآونة الأخيرة ، فهذا يحتاج إلى مقالة مستقلة ومحتوى الويب يضم الكثير منها ، وسأدخل في الدرس مباشرة .
هذا الدرس سوف يقدم لك إن شاء الله مفاتيح مبدئية تساعدك على تعلم البرمجة بالاستعانة بخرائط جووجل ، ثم بعد ذلك يمكنك التوجه إلى القراءة حول المجال الذي تهتم به بالتحديد : تطبيقات الأيفون – تطبيقات الأندرويد – تطبيقات الويب – خدمات الويب …. إلخ .
تحتاج لأن تكون لديك خلفية ولو بسيطة في اللغات والتقنيات التالية :
١ : javascript .
٢ : DOM .
٣ : Object Orinted Programming .
كيف تفكر خرائط جووجل ؟
قبل خرائط جووجل كنّا نعتمد على الخرائط الورقية ، الكرة الأرضية مفرودة على مساحة مستطيلة تعرض عليها الحدود والمعالم الجغرافية بنسبة رياضية دقيقة ، ونستطيع تحديد مكان معين بدقة على وجه هذه الخريطة بقيمة الزوج المرتب الناتج عن خطوط الطول وخطوط العرض Latitudes and Longitudes .
خرائط جووجل تفعل ذلك أيضًا وبشكل مشابه تمامًا ، لكنّ الفارق بينها وبين الخرائط الورقية هي تقديمها لميزات إضافية منها :
١ – أنواع مختلفة من الخرائط Maps Types .
٢ – التفاعلية بين المستخدم والخريطة UI Control Elements .
٣ – تعليم الأماكن على الخريطة Overlay .
٤ – الأحداث Events .
٥ – الوظائف البرمجية والاستفادة من جداول البيانات .
.
.
تعاملك مع خرائط جووجل كمبرمج أو مطور يعني تعاملك مع Google maps API ، ولذلك أنت تحتاج لاستدعاء ملف الجافاسكربت للوصول إلى أوامر هذه الواجهة .
وتستطيع ذلك عبر تسجيل نطاق موقعك من هنا ليتم إنشاء ما يعرف بـ API Key ، قم بنسخ الكود المخرج واستدعاءه في رأس الصفحة ، كمثال :
<head> <script src="http://maps.google.com/maps?file=api&v=2&sensor=<em>true_or_false</em>&key=ABQIAAAApGxVMx8Y2JXexxqlVql-PBRlP00RlZyqDBcg1q9-cyhfXS1xnBR4hbaquE1rSdO5gPZOJ6rMUczI8g" type="text/javascript"></script> </head>
يمكنني برمجة الخرائط عبر الكائنات والعمليات المتورثة من الكائن الرئيسي google.maps وهي كثيرة جدًا ، لكني سأورد هنا أهمّها :
كائن الخريطة .
* google.maps.Map(options)
نوع الخريطة .
* google.maps.MapTypeId.VALUE
الزوج المرتب من خطوط الطول والعرض .
* google.map.LatLng(Lat value , Lng value) .
عملية إضافة علامة في الخريطة .
* google.map.Marker({options})
نافذة المعلومات الصغيرة التي تظهر على الخريطة .
* google.map.InfoWindow()
لأفرض أني أريد إنشاء خريطة للعالم العربي لأضع علامات على أهم المعالم التاريخية فيها .
كيف أحدد حدود الخريطة التي أود إنشاءها بينما جووجل تقدم لي خريطة بحجم العالم ؟!
الحل بسيط يتم ذلك عن طريق :
* تعريف حاوية <div> للخريطة وتحديد طول وعرض لها .
* تحديد مركز الخريطة عن طريق خاصية center التي تحمل قيمة الزوج المرتب LatLng لنقطة مركز الخريطة .
من أين أحصل على هذه القيمة ؟
هناك الكثير من المواقع الخدماتية التي تسمح لي بالحصول على هذه القيمة إذا ما أدخلت اسم الدولة أو المدينة أو المنطقة .
بمجرد إدخالي لاسم المنطقة Middle East سوف أحصل على قيمة مركز الشرق الأوسط وهي : 34.68565 للطول ، و 31.25982 للعرض .
بهذا فقط أستطيع إنشاء خريطة جووجلية ، لكن ما نفعله غالبًا هو تحديد خصائص الخريطة البارزة كذلك وهي :
* تحديد عدسة القرب من الخريطة عن طريق خاصية zoom وهي قيمة عددية تتراوح من ٠ إلى ١٨ حيث صفر هي نظرة بعيدة جدا للخريطة لا تظهر فيها أي ملامح ثم يتزايد القرب حتى أصل إلى ١٨ .
* mapTypeId نوع الخريطة .
قيمة نصية محدودة بأربع قيم وهي :
الخرائط العادية ذات البعدين وتعرض أسماء المدن والطرقات والمعالم .
ROADMAP
خرائط الأرض مصورة مسبقا .
SATELLITE
مزيج من النوعين السابقين حيث هي خرائط مصورة تعرض أسماء المدن والطرقات والمعالم.
HYBRID
عرض ملامح الخريطة جغرافيًا ، الجبال والبحار والهضبات والمرتفعات .. إلخ .
TERRAIN
وهذا كود إنشاء خريطة بسيطة جدا وبدائية للشرق الأوسط :
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=<em>true_or_false</em>&key=ABQIAAAApGxVMx8Y2JXexxqlVql-PBRlP00RlZyqDBcg1q9-cyhfXS1xnBR4hbaquE1rSdO5gPZOJ6rMUczI8g" type="text/javascript"></script>
<script type="text/javascript">
function createMap()
{
var mapCenter= new google.maps.LatLng(31.25982,34.68565);
var mapOptions=
{
zoom:13 ,
center: mapCenter ,
mapTypeId : google.maps.mapTypeId.HYBIRD
}
var myMap = new google.maps.map(document.getElementById('mapDiv') , mapOptions);
}
</script>
</head>
<body onLoad="CreateMap">
<div id="mapDiv" style="height:300px; width:300px">
</div>
</body>
</html>
22 مايو, 2011السلام عليكم
مرحبا مرة أخرى ، أعتذر بشدة عن تأخير الجزء الثاني من الدرس لظروف انشغالي 
نستأنف اليوم الدرس الثاني لإنشاء سلة مشتريات بواسطة تقنية ASP.Net وأي لغة برمجية تتوافق معها – C# كمثال – .
كنا قد استعرضنا في الدرس السابق هذه الدوال التالية :
١ : دالة إنشاء قاعدة بيانات تخيلية جديدة .
٢ : دالة قراءة قاعدة بيانات موجودة مسبقًا في جلسة العمل .
٣ : دالة اختبار وجود العنصر المراد إضافته في سلة المشتريات .
٤ : دالة إضافة العنصر إلى سلة المشتريات .
بقي أمامنا شرح التعامل مع سلة المشتريات بعد أن أتم العميل إضافة جميع السلع التي يود شراءها .
استعراض سلة المشتريات في جدول .
* عرض معلومات البضائع الذي اختار العميل شراءها .
* إتاحة تعديل كمية السلعة أو حذفها من القائمة .
وهذا يعني إنشاء أدوات ASP.Net بشكل برمجي في الـ code behind ومن ثمّ ربطها بدوال التحديث والحذف .
إذاً لدينا في هذه النقطة ٣ دوال ، دالة لعرض السلع ، دالة لحذف السلعة ، دالة لتحديث كمية السلعة .
١ : دالة عرض السلع
سأجزئ الدالة هذه إلى ٣ أجزاء ليسهل فهمها :
أولا / استخدام أداة Table وتعريفها وتعبئة الصف الأول منها برمجيا .
protected void ShoppingCartView()
{
// تعريف أداة الجدول
Table shoppingTableD = new Table();
// منحها Id خاص
shoppingTableD.ID = "shoppingTableD";
// تعريف الصف الرأسي : اسم الصنف - السعر - الكمية .. إلخ
TableRow headRow = new TableRow();
// تعريف ٤ خانات خاصة بهذا الصف
TableCell headNameCell = new TableCell();
headNameCell.Text = "اسم الصنف";
TableCell headPriceCell = new TableCell();
headPriceCell.Text = "سعر الصنف";
TableCell headQuantityCell = new TableCell();
headQuantityCell.Text = "العدد";
TableCell headDeleteCell = new TableCell();
headDeleteCell.Text= "حذف";
// إضافة الخلايا للصف
headRow.Controls.Add(headNameCell);
headRow.Controls.Add(headPriceCell);
headRow.Controls.Add(headQuantityCell);
headRow.Controls.Add(headDeleteCell);
shoppingTableD.Controls.Add(headRow);
19 مايو, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس الحادي عشر عن طريقة وضع الروابط لرابط العناصر بالصفحات أو الملفات الخارجية أو ربط العناصر مع بعضها البعض .. مشاهدة ممتعة ..
16 مايو, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس الحادي عشر عن طريقة وضع الروابط لرابط العناصر بالصفحات أو الملفات الخارجية أو ربط العناصر مع بعضها البعض .. مشاهدة ممتعة ..
5 مايو, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس الحادي عشر عن طريقة وضع الروابط لرابط العناصر بالصفحات أو الملفات الخارجية أو ربط العناصر مع بعضها البعض .. مشاهدة ممتعة ..
1 مايو, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس العاشر عن إضافة الصفحات للعمل على أكثر من Brainstorm في المشروع الواحد .. مشاهدة ممتعة ..
30 أبريل, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس التاسع عن إضافة الحدود بين أكثر من نقطة في الـ Brainstorm مشاهدة ممتعة ..
29 أبريل, 2011السلام عليكم ورحمة الله وبركاته سنتكلم في الدرس الثامن عن طريقة وضع الملخصات داخل الـ Brainstorm في أكثر من مكان وذلك لوضع خلاصة حول مجموعة من النقاط تمثل شئ معين .. مشاهدة ممتعة ..
