تحديث: موقعي الشخصي

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

البرامج المستخدمة: Adobe Dreamweaver، Visual Light Box، WOW Slider.

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

صفحة البداية: قمت بستخدام WOW Slider  لعرض الصور في الصفحة الرئيسية (سلايد شو) وهو برنامج سهل للإستخدام. هنالك نسخة مجانية ومدفوعه منه.

 

صفحة من أنا: بعض المعلومات عن العبد الفقير :)

صفحة معرض الصور: كل صورة عبارة عن رابط لصفحة من صفحات المعارض التي أنشأتها.

قمت بإستخدام Visual Light Box لإنشاء معرض الصور الخاصة بي (سهل الإستخدام).المعرض يستعرض الصور بستخدام الـ "jquery" عارض جافا سكربت.

 

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

ما الذي يجب علي فعله في المستقبل؟

- إضافة مزيد من المحتوى "الصوري".

-إعادة تصميم المدونة لتتلائم أكثر مع التصميم العام للموقع

- إيجاد موقع أنسب لأزرار تويتر، فليكر، و الفيس بوك.

- إذا حصلت على الإلهام الكافي، ربما أقوم بإعادة التصميم بشكل كامل P:

رمز الإستجابة السريع - للمصممين

أحد أحدث الطرق الجديدة والمبتكرة لربط حياة الناس بالعالم الرقمي هي عن طريق  QR code (ما يسمى برمز الإستجابة السريع) حيث يمكنك مسح الرمز بواسطة كاميرا الهاتف للوصول السريع إلى موقع ، فيديو، مقالة، عنوان، رقم تلفون، وأشياء كثيرة اخرى.

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

مايكروسوفت أنشأة رمز وصول سريع جميل، مختلف نوعاً ما، أسمته Microsoft Tag.

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

بعد التسجل في موقعهم، أنشأ التصنيفات الخاصة بك وبعدها اذهب للـ Tag Manager.

إضغط Create a Tag

أدخل المعلومات المطلوبة. أسفل tag type يمكنك إختيار نوع رمز الوصول إلى URL، App Download، Free Text، vCard، أوDialer.

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

بعد الضغط على حفظ، سوف ترجع الى صفحة إدارة الرمز، إضغط على أيقونة الـ render الخاصة بالرمز لتستطيع إنشاء وإختيار شكل وتصميم الرمز.

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

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

هذا التصميم العادي:

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

عمل مشترك - تصميم موقع إلكتروني

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

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

دوري في العمل

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

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

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

قمنا بتقسيم العمل كما يلي:

الشعار، ورأس الموقع  | Emily & Cale
المحتوى| Brent
تمثيل العميل | Salman
الصور/التصوير | إنشاء/تصوير الصور أو الحصول على صور مفتوحة المصدر Christina & Kimi
ترتيب الموقع | April & Cale

قمنا بإتباع هذه الخطواط:

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

وبعدها قمنا برفع الموقع إلى PSUWebDesigners

كواليس تصميم إعلان المعرض

لقد قمت بتصميم إعلان المعرض الخاص بي في السنة الماضية، لمادة Digital File Preparation والتي تدرسها المدرسة Christel Benson. عرفت مسبقاً أنني سأقوم بإستخدامه في المستقبل، وبالفعل ها أنا أستخدمه ;)

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

لقد جذبني هذا التصميم، فكرته هي التي جعلتني أبدأ  في تصميم إعلان المعرض.

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

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

انتهى التصميم بالصور الأربع كصورة واحدة، وصورتي والخلفية كصورة ثانية. قمت بستخدام نوعين من الخطوط هما Bauhaus93 و Vivaldi.   حجم التصميم النهائي لحظة طباعته كان 18 في 23 إنش (بوصة بالعربي الفصيح).

تعديل / تخصيص المدونة الخاصة بك

بعد إنشاء مدونتك من موقع بلوجر Blogger، قد يفيدك هذا الفيديو وهذا الشرح البسيط.

هناك أكثر من طريقة لتخصيص و تعديل مدونتك ، ولكن الطريقة السهلة هي عن طريق صفحة الـ Template Designer أسفل صفحة و اعدادات الـ Design .

بعد اختيارك للقالب (انا قمت بختيار Watermark)، هناك أكثر من 15 قالب قابل للتعديل.

اخترت التوزيع الذي يناسبني، يمكنك اختيار عدد الأعمدة الجانبية التي تريدها.

هنا يمكنك ضبط عرض الأعمدة و عرض المدونة.

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

 

هذا هو التصميم القديم.

 

بعد أن قمت بضبط وتعديل عرض المدونة والشريط الجانبي من قائمة التعديل.

بعد تطبيق صورة الخلفية من قائمة الخلفية. ربما تمر ببعض الصعوبات لأنك قد تحتاج لتغيير لون النص بحيث يكون قابل للقراءة مقابل الخلفية.

قالب آخر يسمى Ethereal، ربما أختاره في المستقبل عندما أرتب محتوى موقعي.

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

معرضي الفوتوغرافي الأول

هو ليس معرضاً بما تعنيه الكلمة من معنى.

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

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

قمت بطباعة جميع الصور في الجامعة.

الصور الكبيرة طبعت بهذه الطابعة:

الصغيرة بهذه الطابعة:

قمت بشراء الفلين ليكون خلفية الصور الكبيرة. قمت بستخدام هذه الرشة الخاصة بلصق الورق والتي تسمى Spry Adhesive متعدد الإستخدام.

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

وهذه هي الحُلة النهائية :) 

أنوار العرض لم تشغل، لأن المعرض يبدأ فعلياً غداً،،،

وفي الختام بعض الصور المعروضة بشكل منفصل.