ابدأ باستخدام HTML5 / CSS3: نصائح ، واجهات عرض ، وعينات ترميز

يكتسب HTML5 المزيد من الشعبية ويبدأ في تطوير واجهة الويب بالكامل. حتى بعض مطوري الويب نقلوا أن عناصر HTM5 والتأثيرات المرئية قابلة للمقارنة مع Flash. أسلوب البرمجة النصية الجديد سهل الفهم والقدرات لتحسين واجهة الويب لا حدود لها. لذا كم هو مثير للاهتمام هذا HTML5 على أي حال?


الغرض من هذه المقالة هو إعطاء القراء نظرة ثاقبة حول ما يجب أن تعرفه عن HTML5 والأهم من ذلك بعض النصائح & حيل لإنشاء صفحات HTML5 خفيفة الوزن وجذابة وتفاعلية.

1. أساسي في HTML5

HTML5

قبل أن نبدأ أي موضوع آخر في HTML5 ، سيكون من الجيد التحقق من متصفحك الحالي أولاً. نظرًا لأن العديد من المتصفحات لا تزال في وضع التطوير (تحسين لاستيعاب HTML5) ، فقد لا تكون بعض الميزات المذكورة هنا مدعومة.

إليك نصائح سريعة للتحقق من حسابك التوافق المتصفح.

لفهم المزيد من القيود على متصفح معين ، يمكنك الرجوع إلى هنا.

2. تأثيرات النص – إضافة الظل وتأثير النص المتقدم في HTML5

تأثيرات النص في HTML5

تأثير الظل الأساسي على النص

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

عينة ترميز

#shadow h1 {
ظل النص: 0px 1px 1px rgba (0،0،0، .2) ؛
}}

نص حول تأثير شبيه بالحريق مقدمًا

النصيحة التالية هي أن نوضح لك كيف يمكن تعديل تشفير HTML5 إلى نص أكثر برودة. إذا جربت ما يكفي ، أو وجدت أمثلة أخرى ، فإن إمكانيات تخصيص التأثيرات لا حصر لها. ملاحظة: لم يتم إنشاء هذا المثال بواسطة أي برنامج لتحرير الصور. مجرد رموز عادية في HTML5.

عينة ترميز

#fire h1 {
محاذاة النص: مركز ؛
الهامش: 200 بكسل تلقائي ؛
خط العائلة: "الدوري القوطي", التوصيل؛
حجم الخط: 200 بكسل ؛ تحويل النص: أحرف كبيرة ؛
اللون: #fff ؛
ظل النص: 0 0 20px # fefcc9 ، 10px -10px 30px # feec85 ، -20px -20px 40px # ffae34 ، 20px -40px 50px # ec760c ، -20px -60px 60px # cd4606 ، 0 -80px 70px # 973716 ، 10px -90px 80 بكسل # 451b0e ؛
}}

مثال رائع آخر: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. الزاوية المستديرة في HTML5

الزاوية المستديرة في HTML5

لم يكن تصميم تخطيط صفحة الويب في HTML5 بهذه السهولة منذ تقديم CSS. والآن يمكنك حتى الحصول على زوايا دائرية لعناصر التخطيط الخاصة بك! تخيل هذا؛ لا مزيد من تشريح صورة الخلفية ، لا شظايا صورة أكثر فوضى. هذا سيجلب الكثير من الهتافات لمصممي الويب هناك.

عينة ترميز

div {
الحد: 2 بكسل صلب # 434343 ؛
الحشو: 10 بكسل ؛
الخلفية: # e3e3e3 ؛
-moz-border-radius: 10px ؛
-webkit-border-radius: 10px ؛
العرض: 500 بكسل ؛
}}

ملاحظة: يعني Moz Moz Mozilla ، و webkit مخصص لمتصفح Safari و Chrome.

مثال رائع آخر: http://fjd1.com/roundcorner.html

4. رسم متجه قابل للتحجيم (SVG) في HTML5

دروس 5 HTML ، دليل ، وعينات

رسومات موجهة قابلة للتحجيم أو تُعرف عمومًا باسم (SVG) عبارة عن رسومات متجهة ثنائية الأبعاد يتم تعريفها في ملفات XML النصية. بمعنى آخر ، نظرًا لأن الحمض النووي الخاص بهم يعتمد على ملف نصي XML ، فيمكن إنشاؤه أو تحريره على النظام الأساسي للويب. مما يعني أيضًا أنه يمكن أن يكون هناك مقياس بسهولة ، ومحركات البحث قادرة على قراءة الصورة وفهمها.

عينة من الرموز

أمثلة رائعة أخرى:

5. تضمين ملف الفيلم في HTML5

فيديو بتنسيق HTML5

