الكتابة أفضل كود الويب

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

مضحك ، أليس كذلك؟

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

كيف تسأل؟

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

ولكن أولا ، ما هو بالضبط Webflow؟

استعراض Webflow: نظرة عامة

كما قد تكون قد فهمت الآن ، فإن Webflow ليس منشئ الويب المعتاد.

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

Webflow

لكن ، لا ترتكب أي خطأ. Webflow لا تتنافس مع أمثال WIX و W ث ebly. يقدم مجموعة مختلفة من الميزات التي تستهدف مجموعة سكانية مختلفة.

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

مربك؟ نعم اعرف. لهذا السبب استغرقت وقتًا لتقييم كل ما يقدمه Webflow - من تصميم مواقع الويب إلى نظام إدارة المحتوى.

وهنا التفاصيل ...

استعراض Webflow: ميزات

تصميم الموقع

Webflow هو بضعة أشياء ، ولا شك. إلا أن أداة تصميم الويب الأقل شيفرة كانت دائمًا العرض الأساسي هنا.

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

مصمم Webflow

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

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

الآن ، دعونا نواجه الأمر. إن البساطة المتقدمة هما شيئان معروفان بأنهما مثل النار والجليد عندما يتعلق الأمر بأدوات إدارة الموقع.

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

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

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

ماذا يعني هذا؟

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

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

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

كلمة الحذر رغم ذلك. اترك هذا الخيار للمصممين ذوي الخبرة في CSS و HTML. خلاف ذلك ، أنت تخاطر بخلط الأمور أو التعلق في مكان ما على طول العملية.

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

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

استضافة

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

استضافة Webflow

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

ماذا يعني هذا؟

حسنًا ، يحدث Webflow لامتلاك أكثر من مراكز بيانات 100 في جميع أنحاء العالم والتحكم فيها. الجمع بين ذلك مع CDNs يديرها الأمازون CloudFront زائد بسرعة- والنتيجة هي نظام واحد صلب لاستضافة جميع أنواع المواقع.

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

وبما أن أمان الويب ضروري ، فإن بنية استضافة Webflow هي متوافقة مع HTTP / 2 ويحصل المستخدمون على شهادات SSL ذات صلة لمواقعهم.

نظام إدارة المحتوى

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

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

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

Webflow CMS

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

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

باختصار ، يمكنك الحصول على موقع ويب شامل يدعم المحتوى الديناميكي مثل الحافظات والمقالات ومشاركات المدونات - بدون تثبيت مكونات إضافية.

التعاون

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

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

تعاون Webflow

إذا كنت تتعامل مع العملاء ، على سبيل المثال ، يمكنك دعوتهم لمراجعة مشاريعهم في الوقت الفعلي - مع امتيازات الاستخدام المقيدة بشدة.

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

الميزات الشاملة

  • XML خريطة الموقع
  • عناوين الفوقية كبار المسئولين الاقتصاديين ، والأوصاف
  • علامات alt alt
  • مركز المساعدة
  • منتديات
  • دعم الأولوية
  • دعم البريد الإلكتروني
  • اسم المجال المخصص
  • مواقع التدريج
  • تحديثات فورية
  • إعادة توجيه عنوان URL المخصص
  • 24 / 7 مراقبة الموقع
  • أوقات تحميل سريعة
  • Google Domains Purchasing
  • التكامل Zapier
  • التكامل ميل تشيمب
  • دمج Google Analytics
  • كبار المسئولين الاقتصاديين التحسين
  • نماذج التسمية البيضاء
  • CMS العلامات البيضاء
  • حماية كلمة المرور للموقع
  • منظمة المشروع
  • موقع النسخ الاحتياطي
  • صفحات خطأ مخصصة
  • رمز المفضلة
  • فوترة العميل المباشر
  • مكونات SNS
  • النص الغني
  • صندوق مضئ
  • مقاطع الفيديو الخلفية
  • HTML تضمين الرموز
  • القائمة المنسدلة
  • خرائط جوجل
  • المتزلجون ودوارات
  • التنقل في علامة التبويب
  • أشكال الويب القابلة للتخصيص
  • محرر الموقع
  • مراجعة نموذج الاستمارات
  • فتح محتوى الرسم البياني
  • قالب علامات كبار المسئولين الاقتصاديين
  • استيراد CMS عبر Zapier
  • خدمة RSS
  • واجهة برمجة تطبيقات CMS
  • الرسوم المتحركة 3D
  • خصائص تصميم CSS
  • قوالب موقع الويب
  • صور محسنة
  • عائلات الخطوط على شبكة الإنترنت
  • حوامل اللون العالمية
  • مربعات CSS3 مرنة
  • اضافة كود مخصص
  • كود تصدير
  • مرشحات CSS

استعراض Webflow: التسعير

يبدو أن هيكل تسعير Webflow معقد لبعض المستخدمين ، في حين يثني آخرون على منهجها الشامل كليًا.

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

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

حزم Webflow

