تصميم الويب للهاتف النقال

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

صحيح أن هناك هواتف لا تحتاج لوجود نسخة بسبب وجود مميزات مثل التكبير والتصغير ودعم أغلب خصائص CSS وإستخدام محرك جيد للمتصفح مثل محرك Webkit ولكن البعض يفضل وجود النسخة للهواتف الأخرى إضافةً إلى تعويد المستخدمين على مميزات اللمس في نسخة الموقع الخاصة للهواتف مثل إستخدام هاتف iPhone.

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

مواضيع سلسلة تصميم الويب للهاتف النقال

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

تلميحات مخصصة لتصميم الويب للهاتف النقال

• تصميم الويب للهاتف النقال: تلميحات #1، عرض لأحدث المكتبات التي تخص تصميم صفحات ويب متوافقة للهواتف النقالة إضافةً إلى مقاطع مفيدة.
• تصميم الويب للهاتف النقال: تلميحات #2، عرض عدة تطبيقات SDK مخصصة للتأكد من توافق تصاميم صفحات الويب للهواتف النقالة.
• تصميم الويب للهاتف النقال: تلميحات #3، درس عملي لكيفية تصميم نسخة واحدة للهاتف النقال وجهاز الحاسوب بإستخدام تقنية Media Query دون وجود نسختين للموقع.

Résuméabuiyad

إستخدام الخطوط المرفقة في صفحات الويب

كيفية إستخدام خط مرفق على صفحة ويب عبر خاصية font‪-‬faceوكيفية إستخدام أكثر من صيغة للخط لتتناسب مع عدة متصفحات ويب ومن ضمنها متصفحات الهواتف النقالة.

• مثال على الدرس
 
• تحميل المرفقات

المتصفحات الداعمة لهذه الخاصية

لحسن لحظ مستوى دعم المتصفحات لهذه الخاصية جيدة (خصوصاً لمستخدمي متصفح الإكسبلورر) فهو يدعم خاصية face‪-‬font منذ الإصدار الرابع! إلا أن بقية المتصفحات تدعم هذه الخاصية في الإصدارات الحديثة .. هذه مجموعة من المتصفحات الداعمة للخاصية:

• متصفح سفاري/محرك Webkit: يدعم خاصية font-face منذ الإصدار 3.1، الصيغ المدعومة هي ttf وotf (إخصار لصيغة TrueType وOpenType) أما متصفح سفاري الخاص بنظام iOS فيدعم صيغة SVG لإصدارات iOS القديمة إلى الإصدار 4.1، أما الإصدار 4.2 وما فوق فيدعم ttf وotf.
• متصفح أوبرا: يدعم خاصية font-face منذ الإصدار العاشر (الإصدار 9.7 من Opera Mobile)، الصيغ المدعومة هي ttf وotf وSVG.
• متصفح الإكسبلورر: يدعم صيغة font‪-‬face منذ الإصدار الرابع، ويدعم صيغة eot فقط وصيغة WOFF (منذ الإصدار التاسع).
• متصفح فايرفوكس: يدعم خاصية font‪-‬face منذ الإصدار 3‪.‬5، ويدعم صيغة ttf وotf وWOFF (منذ الإصدار 3‪.‬6).
• متصفح جوجل كروم: يدعم خاصية font‪-‬face منذ الإصدار الرابع، ويدعم صيغة ttf وotf وWOFF (منذ الإصدار السادس) .. إلا أن الخاصية معطلة بشكل إفتراضي ويجب على المستخدم أن يوافق أو يدعم خيار font‪-‬face لكي تعمل على المتصفح وذلك لأسباب أمنية من طرف جوجل.

صيغة True Type و Open Type

هناك عدة صيغ يمكن إختيارها في عرض الخطوط على صفحات الويب مثل EOT وTTF وOTF وWOFF وغيرها، وجميعها صيغ مختصرة لنوع الخط فأكثر الأنواع التي تستخدم هي TrueType وOpenType ويمكن معرفة لمحة تاريخية لكل منهم ومتى بدأ إستخدام هذه الأنواع.

• ‏TrueType: تم تطوير هذا النوع من الخطوط من قبل شركة آبل أول مرة وتبنتها شركة مايكروسوفت بعد ذلك في نظام تشغيلها ويندوز (بدايةً من Windows 3‪.‬1)، وأشهر الخطوط العالمية تستخدم هذا النوع من الخطوط.
• OpenType: تم تطوير هذا النوع من الخطوط من قبل شركة مايكروسوفت ثم إنضمت شركة أدوبي لتطويره في نهاية التسعينات من القرن الماضي وتم إنتاج العديد من الخطوط بهذه الصيغة مع بداية الألفية، ويتميز هذا النوع بدعم أكثر من منصة وإمكانية ظهوره بشكل جيد عند الطباعة وإمكانية إدراج عدد كبير من الحروف للخط الواحد.

