كود تضمين ملف html داخل ملف html

السلام عليكم ورحمة الله وبركاته

 اليوم اتيت لكم ب كود يجعلك قادرا على تضمين ملف اتش تي ام ال داخل ملف اخر والكود هو

<link rel="import" href="stuff.html"

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

درس عن الjson في الjquery

السلام عليكم

اليوم اتيت لكم بدرس عن ال json 
JSON (an acronym for JavaScript Object Notation) 
الjson الفايدة منه انه يخلي سهل التعامل مع البيانات واكبر الشركات مثل الفيس بوك وقوقل تستخدمه 
يجعل البيانات سهلة القراءة بالنسبة للبشر
---------------------------------------------------------
طبعا هي عبارة عن objects بس انا بشرحها بشرح سهل
هو زي ماتقول متغير داخله قيم وتقدر تضع القيم داخلها قيم والقيم داخلها قيم ثانية الى مالا نهاية
طيب كيفية كتابة الكود

رمز PHP:

<script>
    var x = {name:'ali',lesson:'JSON'}
    document.write(x.name);
    </script>  

طبعا طريقة كتابة الكود هي في البداية وضعت متغير اسمه x وداخله json .الjson تفتح اقواس معكوفة{}
وتضع فيها الkey والقيمة الkey زي عبارة مثلا اقول الإسم :القيمة علي زي كده وتفصل بينهم بفاصلة
طيب هذا اول سطر ثاني سطر عبارة عن كتابة المتغير في الصفحة بس كيف نجيب قيمة من الjson
نجيبها كده نكتب اسم المتغير الأول ثم نكتب اسم الkey اللي داخل الjson
كده طبعا x اسم المتغير ونبغى نجيب نحن الname فنكتب x.name فبكده بيطلع قيمة الإسم
-----------------------------------------------
طيب كيف مثلا نحدث قيمة name بدل ali الى ahmed داخل الjson 

رمز PHP:

x.name= 'ahmed'  

-----------------------------------
طيب خلينا نسويها بشكل اعمق
الكود:

رمز PHP:

<script>
var x = {name:{firstname:'ail',secondname:'hassan'},lesson:'JSON'}
    document.write(x.name.secondname);</script>  

طيب في الjson زي ماقلنا نقدر نخلي القيمة لها قيمة والقيمة لها قيم اخرى
فنحن في الكود حطينا name وlesson لكن داخل الname فيها كود json ثاني اللي فيه firstname وsecondname يعني نقدر نضع json داخل json ونقدر طبعا نفرعها الا مالا نهاية
طيب كيف نكتب قيمة مثلا secondname 
نكتب اولا اسم المتغير ثم اسم الkey ثم اسم الkey اللي داخل الkey الأول
يعني بيكون كده x.name.secondname
يعني بالترتيب من الكبير اللي هو المتغير الى الأصغر منه ثم الأصغر وهكذا

--------------------------------------
طيب فيه حركة كمان انك تدخل array داخل الjson
مثلا الكود:

رمز PHP:

<script>
    arr = ['ali','hassan'];
    var x = {name:arr,age:20,country:'KSA'}
    document.write(x.name[0]);
    </script>  

طبعا في البداية سوينا متغير اسمه arr ووضعنا داخله array 
وثاني شي سوينا متغير x ووضعنا الjson داخله ووضعنا داخل الname قيمة arr اللي هي الarray (المصفوفة) طبعا لما نجي نكتب متغير مانحط حوليه '' أو "" 
طيب كيف نجيب الإسم ali نكتب

رمز PHP:

 x.name[0]  

وطبعا زي ماهو معروف انه المصفوفة تبدأ من الصفر لأول قيمة ولاحظ اني ماكتبت

رمز PHP:

arr[]  

كتبت

رمز PHP:

name[0]  

لانه قيم المصفوفة arr صارت تنتمي الى name 

هناك طريقة اخرى لجلب القيم زي الarray كود المتغير ثم الkey

رمز PHP:

x['name'];x['name']['firstname'];  

وبكده انتهى الدرس

مرجع فيديو لjson 
https://www.youtube.com/watch?v=wbB3lVyUvAM

تشغيل صوت عن طريق javascript

السلام عليكم ورحمة الله وبركاته

اليوم اتيت لكم بطريقة تشغيل صوت معين عن طريق ال

jquery

 ممكن تستخدمه مثلا عند الضغط او اي 

شي تحتاجه فيه

الكود طبعا جافاسكربت

رمز PHP:

 var snd = new Audio("win.mp3"); // buffers automatically when created

       snd.play();  

استخدام الكود غير بس win.mp3 الى مسار الملف الصوتي فقط

اشرطة(progress) بأشكال جبارة

السلام عليكم
اليوم اتيت لكم بأشكال رائعة لأشرطة التحميل اللي هي progress في ال html5

رمز PHP:

<progress></progress>  

رابط الأشرطة مع الكود تبعها: Skillset using HTML5 progress bars with CSS3 animations - CodePen
رابط الموضوع الأصلي:The HTML5 progress Element | CSS-Tricks
رابط الموقع اللي فيه دروس كثير مفيدة وجميلة:CSS-Tricks
موقع كله امثلة زي ده المثال واحلى:http://codepen.io/picks/

خاصية localStorage خاصية المخزن بديل session وcookies في الphp

السلام عليكم ورحمة الله وبركاته

قبل الدرس مثال جهزته النتيجة النهائية والكود كامل 
عشان تفهم التجربة غير القائمة بتلاقي الخلفية تغيرت جرب تحدث الصفحة بتلاقي الخلفية نفسها ماتغيرت ليش كيف الحركة ديه اذا تبغى تعرف تابع الدرس
هذا رابط التجربة :Edit this Fiddle - jsFiddle

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

