Mimo-Tech

لدرس الثاني

.HTML أھلاً وسھلاً بك إلى الدرس الثاني من كتاب تعلم
سوف نقوم في ھذا الدرس بالتعرف على الخصائص التي یمكن إضافتھا إلى الوسم
من أجل التحكم بالشكل العام للصفحة، وخصوصا فیما یتعلق بالألوان. <BODY>
طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتھا في الدرس الأول. صفحة بسیطة
بخلفیة رمادیة وخط صغیر نسبیاً لونھ أسود. وھذه ھي الإعدادات الإفتراضیة التي
یعتمدھا المتصفح عندما لا نقوم نحن بتحدید إعدادات أخرى. (ربما تقول: أھذه صفحة
إنترنت! أین الألوان والرسومات والخطوط الجمیلة والتنسیقات التي نراھا في صفحات
الإنترنت؟ معك حق لكن مھلاً فما زلنا في البدایة).
سوف نستمر باستخدام صفحتنا ھذه لتوضیح أمثلة ھذا الدرس أیضاً، لكن لن أقوم
بتكرار كتابة وسوم البدایة طالما أن عملنا یتركز في الجزء المخصصلمحتویات
.</BODY> ... <BODY> الصفحة نفسھا أي ضمن الوسمین
لنبدأ العمل یا عزیزي المتدرب !!!!!!!
www.dinaro.com/vb3
23
على التعابیر التي تضاف إلى الوسوم، من أجل (Attribute) نطلق كلمة خاصیة
تحدید الكیفیة أو الشكل الذي تعمل بھا ھذه الوسوم. وبعبارة أخرى فإن الوسم یقوم
بإخبار المتصفح عن العمل الذي یجب القیام بھ أما الخاصیة فتحدد الكیفیة التي سیتم بھا
أداء ھذا العمل.
مثال :
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
hello world !!
</BODY>
</HTML>
الناتج:
www.dinaro.com/vb3
24
وھي تقوم ، <BODY> إلى الوسم BGCOLOR لقد قمت بإضافة الخاصیة
00 فھي القیمة التي تمثل اللون المختار FF بتحدید لون الخلفیة للصفحة. أما 00
وھو ھنا اللون الأخضر، (لاحظ أنھا مكتوبھ بین إشارتي " " )
فمن أین جاءت ھذه القیم، وكیف؟
القلیل عن الألوان...
تلاحظ أن القیم السابقة مكونة من ستة رموز، وھي مكتوبة بالصیغة التالیة:
www.dinaro.com/vb3
25
ھناك ثلاثة ألوان أساسیة ھي الأحمر والأخضر والأزرق، ولكل منھا یوجد 256 درجة
لونیة ویعبر عن ھذه الدرجات بالأرقام من 000 وحتى 255 . ومن خلال مزج ھذه
الألوان بدرجاتھا اللونیة المختلفة نحصل على الألوان الأخرى.
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر
والأزرق. واللون الأبیضمكون من الدرجة 255 من ھذه الألوان. أما اللون الأصفر
فھو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000
من اللون الأزرق... وھكذا بنفس الطریقة یتم تكوین باقي الألوان
256 ینتج لدینا أن عدد الألوان التي یمكن ×256× وبعملیة حسابیة بسیطة 256
الحصول علیھا بمزج الألوان الثلاثة السابقة ھو 16777216 بالضبط.
والتي عبرت عن اللون الأبیضبھا. إنھا FFFFFF حسنا، لكن من أي جاءت الرموز
ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسھ الرقم 16 ویعبر
فالرقم 255 .( A,B,C,D,E,F عنھ باستخدام الأرقام العادیة من 0 إلى 9 والرموز
بالنظام السداس عشري. FF بالنظام العشري العادي یكافئھ الرقم
على الیسار یمثل الدرجة 255 للون الأحمر. والرقم FF إذن فالرقم السداس عشري
على الیمین یمثل FF في الوسط یمثل الدرجة 255 من اللون الأخضر. والرقم FF
الدرجة 255 من اللون الأزرق.
CC وعلى ھذا المنوال یعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699
. أما اللون الأسود فرقمھ ھو 000000
وھذا جدول ببعضالألوان ورموزھا المكافئة بالنظام السداس عشري.
www.dinaro.com/vb3
26
www.dinaro.com/vb3
27
www.dinaro.com/vb3
28
بیان بألوان الخلفیات :
www.dinaro.com/vb3
29
www.dinaro.com/vb3
30
ملاحظة مھمة:
بعضالمتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل ھذه الرموز،
لذلك من الأفضل استخدامھا دائماً.
وبالنسبة لبعض الألوان الأساسیة والدارجة، من الممكن استخدام أسماء ھذه الألوان
مباشرة بدلاً من الأرقام السداس عشریة. وھذا جدول یوضح ھذه الألوان ومسمیاتھا:
ونعود إلى الوسوم و خصائصھا ...
مثال :
www.dinaro.com/vb3
31
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BGCOLOR="#000000"
BACKGROUND="maroc.jpg">
hello world !!
</BODY>
</HTML>
بتحدید صورة كخلفیة (ورق جدران) للصفحة BACKGROUND تقوم الخاصیة
وقد استخدمت الصورة التالیة:
www.dinaro.com/vb3
32
في صفحتي وكانت ھذه النتیجة : maroc.jpg والمسماة
www.dinaro.com/vb3
33
تلاحظ أن المتصفح قد قام بتكرار عرضالصورة بطریقة التجانب وأنھا أصبحت تغطي
كل الشاشة. بحیث حجبت أیضاً اللون الأبیض الذي حددناه كلون الخلفیة (من خلال
والحقیقة أن اللون یظھر فقط عندما لا نقوم باستخدام (BGCOLOR الخاصیة
صورة ما كخلفیة. ومع ذلك یفضل تحدیده إحتیاطاً خاصة وأن بعضالمتصفحات القدیمة
أي لیس بإمكانھا عرض ) Text-Based Browsers توصف بأنھا متصفحات نصیة
الصور). أو ربما ھناك بعضالمستخدمین الذین قاموا بإلغاء خیار عرضالصور تلقائیاً
من متصفحاتھم. إذن لنعطھم على الأقل فرصة مشاھدة بعضالألوان إن لم یستطیعوا
مشاھدة الصور.
إننا نستطیع استخدام الصور بأحجام مختلفة طولیاً أو عرضیاً كخلفیات للصفحة،
والمتصفح نفسھ ھو الذي یقوم تلقائیاً بعرضھا في وضع التجانب مما یعطي الانطباع
بأنھا صورة كبیرة.
ربما لاحظت خلال استخدامك :<BODY> ولنكمل مع باقي الخصائصفي وسم
التي تنقر علیھا لتنقلك إلى صفحات أو (Links) للإنترنت أن معظم الوصلات التشعبیة
مواقع أخرى على الشبكة ھي دائماً ممیزة باللون الأزرق، وأن الوصلات التي قمت
بزیارتھا فعلاً قد تحول لونھا إلى القرمزي. حسناً، ھذه ھي الألوان الإفتراضیة التي
تعتمدھا المتصفحات. لكن قد لا یعجبك ذلك وترید تغییر ھذا النظام. أو ببساطة ربما ترید
استخدام لون أو صورة غامقة لخلفیة الصفحة بما سیؤدي إلى اختفاء ھذه الوصلات أو
حتى اختفاء نص الصفحة نفسھا. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:
www.dinaro.com/vb3
34
والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة
بالألوان بنفس تلك الألوان التي تمثلھا. وألفت نظرك إلى أنھ لا أھمیة للترتیب في كتابة
ھذه الخصائصداخل العبارة.
مثال :
<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY BACKGROUND="dinaro.jpg"
BGCOLOR="#ff9900"
TEXT="#33ff66"
LINK="#6600ff"
VLINK="#ff0000"
ALINK="#999999">
hello world !!
</BODY>
</HTML>
الناتج:
www.dinaro.com/vb3
35
كخلفیة للصفحة؟ dinaro.jpg حاول أن تحللھا! ھل استنتجت أنني قد حددت الصورة
وأنني اخترت اللون البرتقالي للخلفیة (في حالة عدم عرضالصورة السابقة كخلفیة)؟
وان النصسیظھر باللون الأخضر ؟ أما الوصلات التشعبیة فلونھا أزرق، والوصلات
التي تمت زیارتھا ستظھر باللون الأحمر. أما تلك الوصلة الفعالة فستظھر باللون
الرمادي في لحظة النقر علیھا بالفأرة.
إذا كانت ھذه ھي استنتاجاتك... فمبروك، لقد نجحت. وكل ما أتمناه أن تكون قد قضیت
وقتاً ملوناً وزاھیاً مع ھذا الدرس.
ألیس ھذا
ممتعا
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHH

برموز غریبة وكثیرة اسمھا باللغة الانجلیزیة HTML حسناً فلنبدأ الشرح تكتب لغة

وتسمى باللغة العربیة الوسوم . Tags ال

وسم بدایة ووسم نھایة وسوف امثلھ لك من HTML و لكل وسم من وسوم لغة ال

سوف أشرح كل وسم على حدى :

الذي كما ذكرت سابقاً أنھ أھم الوسوم < HTML > والوسم الأول ھو الوسم

لأنھ یقوم بتعریف ، HTML المستخدمة في بناء الصفحات المستخدم فیھا لغة ال

ویوضع ھذا الوسم في أول HTML للمتصفح أن ھذه الصفحة مصنوعة بلغة ال

ولولا ھذا الوسم لظھرت محتویات الصفحة بصورة HTML المستند المصنوع بلغة ال

الذي یوضع أخر المستند < /HTML > باھتة وغیر مفھومة ، وسم النھایة ھو

. HTML المصنوع بلغة ال

الذي یستخدم لتعریف صاحب الصفحة واللغة والعدید < HEAD > فلنأتي الآن للوسم

من الأشیاء التي سوف نشرحھا في دروس قادمة إنشاء الله . وأذكرك أن وسم النھایة

< /HEAD > الخاصبھ ھو

الذي یمثل الجملة التي توضع أعلى الشاشة على < TITLE > نأتي الآن إلى الوسم

ملاحظة یوضع ھذا الوسم بین ، < /TITLE > الیسار ، ووسم النھایة الخاص بھ ھو

< /HEAD > و < HEAD > الوسمین

الذي ھو لب الدروس بأكملھا ، حیث یمثل ھذا < BODY > نأتي الآن إلى الوسم

الوسم محتویات الصفحة بأكملھا حیث تضع فیھ الجداول والصور و المواضیع وكل

ماتریده أن یظھر على الصفحة .

سوف أبسط لك كل ما ذكرت في ھذا الدرس داخل ھذا الرسم التبیاني :

وينتهي بالوسم <HTML> يبدأ دائماً بالوسم Html إذن ملف

لا تنسى ذلك! .</HTML>

اذن عزیزي المتدرب ما رأیك لو نطبق ذلك بصورة عملیة :

.html أو .htm ھو HTML ولا تنسى أن الامتداد المستخدم في أسماء ملفات

مثال :

<HTML>

<HEAD>

<TITLE>

first page web

</TITLE>

</HEAD>

<BODY>

hello world !!

</BODY>

</HTML>

ھل حصلت على نفس النتیجة؟ إذن مبروك لقد قمت بإنشاء أول صفحة ویب خاصة

أو UPPERCASE لا یوجد فرق بین كتابة الوسوم بالأحرف الإنجلیزیة الكبیرة

لذلك تستطیع الكتابة بأي شكل منھما أو حتى الكتابة .lowercase الأحرف الصغیرة

بكلیھما.

إن المتصفحات لا تأخذ بعین الاعتبار الفراغات الزائدة أو إشارات نھایة الفقرات (أي

.Html التي تجدھا ھذه المتصفحات في ملف (Enter عندما تقوم بضغط مفتاح

وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:

<HTML><HEAD><TITLE> first page web

</TITLE></HEAD><BODY>

hello world !! </BODY></HTML>

أو بالشكل التالي:

<HTML>

<HEAD>

<TITLE>

first

page

web

</TITLE>

</HEAD>

<BODY>

hello

world

!!

</BODY>

</HTML>

وفي كل الحالات ستحصل على نفس النتیجة.

إذن كیف یمكن التحكم بمقدار النص المكتوب في كل سطر وكیف یمكن تحدید نھایة

الفقرة وبدایة الفقرة التي تلیھا؟

لتحدید النھایة للسطر. والبدء بسطر جدید (لاحظ أن ھذا سوف نستخدم الوسم

الوسم مفرد، أي لیس لھ وسم نھایة).

قم بتعدیل الملف السابق لكي یصبح بالشكل التالي :

<HTML>

<HEAD>

<TITLE>

first page web

</TITLE>

</HEAD>

<BODY>

hello world !!

</BODY>

</HTML>

الذي یقوم تقریباً بنفس عمل الوسم السابق أي أنھ ینھي وھناك أیضا الوسم

السطر أو الفقرة ویبدأ بسطر جدید لكن مع إضافة سطر إضافي فارغ بین الفقرات.

<HTML>

<HEAD>

<TITLE>

first page web

</TITLE>

</HEAD>

<BODY>

hello world !!

</BODY>

</HTML>

أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطیع التحكم بھا وبعددھا إلا باستخدام

وإذا .(Non Breakable Space والأحرف ھي اختصار للعبارة ) nbsp;& الوسم

أردت إدخال عدة فراغات بین نصوآخر ما علیك إلا كتابة ھذا الوسم بنفس عدد

الفراغات المطلوب. كما یجب علیك التقید بالأحرف الصغیرة ھنا.

مثال :

<HTML>

<HEAD>

<TITLE>

first page web

</TITLE>

</HEAD>

<BODY>

hello     world     !!

</BODY>

</HTML>

ھناك العدید من ھذه الرموز والتي یجب أن تكتب بصورة معینة وباستخدام الوسوم

ولیس مباشرة بصورتھا العادیة.

HTML كل ھذه الإشارات تستخدم أصلاً مع الوسوم فھي محجوزه ضمن مفردات لغة

ومن الخطأ استخدامھا بصورتھا الصریحة لئلا یؤدي ذلك إلى حدوث مشاكل في طریقة

عرضالصفحة. كذلك فإن ھناك رموزاً غیر موجودة أساساً على لوحة المفاتیح كرمز

ونحتاج إلى ھذه الطریقة(طریقة الوسوم) ® ورمز العلامة المسجلة © حقوق الطبع

لكتابتھا.

وإلیك جدول ببعضھذه الرموز ووسومھا المكافئة. وألفت نظرك إلى أنھا تكتب كما

ھي في الجدول وبدون إشارتي < >

Avantages

Portable (java), ne nécessite pas d'installation ni de droits
On peut exporter facilement ses settings, et ainsi les transporter à travers toutes les plateformes
Par ailleurs, tous les IDE de JetBrains sont basés sur le même modèle, ce qui fait qu'on est pas perdu entre les différents langages (C, Java, JavaScript etc.) et que l'on peut exporter la plupart de ses settings entre les différents IDEs. Même AndroidStudio est basé sur un IDE JetBrains!
Intuitif et entièrement configurable
Propriétaire, donc propre, (NDLR: le blog décline toute responsabilité quant à ce genre de propos...) tout en étant open source, documenté et marche quelques soient les conditions, et non grâce à une succession d'éléments favorables
Support d'IPython
Par défaut un correcteur qui souligne ce qui n'est pas en accord avec la pep8 !
Supporte les environnements virtuels et conda

Inconvénients

Consommation mémoire élevée (500Mo sur mon pc), peut être dû à mes 16go de mémoire (oui la mienne est plus grosse que la tienne, je parle de mon unité centrale)
De base, le fichier du projet n'est pas en source root pour les modules, ce qui fait que l'on ne peut pas importer les classes que l'on a créées dans son projet. (clic droit marquer as root sur le dossier, puis dans settings "Add source roots to PYTHONPATH") Une fois que c'est fait il n'y a plus à s'en préoccuper, même pour les autres projets, juste mettre le dossier en source root.

Pas de CTRL+F dans la sortie console
L'introspection du code est parfois (rarement) capricieuse pour les modules externes. Il est possible aussi d'exclure des dossiers de l'indexation pour un démarrage plus rapide dans les gros projets.
Sur Windows, le dossier contenant git.exe est un dossier caché, dont le nom à la fâcheuse tendance de changer aléatoirement. Un message d'erreur apparait alors vous demandant ou est git.exe, c'est donc bien pratique de cocher "show hidden path" pour retrouver le dossier...

Prérequis pour une utilisation optimale

Windows 10
Ecran 4k

Ergonomie

Edition simple des raccourcis claviers, tous entièrement configurables
Des champs de recherche partout pour retrouver facilement les options
Editeur divisible en plusieurs fenêtres, réarangeables comme bon vous semble (clic droit sur l'onglet, "split")
Option plein écran, avec un affichage de l'heure! (mais aussi un mode présentation et "distraction free")
Thème et police intégralement configurables et indépendants des couleurs système (pas comme éclipse par exemple).
Une fonction "loupe" pour voir le code qui est plus loin sans scroller. Ici j'ai voulu regarder ce qu'il y avait autour de mes TODO, symbolisés par les barres bleues. Si vous ne savez pas à quoi correspondent les couleurs des marqueurs d'erreur, pas de problème, des petits messages marron (ici avec les todo) apparaissent par-dessus le code pour expliquer le type d'erreurs/remarques. Les marqueurs bleu/rouge/vert à côté des numéros de lignes correspondent au contrôle de version

Automatismes

Snippets

Création de snippets (ou "live template"): Ayant, parait-il, parfois un code difficilement lisible, j'aime bien insérer de beaux commentaires, avec de jolis effets entre deux gros pâtés de codes, histoire d'aérer un peu (je ne sais pas si c'est très Charlie ni PEP8, mais bon). Sauf que le processus est généralement assez chiant. C'est là qu'interviennent les snippets: On clique sur le '+' vert pour en ajouter un, (au passage on note que Pycharm dispose de plein d'options pour d'autres langages) puis on rentre l'abréviation qui appellera le snippet dans l'éditeur, puis enfin le bout de code. On place ensuite les variables sur lequel le curseur se placera automatiquement, puis on change l'ordre dans lequel les variables sont éditées, avec les flèches dans edit variable. Ainsi, lorsque je tape com1 dans l'éditeur, j'appuie sur entrée, je tape le commentaire, entrée, puis j'ajuste la longueur de la décoration en fonction. Il faut aussi penser à bien mettre Python dans le champ en bas, applicable in. On peut choisir plusieurs langages où le snippet sera effectif.

Les possibilités sont infinies, avec des commentaires aussi esthétiques que de bon goût vous ne manquerez pas d'impressionner vos zuperieurs ! arh !

Refactoring

Le refactoring (clic droit > refactor) (faut créer un projet cependant, sinon cela ne marche que pour les variables locales à l'intérieur de fonctions) existe en deux types:
- Le classique, une boite de dialogue s'ouvre, avec ensuite une fenêtre pour contrôler que l'on a bien le résultat attendu: Ici, lors du renommage d'une méthode, tous les usages de la méthode sont affichés pour nous permettre de contrôler ce qui doit être renommé ou non.
- Le "in-place" refactoring, pour certaines variables par exemple, qui se fait dans l'éditeur (sélection des occurrences de la variable, pour la renommer)

Docstring

Docstring automatique pour les fonctions (taper """ + entrée à l'emplacement de la docstring) Il y a aussi possibilité de mettre les types des paramètres de la fonction dans la docstring, il faut cocher la case Collect run-time types information for code insight dans les options du debugger Python, cependant je n'ai pas réussi à faire marcher ce truc (édition community ?). On peut aussi changer le type de formatage de docstring, dans settings -> tools -> python integrated tools.

Intentions

Lorsque vous placez votre curseur sur une ligne de code, une petite ampoule apparait parfois au niveau des numéros de ligne, et ce de manière contextuelle. Ce sont les intentions, et vous pouvez cliquer dessus ou faire alt+entrée. Ces intentions peuvent servir à corriger une erreur que Pycharm détecte, faire du refactoring, insérer des docstring, des annotations... Chaque intention peut être désactivée à la volée, en cliquant sur la petite flèche. Je vous suggère d'ailleurs d'explorer les différentes intentions pour voir les possibilités.

Contrôle de version

Intégration de git (et d'autres), possibilité de push, pull, merge... avec visualisation des changements et historique des commits et des versions à chaque enregistrement ! En fait, même si vous n'avez pas configuré votre projet pour être synchronisé avec git, un historique des versions est quand même conservé. (en rouge les lignes qui ont été supprimées, vert celles ajoutées et bleu les modifiées) Très pratique pour faire des merges, il n'y a qu'à cliquer sur les bouts que l'on veut garder. Lorsque vous faites des tests unitaires, les résultats de ces tests sont conservés et affichés au niveau des différentes versions.

Clic droit sur le code + create gist vous permet de faire des pastebin en passant par github

Autres automatismes

Détection automatique des todo et fixme dans les commentaires
Un outil d'inspection de code dégueulasse, qui vous montre toutes les conneries et les trucs moches que vous avez faits. (Code > inspect code)

Voici un exemple de ce qu'il peut trouver sur du code dégueulasse..

Dans la même veine, optimize import enlève tous les imports inutilisés

Visualisations

Tests unitaires

Clic droit sur la classe, GoTo > Test. Là, on propose de faire un nouveau test, et de sélectionner les méthodes à tester. Cela va créer par défaut un test avec le module unittest.TestCase, que l'on pourra ensuite éditer, en pensant à importer le module à tester.

À noter que PyCharm supporte nosetest (et d'autres), mais sa détection automatique pose un peu problème lorsque l'on complexifie le test. Il faut alors sélectionner la config de test via le menu déroulant à côté de la flèche de run. On peut choisir les différents niveaux d'exécution du test via edit run configuration: fonction, classe, script entier (conseillé) Il faut aussi bien penser à préfixer les methodes/fonctions par test_ pour nosetest.

Quelques soient les tests choisis, on obtient une visualisation graphique des résultats des tests, en plus de la sortie console. On peut même intégrer les tests dans le script que l'on veut tester, et juste changer de config de run pour lancer les tests.

Tableaux

Le debugger peut voir de manière graphique les array numpy et panda. Tellement dommage d'ailleurs que ça ne marche pas pour les listes.

Autres

Plugins qui se téléchargent et mettent à jour facilement. (Je conseille les plugins de visualisation du markdown, le plugin latex quant à lui ne permet pas encore de visualisation)
Possibilité de faire ses propres highlights de mot clef et détection de commentaires en fonction des langages, par exemple pour ASP (settings > editor > file types)
Pour aller plus loin il est possible de créer des plugins

Quelques raccourcis..

ctrl+clic sur un appel de fonction vous amène directement à l'endroit où est déclarée la fonction
Sélection multi-ligne: alt+drag vous permet de sélectionner verticalement le texte (sous Linux, en tout cas avec KDE vous risquez cependant d'avoir des problèmes...)
ctrl+/ pour commenter des lignes
Doucle Maj permet d'ouvrir un ctrl+f sur tous les fichiers ouverts dans l'éditeur

A reconfigurer selon les goûts

La sauvegarde automatique (désactivée pour moi, avec l'ajout de l'étoile pour les fichiers non sauvegardés)
Le raccourci de run contextuel
Affichage des numéros de lignes
La touche F5 pour la synchronisation des fichiers avec le système
La documentation au survol de la souris
Le highlight des variables sélectionnées
Activer la console interactive, pour interférer après l'exécution du script: run -> edit configuration, puis mettre -i dans les options de l'interpréteur.

Comme le processus n'est pas arrêté, si vous relancez le programme cela entraine l'ouverture d'un autre processus, ce qui est un peu chiant. Il faut alors appuyer sur le carré rouge pour terminer le processus avant de le relancer. C'est pour cela que je n'utilise pas trop la console interactive. Sinon en lançant le debugger, on peut lancer des commandes en cliquant sur le bouton en dessous de la poubelle.

Pour finir

Voici mes settings Pycharm à télécharger Cela va permettre de passer l'étape un peu laborieuse de la première configuration

F9 pour le run contextuel
F5 pour le rafraichissement de l'explorateur de fichier
Des snippets (com1 et att) pour faire des patterns de jolis commentaires
Plus plein de trucs sympas dont je ne me souviens plus.

ان اسف لان الموضع بالفرنسية

إن كنت تتطلع إلى أن يكون لك تواجداً في سوق كبير، يرتاده المليارات من البشر يومياً، فهذا يتطلب منك أن تمتلك موقعاً خاصاً بك على اﻹنترنت، يكون بمثابة معرض تقدم فيه منتجاتك، أو خدماتك،
أو حتى أفكارك، مما يزيد من عدد عملائك، و بالتالي زيادة مبيعاتك و أرباحك .
و لكن كيف تستطيع الوصول إلى هدفك هذا ؟
هناك طريقان تستطيع عن طريقهما إمتلاك موقع على الإنترنت
1 – أن تقوم بتصميم موقع على الإنترنت بنفسك، أي أن تقوم بأنشائه من البداية، و ذلك عن طريق القيام بخطوات كثيرة، حتى تصل إلى التصمييم النهائي للموقع، و يستلزم ذلك تعلم مهارات فنية، و إمتلاك أدوات تقنية .
2 – أن تعهد إلى شركة، أو مصمم مواقع، القيام بتصميمه، و يكون دورك منصباً على إدارة الموقع بعد تصميمه .
تصميم موقع على الإنترنت من البداية
يتطلب تصميم موقع على الإنترنت عدة شروط لابد من توافرها في موقعك :
1 – المصداقية ” Credibility “ :
لابد أن تتسم المعلومات الواردة في الموقع بالمصداقية، حتى يثق الزائر بموقعك، و يقوم بزيارته مرة أخرى، و لكي يتحقق ذلك، عليك أن تقوم بتقديم محتوى جيد يستفيد منه الزوار، و سنتطرق إليه عند الحديث
عن طرق كتابة محتوى حصري لموقعك .
2 – سهولة الاستخدام " Usability “ :
إذا كنت تريد أن يقضي الزوار وقتا طويلاً في موقعك، مما يزيد من احتمالات شرائهم لمنتجاتك، أو طلب خدماتك، فيجب أن يكون تصميم الموقع غاية في الدقة و الروعة، و سهولة التنقل بين صفحاته .
3 – سهولة الوصول " Search ability “ :
لن تستفيد شيء إذا كان تصميم موقعك رائع، و محتواه ممتاز، و تصفحه غاية في السهولة، إذا كان الزوار لا يستطيعون الوصول إليه عن طريق محركات البحث، أو مواقع التواصل الاجتماعي، و تستطيع أن تتغلب على ذلك عن طريق تقنية ال “ SEO " ، و سنتطرق إليها عن الحديث عن كيف تقوم بتهيئة موقعك لمحركات البحث .
4 – قابل للتوسع " Scalability “ :
كما يتطلب عملك في الواقع القابلية للتوسع، يجب أن يكون موقعك قابل للتوسع، و ذلك عن طريق تقديم المزيد من المنتجات، أو الخدمات، أو الأفكار، و إلا سيكون موقعك ناقص، و سيهرب منه الزوار سريعاً

لإتقان هذه اللغة و للوصول إلى مستوى متقدم بها كما أن الكتاب ينصبح به من قبل الكثير من المبرمجين و المصممين

المحترفين كالاستاذ أسامة صاحب قناة Elzero Web School . إذا لن أطلب عليكم.

إسم الكتاب : HTML-and-CSS-Design-and-Build-Web-Sites-Jon-Duckett
رابط التحميل : إضغط هنا للتحميل

في هذه المرحلة سنقوم بجلب بيانات المتصفحين وحفظها في الجدول المخصص لذلك ..
قمت بتقسيم الكود الخاص بهذه المرحلة إلى 4 أقسام رئيسية , بحيث يقوم كل قسم بعمل خطوة معينة من خطوات هذه المرحلة وهي كالتالي:

1- المرحلة 1 جلب رقم الأيبي و تحليل الدولة
الكود لهذه المرحلة هو

رمز Code:

//====== Part 1 : check and get ip details of the visitor========
if(!isset($_SESSION['IpAddress'])){
    //*******************************************First get the Real IP Address of the visitors====
$useragent = $_SERVER['HTTP_USER_AGENT'];// get system info

function getRealIPAddress(){   
    if(!empty($_SERVER['HTTP_CLIENT_IP'])){
        //check ip from share internet
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    }else if(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
        //to check ip is pass from proxy
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }else{
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

$_SESSION['IpAddress']=getRealIPAddress();
//====================================//
//***************************************** get the details of the IP address
function getCountryFull(){
    $ip= getRealIPAddress(); // call the function of Geiting The Ip to get the IP real one
    $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));    
    if($ip_data && $ip_data->geoplugin_countryName != null){
    $country= $ip_data->geoplugin_countryName;
    }
    return $country;
}
//___---+++ Because some servers doesn't support the pervious code, the next one may work better
function getLocationInfoByIp($ipaddress){
        $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ipaddress));
        if($ip_data && $ip_data->geoplugin_countryName != null){
            $country= $ip_data->geoplugin_countryName;
        }
       return $country;
    }

function getCountry(){
    $ip= getRealIPAddress(); // call the function of Geiting The Ip to get the IP real one
    $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));    
    if($ip_data && $ip_data->geoplugin_countryName != null){
    $country= $ip_data->geoplugin_countryCode;
    }
    return $country;
}


//====================================//
if (getCountryFull() != null){
    $_SESSION['CountryName']=getCountryFull();
} else{
    if (getLocationInfoByIp($ip) != null){
        $_SESSION['CountryName']=getLocationInfoByIp($ip);
        } else{
            echo "</br>Oooh No the 2 second code is  Null";
        }
}

if (getCountry() != null){
    $_SESSION['CountryCode']=getCountry();
} else{
    if (getLocationInfoByIp2($ip) != null){
        $_SESSION['CountryCode']=getLocationInfoByIp2($ip);
        } else{
            echo "</br>Oooh No the 2 second code is  Null";
        }
}

    } /// end of checking of Session ipaddress


//================= End of Part 1 : Albadani Network =====================

وشرح الكود كالتالي:
أولا نقوم بمعرفة الأيبي للزائر , ومعرفة هل هو أيبي حقيقي أم لا عبر الكود هذا

رمز Code:

if(!isset($_SESSION['IpAddress'])){
    //*******************************************First get the Real IP Address of the visitors====
$useragent = $_SERVER['HTTP_USER_AGENT'];// get system info

function getRealIPAddress(){   
    if(!empty($_SERVER['HTTP_CLIENT_IP'])){
        //check ip from share internet
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    }else if(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
        //to check ip is pass from proxy
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }else{
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

$_SESSION['IpAddress']=getRealIPAddress();

ثم نقوم بتحليل هذا الأيبي
ملاحظة: عملية التحليل ليست بهذه السهولة , لذا تقدم الكثير من المواقع خدمة تحليل الأيبي لمن يرغب بذلك , وهذه المواقع كثيرة وانا قد اخترت لكم احدها , ولكم الحق في اختيار أي موقع اخر أو طرق أخرى حسب رغبتكم
الموقع المستخدم لهذه العملية هو geoPlugin to geolocate your visitors

وللقيام بالتحليل تم اضافة functions لجلب بيانات الدولة , الأولى لجلب الاسم الكامل للدولة , والآخر لجلب الكود الخاص بالدولة , مثلا اليمن اسمها الكامل Yemen والكود تبعها هو Ye وهكذا

رمز Code:

//***************************************** get the details of the IP address
function getCountryFull(){
    $ip= getRealIPAddress(); // call the function of Geiting The Ip to get the IP real one
    $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));    
    if($ip_data && $ip_data->geoplugin_countryName != null){
    $country= $ip_data->geoplugin_countryName;
    }
    return $country;
}
//___---+++ Because some servers doesn't support the pervious code, the next one may work better
function getLocationInfoByIp($ipaddress){
        $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ipaddress));
        if($ip_data && $ip_data->geoplugin_countryName != null){
            $country= $ip_data->geoplugin_countryName;
        }
       return $country;
    }

function getCountry(){
    $ip= getRealIPAddress(); // call the function of Geiting The Ip to get the IP real one
    $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));    
    if($ip_data && $ip_data->geoplugin_countryName != null){
    $country= $ip_data->geoplugin_countryCode;
    }
    return $country;
}


//====================================//

وأخيراً .. يتم تنفيذ الفانكشنز و حفظ البيانات في الجسلة , كما يلي

رمز Code:

if (getCountryFull() != null){
    $_SESSION['CountryName']=getCountryFull();
} else{
    if (getLocationInfoByIp($ip) != null){
        $_SESSION['CountryName']=getLocationInfoByIp($ip);
        } else{
            echo "</br>Oooh No the 2 second code is  Null";
        }
}

if (getCountry() != null){
    $_SESSION['CountryCode']=getCountry();
} else{
    if (getLocationInfoByIp2($ip) != null){
        $_SESSION['CountryCode']=getLocationInfoByIp2($ip);
        } else{
            echo "</br>Oooh No the 2 second code is  Null";
        }
}

    } /// end of checking of Session ipaddress


//================= End of Part 1 : Albadani Network =====================

2- المرحلة الثانية هي لحفظ المتغيرات المطلوبة كما يلي

رمز Code:

//====== Part 2 : make var to save the data that you want ================
$date=date("d/m/Y");
$time=date("H:i:s");
$ipaddress=$_SESSION['IpAddress'];
$CountryName=$_SESSION['CountryName'];
$CountryCode=$_SESSION['CountryCode'];
echo $date."</br>".$time."</br>".$ipaddress."</br>".$CountryName."</br>".$CountryCode;
//================= End of Part 2 : Albadani Network =====================

أما الثالثة فهي للاتصال بالقاعدة عبر ملف الاتصال cinfg.php كما يلي , مع ملاحظة تغيير مسار المجلد للوصول إلى الملف الصحيح..

رمز Code:

//====== Part 3 : call confg file to make connection to db ===============
require_once("include/confg.php");
//================= End of Part 3 : Albadani Network =====================

وأخيراً الحفظ في قاعدة البيانات .. حيث في البداية يتم التأكد من الآيبي , هل قد تم حفظ بياناته لهذا اليوم في القاعدة سابقاً .. فإذا كان كذلك فيتم الاكتفاء بتعديل بيانات أخر وقت للزيارة و أيضاً عدد الصفحات التي تم تصفحها, وأخر صفحة تم زياراتها , كما في الكود التالي:

رمز Code:

//====== Part 4 : save the process to the database ===============
if($connect){
    $sql="select * from visits_info where date='$date' and ip_address='$ipaddress'";//check does the ip visi us today?
    $query=mysqli_query($connect,$sql);
    $rows=mysqli_num_rows($query);
        if($rows==0 ){
        $sql="INSERT INTO visits_info (ip_address,system_info,country_name,country_code,date,time,last_time,pages_view,day,month,year,current_place) values('$ipaddress','$useragent','$CountryName','$CountryCode','$date','$time','$time','1','$dd','$mm','$yy','$what_page')";
        $query=mysqli_query($connect,$sql);
    }
        else{
            $sql="update visits_info set pages_view=pages_view+1 , last_time='$time' , user_id='$userId' , pervious_place=current_place , current_place='$what_page' where date='$date' and ip_address='$ipaddress'";
            $query=mysqli_query($connect,$sql);    
        }
}
//================= End of Part 4 : Albadani Network =====================

ملاحظة : يمكن ولغرض توفير بيانات أكثر عن الصفحات التي تم زيارتها لمعرفة الصفحات الأكثر زيارة , يمكن تحقيق ذلك عن طريق إنشاء جدول أخر لحفظ البيانات الخاصة بذلك , بحيث يتم حفظ البيانات المطلوبة ومثال لها ( الأيبي , التاريخ , الوقت , الصفحة ,وأية بيانات تريدها ) .

في النهاية يصبح الكود الكامل لهذه العملية كما يلي

رمز Code:

<?php

//====== Part 1 : check and get ip details of the visitor========
if(!isset($_SESSION['IpAddress'])){
    //*******************************************First get the Real IP Address of the visitors====
$useragent = $_SERVER['HTTP_USER_AGENT'];// get system info

function getRealIPAddress(){   
    if(!empty($_SERVER['HTTP_CLIENT_IP'])){
        //check ip from share internet
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    }else if(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
        //to check ip is pass from proxy
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    }else{
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

$_SESSION['IpAddress']=getRealIPAddress();
//====================================//

لكل لغة برمجة نمط أو قواعد خاصة في كتابة الجمل البرمجية وتنظيمها، ويجب اتباع هذا القواعد حتى يتمكن مفسّر اللغة من تفسير الكود المكتوب بدون أخطاء. ولغة “بايثون” Python مثل أي لغة برمجة لها قواعدها لذلك، وفيما يلي أهم هذه القواعد:

“المسافات البادئة” Indentations:

على خلاف معظم لغات البرمجة الأخرى والتي تعتمد في تنظيم الجمل على استخدام علامات الترقيم أو الأقواس {}، فإن بايثون تعتمد على الإزاحات أو المسافات البادئة.

في موضوع كيفية كتابة برنامج Hello World استخدمنا هذه الجملة بسيطة التركيب:

Python

1

print "Hello, World!"

حيث أن هذه العبارة البسيطة منفردة وليست جزءًا من “تركيبة” Suite (مجموعة من العبارات الفردية والتي تشكل معّا كتلة برمجية واحدة ) فتكتب من بداية السطر بدون مسافات.
أما العبارات المركبة أو المعقدة (مثل if, while, def, class ) فهي تتكون من جزئين هما “رأس” Heading و “تركيبة” Suite.
تكتب الرأس وفي نهايته نقطتان (:) وتبدأ التركيبة من السطر التالي مع ترك مسافة بادئة في بداية كل سطر.
لا يشترط عدد معين من المسافات، ولكن يجب أن يكون عدد المسافات ثابت في جميع أسطر التركيبة.
للتوضيح أكثر تأمل الكود التالي جيدًا:

a code with correct indentations

Python

1

2

3

4

5

6

7

8

if website == "KeefCode" : # this is the heading

    # this is the suite 

    # all the lines here should have the same indentation

    print "Welcome!"

    print "you're  in the right place!"

else : # another heading

  # another suite

  print "I think you should visit KeefCode, I'm sure you'll like it"

الكود السابق سيعمل بشكل جيد بدون أخطاء تخص الإزاحة، لكن الكود التالي سيحدث خطأ:

code with indentation error

Python

1

2

3

4

5

6

7

8

if website == "KeefCode" : # this is the heading

    # this is the suite 

    # all the lines here should have the same indentation 

    print "Welcome!"

  print "you're  in the right place!"

else : # another heading

  # another suite

  print "I think you should visit KeefCode, I'm sure you'll like it"

“المعرّفات” Identifiers:

وهي أسماء تستخدم لتعريف “متغير” Variable، “دالة” Function، “صنف” Class، أو “وحدة” Module (مثل كلمة website في الكود السابق) ويجب مراعاة التالي عند اختيار الاسم:

أن تبدأ بأي حرف كبير أو صغير (a-z) ويمكن أن تحتوي على أرقام أو _ دون أن تحتوي على رموز أخرى.
مراعاة حالة الأحرف، لأن بايثون حساسة بالنسبة لحالة الأحرف فـ Website و website معرَّفان مختلفان.
تجنب الأسماء المحجوزة (وهي الأسماء أو الدوال المعرّفة مسبقًا بواسطة اللغة لتأدية مهام معينة ولا يمكن استخدامها لتعريف متغير أو دالة أخرى مثل if و print في الكود السابق) وهذه قائمة بالأسماء المحجوزة في بايثون والتي ستتعرف على استخدام كل منها لاحقًا:

كتابة أكثر من جملة في سطر واحد، لفعل ذلك يتم الفصل بين الجمل بفاصلة منقوطة ; كما في الكود التالي:

writing more than one statements in the same line

Python

1

print "Hello, World!" ; print "welcome to KeefCode"

كتابة عبارة واحدة على أكثر من سطر، وذلك بكتابة “باك سلاش” back slash \ في نهاية السطر لتدل على أن باقي الجملة في السطر التالي:

Multi-Line Statement

Python

1

2

3

4

print 1 + 2 \

    + 3 + 4 \

    + 5 + 6

# the print result will be 21

كتابة الاقتباسات أو “السلاسل النصية” String:

ربما لاحظت بالأكواد السابقة تحديدًا بعد عبارة print يكتب النص المراد إخراجه للمستخدم محاطًا بعلامات الاقتباس.

بايثون تقبل كلًا من علامات الاقتباس الفردية ‘ و المزدوجة “ للسلاسل النصية ذات السطر الواحد، لكن يجب أن تبدأ وتنهي السلسلة النصية بعلامات اقتباس من نفس النوع.
أما السلاسل النصية متعددة الأسطر تستخدم علامة اقتباس ثلاثية ‘’’ أو “””، راقب الكود التالي:

quotations in python

1

2

3

4

single_quoted = 'Hi, I am a single quoted string'

double_quoted = "Hi, I'm a double quoted string"

triple_quoted = """ Hi, 

I'm a multi-line string """

“التعليقات” Comments:

وهي عبارات يتم تجاهلها عند ترجمة الكود وتُكتب لتسهيل قراءة الكود للآخرين أو توضيح أمرًا بخصوصه أو حتى لتُذكِّر نفسك لماذا كتبت هذا الجزء من الكود، ولمعرفة المزيد عن التعليقات اقرأ ما هي التعليقات في لغات البرمجة.

في بايثون يتم تعريف التعليق عن طريق إسباقه بـ رمز “المربع” Hash #.
ببساطة عندما يرى بايثون رمز # يتجاهل ما يليه وينتقل مباشرة للسطر التالي.
هل لاحظت التعليقات في الأكواد السابقة؟!

ربما بعض الأمور بدت واضحة والبعض الآخر لم يتضح لك كما ينبغي، فلا تقلق حيال ذلك فكل هذه الأمور ستصبح بديهية جدًا فيما بعد مع الممارسة ومتابعة التّعلم.

Mimo-Tech

الخميس، 4 يناير 2018

درس التاني في تعلم html

درس الاول في تعلم html

الثلاثاء، 2 يناير 2018

pycharm تعريف بسيط ل

Avantages

Inconvénients

Prérequis pour une utilisation optimale

Ergonomie

Automatismes

Snippets

Refactoring

Docstring

Intentions

Contrôle de version

Autres automatismes

Visualisations

Tests unitaires

Tableaux

Autres

Quelques raccourcis..

A reconfigurer selon les goûts

Pour finir

ان اسف لان الموضع بالفرنسية

الاثنين، 1 يناير 2018

تصميم موقع على الإنترنت 4 نصائح قبل أن تبدأ

أفضل كتاب لإحتراف Html5 و عمل المواقع

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

كيفية تركيب الجُمل البرمجية في Python

“المسافات البادئة” Indentations:

“المعرّفات” Identifiers:

كتابة الاقتباسات أو “السلاسل النصية” String:

“التعليقات” Comments:

المشاركات الشائعة

التسميات

po

po

ff

r