حالة لتشفير الأطر الخاصة بك

يمكن أن يكون العمل كمصمم يومًا بعد يوم شاقًا. لحسن الحظ ، تم توسيع المجال ، وبالتالي أصبحت العملية أكثر بساطة. العديد من الأدوات والموارد المجانية موجودة.

إطارات سلكية تجلب الأناقة لتصميم النماذج. إنها البنية الأساسية لموقع الويب ، مع إزالة الألوان والتحسينات.

يتم استخدامها لعرض مفاهيم التصميم مع الضروريات الأساسية فقط ، ويمكن أن توفر وجهة نظر مفيدة في أي مشروع.

يتم إنشاء معظم wireframes في مجموعات برامج مثل Adobe Photoshop و Fireworks ، لكن بعض مواقع الويب تمكّنك من إنشاء صور wireframe مباشرة في المستعرض.

في هذه المشاركة ، سنتناول ترميز صورة wireframe أساسية في HTML و CSS ونرى كيف يمكن أن تفيد العملية الإبداعية.

لماذا تهتم؟

لماذا قضاء بعض الوقت في رسم هيكل الموقع؟ في بعض الحالات ، قد يكون ذلك غير ضروري ، لكنه يمكن أن يساعدك عندما تكون عالقاً في شبق أو تكافح لرؤية الصورة الكبيرة.

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

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

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

النماذج الأولية Wireframes في الكود

لسنوات ، كان برنامج Adobe للتصميم هو الجناح الأول لإبداع wireframe ، لكن الويب خضع لتغيير جوهري وما زال يتطور.

صعود معايير الترميز وزيادة في وثائق HTML5 هي خطوات كبيرة نحو شبكة مشتركة. والآن ، لا يعد ترميز wireframe الأساسي في HTML و CSS عملاً أكثر من معالجة المهمة في Fireworks.

باستخدام wireframes ، يمكنك مهاجمة المشروع بشكل مباشر من زوايا متعددة. يمكنك حتى اختبار التوافق مع تقنيات ومتصفحات CSS2 و CSS3. لا يجب أن تكون الأمور معقدة في البداية ؛ يعمل الإطار السلكي ببساطة كأساس متين لبدء الترميز.

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

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

توفر الأطر السلكية الوقت في عملية التطوير. إذا كانت أنماط CSS لعناصرك الأساسية مكتوبة بالفعل ، فإن الباقي هو مجرد حشو (حشو مهم ، أذهلك).

تبدأ بشكل صحيح ، مع نوع وثيقة HTML الصحيح وهيكل الدليل. لا تختلف أنواع المستندات عن بعضها البعض. يمكنك أن تقرأ عنها على صفحة مواصفات W3C . لا يهم الكثير في نموذج الشبكة العنكبوتية القديم ، ولكن HTML5 شامل ويسمح لموقعك بالنمو.

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

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

بداية هيكل الوثيقة Wireframe

أفضل طريقة للبدء هي استخدام قائمة بيضاء ، لأنها توفر لك أقصى قدر من الإبداع. العناصر الواضحة التي يجب تضمينها في الكود (كما في أي مستند ويب آخر) هي html ، head و body .

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

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

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

أعمل مع header و footer عناصر

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

ال header يسمح لك العنصر في مواصفات HTML5 الجديدة بتعريف بنية موقعك بشكل أكبر ، وهو أمر مفيد في الغالب لبرامج تتبع صفحات الويب وقارئات الشاشة ، والتي تفصل جزء "العنوان" من المحتوى. يجب ألا يحدث أي فرق للمستخدمين ، وسيحتفظ بالرمز الخاص بك ويظهر أنك تفهم حقًا ما تتحدث عنه.

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

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

في هذا السيناريو ، باستخدام footer العنصر وفصل ارتباطات التنقل كقائمة غير مرتبة هو الأفضل. يمكنك استخدام تذييل ذو أعمدة ، مع عدد من أعمدة الروابط. يمكن أن تكون منفصلة div العناصر المعروضة بجانب بعضها البعض ، كل ملفوفة في التذييل الرئيسي.

تقنيات CSS لتصفيفات الأطر

إذا فهمت HTML وعملت مع الويب لفترة من الوقت ، فمن المحتمل أنك تعرف بعض CSS الأساسي. العديد من الميزات الجديدة في CSS3 هي لإضافة زوايا مدورة رائعة وظلال منسدلة إلى نص.

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

إذا كنت مفتونًا بالخصائص والمميزات الجديدة لـ CSS3 ، فقم بزيارة Webdesigner Depot مجموعة من التحسينات . فهو يحتوي على أدلة عبر الويب حول الميزات الجديدة في CSS3.

مضيفا clearfix إلى الأنماط

إذا كنت غير معتاد على تقنية clearfix ، فافعل ذلك بعض البحوث . إنها فئة شائعة ستضيفها إلى div حاوية تحتوي على كتلتين عائمتين أو أكثر.

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

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

عرض CSS: حفظ الأنماط الخارجية

ما يجب فعله مع موضع CSS هو قرار هام آخر. ويقترح مصممو ومطورو الويب المحترفون الاحتفاظ بمستقل مستقل .css ملف ، منفصل عن كود HTML الخاص بك.

بهذه الطريقة ، يكون الهيكل في مستند واحد ويكون التخطيط والتصميم في مستند آخر. كلاهما مهمان بنفس القدر للخطوط السلكية ، لكنهما يؤديا مهامًا متميزة.

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

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

تنفيذ العناصر النائبة الديناميكية لعنصر الصفحة

يبدو أن تأثيرات jQuery الهائلة وعناصر ويب Ajax-ified هي كل الغيظ. تنمو المؤشرات ، وتتميز جميع مواقع الويب الشائعة تقريبًا ببعض المحتوى الديناميكي. من المهم أن تنظر. إذا كانت تكملة التصميم ، فلماذا لا يتم وضع كتل الميزات في wireframe الخاص بك؟

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

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

أخطاء تطوير إطار العمل الشائعة

من الصعب أن تخطئ عندما تبدأ فقط في برمجة البنية الأساسية لموقع الويب ، ولكن ضع بعض التفاصيل في الاعتبار.

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

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

تجنب الطرق الالتفافية من خلال التركيز على أهدافك الرئيسية. تذكر لماذا بدأت هذه العملية مع wireframe في المقام الأول!

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

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

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

ما هي تجاربك مع عملية wireframe؟ هل تعمل في الكود الأول أم في نوع آخر من البرامج؟ ما هي في اعتقادك بعض فوائد النماذج في التعليمات البرمجية أولاً؟