تقنية رقمية 2-1
تقنية رقمية 2-1 تحميل جميع برامج مقررات الحاسب من خلال الضغط على ايقونة التحميل > > > > أوراق عمل مقرر تقنية رقمية 2-…
مشاركة مميزة
تقنية رقمية 2-2
تـحـمـيـل الـبـرامـج: تحميل جميع برامج مقررات الحاسب من خلال الضغط على ايقونة التحميل > > > > 
التوزيع وتحميل الكتاب المدرسي
التوزيع وتحميل الكتاب المدرسيتحميل البرنامج (Visual Studio Code) من خلال النقر هنا العمل على برنامج VS Code على الويب بدون تحميل اونلاين
شــرح الــدرس:التسويق: التسويق هو عملية جذب العملاء المحتملين أو العملاء المهتمين
بمنتج أو خدمة معينة.
الإعلان: هو وسيلة من وسائل التواصل مع المستهلكين، ويعبر عنها بأشكال عديدة: نصية أو مسموعة أو مرئية من خلال الصور أو مقاطع الفيديو بهدف إقناع أو تشجيع المستهلكين المحتملين لشراء أو استهلاك منتج أو خدمة معينة ذات مواصفات معينة
وسائل الإعلان:
اختيار العنوان الجيد - طلب إجراء من المتلقي - إظهار مصداقية المنتج- التركيز على ما يقدمه المنتج للمستهلك - تضمين المعلومات المناسبة البيانية
التصميم الرسومي:
التصميم الرسومي (Design Graphic)هو استخدام مجموعة عناصر كالصور والرسومات والرموز والنصوص، ودمجها لتوصيل المعلومات أو الأفكار بطريقة بصرية مؤثرة، وقد يكون التصميم رقمي أو غير رقمي.
أنواع التصميم الرسومي:
تصميم الهوية البصرية - تصميم التسويق و الإعلانات - تصميم المنشورات - تصميم أدوات التغليف للمنتجات - تصميم الحركة - تصميم الويب
مبادئ التصميم الرسومي:
وتشتمل على التوازن البصري بين الأشكال والخطول - والمحاذاة يمين أو يسار أوأسفل أو أعلى أو بالمنتصف - القرب بين العناصر لتقليل المشتتات - التكرار لنعصر أو عدة عناصر لتعطي اتساق بصري جميل - التباين على جوانب معينة من التصميم لإبراز الاختلافات بين عناصر التصميم.
عناصر التصميم الرسومي:
وتشتمل على:
1- الخط مستقيم أو سميك أو مائل.
2- الشكل وقد يكون هندسيا أو مجردا.
3- اللون ويشمل ثلاث خصائص: الصبغة hue (مجموعة الأوان)، والقيمة Value (شدة الإضاءة)، والتشبع Saturation (درجة نقاء اللون).
4- الطباعة.
5- البنية نوعية السطح للتصميم خشن أو ناعم.
6- الحجم.
7- الفراغ.
برامج تصميم رسومي مجانية: جينيللي Genially - جمب GIMP - إنكسكيب Inkscape
شــرح فــديــو (تـطـبـيـق عـمـلـي):
هنالك نوعين من استراتيجيات النشر الخاصة بمقاطع الفديو للترويج لأي منتج:
1- الاسترتيجية الظاهرة: هنا يدرك المشاهد أنه يشاهد إعلان، مثل إعلان لمياه أو غيرها.
2- الاستراتيجية المخفية: هنا لا يدرك المشاهد أنه يشاهد إعلان مثل لاعب كرة يشرب المياه بعد عناء وتعب فهو يعلن عن المنتج بطريقة خفية.
شــرح فــديــو (تـطـبـيـق عـمـلـي):
إثـراءات عـلـمـيـة:يمكنك أيضًا كتابة تعليقات باللغة العربية في كود HTML بإستخدام <-- comment --!> أما في الجافا سكربت JavaScript نكتب بالبداية // وبعدها التعليق وهذا يخص التعليق بسطر واحد فقط وليس أسطر متعددة، حيث نضع بكل سطر // لو أردنا كتابة تعليقات بأكثر من سطر أو نستخدم التعليقات متعددة الأسطر بفاصل مائل ونجمة /* ثم تنتهي بنجمة ثم فاصل مائل */
وتستخدم التعليقات للتوضيح للمبرمج كي لا يخطيء في وضع كود في غير مكانه الصحيح أو عندما تكثر الأوامر البرمجية فتصبح أوضح للمبرمج ولمن يبرمج بعده وتكون أسهل بالتعامل وأسرع:
<html> <!-- إضافة تعليق --> </html>
<script type="text/javascript"> //التعليق هنا </script>
<script type="text/javascript"> /* لو أردنا أن نعلق بأكثر من سطر برمجي نكتب التعليق هنا وسيظهر التعليق بأكثر من سطر لحين أن ننتهي من التعليق ونقفله بعكس ما فتحنا التعليق وفق ما هو واضح معنا */ </script>
الدرس الأول - التصميم المستجيب للمواقع الإلكترونية (Responsive Web Design):
وسوم التطبيقات العملية:
نضيف وسم الموقع المستجيب في منطقة Head في داخل ملف Index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
شــرح فــديــو (تـطـبـيـق عـمـلـي):وسم استعلام الوسائط لجعل الصور img يتغير مقاسها إلى 70% من عرض الشاشة وطولها يتوافق مع الطول في حالة كان عرض الجهاز اللوحي أقل من 800 بكسل ويمكن كتابة الوسم في داخل ملف html كوسم style داخلي
<style>@media screen and (max-width: 800px){img {width:70%;height:auto;}}</style>
أو خارجي في ملف css كالتالي:
@media screen and (max-width: 800px){img {width:70%;height:auto;}}
شــرح فــديــو (تـطـبـيـق عـمـلـي):
تنسيق الصور:
@media screen and (max-width: 900px){.photos img {width:50%;margin: 6px;}}@media screen and (max-width: 700px){.photos img {width:100%;height:auto;}}
شــرح فــديــو (تـطـبـيـق عـمـلـي):تنسيق القائمة Menu:
@media screen and (max-width: 700px){.menu li {display: block;text-align: center;}}
شــرح فــديــو (تـطـبـيـق عـمـلـي):
الدرس الثاني - الموقع الإلكتروني التفاعلي (Ineractive Website):
دالة الكتابة في مستند document.write:
<!--دالة الكتابة بالجافا سكربت--><script>document.write("مرحبا بكم معنا في تعلم لغة الجافا سكربت");</script>
دالة نافذة التنبيه Window.alert:
<!--دالة رسالة التنبيه--><script>window.alert("اهلا بكم في موقعي التعليمي");</script>
دالة الحصول على عنصر من المعرف في مستند document.getElementById:
<h1 id="h1-header">موقع للتدريب والشرح: مدونة علمني التعليمية</h1>
<!--دالة استدعاء عنصر-->
<script>document.getElementById("h1-header").innerHTML= "صباح الخير";</script>
شــرح فــديــو (تـطـبـيـق عـمـلـي):
إنشاء زر باستخدام جافا سكربت:
<h1 id="h1-header">موقع للتدريب والشرح: مدونة علمني التعليمية</h1><br><!--إنشاء زر بالجاف سكربت--><button onclick="mf()">اضغط هنا</button><!--دالة استدعاء عنصر--><script>function mf() {document.getElementById("h1-header").innerHTML= "صباح الخير";}</script>
شــرح فــديــو (تـطـبـيـق عـمـلـي):
مثال لبرنامج نصي يغير نوع التحية صباح الخير أو مساء الخير حسب توقيت جهاز الكمبيوتر من خلال البرمجة بملف جافا سكربت خارجي:
- ملف الجافا سكربت الخارجي ونسميه باسم Welecom_greeting.js
//تعريف المتغيراتvar today=new Date();var hourNow = today.getHours();//تعريف متغير كتابة العبارةvar greeting;//دالة الشرطif (hourNow<12) {greeting="صباح الخير";}else if (hourNow<18) {greeting="مساء الخير";}else {greeting="مرحبا";}//دالة الكتابة بالمستندdocument.write(greeting);
- في داخل ملف الصفحة الرئيسية index.html نختار مكان لنضع فيه كود الاستدعاء لملف الجافا سكربت الخارجي Welecom_greeting.js
<!--استدعاء ملف جافا سكربت خاص بعرض عبارة صباح الخير أو مساء الخير-->
<div class="Welecome"><h1 style="text-align: center; color: #e7213c; text-shadow: rgb(94, 9, 9); font-size: 40px;"><script src="welecome_greeting.js"></script></h1></div>
شــرح فــديــو (تـطـبـيـق عـمـلـي):
<!--مكتبة زر همبرغر-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--الأزرار-->
<div class="menu" id="myMenu">
<!--إضافة زر قائمة همبرجر-->
<div>
<button class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
<script src=""function myFunction().js"></script>
</div>
<ul>
<li><a href="#top">الصفحة الرئيسية</a></li>
<li><a href="#history">التاريخ</a></li>
<li><a href="#gallery">المعرض</a></li>
<li><a href="#about">نبذة</a></li>
<li><a href="contact-form.html" target="_blank">اتصل بنا</a></li>
</ul>
</div>
// كود زر همبرجر بملف الجافا سكربت
function myFunction(){
var x=document.getElementById("myMenu");
if (x.className==="menu") {
x.className+="responsive";
}
else {
x.className="menue";
}
}
.menu .icon {
display: none;
}
@media screen and (max-width:800px){
.menu li a {
display:none;
text-align: center;
}
.menu .icon {
float:left;
display:block;
}
}
@media screen and (max-width:700px) {
.menu .responsive {
position: relative;
}
.menu .responsive .icon {
position: absolute;
left:0;
top:0;
}
.menu .responsive a {
display: block;
text-align: center;
}
}
شــرح فــديــو (تـطـبـيـق عـمـلـي):الدرس الثالث- الرسائل الإخبارية الرقمية (Digital Newsletter):
وسم مبسط لإنشاء جدول
<table>
<tr>
<th>user name</th>
<th>phone number</th>
</tr>
<tr>
<td>ahmed</td>
<td>54646464</td>
</tr>
<tr>
<td>khaled</td>
<td>6546465</td>
</tr>
<tr>
<td>ali</td>
<td>fgghfhghf</td>
</tr>
</table>
التعديل على الجدول في منطقة Head بخصائص الجدول
<style>
table, th, td {
text-align: center;
padding: 1px;
}
</style>
شــرح فــديــو (تـطـبـيـق عـمـلـي):
ننشأ ملف جديد باسم
newsletter.html
ونضع فيه هذا الكود
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة اخبارية</title>
<link rel="stylesheet" type="text/css" href="style-css.css">
</head>
<body>
<table>
<!--أول صف-->
<tr style="background-color:#0b5525;">
<td>
<img src="images/logo.png" width="200" height="125" alt="National team logo">
</td>
</tr>
<!--ثاني صف-->
<tr style="background-color:#d6d599;">
<td class="headline1">صقورنا الخضر يحلقون للعالمية</td>
</tr>
<!--ثالث صف-->
<tr style="background-color:#eeeee7;">
<td class="text1">أبدى مدافع المنتخب السعودي المعتزل أحمد جميل ثقته في لاعبي الأخضر وقدرتهم على مواصلة الانتصارات وحصد النقاط والتأهل لكأس العالم 2022 في قطر، مبيّناً أن الجهاز الفني بقيادة المدرب رينارد يسير في الطريق الصحيح، وبمشيئة الله سينهي الأخضر مباراتي الصين وأستراليا بتحقيق الانتصار والتأهل للمونديال القادم. وأكد جميل أن مباراة منتخبنا الوطني أمام الصين على ملعب الشارقة الإماراتي ستقود الأخضر لنهائيات كأس العالم القادمة، وبمشيئة الله سنحتفل بتواجد الصقور الخضر في المونديال للمرة السادسة، والتأكيد على تفوق الكرة السعودية قارياً، وحضورها في المحفل العالمي.
</td>
</tr>
<!--رابع صف-->
<tr style="background-color:#eeeee7;">
<td class="photos">
<img src="images/a.jpg" alt="stadium" style="width:95%;">
</td>
</tr>
<!--خامس صف-->
<tr style="background-color:#777777;">
<td class="thefooter">
<ul>
<li><a href="mailto:info@example.com">info@example.com</a></li>
<li><a href="https://www.fifa.com/" target="_blank">fifa.com</a></li>
<li><a href="https://www.uefa.com/">UEFA.com</a></li>
</ul>
<p>لإلغاء الاشتراك في الرسائل الإخبارية<a href="https://unsubscribe" target="_blank">اضغط هنا</a></p>
</td>
</tr>
</table>
</body>
</html>
ننشأ ملف باسم
style-css.css
لتعديل خصائص الفحة الإخبارية
/*خطوط الصفحة*/
body {
font-family: 'Tahoma', 'Open Sans', 'sans-serif';
}
/*التعديل على خصائص الجدول لون الخلفية والمسافة البادئة*/
table {
background-color: white;
padding-top: 25px;
padding-left: 25px;
padding-left: 25px;
}
/*التعديل على العنوان*/
.headline1 {
padding-right: 10px;
text-align: right;
font-size: 25px;
font-weight: bold;
}
/*التعديل على المقال*/
.text1 {
padding-right: 10px;
padding-bottom: 30px;
text-align: right;
font-size: 18px;
font-weight: normal;
}
/*التعديل على الفئة الخاصة بالصور*/
.photos {
text-align: center;
overflow: auto;
padding-top: 20px;
padding-bottom: 20px;
}
/*التعديل على الصور التي داخل فئة الصور*/
.photos img {
border-style: solid;
border-width: 2px;
border-color: #426c35;
border-radius: 6px;
}
/*تعديل التذييل للصفحة بأخر الصفحة*/
.thefooter {
overflow: auto;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.thefooter p {
color:#f5f5f5;
text-align: center;
}
.thefooter ul {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
}
.thefooter li{
display: inline-block;
text-align: center;
}
.thefooter li a {
display: inline-block;
height: auto;
width: auto;
color: #333333;
background-color: #f5f5f5;
padding: 10px;
margin: 4px;
text-align: center;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
.thefooter li a:hover {
background-color: #d6d599;
}
شــرح فــديــو (تـطـبـيـق عـمـلـي):
تـدريـبـات:
تعليقات: (0) إضافة تعليق
تعليقك يعكس تفكيرك ومستوى تعليمك وحسن أخلاقك، فكن شخص إيجابيا في طرح تعليقك