اليوم اتيت لكم بشرح localStorage هي تؤدي نفس وظيفة الcookies او session في الphp لكن القيم بدل ماتخزن في السيرفر تخزن في جهاز المستخدم فبيكون استيراد البيانات اخف لانه بتقل العمليات على السيرفر

مصادر ومواقع لتعليم برمجة المواقع والتصميم وكل شي ممكن يخطر على بالك(مؤكد انك ستستفيد)

السلام عليكم ورحمة الله وبركاته

اليوم اتيت لكم بمصادر ضخمة لدروس تعلم البرمجة والتصميم بجميع انواعها

أولا:

موقع the new boston يحتوي على كل هذه الدورات

• Adobe
  After Effects (39 Videos)
  DreamWeaver (41 Videos)
  Flash (6 Videos)
  Photoshop (16 Videos)
  Premiere Pro (12 Videos)
  
  V............................................................................   Computer Programming
                                  

قائمة responsive (تتناسب مع جميع الشاشات بجميع الأحجام)

اليوم اتيت لكم بقائمة تتناسب مع جميع الشاشات بجميع الأحجام (Responsive)

responsive menu

المثال من هنا :Responsive Design with CSS
التحميل من هنا :9lessons Download Scripts
الدرس كامل من هنا:Responsive Web Design for Menu, Image and Advertisements
المصدر موقع رائع ويحوي دروس رائعة من هنا:9lessons Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos

اصدار صوت عند حدوث حدث jquery

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

المثال من هنا :9lessons Javascript Notification Sound
التحميل من هنا :9lessons Download Scripts
الدرس كامل من هنا:Play Notification Sound using Jquery.
المصدر موقع رائع ويحوي دروس رائعة من هنا: 9lessons Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos

تأثيرات على الصور jquery

مقياس صعوبة كلمة المرور(password)

طريقة الإستخدام :

1-تحمل الإضافة من زر download
2- ننشئ ملف html ونضع فيه الكود التالي:

<script type="text/javascript" src="/js/jquery.complexify.js"></script>

<script type="text/javascript">

  $("#password").complexify(options, callback(valid, complexity){

    alert("Password complexity: " + complexity);

  });

</script>

<input type="text" id="password" />



3-طريقة استخدام الكود هو انشاء input ونغير الid 

<input type="text" id="هنا" /> 

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

  $("#هنا").complexify(options, callback(valid, complexity){

كود لعمل العلامة المائية(watermark)

السلام عليكم ورحمة الله وبركاته
اليوم اتيت لكم بكود لعمل العلامة المائية العلامة المائية هي مثل هذه الصورة

العلامة المائية في هذه الصورة هي الصورة اللي في الركنية اليمين تحت
اولا نضع صورة شعار الموقع ونسميها logo.png

سلايد لعرض الصور بطريقة مميزة

لعرض الصور بطريقة اكثر من ابداع

اليوم أتيت لكم بطريقة لعرض بنظام الألبومات يعني كل صورة غلاف لمجموعة صور رائعة جدا جربها ولن تندم

المصدر من هنا

تأثيرات جبارة للقوائم المنسدلة

اليوم اتيت لكم بتأثيرات جبارة وخطيرة للقوائم المنسدلة جربها وستعجبك إن شاء الله

للتجربة والتحميل من هنا:

تأثير 3D عند سحب السكرول(السحاب)

اليوم اتيت لكم بتأثير عند سحب السحاب جميل و3D جربه وسيعجبك إن شاء الله

للجربة والتحميل من هنا 

كيفية عمل ليبل جميل مثل الذي بالصورة

كيفية عمل مثل الذي بالصورة تابع معي:
أول شي نضيف أكواد الhtml هذه

تأثير جميل جدا للصور

اليوم أتيت لكم بتأثير جميل جدا على الصور للتجربة والتحميل من هنا:

لطريقة الإستخدام والمصدر من هنا دوروسانيا

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

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

عرض اكثر من رائع عرض الكتب بطريقة ال3d

اليوم جأت لكم بطريقة رائعة جدا لعرض الكتب 3d وللتجربة والتحميل

سلايد الأوراق المتطايرة جميل جداً

سلايد الأوراق المتطايرة 

       ولشرح استخدامه والمصدر من هنا دروسانيا

إضافة تجعل الصور في موقعك تتلائم مع جميع الشاشات(make them responsive)

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

تأثير الورق المطوي على الصور تأثير جميل وابداع

تأثير الورق المطوي تأثير جميل جدأ ويضفي جمالا على موقعك 

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

سكربت الالة الحاسبة جميل وبسيط وللتحميل

اليوم جأت لكم بسكربت الة حاسبة مميزاتها
*تستطيع عمل العمليات الحسابية بالضغط على الأزرار
*تستطيع عمل العمليات بالكتابة في المستطيل

وللإستخدام ادخل على blackCalculator/example1/index.html او blackCalculator/example2/index.html
وللتجربة من هنا تجربة-دوروسانيا
وللتحميل من هنا تحميل-دوروسانيا

تشغيل اكواد الجافاسكريبت اون لاين(javascript)

هذا الموقع يجعلك تكتب الكود حق الjavascript وترى النتائج اون لاين
من هناhttp://writecodeonline.com/javascript/

لتجربة كتابة اكود الphp وعرضها

اليوم جئت لكم بموقع تكتب اكواد الphp وترى النتيجة

الموقع من هنا http://writecodeonline.com/php/

عمل جدول مثل هذا بالcss

اليوم جايكم بدرس كيف تسوي جدول مثل اللي بالصورة الثمثال من هنا والكود من هنا
http://jsfiddle.net/FjNP8/