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

 
 
 
جيك روشيلو
 
كاتب مستقل ومطور ويب
  هدسون, ماساتشوستس, الولايات المتحدة الأمريكية  [email protected] محفظتي • jakerocheleau 
 
  
 
 

قبل أن ننتقل إلى CSS المفصل ، أريد أن أوضح المزيد حول استخدام البيانات الجزئية. إذا نظرت عن كثب فقد تناثرت على السمات داخل العديد من العناصر المختلفة بالأسماء نوع العنصر, يشير itemscope, و itemprop و. كل هذا يتعلق بمشروع Schmea الذي يأمل في تقديم بنية بيانات للويب.

تنسيق البيانات الجزئية المفيدة

قبلت جميع محركات البحث الرئيسية بما فيها Google و Yahoo! و Bing المخطط باعتباره أفضل بناء جملة لترميز البيانات. عن طريق وضع تفاصيل عن نفسك ، يساعد محركات البحث هذه في عرض النتائج ذات الصلة لمحتواك عبر الإنترنت. دعونا تفصيل كيفية إعداد هذه.

يتم تطبيق سمة itemscope على أي حاوية تحتوي على معلومات حول عنصر مخطط. يتبع هذا دائمًا سمة نوع العنصر ، والتي في هذا السيناريو تصف شخصًا ما. داخل div wrapper ، يمكنني تسمية أي محتوى باستخدام itemprop مع أي من التفاصيل المدرجة في صفحة الوثائق الخاصة بهم.

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

كم هو أكثر من اللازم?

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

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

 
 
المهاره
 
 
تطوير
 
 
HTML5 / CSS3
 
جافا سكريبت & مسج
 
PHP Backend
 
قواعد بيانات SQL
 
وورد
 
Pligg CMS
 
بعض الهدف جيم
 
 
 
 
البرمجيات
 
 
أدوبي فوتوشوب
 
أدوبي دريمويفر
 
مايكروسوفت أوفيس 2007-2010
 
cPanel و phpMyAdmin
 
الكود 4
 
 
 
 

عند سرد مهاراتي المختلفة ، قمت بإعداد حاوية جديدة تحدد مخطط ItemList. لم يكن هناك أي نوع من المهارات أو الخبرة لإدراجها تحت شخص ، لذلك هذا بديل آمن. القيمة هنا هي أن Google يمكنها فهم كل منها itemListElement يرتبط مع بعضهم البعض. في هذه الحالة ، لدينا قائمة باللغات والبرامج التي أعرف كيفية التعامل معها.

 
 
المقالات الأخيرة
 
  10 طرق مفيدة لاستعادة CSS وجافا سكريبت • نشرت في يوليو 2012
 
  إعادة كتابة عناوين المواقع في وورد: نصائح وإضافات • نشرت في يوليو 2012
 
  JPEG الأمثل لشبكة الإنترنت - الدليل النهائي • نشرت في يوليو 2012
 
  9 الحيل لتصميم الكمال HTML النشرة الإخبارية • نشرت في مايو 2012
 
  توجه لاختبار A / B باستخدام Google Website Optimizer • نشرت في مارس 2012
 
 

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

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

أنماط CSS النسبية

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

* الهامش: 0 ؛ الحشو: 0؛  html height: 101٪؛  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png')؛ حجم الخط: 62.5 ٪ ؛ الحشو أسفل: 65px.  h1 font-family: "Simonetta"، "Trebuchet MS"، Arial، sans-serif؛ اللون: # 454545 ؛ حجم الخط: 3.6em ؛ الهامش السفلي: 6 بكسل ؛  h2 font-family: "Simonetta"، "Trebuchet MS"، Arial، sans-serif؛ اللون: # 484848 ؛ حجم الخط: 2.5em ؛ الهامش السفلي: 10 بكسل ؛ زخرفة النص: تسطير  h3 font-family: "Trebuchet MS"، Verdana، Arial، sans-serif؛ اللون: # 777 ؛ وزن الخط: عادي ؛ حجم الخط: 1.8em ؛ الهامش السفلي: 10 بكسل ؛  h4 font-family: "Trebuchet MS"، Verdana، Arial، sans-serif؛ اللون: # 656565 ؛ وزن الخط: غامق ؛ حجم الخط: 1.75em ؛ الهامش السفلي: 4 بكسل ؛  p font-family: "Balthazar"، "Droid Serif"، Times New Roman، serif؛ اللون: # 565656 ؛ حجم الخط: 1.8em ؛ ارتفاع الخط: 1.4em ؛ الهامش السفلي: 15 بكسل ؛ الحشوة إلى اليسار: 35 بكسل ؛  صغير font-family: "بالتازار" ، الرقيق ؛ اللون: # 656565 ؛ حجم الخط: 1.6em ؛ العرض محجوب؛ الهامش السفلي: 6 بكسل ؛  ul display: block؛ نمط القائمة: لا شيء ؛  ul li padding-left: 45px؛ قائمة نمط النوع: لا شيء ؛ محاذاة رأسية: أعلى ؛ الخلفية: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-تكرار؛ الهامش السفلي: 5 بكسل ؛ font-family: "Balthazar"، serif؛ اللون: # 666 ؛ حجم الخط: 1.6em ؛ ارتفاع الخط: 2.3em ؛  img border: 0؛ أقصى عرض: 100 ٪ ؛  color: # 5582d6؛ زخرفة النص: لا شيء ؛  a: hover text-decoration: underline؛  

لا شيء مثير للاهتمام للغاية باستثناء بعض مكدسات الخطوط المخصصة. أنا أيضًا أمسك رمز نقطي فريد بدلاً من استخدام الافتراضي “القرص”. يمكنك محاولة البحث من خلال دليل مثل Icon Finder عند محاولة تحديد موقع تصميم مشابه.

/ **group core layout ** / #w margin: 0px 50px؛ الحشو: 20px 40px. الحشو أعلى: 35px. الخلفية: #fff؛ دقيقة العرض: 260 بكسل ؛ أقصى عرض: 900 بكسل ؛ الحد الأدنى نصف القطر الأيمن: 8 بكسل ؛ نصف القطر الأيسر السفلي: 8 بكسل ؛ -Wkkit-border-bottom-left-radius: 8px؛ -wkkit-border-bottom-right-radius: 8px؛ -Moz-border-radius-bottomleft: 8px؛ -Moz-border-radius-bottomright: 8px؛  header width: 100٪؛  / **group الإعدادات الشخصية ** / #info float: left؛ الهامش السفلي: 12 بكسل ؛  #photo float: right؛  #photo img -webkit-border-radius: 3px؛ -Moz-border-radius: 3px ؛ دائرة نصف قطرها الحدود: 3px ؛ -webkit-box-shadow: 0 2px 4px rgba (0، 0، 0، 0.2)؛ -moz-box-shadow: 0 2px 4px rgba (0، 0، 0، 0.2)؛ box-shadow: 0 2px 4px rgba (0، 0، 0، 0.2)؛ لون الخلفية: #fff؛ الحدود: 1px صلب #ccc؛ الحشو: 5px.  

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

الرسم المتجاوب

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

media فقط الشاشة و (الحد الأقصى للعرض: 740 بكسل) h1 font-size: 4.5em؛  h3 font-size: 2.2em؛  h2 display: block؛ محاذاة النص: المركز ؛  #info float: none؛ العرض محجوب؛ محاذاة النص: المركز ؛  #photo float: none؛ العرض محجوب؛ محاذاة النص: المركز ؛  #w padding: 20px 15px؛  p padding: 0؛  

الأولي 740px يوجد حول المكان الذي ستصطدم فيه صورة الصورة بنص الرأس. بدلاً من ترك الصورة المنسدلة على الجانب الأيمن ، نقوم بمسح كل من العناصر وتخطيط المخطط بالكامل. لقد قمت أيضًا بزيادة حجم نص الرأس لترك تأثير أكثر صلابة.

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

media فقط الشاشة و (الحد الأقصى للعرض: 570 بكسل) ul li display: inline-block؛ حشوة اليسار: 15px. العرض: 140 بكسل ؛ موقف الخلفية: -5px 0px ؛ الهامش الأيمن: 6 بكسل ؛ ارتفاع الخط: 1.7em ؛  # مهارات يسار ، مهارات يمين margin-bottom: 15px؛  

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

الترميز للهواتف الذكية

استفسارات الوسائط الثلاثة الأخيرة صغيرة ولكنها مهمة جدًا. أثناء التبديل بين الوضع الأفقي والوضع الرأسي ، سيقوم iPhone بتغيير حجم أي متصفح للجوال. هذا هو الحال أيضًا في معظم أجهزة Android وهواتف Windows Mobile.

media فقط الشاشة و (الحد الأقصى للعرض: 480 بكسل) ul li width: 120px؛  #w margin: 0 20px؛ media فقط الشاشة و (الحد الأقصى للعرض: 320 بكسل) #w margin: 0 10px؛  / ** iPhone فقط ** /media شاشة و (الحد الأقصى لعرض الجهاز: 480 بكسل) ul li width: 150px؛  

عندما نصل إلى 480 بكسل في البداية أو أصغر نزيل بعض الحشو أكثر من الغلاف ، ونعيد أيضًا تغيير حجم عناصر القائمة مرة أخرى. ثم في الساعة 320 بعد الظهر ، قمت بإزالة بعض مساحة الهامش خارج المستند. لا يزال بإمكانك رؤية الخلفية المزخرفة ، لكنها ليست مهمة جدًا في مثل هذا المنظر الرأسي الرفيع.

أخيرًا أستخدمه ماكس-جهاز عرض لاستهداف جهاز iPhone نفسه ، أو أي شاشة هاتف محمول أخرى بعرض أقصى 480 بكسل. في هذه الحالة ، أريد تحديث عناصر القائمة على نطاق أوسع قليلاً بحيث تملأ الشاشة بالكامل. سيؤثر ذلك فقط على قوائم المهارات في العرض الأفقي لأن الصورة نحيفة جدًا بحيث لا تلاحظ أي اختلافات.

• عرض
• تحميل شفرة المصدر

افكار اخيرة

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

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