مكاو (Macaw) أداة الجيل القادم لتصميم المواقع
موقف 1 (أحمد – مصمم مواقع)
- مرحباً كريم، اتصل بك صديقي لأقترح عليك العمل معي على مشروع موقع إلكتروني مهم، يتكون من كذا…وكذا، ويهدف لكذا…وكذا
- عذراً يا صديقي العزيز، أنا لست مستعداً ولا متحمساً للعمل على مشروع كهذا.
موقف 2 (سناء – طالبة علم إجتماع)
- أووه، لابد أن فكرة مشروع كهذه لم تقع على بال أحد، ولكن كيف السبيل إلى التطبيق وأنا لا أجيد البرمجة ولا التصميم !؟
من المعلوم أن أغلب الشباب الحاملين لفكرة مشروع موقع إلكتروني، توءد أفكارهم بمجرد وقوعهم في مواقف كالتي ذكرنا سلفاً، أو حالما تجابههم عقبات تثبط هممهم، من قبيل ضيق الوقت، بطء التقدم المحرز، عدم إتساق مهام الفريق…إلخ
فما السبيل إلى التغلب على هذه المشاكل والحصول على نتائج مذهلة بجهد أقل وفاعلية أكثر ؟
توقف عن كتابة الكود، إبدأ في رسمه!
ما هو مكاو (Macaw) ؟
راهن توم جياناتاسيو (Tom Giannattasio) وآدم كريست (Adam Christ) على تذليل كل العقبات في وجه الشباب حاملي الأفكار، سواء كانوا متخصصين في حقلي البرمجة والتصميم أم لا، وذلك عن طريق عملهما على تطوير برنامج فريد من نوعه أطلقا عليه إسم مكاو Macaw ، هذا البرنامج الصادر قريباً، تم إدراجه على موقع التمويل الجماعي (Crowd Funding) الشهير Kickstarter، وقد حقق هدفه المنشود المتمثل في جمع مبلغ مالي قدره 75000$ خلال يوم واحد، ووصل مجموع ما حصّل عليه مكاو من تبرعات في مدة لا تتجاوز 30 يوم ما يناهز 275000$. يمكّن هذا التطبيق الواعد المستخدم من تصميم موقعه بطريقة بديهية (Intuitive) وسلسة (Fluid)، وبالموازاة مع ذلك يقوم بتوليد الشفرات (Code) بطريقة آلية.
أهذا WYSIWYG آخر ؟
قد يعتقد الكثير ممن كانت لهم تجارب سابقة مع واجهات المستخدم WYSIWYG ما تراه هو ما تحصل عليه ، كبرنامج تطوير الويب دريمويفر (Dreamweaver) التابع لشركة أدوبي (Adobe)، أو برنامج إكسبرشن ويب (Expression Web) الصادر عن شركة مايكروسوفت (Microsoft)، أن مكاو من نفس طينة هذه البرامج، وبالتالي فهو مليء بالمشاكل. نطمئن في هذا الباب كل من تبادرت إليه تلك الظنون طمأنة تامة، فعلى عكس واجهات المستخدم (WYSIWYG) التي تولد كود متداخل وغير منتظم بل وكارثي في بعض الأحيان، ولا تصلح لأي مشروع جاد، فإن مَكّاوْ يعد بتغيير كل ذلك، عن طريق توليد كود (HTML/CSS) نظيف ومقتضب. بالإضافة إلى أن مكاو يمكن المستخدم – وهذا هو الأساس – من إنجاز التصاميم على واجهته، على عكس برنامج دريمويفر الذي يفرض عليك المرور عبر برنامج فوتوشوب (Photoshop) لإنجاز التصاميم. وبالتالي فإن مكاو يختزل المراحل الثلاث الأساسية لإنشاء موقع إلكتروني وهي التصميم (Design)، التطوير (Development) والدمج (Integration)، إلى مرحلة واحدة مسلية ألا وهي الرسم (Drawing).
في بعض الأحيان يكون شريط فيديو أبلغ من كلام منظوم، لذا أترككم مع هذا المقطع (20 دقيقة) الذي يصور فيه المقدم كيفية إنشاء مدونة (Blog)، والذي يبين من خلاله كيفية عمل مَكّاوْ مبرزاً بعض خصائصه ومميزاته:
أهم خصائص مكاو Macaw
لا نعرف من خصائص مكاو إلا النزر اليسير، لكن قبل أن نتعرف على مجملها حال صدور البرنامج، لابد لنا من التذكير بأهمها حسب ما توافر من معلومات حتى الأن .
سلاسة مكاو Macaw تتمظهر في أشكال عديدة، ليس فقط في عملية التصميم السلسة المتاحة بفضل آليات الرسم البديهي (Intuitive Drawing Mechanics) – بل كل شيء في مكاو هو أيضاً سلس. لوح الرسم (Canvas) سلس، الشبكيات (Grids) سلسة، حتى العناصر التي ترسمها سلسة. بحيث يمكن للمستخدم تغيير حجم لوح الرسم (Canvas) وجعل كل العناصر المتضمنة (نصوص – صور – عناوين…) تساير الكانفاس في ذلك التغيير بدون تشويه الشكل أو الإخلال بالمحتوى. لذلك، فإن تصميم التخطيطات القائمة على النسبة المئوية (Percentage-based Layouts) بات كشربة ماء، فبمجرد سحب و إفلات (drag & drop) العناصر في المكان الذي تريد، مكاو يكفيك عناء التدقيق ويقوم بجميع الحسابات اللازمة.
ينقل مكاو Macaw ممارسات مشهورة في عالم التطوير كمبدأ لا تكرر نفسك (Don’t repeat yourself) إلى عالم التصميم. ويُمكّن المستخدم من حفظ الأساليب المستخدمة عادةً، تطبيقها على عناصر متعددة وإمكانية تحريرها في مكان واحد بفضل محرر أسلوب (Style Editor) مكاو. أكثر من ذلك فإن مكاو يتيح أيضاً حفظ مكونات معقدة مثل الترويسات (Headers) والتذييلات (Footers) في المكتبة الخاصة بك لإعادة استخدامها عبر عدة صفحات.
منذ فترة طويلة كان يعتقد أن إشتقاق كود “قابل للإستعمال” من أداة تصميم يعد شيئاً مستحيلاً، اليوم أصبح هذا الأمر متيسراً بفضل ما زعم توم و آدم أنه أقوى محرك Code-to-design في العالم من أي وقت مضى و الذي أطلاقا عليه إسم الخيمياء (Alchemy)، هذا الأخير بُرمج ليتعلم كيف تصمم وليحاكي نفس منطق المطور، بأخذه في الإعتبار أشياء مثل قابلية التطبيق (Applicability)، الخصوصية (Specificity)، الدلالات (Semantics)…كما يوفر سير عمل (Workflows) متقدمة للمطورين لغرض الحصول على كود يتوافق وتفضيلاتهم الشخصية.
بعض المميزات الأخرى
- يتوفر مكاو Macaw على ميزة تجميع العناصر، فمثلاً يجعل وحدة (bloc) تحتوي على عنوان وصورة ونص تتكتل في كتلة واحدة، مما يتيح تكرارها بسهولة (Duplication)، وفي حالة تغيير النمط أو الأسلوب (Style)، فإن تحديث (Update) الوحدة لا يشكل أي عناء..هذا مالم يكن متاحاً في برنامج مخصص للتصميم كالفوتوشوب.
- حساب عدد الحروف في كل سطر (Character per line)
- تعيين الفئات (Classes) من خلال تسمية الطبقات (Layers)
- حساب المساحات بين العناصر وترتيبها بشكل رهيب
- بناء نماذج قابلة للنقر (Clickable Prototypes)
ما رأي المتتبعين في مكاو Macaw ؟
مكاو أثار الكثير من القيل والقال في أوساط المتخصصين والمهتمين، فبين معجب متفائل يرى أن هذا البرنامج سيجعل تصميم الويب كما لم يكن من قبل حتى ذهب أشد المتفائلين إلى قول ” إن بزوغ نجم مكاو يوازي أفول نجم أدوبي”، وبين مرتاب متحفظ يشك في قدرة و فعالية هذه الأداة كقول أحدهم “هذا التطبيق لا يصلح لمشاريع جادة”. على كل حال لا يسع الجميع إلا التريث إلى حين إطلاق النسخة الأولى التي ستصدر قريباً (يناير 2014) على نظام تشغيل (OS X). مستخدمي ويندوز (Windows) سيتمكنون هم كذلك من تجربة النسخة الأولى إلا أنه يتوجب عليهم انتظار بضعة أشهر أخرى لترى النسخة المخصصة لهم النور.
بماذا سيفيدني هذا الشيء ؟
الشيء الرائع في هذا البرنامج أنه سيخرجنا من نفق النمطية والقوالب الجاهزة، إلى فضاء الإبداع اللامحدود، فمن قبل كنا ولا زلنا الأن نجد عشرات المواقع والمدونات تعتمد على نفس القوالب (Templates) الشيء الذي يرسم في إعتقاد المتصفح أن المحتوى هو أيضاً متشابه؛ هذا كله مرده إلى أن أغلب الراغبين في الحصول على موقع أو مدونة يلتجئون إلى القوالب الجاهزة لصعوبة إستخدام برامج التصميم المعقدة التي تتطلب جهداً كبيراً ووقتاً طويلاً…من الأن فصاعداً لن يكون أمام المستخدم العادي أي عائق لترجمة أفكاره الإبتكارية إلى واقع ملموس بفضل مكاو – وأنا أعني ما أقول – فكل ما يجب أن يكون لديك عزيزي القارئ دراية به هو رسم أشكال بسيطة وتلوينها (استعن بأخيك الصغير أو أختك الصغيرة)، تحميل صور(ضغطة زر واحدة)، تحرير المحتوى(هذا أنت) والتنسيق بين الكل. أما بالنسبة للمبرمجين فاطمئنوا، مكاو Macaw لن يحيلكم على التقاعد المبكر، بل سيمكنكم من إختزال المراحل المتعبة كمرحلة الدمج (Integration) التي غالباً ما تستهلك الجزء الأكبر من وقت المشروع، ما سيؤدي لا محالة إلى إنتاجية أكثر في وقت أقل.
في الأخير أدعوكم لمتابعة هذا الفيديو (15 دقيقة) الذي يلقي الضوء على بعض مميزات مكاو التفاعلية. وعلى ذكر التفاعل، أتمنى عزيزي القارئ عزيزتي القارئة أن تتفاعلوا مع هذه التدوينة المتواضعة بإبداء أرائكم، انتقاداتكم و اقتراحاتكم.
إذا أعجبتك هذه التدوينة، نأمل من أن تسجل بريدك بالأسفل حتى يتسنى لنا أن نرسل لك أحدث تدويناتنا أولاً بأول:
[wysija_form id=”1″]
لم يتثنى لي مشاهدة مقاطع الفيديو ، لكني قرأت النصوص ، و لدي سؤال : هل يمكن استخدام البرنامج في التطوير فعلا ؟ أم سيقتصر الأمر على التصميم فقط ، لأني قرأت كلمة التطوير ” لغات البرمجة ” ! أرجو مزيدا من الايضاح
إستفسار في محله أخ محمد.
الهدف من إنشاء مكاو هو التقليل ما أمكن من تفاعل المستخدم مباشرة مع الكود، وخير مثال أشرت له في التدوينة عن ميزة تعيين الكلمات الدلالية (Semantics) من فئات (classe) ووسوم Html Tag عن طريق تسمية الطبقات (Layers) كما على برنامج فوتوشوب. الكود المولَّد منتظم، نظيف، وجد مقتضب كما هو واضح في شريط الفيديو الأول، علاوة على أنه قابل للتخصيص customizable. بالاضافة إلى ذلك فإن مكاو يتيح للمستخدم إمكانية كتابة نصوص برمجية (Scripts) لتصميم محتوى تفاعلي (فيديو 2). بيد أن من الميزات المفتقدة في النسخة الاولى هي خاصية إستيراد الكود، وقد وعد فريق العمل على تطويرها في النسخة التالية، فإلى ذلك الحين، يستحسن دمج الكود المستورد بعد الإنتهاء من جل مراحل المشروع على مكاو.
أرجوا أن أكون قد وفقت في الإجابة على سؤالك، واتمنى أن تستثمر أخ محمد بعض وقتك لمشاهدة مقطعي الفيديو 🙂
أستخدم usb modem و الباقة لا تكفي إلا التصفح بالكاد 🙂 لذلك أتجنب مقاطع الفيديو لحين العودة للمنزل في نهاية كل أسبوع
هذا أنجع دواء لداء إدمان اليوتيوب 🙂
اتمنى أن أطّلع على رأيك بعد مشاهدتك الفيديوهات
شكراً على تفاعلك
شكرا لطرحك للموضوع
ولدي سؤال هل بامكان تتبيت هده النسخة على انظمة تشغيل ماك مقرصنة ام لا
لاني لم يسبق لي ان تعاملت مع نظام ماك و بصراحة بعد قراءتي للموضوع ازداد حماسي لتجربة هاد النظام
لاني اريد ان اتعرف على هده أداة و بكل صراحة سوف انتظر صدور النسخة لتجربتها بفارغ الصبر
بما أنك أخي تطمح لتكون من أوائل المجربين لأداة مكاو، فنرجوا أن تشاركنا تجربتك عما قريب.
اما بالنسبة للسؤال الذي طرحت فأنا لست أهلاً للإجابة عليه.
شكراً على تفاعلك 🙂
هل نستطيع الاستغنانء عن php فيه ؟ او فقط html – css ؟
وماذا عن java script و ajax ?