صيغة OpenType مدعومة أكثر في متصفح الإكسبلورر بدايةً من الإصدار الرابع حتى الإصدار الأخير، أما TrueType فمستخدم في في بقية الإصدارات والأنظمة (يشمل نظام Android و iOS).

تحويل الخط لعدة صيغ لتتناسب مع متصفحات الويب

إذا رغبت بإستخدام خط مناسب للنصوص فلن تجده بأكثر من صيغة (مثل صيغة OpenType وWOFF وSVG) إلا الخطوط المشهورة (من الخطوط الإنجليزية) إلا أن توفيره بعدة صيغ أصبح ممكنا مع توفر أدوات جديدة في كل فترة.

تطبيق Font Squirrel

أحد هذه الأدوات هو تطبيق Font Squirrel (تطبيق ويب). يمكن إصدار عدة صيغ لخط موجود لديك في الجهاز عبر هذا التطبيق إلا أنه لا يدعم العربية ولكن صاحب التطبيق لديه رغبة في دعم الخطوط العربيةعن طريقه.

فقط تقوم بإرفاقه من الموقع وتختار الخصائص المتوفرة قبل التصدير مع الموافقة على إتفاقية إستخدام التطبيق، وبعد عملية التصدير سيعطيك ملف مرفق يحتوي مجموعة الصيغ التي إخترتها للخط مع صفحة تجريبية لرؤية عدة نصوص مختلفة الأحجام بالخط الذي إخترته (تحتاج إلى تعديله بنصوص عربية لرؤية الخطوط العربية، أو تعديل النص عبر إضافة FireBug).

لفهم الخصائص الموجودة قبل الإصدار أنصحك بمراجعتها عبر مقالة عن خاصية font‪-‬face في موقع Smashing Magazine.

تطبيق FreeFontConverter

أحد تطبيقات الويب التي تقوم بتحويل الخط الجهاز إلى خط مستخدم لصفحات الويب بأي صيغة تريدها مثل ttf (TrueType) و otf (OpenType) وقد دلني على هذا الموقع الأخ نواف حريري وهو صاحب عدة مشاريع مفيدة وجميلة في نفس الوقت ومنها تطبيق مصاريف وقد إستخدم هذه الأداة في إستخدام أحد خطوط حسن في موقع التطبيق ويظهر خط Hacen Liner Screen في المتصفح بشكل جميل جداً خصوصاً لمسخدمي نظام الماك.

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

تطبيق Font2Web

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

مثال عملي: إستخدام خط خاص في تنسيق النصوص

هذا مثال بسيط على كيفية إستخدام خاصية font‪-‬face في إستخدام خطوط مرفقة لصفحة الويب. سأستخدم خطين واحد للعناوين والثاني للفقرات وهما خط K Kamran وخط Hacen Liner Screen (ستجدهم مع المرفقات)، خط K Kamran من الخطوط الجميلة التي تشبه خط الكتابة باليد إلا أن إستخدامه كخط ويب قد لا يكون مناسباً عند البعض وفأغلب إستخداماته للصور ولكن يظهر لي في المثال بشكل جيد كوني أستخدم نظام الماك.

قبل إستخدام الخطوط في صفحة HTML، سأحتاج إلى تحميل الخط على تطبيق Font Squirrel تطبيق FreeFontConverter لتحويله إلى الصيغ المطلوبة (ttf و otf) وكذلك إستخدام تطبيق Font2Web (للحصول على صيغة eot الخاصة بمتصفح الإكسبلورر)، بعد تحميل الخطوط ونقلها بجانب صفحة التي تود إستخدام الخطوط فيها أو في ملف القالب عموماً أو في ملف بإسم fonts (بالطريقة التي تريدها) لإستخدامه في ملف CSS عبر خاصية @font-face.

يمكنك تسميه الخط بالإسم الذي تريده أو بإسمه الحالي (عبر إستخدام خاصية font-family)، شفرة HTML ستكون عبارة عن عرض لأول موضوع كتبته في سلسلة حسن مهاراتك في التدوين في المدونة، فقط سأستخدم بعض العناوين والفقرات في الصفحة فلا يوجد رأس للصفحة وقائمة جانبية، شفرة HTML في بداية قبل كتابة أي شيء:

