[ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة - FreeXBTC

أحدث المشاركات

Post Top Ad

Post Top Ad

السبت، 11 فبراير 2017

الرئيسية اضافات برمجة حصريات عام كل ويب Plugin Programming Web Web Development [ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة

[ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة

[ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة

[ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة


Emmet, الأضافة المعجزة لكل مطوري الويب ( Web Developers ) العرب, الأضافة التي ستسهل عليك عمل ساعات في دقائق, الأضافة التي ستزيد حبك للبرمجة بشكل عام لما فيها من ميزات انا بنفسي زهلت عندما رأيت ما بها من ميزات بصراحة هي كنز بمعني الكلمة, باستخدام اضافة Emmet ستكتب كود بسرعة هائلة انا شخصياً غير متخيل الموضوع.

الاضافة Emmet  متوفرة علي معظم محررات الاكواد المشهورة عالمياً وبسيطة لكي تستخدمها.

الاضافة Emmet هي مصدر مفتوح Open Surce مشروع خاص بال MIT. صدقني بعد قراءة هذه المقالة لن تكتب كود CSS & Html بدونها بعد الان, الاضافة التي ستوفر عليك الوقت والجهد وستجعلك محترف ولاكن بعد تعلم كيفية استخدامها, الاضافة ليست صعبة لكي تتعلمها بل سهلة جداً جداً وبسيطة وغير معقدة تحتاج بعض الوقت مع التركيز والتدقيق علي الخطوات والتطبيق عليها لكي تستطيع العمل بها بشكل احترافي.

الاضافة مطورة بواسطة Sergey Chikuyonok and Emmet's community  ومصممة في عام 2008 بواسطة Vadim Makeev.


تنصيب إضافة Emmet :-

الاضافة لا تحتاج اكثر من برنامج او محرر اكواد يقبل الاضافات Built-in Plugin, بعدها مباشرة تذهب الي موقع الاضافة وتحمل الاضافة من خلاله ويمكنكم الاطلاع علي الاضافة بشكل ادق ومتابعة اخبارها ودروس تعليمية لها بالصوت والصورة من هنا.

الأستخدام :-

سأضع لكم الان الطريقة والكيفية الاستخدام للاضافة بشكل ادق ومفصل جداً وان شاء الله لا يقف امامكم شي.
Emmet تعمل علي اختصار كتابة الاكواد بحيث ان الكود بيكتب بشكل مختصر ويفك للمحرر بشكله الطبيعي بواسطة الاضافة كما سترون الان في الامثلة التي ساعرضها عليكم باستخدام لغتي البرمجة Css - Html.

مثال مبسط عندما نكتب هذا الكود

html>head>title{Hello}^body>p{Hello World!}


يفهم بواسطة المحرر هكذا :


<html>
<head>
  <title>Hellotitle>
head>
<body>
  <p>Hello World!p>
body>
html>
معلومة : لا بمكن اسنخدام ال Space بوسط الاكواد
الاكواد الفرعية هذه تكتب هكذا بواسطة الاضافة
div → <div>div>
p → <p>p>
a → <a href=””>a>
< : تتيح لك ان ترتب الاكواد علي نظام الابن والاب مثل - div>p>a تصبح
  • <div>
        <p>
            <a href=””>a>
        p>
    div>
+ : تتيح لك ان تعرض الاكواد ك فرد بمثال div+p+a تصبح
  • <div>div>
    <p>p>
    <a href=””>a>
^ : معناها العودة للكود الاب بمثال div>p^div>p تصبح
  • <div>
      <p>p>
    div>
    <div>
      <p>p>
    div>
* : معناها تكرار العنصر بمثال ul>li*3 تصبح
  • <ul>
      <li>li>
      <li>li>
      <li>li>
    ul>
() : معناها جمع العناصر بمثال div>(ul>li*3>a)+p تصبح
  • <div>
      <ul>
    <li><a href="">a>li>
    <li><a href="">a>li>
    <li><a href="">a>li>
      ul>
      <p>p>
    div>
بالطبع يمكنكم اضافة الClass و ال Id بواسطة هذه الاضافة ويكون الاضافة كالتالي.
div#main → <div id=”main”>div>
div.main → <div class=”main”>div>
ويمكنكم اضافة اكتر من كلاس او اي دي في سطر واحد هكذا
div.main.container → <div class=”main container”>div>
وتتيح الاضافة اضافة سمة معينة للكود هكذا
a[title=”Link” target=”_blank”] → <a href="" title="”Link”" target="”_blank”">a>
ويمكنكم سرد السمات بواسطة ال $ بمثال ul>li.item$*3 تصبح
<ul>
  <li class="item1">li>
  <li class="item2">li>
  <li class="item3">li>
ul>
كما ذكرت ساعرض عليكم الاضافة باستخدام لغتي ال Css - Html وقد انهيت عرض ال Html هذا ليس كل شي هناك المزيد والمزيد من الدروس انا فقط احببت ان اعرض عليكم الاضافة باستخدام هذه اللغة الان ساعرض عليكم بعض الاكواد المكتوبة بواسطة لغة ال Css.
يمكنك اضافة بادينج Padding لعنصر باستخدام الحرف P فقط فهو معرف لل Padding و M ل Margin.
m10 → margin: 10px;
بدائل ال Px في الاضافة كالتالي
p → %
e → em
x → ex
p15p → padding: 15%;
كما قلت ليس هذا كل شي بل هذا جزء بسيط وما عليك الا الدخول الي الموقع الخاص بالاضافة والاستمتاع بها وانا اعدك انك لن تتركها بعد الان.
ارجوا من الله ان اكون وفقت في عرضي لهذا الموضوع المميز من وجهة نظري ولا تنسونا من صالح دعائكم وتشجيعكم واانا اسف لو كنت عرضت الموضوع بشكل غير مفهوم او غير مرتب وشكرا لكم.
التصنيف:
Author Image

عن Unknown

Posted by في
التسميات: , , , , , , , , ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)

Post Top Ad

أعلن هنا

عن المحرر

مرحبا! أنا أسمي محمد أعمل هنا في مدونتي وأشارك معكم كل جديد على الانترنت لتعم الفائدة على الجميع وإثراء المحتوى العربي، يسرني دائمًا تلقي ملاحظاتكم وإستفساراتكم من خلال نموذج الأتصال :)

التسميات

تواصل معنا

أكثر من 600,000+ يتابعون موقعنا عبر وسائل التواصل الإجتماعي إنظم إلينا الآن

أحدث الاخبار

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

عن الموقع

authorمرحباً، أسمي محمد وأنا هنا لأقدم لكم أحدث الطرق والنصائح في عالم الأنترنت والتكنلوجيا التي تثري حياتكم
معرفة المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *