كيفية عمل عروض تقديمية بتنسيق HTML باستخدام شرائح الويب

في عالم حيث اعرض أفكارنا على الإنترنت لقد أصبح ضروريًا بشكل متزايد وحيث أدى تنوع الأدوات إلى إنشاء عروض تقديمية مذهلة ، والتي تنتهي في كثير من الحالات بالتعارض مع بعض الوسائط ، دون أدنى شك ، عروض HTML التقديمية سيستمرون في أن يكونوا البديل العالمي في هذا المجال.

لكن لا يخفى على أحد أن إنشاء عروض تقديمية رائعة بتنسيق HTML يمكن أن يستغرق وقتًا طويلاً ويتطلب معرفة متقدمة إلى حد ما بـ HTML و CSS وفي بعض الحالات JavaScript. من هذه المشاكل ، تظهر أداة ممتازة تسمى شرائح الويب.

ما هي شرائح الويب؟

هو أن نسميها بطريقة ما "إطار عمل" مفتوح المصدر ، من صنع خوسيه لويس أنتونيز، هذا يسمح لنا إنشاء عروض تقديمية بتنسيق HTML بسرعة وسهولة. تحتوي الأداة على الأساسيات اللازمة لعمل العروض التقديمية الخاصة بك ، وبالمثل ، يمكنك أخذ أحد العروض التقديمية وتخصيصها حسب رغبتك في غضون دقائق.

سيكون لعروض HTML التي قدمتها باستخدام هذه الأداة جمالية رائعة. تجدر الإشارة إلى أن هذه الأداة تتطلب معرفة أساسية جدًا بـ HTML و CSS ، لذا فهي مثالية لجميع أنواع المستخدمين ، الذين يجب عليهم التركيز فقط على المحتوى والقليل جدًا على كيفية تحضير العرض التقديمي.

كيفية تنزيل شرائح الويب؟

لتنزيل شرائح الويب ، ما عليك سوى تنفيذ الأمر التالي من دليلك المفضل:

wget https://github.com/jlantunez/webslides/archive/master.zip

يمكنك أيضًا استنساخ المستودع الرسمي باستخدام

git clone https://github.com/jlantunez/webslides.git

داخل مجلد المشروع ، ستحصل على js و css والعروض التوضيحية اللازمة لبدء إنشاء عروض HTML التقديمية الخاصة بك بسهولة.

كيفية استخدام شرائح الويب؟

أكبر ميزة لشرائح الويب هي سهولة استخدامها ، فهذه الأداة تجعل من السهل حقًا إنشاء عروض تقديمية بأهداف مختلفة ، كما تعمل سلسلة العروض التوضيحية على تسريع عملية إنشاء العروض التقديمية بنسبة عالية جدًا.

ما الذي نحصل عليه عند تنزيل شرائح الويب؟

عند تنزيل شرائح الويب ، نصل إلى مجلدات مختلفة ، والتي تشمل العروض التوضيحية والصور (الأجهزة والشعارات).

  • سيخزن مجلد css أنماط عروضنا التقديمية
  • في مجلد js ، سيتم تخزين نصوص جافا سكريبت الضرورية ، بما في ذلك webslide.js الأساسي حيث يتم تنفيذ معظم السحر.
  • سيتم حفظ الصور وملفات html للعروض التوضيحية في مجلدات الصور والعروض التوضيحية على التوالي.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

إنشاء عروض تقديمية بتنسيق HTML باستخدام شرائح الويب

هناك ميزتان أساسيتان عند استخدام شرائح الويب ، نذكرهما أدناه:

  • الشفرة نظيفة وقابلة للتطوير. يتضمن أيضًا ترميزًا بديهيًا باستخدام التسميات الأكثر شيوعًا. ليست هناك حاجة لاستخدام الطبقات ، أو الإفراط في التعشيش.
  • كل <section> في #webslides يمثل شريحة. لذا فإن ترقيم الصفحات بسيط للغاية.
