السلام عليكم
اعزائي القراء اعتذر عن التأخر في نشر هذا الدرس ولكن كنت مشغولا بالعمل والان حصلت على بعض الوقت الذي يمكنني من اكمال نشر الدرس. ان درسنا اليوم سيكون مختلف قليلا حيث اننا سنتعلم كيف نقوم بعمل موقع من دون استخدام اي صورة تماما حيث سنقوم بعمله بأستخدام css3 احدث اللغات العالمية المستخدمة في هذا المجال ولذلك انصح بأستخدام متصفح كوكل كروم او فايرفوكس حتى تستطيع ان ترى مدى قوة هذه اللغة.
لنبدأ الان بعمل فولدر جديد سمه ما تشاء وقم بأنشاء ملفين بداخله بواسطة النوتباد او اي برنامج تحرير نصوص تستخدمه وقم بتسميتهما index.html و style.css .
الان سنضيف بعض الاكواد من ضمنها كود عنوان الموقع والكود الذي سيربط ملف style.css بالموقع لذلك اضف الكود التالي
الى مستند index.htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>موقع شركة</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
الان ضع اسم موقعك في السطر الخامس بدلا من )موقع شركة( .
والان سنضيف وسم المحتوي الذي سيحتوي جميع اقسام صفحتنا وبعد ذلك سنضيف داخله الاقسام الرئيسية الثلاثة التي هي الهيدر او )راس الصفحة ( و المحتوى والفوتر او )اسفل الصفحة( .
اضف الكود التالي الى صفحة index.html :
<body> <div class="headerline"></div> <div class="header"></div> <div class="headerb"></div> <div class=”wrapper”><!--wrapper start--> <div class=”content”><!--content start--> </div><!--content ends--> <div class=”footer”><!--footer start--> </div><!--footer end--> </div><!--wrapper end--> </body> </html>
الان نفتح ملف style.css لنضف بعض التجميلات للموقع .
اضف الكود التالي:
* {
margin:0px;
padding:0px;
}
body {
direction:rtl;
font-family:Arail,Tahoma,sans-serif;
font-size:9pt;
}
.wrapper {
width:900px;
margin:0px auto;
}
وضعنا الان الاعدادات الافتراضية للصفحة حيث قمنا بتنصيف الصفحة في منتصف المتصفح والاعدادات الباقية لاختيار الخط المستخدم وقياسه.
الان نضيف الشعار والازرار وذلك عن طريق اضافة هذين الوسمين الى صفحة html الخاصة بنا .
انسخ التالي في صفحة index الخاصة بك تحت وسم )wrapper):
<div class="logo"><h1><a href="http://almobdaa.com" >المبدع</a></h1></div><!--logo end--> <ul class="nav"> <li><a href="#">الرئيسية</a></li> <li><a href="#">من نحن</a></li> <li><a href="#">عملائنا</a></li> <li><a href="#">اتصل بنا</a></li> </ul><!-- navagtion end-->
الان نضيف خصائص css للشعار وقائمة الازرار.
الصق الكود التالي في ملف style الخاص بك:
.headerline {
background:#cee169 ;
height:6px;
background-repeat:x;
}
.header {
background:#3b3b3b;
height:210px;
}
.headerb {
background: -webkit-gradient(linear, left top, left bottom, from(#d0e36c), to(#97ae2b));
background: -moz-linear-gradient(top,#d0e36c,#97ae2b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e36c', endColorstr='#97ae2b');
height:55px;
}
.logo {
margin-top:-190px;
width:90px;
height:90px;
margin-bottom:103px;
}
.logo h1 a {
color:#fff;
font: arail 18px bold;
text-shadow: 3px 3px 3px #000;
text-decoration:none;
}
ul.nav {
list-style:none;
width:300px;
height:50px;
margin-top:-38px;
}
ul.nav li {
display:inline;
margin-left:10px;
}
ul.nav li a {
text-decoration:none;
color:#fff;
background: -webkit-gradient(linear, left top, left bottom, from(#373737), to(#232323));
background: -moz-linear-gradient(top,#373737,#232323);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373737', endColorstr='#232323');
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul.nav li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#232323), to(#373737));
background: -moz-linear-gradient(top,#232323,#373737);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#232323', endColorstr='#373737');
}
.logo h1 {
-webkit-gradient(linear, left top, left bottom, from(#d0e36c), to(#97ae2b));
-moz-linear-gradient(top,#d0e36c,#97ae2b);
}
الان وضعنا خصائص الخلفية لهذه الازرار والشعار حيث قمنا بعمل خلفية تتدرج من اللون الرصاصي الفاتح الى الرصاصي المسود
عن طريق استخدام webkit-gradient للمتصفحات المبنية على محرك webkit والامر moz-gradient للمتصفحات المبنية على المحرك gecko واستخدمنا هاك لعمل التدرج على كل من متصفحي انترنت اكسبلورر 7 و8 .
ووضعنا حدود دائرية عن طريق -webkit-border-radius لمتصفحات webkit والامر -moz-border-radius لمتصفحات gecko و border-radius للمتصفحات الباقية.
الان نكمل بأضافة محتوى الصفحة عن طريق اضافة الاكواد التالية الى ملف index خاصتنا.
الصق الكود التالي تحت الوسم </ul><!– navagtion end–> :
<div class="body"> <div class="block1"> <h2>العنوان</h2> <p>العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقيةبغرض شرح الحوادث و التنبؤ بحوادث مستقبلية أو سلوك الجمل الطبيعيةو الفيزيائية . غالبا ما تحاول النظرياتالعلمية صياغة هذه الظواهر الطبيعية بشكل رياضيكمي أي بشكل قوانين رياضية . تلعب دوما إجراءات مثل الرصد ، التحريب ، المحاكمة النقدية أسس و أركان تطوير المعرفة العلمية . و لا يعتبر تخصص أو توجه ما بانه علمي ما لم يطبق فيه ما يدعى بالمنهج العلمي. و حسب معتنقة فلسفة التكذيبفإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها. العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقيةبغرض شرح الحوادث و التنبؤ بحوادث مستقبلية أو سلوك الجمل الطبيعيةو الفيزيائية . غالبا ما تحاول النظرياتالعلمية صياغة هذه الظواهر الطبيعية بشكل رياضيكمي أي بشكل قوانين رياضية . تلعب دوما إجراءات مثل الرصد ، التحريب ، المحاكمة النقدية أسس و أركان تطوير المعرفة العلمية . و لا يعتبر تخصص أو توجه ما بانه علمي ما لم يطبق فيه ما يدعى بالمنهج العلمي. و حسب معتنقة فلسفة التكذيبفإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها. العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقيةبغرض شرح الحوادث و التنبؤ بحوادث مستقبلية أو سلوك الجمل الطبيعيةو الفيزيائية . غالبا ما تحاول النظرياتالعلمية صياغة هذه الظواهر الطبيعية بشكل رياضيكمي أي بشكل قوانين رياضية . تلعب دوما إجراءات مثل الرصد ، التحريب ، المحاكمة النقدية أسس و أركان تطوير المعرفة العلمية . و لا يعتبر تخصص أو توجه ما بانه علمي ما لم يطبق فيه ما يدعى بالمنهج العلمي. و حسب معتنقة فلسفة التكذيبفإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها. العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقيةبغرض شرح الحوادث و التنبؤ بحوادث مستقبلية أو سلوك الجمل الطبيعيةو الفيزيائية . غالبا ما تحاول النظرياتالعلمية صياغة هذه الظواهر الطبيعية بشكل رياضيكمي أي بشكل قوانين رياضية . تلعب دوما إجراءات مثل الرصد ، التحريب ، المحاكمة النقدية أسس و أركان تطوير المعرفة العلمية . و لا يعتبر تخصص أو توجه ما بانه علمي ما لم يطبق فيه ما يدعى بالمنهج العلمي. و حسب معتنقة فلسفة التكذيبفإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها.</p> </div><!-- نهاية مربع النص الاول--> <div class="block2"> <h2>العنوان</h2> <p>العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقية و حسب معتنقة فلسفة التكذيب فإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها.</p> </div> <div class="block3"> <h2>العنوان</h2> <p>العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقية و حسب معتنقة فلسفة التكذيب فإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها.</p> </div> <div class="block4"> <h2>العنوان</h2> <p>العلوم كلمة تدل على المعرفةالإنسانيةالمتشكلة بنتيجة الملاحظة و رصد الظواهرالطبيعيةو الإنسانية و وضع الفرضيات، إجراء التجارب، إضافة للمحاكمة المنطقية و حسب معتنقة فلسفة التكذيب فإن هذا يتضمن تشكيل فرضيةقابلية للفحص، يتبعها محاولات مستمرة لتفحص هذه الفرضية عن طريق المحاكمة النقدية ، الملاحظة و التجريب . الفرضية التي تفحص بشدة تحت العديد من الظروف و الشروط و تبقى منطقية و قابلة للتطبيق تكتسب بشكل متزايد موثوقية أكثر فأكثر كتبير قريب من الحقيقة و الواقع ، أي أنها أفضل مقاربة لوصف الواقع الفيزيائي و تاخذ بالتالي صفة النظريةو لكن يبقى هناك احتمال لوجود ملاحظات مستقبلية تدحضها و تثبت بعض الخلل بها.</p> </div> </div>
الان وضعنا الكود الخاص بمحتوى الصفحة من نصوص حيث يمكنك ان تعدل على هذا الكود من حيث اضافة معلومات عن شركتك او منتجات شركتك حيث يمكنك اضافة كل المعلومات بين وسمي >p> و >/p> .
الان سنضيف كود css الخاص بالمحتوى. انسخ الكود التالي الى ملف style.css:
.body {
height:480px;
border-bottom:1px solid #000;
overflow:hidden;
}
.block1 {
height:300px;
border-bottom:1px solid #000;
margin-bottom:10px;
text-overflow: ellipsis;
}
.block2,.block3 {
height:150px;
width:290px;
border-left:1px solid #000;
float:right;
padding:6px;
text-overflow: ellipsis;
}
.block4 {
height:150px;
width:290px;
float:right;
padding-right:3px;
text-overflow: ellipsis;
}
الان سنضيف روابط المشاركة الاجتماعية التي سنعملها من دون استخدام اي صورة تماما حيث سنعمل شعارات المواقع بواسطة css3 .
الان اضف الصق الكود التالي في ملف index.html الخاص بنا:
<div class="share"> <ol class="social"> <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li> <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li> <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li> </ol> </div> </div>
الان سنضيف الكود البرمجي الخاص بلغة css لعمل شعارات المواقع :
.share {
width:300px;
margin:0px auto;
}
ol {
list-style:none;
padding:0;
margin:0;
overflow:hidden;
font:0.875em/1 Arial, sans-serif;
width:500px;
height:90px;
float:right;
}
ol li {
float:right;
width:66px;
height:66px;
margin:20px 20px 0 0;
}
ol li a {
display:block;
width:64px;
height:64px;
overflow:hidden;
border:1px solid transparent;
line-height:64px;
text-decoration:none;
/* css3 */
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px; /* standards version last */
}
ol li a:hover,
ol li a:focus,
ol li a:active {
opacity:0.8;
border-color:#000;
}
/* ------------------------------------------------------------------------------------
-- RSS
------------------------------------------------------------------------------------ */
.rss a {
position:relative;
width:60px;
padding:0 2px;
border-color:#ea6635;
text-transform:lowercase;
text-indent:-186px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#e36443;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
background:-moz-linear-gradient(top, #f19242, #e36443);
background:linear-gradient(top, #f19242, #e36443); /* standards version last */
}
/* create circle */
.rss a:before {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#fff;
/* css3 */
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px; /* standards version last */
}
/* create the two arcs */
.rss a:after {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:22px;
height:22px;
border-style:double;
border-width:24px 24px 0 0;
border-color:#fff;
/* css3 */
-moz-border-radius:0 50px 0 0;
-webkit-border-top-right-radius: 50px;
border-radius:0 50px 0 0; /* standards version last */
}
/* ------------------------------------------------------------------------------------
-- FLICKR
------------------------------------------------------------------------------------ */
.flickr a {
position:relative;
border-color:#d2d2d2;
text-indent:-9000px;
font-size:108px;
font-weight:bold;
color:#fff;
background:#fff;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));
background:-moz-linear-gradient(top, #fff, #d2d2d2);
background:linear-gradient(top, #fff, #d2d2d2); /* standards version last */
}
/* create blue circle */
.flickr a:before {
content:"\00a0";
position:absolute;
top:50%;
left:30%;
width:20px;
height:20px;
margin:-10px 0 0 -10px;
background:#085ec5;
border:1px solid #003c84;
/* css3 */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px; /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#005cc6), to(#003d83));
background:-moz-linear-gradient(top, #005cc6, #003d83);
background:linear-gradient(top, #005cc6, #003d83); /* standards version last */
}
/* create pink circle */
.flickr a:after {
content:"\00a0";
position:absolute;
top:50%;
right:30%;
width:20px;
height:20px;
margin:-10px -10px 0 0;
border:1px solid #ba0060;
background:#fd1e93;
/* css3 */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px; /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#fd1e93), to(#cb026c));
background:-moz-linear-gradient(top, #fd1e93, #cb026c);
background:linear-gradient(top, #fd1e93, #cb026c); /* standards version last */
}
/* ------------------------------------------------------------------------------------
-- DELICIOUS
------------------------------------------------------------------------------------ */
.delicious a {
position:relative;
border-color:#d2d2d2;
text-align:center;
text-indent:-9000px;
font-size:108px;
font-weight:bold;
color:#fff;
background:#fff;
/* css3 */
/* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d1d1d1));
background:-moz-linear-gradient(top, #fff, #d1d1d1);
background:linear-gradient(top, #fff, #d1d1d1); /* standards version last */
}
/* create top right square */
.delicious a:before {
content:"\00a0";
position:absolute;
top:0;
right:0;
width:30px;
height:30px;
border:1px solid #0060ce;
background:#085ec5;
/* css3 */
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px; /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#0060ce)), to(#003b7f));
background:-moz-linear-gradient(top, #0060ce, #003b7f);
background:linear-gradient(top, #0060ce, #003b7f); /* standards version last */
}
/* create bottom left square */
.delicious a:after {
content:"\00a0";
position:absolute;
bottom:0;
left:0;
width:30px;
height:30px;
border:1px solid #000;
background:#000;
/* css3 */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px; /* standards version last */
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#212121), to(#000));
background:-moz-linear-gradient(top, #212121, #000);
background:linear-gradient(top, #212121, #000); /* standards version last */
}
.clear {
clear:both;
}
الان سننهي برمجة الصفحة بأضافة اخر الاسطر المطلوبة حيث سنضيف وسم الفوتر وحفظ الحقوق وسنضيف الشكل الخاص بالفوتر.
انسخ الكود التالي في ملف html الخاص بك :
<div class="clear"></div> <div class="footer"> <div class="footerrights"> <p>جميع الحقوق محفوظة<a href="http://almobdaa.com">المبدع</a> 2010</p> </div> </div> </body> </html>
الان سنضيف الكود الخاص بملف css .
اضف الكود التالي الى ملف style.css الخاص بك:
.footer {
background:#3b3b3b;
border-top:#cee169 6px solid;
height:55px;
}
.footerrights {
margin:0px auto;
width:900px;
margin-top:10px;
color:#fff;
text-align:center;
}
.footerrights a {
color:#fff;
font-weight:bold;
}
اذا كان لديك سؤال او استفسار سيسرني الاجابة عليه في التعليقات.
شارك المعرفة:
اذا اعجبتك التدوينة, سوف اقدر ان تشارك التدوينة مع العالم .
يمكنك ايضا المشاركةبخلاصات المدونة و يمكنك ايضا ان تتبعني على تويتر لمعرفة اخر التحديثات.
الكاتب:احمد ابوكلل
احمد ابوكلل المدون المسؤول عن المبدع وهو مصمم ومبرمج يعمل مع شركة البطاقة الذكية العراق مهتم باحدث التقنيات العالمية والمحلية وتقنيات الويب الحديثة يمكنك ان تتبعه على تويتر
يعطيك ألف عافية لكن راجع آخر التدوينة يبدو هناك مشكلة
تحياتي
السلام عليكم
تم اصلاح الخطا وشكرا على التنبيه