لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 10/25/22 في كل الموقع
-
كيفيه حذف مكتبه من المشروع2 نقاط
-
الإصدار 1.0.0
62886 تنزيل
لا يخفى على أي متعلم لمجال علوم الحاسوب كثرة الاهتمام بمجال الذكاء الاصطناعي وتعلم الآلة، وكذلك الأمر بالنسبة لمستخدم التقنية العادي الذي بات يرى تطورًا كبيرًا في الآلات والتقنيات التي تحيط به بدءًا من المساعد الصوتي الآلي في جواله وحتى سيارته وبقية الأشياء الذكية المحيطة به. تتوالى الاختراعات والاكتشافات يومًا بعد يوم وتتنافس كبرى الشركات حول من يحرز أكبر تقدم ليخطف الأضواء من غيره. ونظرًا لهذا الاهتمام، ولضعف المحتوى العربي وسطحيته في هذا المجال أيضًا، قررنا توفير مصدر عربي دسم لشرح مجال الذكاء الاصطناعي وتعلم الآلة نظريًا وعمليًا لذا وضعنا فهرس المحتوى آنذاك وبدأنا العمل. هذا الكتاب هو الجزء الأول النظري التأسيسي من أصل جزآن عن الذكاء الاصطناعي وتعلم الآلة، ويبدأ بعرض أهمية الذكاء الاصطناعي وتعلم الآلة عبر الإشارة إلى المشاريع والإنجازات التي قدَّمها هذا المجال إلى البشرية حتى يومنا هذا وكيف أثرت على كل مجالات حياتنا اليومية. ينتقل بعدها إلى لمحة تاريخية عن المجال وكيفية ولادته ومراحل حياته حتى يومنا الحالي. ستجد بعدئذٍ المعلومات الدسمة في الفصل الثالث الذي يشرح المصطلحات المتعلقة بمجال تعلم الآلة ويشرح أساليب تعليم الإنسان للآلة والأسس التي بنيت عليها عمليات تعليم الآلة (منها شرح طرائق تعلم الآلة التقليدية ثم التجميع والتعلم المعزز وحتى الشبكات العصبية والتعلم العميق). يعرض الفصل الأخير تحديات عملية تعليم الآلة وما علاقة البيانات فيها، ثم أخيرًا عرض خارطة طريق لأهم المفاهيم التي يجب أن تتقنها في حال أردت التوسع في المجال وإتقانه. بعد الانتهاء من الجزء الأول في هذا الكتاب وتأسيس المفاهيم والمصطلحات التي يقوم عليها مجال الذكاء الاصطناعي وتعلم الآلة، يمكنك الانتقال إلى الجزء الثاني وهو كتاب عشرة مشاريع عملية عن الذكاء الاصطناعي لبدء تطبيق مشاريع عملية تطبيقية مبنية على بيانات واقعية وتنفيذ أفكار مشاريع من الحياة العملية باستخدام الذكاء الاصطناعي. ساهم بالعمل على هذا الكتاب، محمد لحلح تأليفًا، وجميل بيلوني تحريرًا وإشرافًا، وأخرجه فنيًا فرج الشامي. أرجو أن نكون قد وُفقنَا في هذا العمل لسد ثغرةً كبيرةً في المحتوى العربي -كما خططنا لذلك- الذي يفتقر أشد الافتقار إلى محتوى جيد ورصين في مجال الذكاء الاصطناعي وتعلم الآلة. هذا الكتاب مرخص بموجب رخصة المشاع الإبداعي Creative Commons «نسب المُصنَّف - غير تجاري - الترخيص بالمثل 4.0». يمكنك قراءة فصول الكتاب على شكل مقالات من هذه الصفحة، «الذكاء الاصطناعي: أهم الإنجازات والاختراعات وكيف أثرت في حياتنا اليومية»، أو من مباشرةً من الآتي: الفصل الأول: الذكاء الاصطناعي: أهم الإنجازات والاختراعات وكيف أثرت في حياتنا اليومية الفصل الثاني: الذكاء الاصطناعي: مراحل البدء والتطور والأسس التي نشأ عليها الفصل الثالث: المفاهيم الأساسية لتعلم الآلة الفصل الرابع: تعلم الآلة: التحديات الرئيسية وكيفية التوسع في المجال1 نقطة -
عندى select بها options لا توجد بها مشكلات فى التصميم المتجاوب لجميع الشاشات ما عدا مقياس @media (min-width: 1200px) { /*big screen */ { هنا تظهر المشكلة ولا يتناسب عرض الـ option مع عرض الـ select حيث يظهر الاول أكبر كيف استطيع التحكم فى عرض الـ option لتناسب مع الـ select الحاوي له ؟1 نقطة
-
السلام عليكم اريد تضمين سلايد Carousel في الصفحة البوتستراب 5 لان رافض يظهر لا أدري اين المشكلة هل في تضمين الاكواد هدا هو الكود <!doctype html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <title>index.html</title> <link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css"> <link href="layout/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="layout/css/style.css" rel="stylesheet" type="text/css"> <!----> </head> <body> <!-- Main Container --> <div class="container my-5"> <!--begin nav--> <nav class="navbar navbar-expand-md fixed-top bg-light "> <div class="container-fluid "> <a class="navbar-brand" href="#"> <img src="https://sakanjamaie.sa/img/new-logo2.svg" alt="Logo" > </a> <!--begin ul liste--> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-1"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> الاسئلة المتكررة</a> </li> <li class="nav-item"> <a class="nav-link " href="#">الدخول<i class="fa fa-sign-in mx-1" aria-hidden="true"></i></a> </li> </ul> <!--زر دخول المنصة--> <button class="btn btn-success mx-auto" type="button" style="font-family: 'Noto Kufi Arabic', sans-serif; font-weight: 700; line-height: 30px"> <i class="fa fa-sign-in me-2" aria-hidden="true"></i>الدخول الى منصة العقار</button> <!--زر دخول المنصة--> </div> <!--End ul liste--> </div> </nav> <!--End nav--> </div> <!--SECTION 1 Begin--> <section class="section-about aos-init aos-animate" data-aos="fade-up" data-aos-duration="1500" style="margin-top: 120px"> <div class="container"> <div class="card mb-3"> <div class="row g-0"> <div class="col-md-6"> <div class="card-body"> <h5 class="card-title">ماهي منصة السكن الجماعي ؟</h5> <p class="card-text"> منصة تمكّن المنشآت من توضيح معلومات السكن الفردي أو الجماعي للعاملين لديها، وتعمل على التأكد من توفير بيئة سكنية مناسبة لهم بما يتلاءم مع ظروف عملهم وفق معايير واضحة ومحددة تلتزم بها المنشآت، وتُقيّم بناءً عليها، حيث يمكن من خلال المنصة توضيح أنواع الوحدات السكنية الجماعية أو الفردية سواءً كانت مستأجرة أو مملوكة. </p> <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> --> </div> </div> <div class="col-md-6"> <img class="d-block w-100" src="https://sakanjamaie.sa/img/new1.png" alt="Third slide" height="340px"> </div> </div> </div> </div> </section> <!--SECTION 1 End--> <!--SECTION 2 begin--> <!--Carousel Wrapper--> <section> <div class="container px-1 py-5 "> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </section> <!--/.Carousel Wrapper--> <!--SECTION 2 End--> <!-- Main Container --> <script src="layout/js/bootstrap.min.js" ></script> <script src="layout/js/jquery-3.6.1.min.js"></script> </body> </html>1 نقطة
-
نعم يؤثر تضمين إثنين من ملفات بوتستراب الخاصة في التنسيقات في الصفحة ويسبب في مشاكل في التصميم ، يمكنك الإستغناء ملف bootstrap.rtl.css وكتابة الخاصية lang , dir لتعديل اتجاه الصفحة ، بهذا الشكل . <html lang="ar" dir="rtl">1 نقطة
-
اخي لاحظت لما أحدف ملف البوتستراب الخاص بالعربي RTL من المحرر <link href="css/bootstrap.rtl.css" rel="stylesheet" type="text/css"> يظهر بشكل عادي هل يؤثر عدم تضمين ملف bootstrap.rtl.css على الصفحات لان الموقع عربي ام يمكن الاستغناء عنه تحياتي1 نقطة
-
كيف أعمل قسم المحادثة باستعمال اطار العمل جانغو1 نقطة
-
كانت غرفة الدردشة هي الخطوة الأساسية نحو إنشاء مشاريع حية وفي الوقت الفعلي. ستكون صفحة الدردشة التي سننشئها عبارة عن نموذج HTML بسيط مع نص h1 بسيط مع اسم المستخدم الحالي ورابط لتسجيل الخروج إلى المستخدم الذي قام بتسجيل الدخول للتو. قد تحتاج إلى التعليق على السطر حتى نقوم إنشاء نظام مصادقة لهذا الغرض. هذا يضمن أنه عند قيام مستخدمين بالدردشة ، يمكن لأحدهما تسجيل الخروج ولن يؤثر ذلك على المستخدم الآخر. سيظل الآخر مسجلاً الدخول ويمكنه إرسال الرسائل واستلامها. المتطلبات الأساسية: Django Django Migrations Django Channel نضيف channels الى installed apps INSTALLED_APPS = [ 'chat.apps.ChatConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # اضافة القنوات 'channels' , ] اضبط تطبيق ASGI على ملف ASGI الافتراضي في المشروع. الآن قم بتشغيل الخادم ، ستلاحظ أن خادم ASGI سيحدث على خادم Django وسيدعم ASGI الآن. ASGI_APPLICATION = 'ChatApp.asgi.application' أنشئ تطبيقًا جديدًا يحتوي على جميع وظائف الدردشة. لإنشاء تطبيق python manage.py startapp chat دالة العرض from django.shortcuts import render, redirect def chatPage(request, *args, **kwargs): if not request.user.is_authenticated: return redirect("login-user") context = {} return render(request, "chat/chatPage.html", context) <!DOCTYPE html> <html> <body> <center><h1>Hello , Welcome to my chat site ! {{request.user}}</h1></center> <br> {% if request.user.is_authenticated %} <center> Logout the chat Page <a href = "{% url 'logout-user' %}">Logout</a></center> {% endif %} <div class="chat__item__container" id="id_chat_item_container" style="font-size: 20px" > <br /> <input type="text" id="id_message_send_input" /> <button type="submit" id="id_message_send_button">Send Message</button> <br /> <br /> </div> <script> const chatSocket = new WebSocket("ws://" + window.location.host + "/"); chatSocket.onopen = function (e) { console.log("The connection was setup successfully !"); }; chatSocket.onclose = function (e) { console.log("Something unexpected happened !"); }; document.querySelector("#id_message_send_input").focus(); document.querySelector("#id_message_send_input").onkeyup = function (e) { if (e.keyCode == 13) { document.querySelector("#id_message_send_button").click(); } }; document.querySelector("#id_message_send_button").onclick = function (e) { var messageInput = document.querySelector( "#id_message_send_input" ).value; chatSocket.send(JSON.stringify({ message: messageInput, username : "{{request.user.username}}"})); }; chatSocket.onmessage = function (e) { const data = JSON.parse(e.data); var div = document.createElement("div"); div.innerHTML = data.username + " : " + data.message; document.querySelector("#id_message_send_input").value = ""; document.querySelector("#id_chat_item_container").appendChild(div); }; </script> </body> </html> تنفيذ WebSockets ، غير المتزامن ، وقنوات Django حتى الآن قمنا بإعداد مشروع Django القياسي. بعد تنفيذ تطبيق Django. حان الوقت الآن لإنشاء تطبيق ASGI. python manage.py makemigrations python manage.py migrate افتح Routing.py وأنشئ مسارًا لـ ChatConsumer (والذي سننشئه في الخطوة التالية). الآن لدينا نوعان من المسارات في المشروع. الأول هو urls.py المخصص لتوجيه Django الأصلي لعناوين URL ، والآخر مخصص لـ WebSockets لدعم ASGI لـ Django. from django.urls import path , include from chat.consumers import ChatConsumer # هنا ، يتم التوجيه إلى عنوان URL ChatConsumer الذي # سيتولى وظيفة الدردشة. websocket_urlpatterns = [ path("" , ChatConsumer.as_asgi()) , ] import json from channels.generic.websocket import AsyncWebsocketConsumer class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.roomGroupName = "group_chat_gfg" await self.channel_layer.group_add( self.roomGroupName , self.channel_name ) await self.accept() async def disconnect(self , close_code): await self.channel_layer.group_discard( self.roomGroupName , self.channel_layer ) async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json["message"] username = text_data_json["username"] await self.channel_layer.group_send( self.roomGroupName,{ "type" : "sendMessage" , "message" : message , "username" : username , }) async def sendMessage(self , event) : message = event["message"] username = event["username"] await self.send(text_data = json.dumps({"message":message ,"username":username})) اكتب الكود أدناه في asgi.py لجعله يعمل مع sockets وإنشاء المسارات. import os from django.core.asgi import get_asgi_application os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ChatApp.settings') from channels.auth import AuthMiddlewareStack from channels.routing import ProtocolTypeRouter , URLRouter from chat import routing application = ProtocolTypeRouter( { "http" : get_asgi_application() , "websocket" : AuthMiddlewareStack( URLRouter( routing.websocket_urlpatterns ) ) } ) يحدد هذا الكود طبقة القناة التي سنعمل فيها ونشارك البيانات. بالنسبة إلى مستوى النشر والإنتاج ، لا تستخدم InMemoryChannelLayer ، لأن هناك فرصًا كبيرة لتسرب البيانات. هذا ليس جيدًا للإنتاج. للإنتاج ، استخدم قناة Redis. ChatApp / settings.py CHANNEL_LAYERS = { "default": { "BACKEND": "channels.layers.InMemoryChannelLayer" } }1 نقطة
-
السلام عليكم، في حالة الاستعانة بالمكتبات الخارجية فإن التنسيقات الخاصة بي يتم تغيرها فمثلا يصبح الموقع يظهر بألوان مختلفة عن الالوان التي عينتها انا فيه ،فكيف اتخطى هذا النوع من المشاكل؟ واجعل التنسيقات الخاصة بالمكتبة التي استوردتها تؤثر فقط على تنسيقات القسم الخاص الذي استوردتها من اجله؟1 نقطة
-
وعليكم السلام تأكد من أنك قمت بتنزيل ملفات بوتستراب الإصدار الخامس ، لقد قمت بإستعمال cdnالخاص في الإصدار الخامس وظهر Carousel أي أنك قمت بتضمين أكواد Carousel لكن لديك مشكلة في الوصول إلى ملفات البوتستراب ، cdn css <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> cdn script <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> وتأكد من أن المسارات صحيحة لديك بأن ملف bootstrap.css داخل مجلد CSS وهذا المجلد داخل مجلد layout ، وأيضاً يفضل أن تضمن ملف واحد وليس الإثنبن وكذلك مسارات الجافا سكربت <link href="layout/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="layout/css/bootstrap.rtl.css" rel="stylesheet" type="text/css"> وأخبرنا بالنتيجة هل قمت بحل المشكلة أو لا1 نقطة
-
انا لا اقصد الوصول للدوره فقط بل جميع الخدمات من الاسئله الي الشهاده و فتره ايجاد عمل1 نقطة
-
يمكنك بسهولة إنشاء radio button في إطار العمل react native من خلال إستعمال widgets المتوفرة في الإطار المذكور بمعية التنسيق المناسب وبمساعدة JavaScript . لاحظ المثال التالي حيث نقوم بإنشاء الزر المطلوب من الصفر وإستعماله. import React, { useState } from "react"; import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; const RadioButton = ({ onPress, selected, children }) => { // props في كل مرة نريد إستعمال المكون نقوم بإستيراده وتعويض قيم return ( <View style={styles.radioButtonContainer}> {/* ننشئ الحافظة الرئيسية */} <TouchableOpacity onPress={onPress} style={styles.radioButton}> {/* نفعل قابلية الضغط على أيقونة العنصر*/} {selected ? <View style={styles.radioButtonIcon} /> : null} </TouchableOpacity> <TouchableOpacity onPress={onPress}> {/* نفعل قابلية الضغط على العنصر*/} <Text style={styles.radioButtonText}>{children}</Text> {/* children أي محتوى نضعه داخل الزر */} {/* أي محتوى نضعه داخل الزر يكون قابل للضغط */} </TouchableOpacity> </View> ); }; const App = () => { // لنفرض أن لديك مجموعة من الأزراز يمثل كل منها أختياراً وتريد من المستخدم أن يختار واحد منها const [isLiked, setIsLiked] = useState([ { id: 1, value: true, name: "صنعاء", selected: false }, { id: 2, value: false, name: "تعز", selected: false }, { id: 3, value: false, name: "اليمن", selected: false } ]); const onRadioBtnClick = (item) => { // عندما يختار المستخدم أحد الأزرار يتم تحديث حالته فيصبح شكله مميزاً بحالة الإختيار بينما يتم إزالة الشكل المميز من باقي الأزرار let updatedState = isLiked.map((isLikedItem) => isLikedItem.id === item.id ? { ...isLikedItem, selected: true } : { ...isLikedItem, selected: false } ); setIsLiked(updatedState); }; return ( <View style={styles.app}> {isLiked.map((item) => ( //لها render لاحظ أننا نقوم بالمرور على جميع البيانات المعرفة للأزرار لغرض عمل <RadioButton onPress={() => onRadioBtnClick(item)} {/* ربط الضغط على الزر بدالة مسبقة التعريف لغرض تحديث حالة الزر */} selected={item.selected} key={item.id} > {item.name} {/* لاحظ أن المحتوى هنا هو أسم العنصر ولكن يمكن وضع أي شئ مثلاُ أيقونة أو نص */} </RadioButton> ))} </View> ); }; //HTML في Radio Button ليصبح شبيهاً الى حد ما بالزر التقليدي Radio Button هنا نصمم شكل ال const styles = StyleSheet.create({ app: { marginHorizontal: "auto", maxWidth: 500 }, header: { padding: 20 }, title: { fontWeight: "bold", fontSize: "1.5rem", marginVertical: "1em", textAlign: "center" }, radioButtonContainer: { flexDirection: "row", alignItems: "center", marginBottom: 5 }, radioButton: { height: 20, width: 20, backgroundColor: "#F8F8F8", borderRadius: 10, borderWidth: 1, borderColor: "#E6E6E6", alignItems: "center", justifyContent: "center" }, radioButtonIcon: { height: 14, width: 14, borderRadius: 7, backgroundColor: "#98CFB6" }, radioButtonText: { fontSize: 16, marginLeft: 16 }, text: { lineHeight: 30, fontSize: 20, marginVertical: 5 } }); export default App;1 نقطة
-
يوجد مكتبة جاهزة يمكنها تسهيل عمل ما سبق، يمكننا تنزيل هذه المكتبة عن طريق كتابة ما يلي: npm install radio-buttons-react-native --save الآن يمكننا استعمال هذه المكتبة كما يلي: import RadioButtonRN from 'radio-buttons-react-native'; const data = [ { label: 'data 1' }, { label: 'data 2' } ]; <RadioButtonRN data={data} selectedBtn={(e) => console.log(e)} /> هنا في البداية نقوم بتضمين المكتبة. من ثم نقوم بتعريف البيانات التي تعرف الأزرار التي نريدها، هذه البيانات يجب أن تكون لائحة من الأغراض كل غرض يحوي على الخاصية label و التي تمثل النص الذي يتبع لكل زر. بعد ذلك يمكننا استعمال الوسم RadioButtonRN و الذي نمرر له البيانات بالإضافة يمكننا استعمال الخاصية selectedBtn لتعريف تابع يقوم بتنفيذ أمر ما عند النقر على هذا الزر. يمكنك الإطلاع على أية تفاصيل أخرى عن المكتبة من هنا.1 نقطة
-
تُعَدّ HTML أو لغة توصيف النصوص التشعبية بأنها الشيفرة التي تُستخدَم في هيكلة صفحات ويب ومحتوياتها، فقد تُنظَّم الصفحة مثلًا على هيئة مجموعة من المقاطع النصية أو قائمة من النقاط أو أن تعرض الصور أو جداول البيانات، وسنقدِّم لك في هذا المقال مجموعة معارف أساسية لفهم لغة HTML ووظائفها. ما هي HTML؟ تُعَدّ HTML بأنها لغة توصيفية تُعرِّف هيكلية المحتوى الذي تقدِّمه الصفحة، وتتألف اللغة من سلسلة من العناصر التي تستخدِمها لتضمين أو تغليف الأجزاء المختلفة من المحتوى لتظهر بطريقة محددة أو لتعمل بطريقة محددة، كما يمكن أن تربط الوسوم المغلقة enclosing tags كلمةً أو صورةً بمكان آخر، أو يمكنها عرض الكلمات عرضًا مائلًا أو تكبّر خط الكتابة أو تصغّره وهكذا، وإليك على سبيل المثال المحتوى التالي الذي لا يتعدى السطر: My cat is very grumpy إذا أردنا أن يظهر السطر كما هو، فيمكننا أن نجعله فقرةً نصيةً بتضمينه داخل وسمَي فقرة، أي <p> </p>: <p>My cat is very grumpy</p> تشريح عنصر HTML دعونا نستكشف عنصر الفقرة السابق بصورة أعمق: إن الأجزاء الرئيسية من العنصر هي: وسم البداية Opening tag: يشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر أو التي يبدأ تأثيره عندها (بداية الفقرة النصية في حالتنا)، ويتكوّن من اسم العنصر (p في حالتنا) محاطًا بقوسَي زاوية. وسم النهاية Closing tag: يشير هذا الوسم إلى نهاية العنصر (نهاية الفقرة في حالتنا)، ويشبه وسم البداية لكنه يبدأ بشرطة أمامية / قبل اسم العنصر، كما يُعَدّ إغفال وسم النهاية من أكثر الأخطاء التي يرتكبها المبتدئون، وقد تفضي إلى نتائج غريبة بالفعل. المحتوى Content: يشير إلى المحتوى الفعلي للعنصر، وهو في حالتنا مجرد نص. العنصر Element: ويتكون من وسمَي البداية والنهاية والمحتوى معًا. يمكن أن تمتلك العناصر سمات attributes تبدو شبيهةً كما يلي: تتضمن السمات معلومات إضافية عن العنصر لا تريدها أنت أن تظهر مثل جزء من المحتوى الفعلي، فالكلمة class في الشكل السابق هي اسم السمة وقيمتها هي editor-note، إذ تسمح لك السمة class بإعطاء العنصر معرِّفًا عامًا يمكن استخدامه لتطبيق معلومات تنسيق على هذا العنصر أو أي عنصر تحمل السمة class فيه القيمة نفسها أو غيرها. لكتابة السمة لا بد من: مسافة فارغة بينها وبين اسم العنصر، أو بينها وبين السمة التي تسبقها في حال امتلك العنصر سمتَين أو أكثر. اسم السمة تليها إشارة المساواة =. قيمة السمة بين إشارتَي تنصيص. ملاحظة: يمكنك عدم وضع قيمة السمة بين إشارتي تنصيص إذا لم تتضمن رمز ASCII الخاص بالمسافة الفارغة أو أيّ من المحارف " أو ' أو ` أو = أو < أو >، لكن يفضَّل وضع قيمة السمة دائمًا داخل إشارتَي التنصيص لأنها تجعل الشيفرة واضحةً ومفهومةً. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن العناصر المتداخلة يمكن وضع عناصر داخل عناصرأخرى أيضًا وهذا ما يُعرف بالتداخل nesting، فإذا أردنا أن تظهر الكلمة "very" في الفقرة "My cat is very grumpy" بخط سميك، فيمكن تغليف هذه الكلمة داخل العنصر <strong></strong> كما يلي: <p>My cat is <strong>very</strong> grumpy.</p> لكن عليك التأكد دومًا من أنّ العناصر متداخلة بصورة صحيحة، فقد فتحنا في المثال السابق العنصر <p> أولًا ثم <strong>، وبالتالي توجَّب إغلاق العنصر الثاني آخر من فتح على الشكل <strong/> ثم إغلاق الأول <p/>، أي أنّ التداخل التالي غير صحيح: <p>My cat is <strong>very grumpy.</p></strong> لا بد من فتح وإغلاق العناصر بالصورة الصحيحة لكي تظهر بوضوح داخل أو خارج عنصر آخر، فإذا تداخلت بالشكل الذي عرضناه في الشيفرة السابقة، فسيحاول المتصفح أن يخمّن بأفضل شكل ما تحاول قوله، مما قد يتسبب بظهور نتائج غير متوقعة، فلا تفعل ذلك. العناصر الفارغة تُدعى بعض العناصر التي لا تحمل أيّ محتوى بالعناصر الفارغة Empty elements مثل العنصر <img> الذي استخدمناه سابقًا: <img src="images/firefox-icon.png" alt="My test image"> إذ يمتلك العنصر سمتَين ولا يمتلك وسم نهاية <img/> أو محتوى، والسبب أن عنصر الصورة لا يغلِّف محتوًى لكي يتأثر بوجود أو عدم وجود وسم النهاية، فوظيفته هي إدراج صورة في صفحة HTML في المكان الذي يظهر فيه. تشريح مستند HTML سنشرح الآن الطريقة التي نجمّع بها عناصر HTML المفردة لنشكِّل صفحةً كاملةً، فلنعُد قليلًا إلى الشيفرة التي وضعناها في الملف index.html والذي رأيناه أول مرة في المقال السابق: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> </body> </html> لدينا هنا الأشياء التالية: <DOCTYPE html!>: وهو عنصر تمهيدي مطلوب، فقد كانت الغاية من هذا العنصر في الأيام الأولى (1991/1992) أن يعمل على أساس رابط إلى مجموعة من القواعد التي ينبغي أن تحققها صفحة HTML لكي تُعَدّ صفحةً جيدةً بما في ذلك الاكتشاف التلقائي للأخطاء وغيرها من النقاط المفيدة، وليس لهذا العنصر في أيامنا هذه وظيفةً سوى التأكد من سلوك المستند للسلوك المطلوب، وهذا كل ما عليك معرفته حاليًا. <html></html>: يضم هذا العنصر كامل محتوى الصفحة، ويُدعى أحيانًا بالعنصر الجذري root element. <head></head>: يعمل على أساس حاوية لتضع فيها كل الأشياء التي تريدها في صفحتك ولكنها لا تمثِّل محتوًى تريد إظهاره لمتابعيك مثل الكلمات المفتاحية ووصف الصفحة الذي تريد إظهاره عندما يعرضها محرك البحث على أساس نتيجة وقواعد CSS لتنسيق محتوى الصفحة ونوع المحارف التي تستخدمها في الصفحة وغيرها الكثير. <"meta charset="utf-8>: يضبط هذا العنصر مجموعة المحارف التي تستخدِمها في الصفحة، وهنا اخترنا المجموعة UTF-8 التي تضم محارف الأغلبية الساحقة من اللغات المكتوبة، إذ تستطيع هذا المحارف أن تعرض الآن أيّ محتوى نصي بأيّ لغة قد تضعه في صفحتك، ولا مبرر لعدم ضبط مجموعة المحارف المستخدَمة، كما ستساعدك على تحاشي الكثير من الأخطاء لاحقًا. <title></title>: يضبط هذا العنصر عنوان صفحتك الذي يظهر أعلى المتصفح عند تحميل الصفحة، كما يُستخدم لوصف الصفحة عندما تضيفها إلى قائمة الصفحات المفضلة. <body></body>: يضم المحتوى الذي تريد عرضه على زائري صفحتك بأكمله، سواءً كان نصًا أو صورًا أو فيديو أو ألعاب أو أيّ شيء آخر. الصور لنعُد إلى العنصر <img> مجددًا: <img src="images/firefox-icon.png" alt="My test image"> يُدرِج هذا العنصر صورةً ضمن الصفحة في المكان الذي تضعه فيه، إذ نحدِّد الصورة المعروضة بكتابة عنوانها على أساس قيمة للسمة src -أي مصدر source-، كما يمتلك عنصر الصورة أيضًا سمةً أخرى تُدعى alt -أي بديل alternative-، إذ تُستخدَم هذه السمة لعرض نص بديل عن الصورة للأشخاص الذين لا يستطيعون رؤيتها لأسباب عديدة منها: المشاكل البصرية: إذ يستخدِم الكثيرون من فاقدي البصر أدوات تُدعى قارئات الشاشة تستطيع قراءة النص البديل. أخطاء في عرض الصورة: حاول مثلًا تغيير المسار الموجود داخل السمة في مثالنا السابق ثم احفظ الملف وأعد تحميله ضمن المتصفح، إذ لن تظهر الصورة، وإنما نص كما يلي: ما يهم فعلًا في النص البديل هو أن يكون وصفيًا تمامًا لمحتوى الصورة، إذ ينبغي أن يزوِّد النص القارئ بمعلومات كافية ليكوِّن فكرةً جيدةً عن محتوى الصورة، فالنص البديل "My test image" في مثالنا غير جيد على الإطلاق، وسيكون الأنسب لشعار فايرفوكس هو "Firefox logo: a flaming fox surrounding the Earth" وبالعربية "شعار فايرفوكس: ثعلب ملتهب يحيط بالكرة الأرضية"، أي حاول إذًا ابتكار نصوص بديلة جيدة تصف الصورة. توصيف محتوى صفحات HTML يغطي هذا القسم من المقال عناصر HTML الأساسية لتوصيف محتوى الصفحات. العناوين تساعدك العناوين Headings على عرض أجزاء من محتوى الصفحة على أساس عناوين رئيسية أو فرعية، وكما هو حال الكتب التي تحمل عنوانًا رئيسيًا وعناوين للفصول وعناوين فرعية في كل فصل، تحمل صفحة HTML الميزة ذاتها، إذ تضم اللغة عناوين تتدرج إلى مستويات ستة من <h1> إلى <h6>، وغالبًا ما ستستخدِم ثلاث إلى أربع مستويات كحد أقصى. <!-- 4 heading levels: --> <h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4> ملاحظة: كل ما يرد بين الوسمين <-- و --!> في صفحة HTML هو تعليق سيتجاهل المتصفح محتواه عندما يصيّر الشيفرة ولن يُعرَض على الشاشة، إذ تساعدك التعليقات في وضع ملاحظات مفيدة عن مقطع محدَّد من الشيفرة أو عن منطق معيّن اعتمدته. حاول الآن وضع عنوان فرعي في صفحة HTML التي نبنيها فوق العنصر <img> مباشرةً. ملاحظة: تملك العناوين من المستوى الأول تنسيقًا ضمنيًا خاصًا، لذلك لا تستخدِمها لتكبير النص أو جعله سميكًا Bold لأنها تُستخدَم لغايات أخرى مثل سهولة الوصول أو لأسباب أخرى مثل تحسين محركات البحث، لذا حاول أن تعطي تدرجًا منطقيًا للعناوين في صفحتك دون تجاوز أيّ مستوى إلى ما دونه مثل الانتقال من 4 إلى 2 مباشرةً دون المرور بالمستوى 3. الفقرات النصية يحتوي العنصر <p> كما شرحنا سابقًا مقطعًا نصيًا، وستستخدمه بكثرة عندما ترمز المحتوى النصي في الصفحة: <p>This is a single paragraph</p> يمكنك على سبيل التجربة إضافة عينة من نص ما على هيئة فقرة نصية أو أكثر تحت العنصر <img> في الصفحة التجريبية التي نبنيها. القوائم تُصنَّف كمية لا بأس بها من محتوى ويب على صورة قوائم Lists وتمتلك HTML القدرة على ذلك، إذ تتضمن القائمة عنصرين على الأقل، وأكثر القوائم شيوعًا هي القوائم المرتبة Ordered وغير المرتبة Unordered: القوائم المرتبة: توضع بنود هذه القائمة ضمن العنصر <ol>، وتُستخدَم لعرض القوائم التي يهمنا فيها ترتيب العناصر مثل وصفات تحضير الطعام أو ترتيب فِرق دوري لكرة القدم وغيرها. القوائم غير المرتبة: توضع بنود هذه القائمة ضمن العنصر <ul>، وتُستخدَم لعرض القوائم التي لا نهتم فيها لترتيب العناصر مثل قائمة التسوق. يوضع كل بند من بنود القائمة ضمن العنصر <li> -أي بند من قائمة list item-، فإذا أردنا مثلًا تحويل جزء من الفقرة النصية التالية إلى قائمة: <p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p> فيمكننا تعديل توصيف محتوى الفقرة ليصبح كما يلي: <p>At Mozilla, we’re a global community of</p> <ul> <li>technologists</li> <li>thinkers</li> <li>builders</li> </ul> <p>working together ... </p> الروابط تُعَدّ الروابط العنصر الأكثر أهميةً، فهي ما تجعل من الويب شبكةً حقيقيةً، إذ نستخدِم العنصر البسيط <a> لإنشاء رابط، وهو اختصار للكلمة "anchor"، ولتجعل جزءًا من الفقرة النصية السابقة رابطًا اتبع الخطوات التالية: اختر جزءًا من النص وليكن "Mozilla Manifesto". ضَع هذا الجزء ضمن الوسمَين <a></a> كما يلي: <a>Mozilla Manifesto</a> زوّد الرابط بعنوان للانتقال إليه من خلال السمة href كما يلي: <a href="">Mozilla Manifesto</a> اكتب العنوان المطلوب بين علامَتي تنصيص السمة href كما يلي: <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> قد تصل إلى نتيجة غير متوقعة إذا حذفت بداية العنوان الذي يُدعى بروتوكول، أي //:https أو ://http، لذلك تحقق من وصولك إلى المكان المطلوب عند النقر على الرابط. ملاحظة: قد يبدو اختيار اسم السمة href غامضًا في البداية، فإذا صعُب عليك الأمر، تذكر أنه مشتق من كلمتَي "مرجع إلى نص تشعبي hypertext reference" خلاصة إذا اتبعت التوجيهات التي أشرنا إليها خلال اطلاعك على هذا المقال، فستبدو صفحة الويب التي نبنيها بالشكل التالي تقريبًا إذا لم تغير في العناوين أو النصوص. إذا لم تجد عملك صحيحًا، فيمكنك دائمًا موازنة ما فعلته مع النسخة الجاهزة على جيت-هاب. ترجمة -وبتصرف- للمقال HTML Basics. اقرأ أيضًا المقال السابق: التعامل مع الملفات في عملية تطوير موقع الويب توثيق لغة HTML العربي مكونات الويب: عناصر HTML المخصصة وقوالبها دليل: تعلم لغة HTML1 نقطة -
المشكلة هذه عقدتني ليومين لكن حلها بسيط جدا 1- قم بتوليد ال key ضمن ال terminal $ keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 2- ستجد ضمن مجلد المشروع ملف اسمه debug.keystore 3- قم بنسخه و الصقه ضمن المسار اسم جهازك/.android1 نقطة
-
أداة البناء Grunt أو Gulp، مكتبة require.js، browserify، الإصدار السادس من ES، المفسرات، أطر عمل React و Angular و Amber، التعابير المغلقة (closures)، سلسلة prototype. ارتفاع في ضغط الدم يؤدي إلى سكتة دماغية. حسنًا، تطوير الويب أمرٌ ممتع جدًا، لكن JavaScript مروعة! تجد نفسك منسجمًا تمامًا مع جميع جوانب تطوير الويب، لكن عندما يأتي الأمر إلى JavaScript فستشعر أنَّ جزءًا كبيرًا من المعلومات الأساسية ينقصك بينما يعرفه الآخرون، والذي سيؤدي إلى جعلهم يفهمون سكربتات JavaScript. نعم، الحقيقة هي أنَّك تفتقد بالفعل إلى بعض القطع؛ لكن هذا لا يعني أنَّ التوجه الحالي لتطوير الواجهات الأمامية ليس مجنونًا! اطمئن، فأنت لستَ بمفردك، لذا اسحب كرسيًا واجلس، وجهِّز نفسك لكتابة تطبيق JavaScript. أوّل خطوة هي ضبط بيئة التطوير المحلية، لذا اتخذ قرارك: هل ستستخدم Gulp، أم Grunt، لا! سأستعمل سكربتات NPM. هل أستعمل Webpack أم Browserify أم Require.js؟ هل أتخذ قرارًا مصيريًا بالانتقال إلى الإصدار السادس من ES؟ أليس ضروريًا أن أضع مرجعًا عن أمراض القلب بجواري؟ كيف سأنظِّم اختبار الشيفرات؟ هل من إطارِ عملٍ تنصحني به؟ أليس من الأفضل تشغيل الاختبارات من سطر الأوامر، لنستعمل إذًا PhantomJS؟ مع أي إطارٍ أذهب: Angular أم React؟ ربما Ember؟ ماذا عن Backbone؟ ربما قرأتَ بعض صفحات توثيق React ووجدتَ فيها أنَّ «Redux هو حاويةٌ ذاتُ حالةٍ قابلةٍ للتوقع لتطبيقات JavaScript» وبدت على وجهك أمارات الرضى، فمن المؤكد أنَّك ستحتاج إلى هذه الميزة العظيمة، بغض النظر عن أنَّك لم تفهم حرفًا من شرحها. السؤال الآن هو: لماذا أصبح تطوير تطبيقات JavaScript أمرًا يدفع إلى الجنون؟! دعني أساعدك لفهم سبب ذلك. لنبدأ بمثالٍ بسيطٍ ثم سنستعرض صورًا جميلةً توضِّح وجهة نظري. هذا تطبيق «Hello, World!» مكتوبٌ باستخدام React: // main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); لم ننتهِ منه بعد: $ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js هنالك عدِّة خطوات ناقصة هنا، مثل تثبيت مكتبة browserify أو ما الذي عليك فعله لتشغيل الصفحة في المتصفح، إذ لا يبدو أنَّ ما سبق سيُنشِئ صفحة ويب قادرة على فعل أيّ شيء! بعد أن تنتهي من إنجاز ما سبق، فستجد ملفًا يدعى bundle.js يحتوي على تطبيق «Hello, World!» السابق المكتوب بمكتبة React والذي يضم حوالي 19374 سطرًا برمجيًا، وكل ما فعلتَه هو تثبيت browserify و babelify و react-dom، التي «تزن» آلاف الأسطر البرمجية. هذه صورة تعبيرية عن برنامج «Hello, World!» في React: حسنًا، هذا تطبيق «Hello, World!» باستخدام JavaScript دون مكتبات: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Hello World</title> </head> <body> <div id="container"></div> <script> document.body.onload = function(){ var container = document.getElementById("container"); container.innerHTML = '<h1>"Hello, world!"</h1>'; } </script> </body> </html> هذا كل ما في الأمر! 18 سطر برمجي (يمكن اختصارها إلى أقل من ذلك)، التي تستطيع نسخها ولصقها في ملفٍ باسم index.html وتنقر نقرتين عليه مما يفتحه في متصفحك. يا للبساطة! إذا كنتَ تفكِّر في هذه اللحظة «أليس إطار React يفعل أكثر من ذاك المثال البسيط الذي كتبته، والذي لا يرقى أن يكون تطبيق JavaScript» فأنت مصيبٌ (تقريبًا)، وعلى بعد خطوة واحدة من فهمك لماذا كل هذا التعقيد. انظر إلى هذه الصورة: أغلبية تطبيقات JavaScript التي ستعمل عليها ستقع في مكانٍ ما في منتصف المنحني الجرسي (bell curve) السابق. وإذا كنتَ في منتصف المنحني السابق وبدأت تطبيقًا بالاعتماد على React فسوف ينتهي بك المطاف بهندسة تطبيقك زيادةً عن اللزوم من بدايته. وهذا هو سبب تعقيد تطوير تطبيقات JavaScript، لأنَّ غرض أغلبية الأدوات التي تظن أنَّك بحاجةٍ إليها هو حلّ المشاكل التي لن تتعرض إليها بتاتًا. أصبحت حالة تطوير تطبيقات JavaScript في الآونة الأخيرة معقدةً ومربكةً لأنَّ الجميع يبالغون في هندسة تطبيقاتهم دون أن يدركوا ذلك. إذًا، كيف يجب أن نبدأ بتطوير تطبيق JavaScript؟ هل علينا استخدام مكتبة شبيهة بمكتبة React أو Angular؟ هل يجب أن نستخدم مدير للحزم؟ ماذا يفترض علينا أن نفعل إذا لم نستخدمهما؟ هل كتابة الاختبارات ضرورية؟ هل علينا أصلًا توليد شيفرات HTML عبر JavaScript؟ هذه هي الأسئلة التي يجب أن تسألها لنفسك قبل أن تبدأ بمجموعة ضخمة من أدوات التطوير. عندما تبدأ بتطوير تطبيق JavaScript فمن المهم أن تختار نقطةً في المنحني الجرسي في المكان الذي تظن أنَّ من المرجح أن يصله تطبيقك في المستقبل من ناحية التعقيد. لن أكذب عليك، فعل ذلك ليس سهلًا ويحتاج خبرةً، لكن هنالك منطقةٌ كبيرة يمكنك أن تبدأ منها أغلبية تطبيقات JavaScript: استعمل مكتبة jQuery مع قوالب لصفحات الواجهة الأمامية مع أداة بناء بسيطة لجمع الملفات وتصغيرها (بفرض أنَّ إطار العمل الذي تستعمله لتطوير السند الخلفي [backend] لا يفعل ذلك تلقائيًا). إذا أردتَ أن تتعلم كيفية هيكلة تطبيق JavaScript بطريقةٍ صحيحة، فعليك أن تبدأ بفهم كيف ومتى ولماذا تستخدم إطار عمل أو حزمة npm أو إصدار ES6 أو متى تكتب اختبارات أو هل عليك جعل الاختبارات تعمل محليًا أو في متصفح، ثم سيأتي دور بقية الأسئلة وحلّ بقية المشاكل. إن أردتَ أن تملأ الفجوات الموجودة في معلوماتك حول تطوير JavaScript وأن تتجنّب الشعور بأنّك تبالغ في تصميم تطبيق JavaScript فحاول أن تتابع ما نطرحه هنا في قسم البرمجة في أكاديمية حسوب. ترجمة -وبتصرّف- للمقال Why JavaScript Development is Crazy لصاحبه Sean Fioritto1 نقطة