شريحة 1  شريحة 1

بنفس الطريقة يمكننا عمل شرائح عمودية ، بإضافة نمط عمودي


الفئات التي تتكون منها صفحات الويب CSS

  • الطباعة: نص-هبوط ،. بيانات-نصية ،-مقدمة-نص ...
  • ألوان الخلفية: .bg-Primary ، .bg-apple ، .bg-blue ...
  • صور الخلفية: .background ، .background-center-bottom ...
  • البطاقات: .card-50 ، .card-40 ...
  • الكتل المرنة: .flexblock.clients ، .flexblock.metrics ...

يمتد إلى شرائح الويب

تتيح لنا شرائح الويب إضافة أنماط ووظائف جديدة ، على سبيل المثال يمكننا إضافة بعض الموارد التالية:

عروض تقديمية بتنسيق HTML مصنوعة من شرائح الويب

يمكنك مشاهدة سلسلة من العروض التقديمية لعروض HTML التي تم إنشاؤها باستخدام شرائح الويب هنا. وبالمثل ، عند تنزيل إطار العمل ، يمكنك الوصول إلى ترميز كل من هذه العروض التوضيحية.

عروض تقديمية بتنسيق HTML

المحافظ التجريبية 2

هذه أداة ستسمح لنا بإنشاء عروض تقديمية بتنسيق HTML بسرعة وبنهاية رائعة ، ولكنها ستساعدنا أيضًا على التركيز على المحتوى وتحقيق نتائج لم نتخيلها من قبل.


اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

*

*

  1. المسؤول عن البيانات: ميغيل أنخيل جاتون
  2. الغرض من البيانات: التحكم في الرسائل الاقتحامية ، وإدارة التعليقات.
  3. الشرعية: موافقتك
  4. توصيل البيانات: لن يتم إرسال البيانات إلى أطراف ثالثة إلا بموجب التزام قانوني.
  5. تخزين البيانات: قاعدة البيانات التي تستضيفها شركة Occentus Networks (الاتحاد الأوروبي)
  6. الحقوق: يمكنك في أي وقت تقييد معلوماتك واستعادتها وحذفها.

  1.   ألان فوينتيس قال

    جيد جدًا ، أجد الأداة ممتعة جدًا على الرغم من أن طريقة الكشف عنها حسب ذوقي. js أسهل في الاستخدام لأنها أداة تعتمد على تقنيات الويب مثل HTML و CSS و JS ، مع المعرفة الأساسية بهذه التقنيات ، يمكنك تقديم العرض التقديمي الخاص بك تبدو أكثر إثارة للاهتمام.

    تحية.

  2.   مجهول قال

    من الجيد الاحتفال بالكثير من المحتوى الأصلي
    https://www.genbeta.com/web/crea-bonitas-presentaciones-en-html-de-forma-rapida-y-sencilla-con-webslides

    1.    اجارتو قال

      من السهل جدًا انتقاد الاختباء في ملف تعريف مجهول وقول ما تريد ، ولكن لسوء الحظ ، من المفهوم أن معاملك لا ينظر إلى ما هو أبعد من المكان الذي يمكن أن تراه عيناك ، لقد كتب هذا المقال بالكامل بواسطتي بناءً على الوثائق الرسمية وفي مراجعة قمت به على الأداة. أيهما سأعطيك فكرة ، تعرفت عليه بفضل حقيقة أنه التطبيق الأكثر تصويتًا في الأيام الأخيرة على github https://github.com/jlantunez/webslides... ومع ذلك ، من المهم جدًا بالنسبة لنا أن تكون قد قضيت وقتًا في البحث عن بعض المواقع الأخرى حيث يكتبون أيضًا عن نفس الشيء مثلنا ، لذلك يمكنك التقدم إلى الوظيفة الشاغرة للمراجع ، والتي أعتقد أنها ستظل مقدم طلب فقط لأنني شك في أن لديك المعيار لتحديد شيء مناسب.