إليك جزء آخر مثير للاهتمام لعرض إمكانات HTML5. عادة ما يتم تقديم العديد من مقاطع الفيديو عبر الإنترنت إلى مستخدمي الويب في شكل فلاش. حتى وقت قريب ، اكتسب تضمين الفيديو في HTML5 زخمًا بطيئًا (يوتيوب مثال جيد) وفقد فلاش جاذبيته ببطء. لماذا هذا؟ مستخدمو الجوال. إذا كنت تريد أن يكون الفيديو الخاص بك قادرًا على التشغيل في كل من هواتف iPhone و Android ، فإن HTML5 هو الطريق للمضي قدمًا.

لتضمين الفيديو ، ستحتاج إلى معرفة أن هناك حاليًا 3 تنسيقات مدعومة من متصفحات مختلفة ؛ .mp4 (H.264 + AAC) ، .ogg (Theora + Vorbis) ، .webm (VP8 + Vorbis)

عينة من الرموز

مثال رائع آخر: https://www.html5rocks.com/en/tutorials/video/basics/

6. عرض الشرائح في HTML5

دروس 5 HTML ، دليل ، وعينات

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

عينة من الرموز

قبل
الانتقال: جميع 1s سهولة في الخروج ؛
}}

pre: hover {
لون الخلفية: # F2F5FE ؛
لون الحد: أسود ؛
}}

div {
التحويل: rotate3d (1،1،0، 45deg) ؛
}}

أمثلة رائعة أخرى:

7. محتوى قابل للتحرير في HTML5

دروس 5 HTML ، دليل ، وعينات

نص ثابت هو المدرسة القديمة في عصر حيث تحكم المرونة والديناميكية العالم. في HTML5 ، يمكنك تحديد منطقة نص جعلها قابلة للتحرير بواسطة مستخدم الويب بدون محرر نصوص.

عينة من الرموز

هذا المحتوى قابل للتعديل!

مثال رائع آخر: http://html5demos.com/contenteditable

8. قماش الويب التفاعلي في HTML5

دروس 5 HTML ، دليل ، وعينات

إلى جانب SVG في HTML5 ، فإن اللوحة القماشية هي أفضل شيء حدث على الإطلاق للويب. تتيح اللوحة القماشية تقديم شكلين من الأبعاد اللذين يجلبان التفاعل إلى مستوى كامل دون مساعدة من Flash.

ومع ذلك ، فإن الترميز البسيط في HTML5 الذي يخلق تفاعلًا متحركًا مذهلاً يستحق الذكر هنا.

مثال رائع آخر: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. قم بسحب وإسقاط HTML5

دروس 5 HTML ، دليل ، وعينات

السحب والإفلات (المعروف أحيانًا باسم DnD) هو ميزة رائعة أخرى متاحة لـ HTML5. مثال رائع هو تنفيذ Google في Gmail. إذا كنت تستخدم أيًا من متصفحات HTML5 المدعومة ، فيمكنك ببساطة سحب ملف من جهاز الكمبيوتر وإفلاته في نافذة رسالة الإنشاء. سيتم إضافته تلقائيًا كمرفق. كم ذلك رائع?

رمز عينة (DnD الأصلي)

document.addEventListener (“dragstart” ، الوظيفة (الحدث) {
event.dataTransfer.setData (“text”، “Custom text”) ؛
event.dataTransfer.effectAllowed = ‘copy’؛
}، خاطئة)؛

مثال رائع آخر: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. مخطط بيانات CSS خالص في HTML5

دروس 5 HTML ، دليل ، وعينات

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

مثال رائع آخر: http://cssglobe.com/pure-css-data-chart/

لا يمكن الحصول على ما يكفي من HTML 5?

كذلك نحن! إليك المزيد حول هذا الموضوع ، انتقل للتحقق منها.

* 30 أمثلة رائعة جدًا لمواقع HTML 5
* الابتداء مع HTML 5
* يجب قراءة دروس HTML 5 في 2012
* تعلم HTML 5: 10 يجب قراءة الدروس

أيضا ، راجع  دورة HTML 5 السريعة من روبن نيكسون. روبن نيكسون مؤلف كتاب Learning PHP و MySQL و JavaScript ؛ تغطي الدورة كل شيء تقريبًا يحتاج المبتدئ إلى معرفته في HTML5 – بما في ذلك ترميز HTML الأساسي ، لوحة HTML5 للرسم ، وتحديد الموقع الجغرافي ، والتخزين المحلي ، بالإضافة إلى صوت وفيديو HTML5.

تم نشر المقال الأصلي لأول مرة في مدونة WHSR؛ تتم إدارتها وتحديثها الآن بواسطة موظفي BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map