فيما يلي أوصاف مختصرة لكل خطة:

للمستقلين:

التدريج مجانا مجاني تماما.

  • تقديمات نموذج 10 شهريًا
  • عناصر 50 CMS
  • زيارات 500 الشهرية
  • الصفحات الثابتة 2
  • مجانا webflow.io فرعي

الاستضافة الأساسية 15 دولار شهريًا للفواتير الشهرية أو 12 دولار شهريًا للفواتير سنويًا.

  • تقديمات نموذج 500 شهريًا
  • زيارات 25,000 الشهرية
  • الصفحات الثابتة 100
  • كندي
  • خيار SSL مجاني
  • إنشاء المجال

CMS Hosting- 20 دولار شهريًا للفواتير الشهرية أو 16 دولار شهريًا للفواتير سنويًا.

  • 3 المحررين المحتوى
  • الوصول إلى CMS API
  • 2,000 CMS من العناصر المتاحة
  • تقديمات نموذج 1,000 شهريًا
  • زيارات 100,000 الشهرية
  • الصفحات الثابتة 100
  • كندي
  • خيار SSL مجاني
  • إنشاء المجال

استضافة الأعمال 45 دولار شهريًا للفواتير الشهرية أو 36 دولار شهريًا للفواتير سنويًا.

  • 10 المحررين المحتوى
  • الوصول إلى CMS API
  • 10,000 CMS من العناصر المتاحة
  • تقديمات غير محدودة
  • زيارات 1,000,000 الشهرية
  • الصفحات الثابتة 100
  • كندي
  • خيار SSL مجاني
  • إنشاء المجال

Webflow لحسابهم الخاص

للمصممين:

بداية- مجانا.

  • التدريج مجانا
  • فوترة العميل
  • ما يصل إلى 2 المشاريع المتزامنة
  • بناء موقع مجاني

قليل الدسم- 24 دولار شهريًا للفواتير الشهرية أو 16 دولار شهريًا للفواتير سنويًا.

  • تصدير الرمز
  • تعزيز التدريج
  • فوترة العميل
  • ما يصل إلى 10 المشاريع المتزامنة

طليعة- 42 دولار شهريًا للفواتير الشهرية أو 35 دولار شهريًا للفواتير سنويًا.

  • حماية كلمة المرور للموقع
  • وضع العلامات البيضاء
  • نقل ملكية المشروع
  • تصدير الرمز
  • تعزيز التدريج
  • فوترة العميل
  • مشاريع غير محدودة متزامنة

Webflow للمصممين

للفرق الإبداعية

الفريق- 42 دولار شهريًا للفواتير الشهرية أو 35 دولار شهريًا للفواتير سنويًا.

  • لوحة تحكم الفريق
  • حماية كلمة المرور للموقع
  • وضع العلامات البيضاء
  • تصدير الرمز
  • تعزيز التدريج
  • فوترة العميل
  • مشاريع غير محدودة متزامنة

فريق كبير- اقتباس مخصص.

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

Webflow للفرق

من يجب أن نفكر في استخدام Webflow؟

كل الأشياء التي يتم النظر فيها ، ونحن نشيد Webflow لتوفير:

  • شهادة SSL مجانية للتوافق مع الأمان.
  • شبكات توصيل المحتوى المتكاملة المجانية لتقليل أوقات تحميل الصفحات.
  • استضافة مواقع عالمية متقدمة بالتعاون مع أنظمة فعالة مثل الأمازون CloudFront و بسرعة- لسرعة تحميل الصفحات بسرعة.
  • CMS متكامل متعدد الاستخدامات لإنشاء محتوى ديناميكي.
  • بيئة مرحلية لاختبار ومراجعة عناصر مواقع الويب المختلفة.
  • تحسين إدارة CSS و JS لإدارة الموقع المتقدمة بالإضافة إلى التحكم الشامل في الرسوم المتحركة والأنماط.
  • عملية بناء ويب مرنة تبدأ إما بقماش فارغ أو قوالب مصممة مسبقًا.
  • أداة تصميم الويب المتوافقة مع الجوّال التي تُنتج شفرة قابلة للتصدير في الوقت الفعلي عند إنشاء موقع.

وبغض النظر عن ذلك ، فإن السلبيات التي واجهتها على طول الطريق تشمل:

  • ميزات محدودة لدعم مواقع التجارة الإلكترونية
  • عملية تصميم تفضل بشدة المبرمجين
  • عدد محدود من قوالب موقع الويب
  • منحنى التعلم حاد للمبتدئين

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

ما رأيك؟

الصورة

بوجدان رانسيا

بوجدان هو أحد الأعضاء المؤسسين لشركة Inspired Mag ، حيث اكتسب خبرة تقرب من سنوات 6 خلال هذه الفترة. يحب في وقت فراغه دراسة الموسيقى الكلاسيكية واستكشاف الفنون البصرية. انه مهووس جدا مع إصلاحات كذلك. يمتلك 5 بالفعل.