01	<!Doctype>

02	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

03

<head>

04	<meta charset="utf-8" />

05	<title>مثال على إستخدام الخطوط</title>

06	<link href="style.css" rel="stylesheet" type="text/css"/>

07

</head>

08

<body>

09

10	<!-- Wrap -->

11	<div id="wrap">

12

13	<!-- Article -->

14	<div class="article">

15

16	<!-- Your Content -->

17

18

</div>

19	<!-- /Article -->

20

21

</div>

22	<!-- /Wrap -->

23

</body>

24

</html>

جميع النصوص ستكون ضمن العنصر الذي يحمل الصنف article.، وبعد كتابة العناوين والفقرات يأتي التنسيق عبر تقنية CSS. طبعاً سأذكر فقط التنسيقات المهمة والمتعلقة بالدرس وإستخدام الخطوط، ونستخدم خاصية ‪@‬font‪-‬face في تنسيق CSS على هذا النحو:

01	/* إستدعاء خط K Karman */

02	@font-face {

03	font-family: "K Karman";

04	src: url("fonts/k_kamran.eot"); /* IE 9 للإصدار التاسع من متصفح الإكسبلورر */

05	src: url("fonts/k_kamran.eot?") format("eot"), /* IE 6-8 من الإصدار السادس حتى الثامن من متصفح الإسكبلورر */

06	url("fonts/k_kamran.otf") format("opentype"), /* Other browsers للمتصفحات الأخرى */

07	url("fonts/k_kamran.ttf") format("truetype"); /* Safari, Android, iOS للمتصفحات الهواتف وبقية المتصفحات الحديثة */

08

}

09

10	/* إستدعاء خط Hacen Liner Screen */

11	@font-face {

12	font-family: "Hacen Liner Screen";

13	src: url("fonts/hacen_liner_screen.eot"); /* IE 9 للإصدار التاسع من متصفح الإكسبلورر */

14	src: url("fonts/hacen_liner_screen.eot?")format("eot"), /* IE 6-8 من الإصدار السادس حتى الثامن من متصفح الإسكبلورر */

15	url("fonts/hacen_liner_screen.otf")format("opentype"), /* Other browsers للمتصفحات الأخرى */

16	url("fonts/hacen_liner_screen.ttf")format("truetype"); /* Safari, Android, iOS للمتصفحات الهواتف وبقية المتصفحات الحديثة */

17

}

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

الآن سأتي دور تنسيق العناوين والفقرات وإستخدام الخطوط بكل سهولة عبر تحديد الخط الذي تم تحميله عبر خاصية font-family أو خاصية font:

01	/* إستخدام خط Hacen Liner Screen */

02	.article h1 {

03	font: bold 26px 'Hacen Liner Screen', arial, sans-serif;

04

}

05

06	/* إستخدام خط Hacen Liner Screen */

07	.article h2 {

08	font: bold 20px 'Hacen Liner Screen', arial, sans-serif;

09

}

10

11	/* إستخدام خط K Karman */

12	.article p {

13	font: 22px/26px 'K Karman', arial, sans-serif;

14

}

• مثال على الدرس
 
• تحميل المرفقات

نتيجة الدرس

فحصت الصفحة على عدة متصفحات، وجميع النتائج كانت جيدة على متصفح فايرفوكس، أوبرا وسفاري (بالنسبة لنظام الماك) .. كذلك على متصفح فايرفوكس، أوبرا، سفاري والإكسبلورر (بالنسبة لنظام الويندوز) لضمان عرض النصوص بالخطوط المختاره فذلك يعتمد على إصدار المتصفح نفسه (شاهد قائمة المتصفحات الداعمة لخاصية @font-face في أعلى الموضوع وستجد كل متصفح مع رقم الإصدار الذي يدعم الخاصية).

مصادر وتفاصيل أكثر عن خاصية font-face

هذه مجموعة مصادر للدرس الذي كتبته مع بعض المقالات التي ستفيدك في معرفة تفاصيل عدة عن خاصية font-face وإرفاق خطك المفضل أثناء عملك على تصميم موقع ويب.

خاصية ‪@‬font‪-‬face وحيل مفيدة لخطوط الويب

دعم المتصفحات لخاصية ‪@‬font‪-‬face

خطوط CSS3 (من موقع W3C)

Résuméabuiyad