إرشيف وسم 'تطوير مواقع'

الألوان في تقنية CSS3

كاتب المقال: مازن بشر، مهتم بكل ما يختص الإنترنت والحاسوب بشكل عام و خاصة التصميم والجديد في تقنيات الويب من CSS،HTML5،PHP،Javascript. بدأت منذ حوالي ثلاث سنوات بالإهتمام بأحدث تقنيات الويب ولا زال شغفي يزداد يوماً بعد يوم بهذا العالم المتسارع.

بعد أن اقتصرت الألوان في معايير CSS2 على استخدام الكلمات المفتاحية (Keyword) أو استخدام القيم العشرية (hexadecimal) أتت القفزة النوعية في معايير تقنية CSS3 لتتيح لنا مجالات أوسع مثل ألوان الشاشات RGB و ألوان الطباعة CYMK إضافة إلى أمكانية استخدام الشفافية و سأتي على ذكر كل القيم اللونية الممكن استخدامها حالياً القديمة منها و الحديثة.

.. إقرأ بقية الموضوع »

تقنية Less CSS

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

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

.. إقرأ بقية الموضوع »

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

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

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

الفلاش وتقنية HTML5

هل تؤيد إستخدام تقنية HTML5 بدلاً من تقنية الفلاش؟ .. كثيراً ما تم طرح هذا السؤال في الشهور السابقة وهناك العديد المقالات التي تؤيد إستخدام تقنية HTML5 لوجود مميزات عديدة تنافس تقنية الفلاش التي تستهلك الكثير من طاقة وموارد الجهاز ومتصفح الويب إذا كان المستخدم يستعمل جهاز سطح مكتب.

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

.. إقرأ بقية الموضوع »

تصميم الويب للهاتف النقال: تلميحات #3

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

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: حول Media Queries

هذه أحد المواضيع الأخرى ضمن سلسلة تطبيقات على CSS3 والتي تعرض عدة أمثلة على إستخدام تقنية CSS3 حسب كل خواص جديدة مع غرضها، في هذا الدرس سأعرض أمثلة على إستخدامات  Media Queries أو إستعلامات التصفح الخاصة لكيفية إستعراض صفحات الويب حسب شروط معينة مثل قياس عرض نافذة المتصفح وهي وسيلة رئيسية لتطبيق مفهوم إستجابة تصميم صفحة الويب لطريقة العرض Responsive Web Design وتأتي كذلك من خاصية media المتعلقة بنوع إستعراض الصفحة مثل ‏all (إستعراض لجميع الأجهزة والمتصفحات)، print (إستعراض الصفحة قبل الطباعة)، screen (إستعراض للأجهزة الداعمة للألوان – أي جهاز حاسوب -)، tv (إستعراض لأجهزة التلفاز) .. وغيرها من الأنواع الإستعراض التي يمكن القراءة عنها.

تستخدم Media Queries في تحديد تنسيق معين للصفحة حسب عرض النافذة ويمكن إستخدام نفس التنسيق الخاص بالصفحة (مثل ملف style‪.‬css) وتعديل أصناف معينة خاصة بعناصر الصفحة (خاصية class و id) كما سنرى في هذا الدرس، في البداية سنلقي نظرة لأنواع إستعلامات Media Queries.

.. إقرأ بقية الموضوع »

15 إضافة ووردبريس مفيدة لمشاريع الويب

ما زال الووردبريس يُستخدم كمنصة لإدارة المدونات والمواقع وإنتشر بشكل كبير في السنوات الأخيرة حيث أن 14.7% من محتويات الموجودة على الويب نشرت بواسطته وكذلك يمتلك 54.5% من سوق تطبيقات إدارة المحتوى وهناك أكثر من 54 مليون مدونة تستخدم  موقع الووردبريس المجاني فقط حسب إحصائيات موقع WordPress.com وملايين المدونات الأخرى على الشبكة تستخدم الووردبريس كتطبيق، إضافةً إلى أنه أصبح بإمكان المطورين إستخدام الووردبريس وتطويعه كتطبيق لإدارة المحتوى أكثر من مجرد تطبيق للتدوين.

.. إقرأ بقية الموضوع »

تصميم الويب للهاتف النقال: تلميحات #2

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

في هذا الموضوع سأتحدث عن محاكيات الهواتف النقالة Simulators التي تأتي مع أدوات التطوير SDK، الأنظمة التابعة للهواتف النقالة التي سأتحدث عنها هي نظام iOS الخاص بالآيفون و نظام Android بالخاص بهواتف مثل نكسس ون وجالاكسي وهواتف أخرى، ونظام webOS الخاص بهاتف بالم.

.. إقرأ بقية الموضوع »

تصميم الويب للهاتف النقال: تلميحات #1

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

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

.. إقرأ بقية الموضوع »

إنشاء العناصر والتحكم بها بإستخدام مكتبة jQuery

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

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

.. إقرأ بقية الموضوع »

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

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

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

.. إقرأ بقية الموضوع »

تصميم الويب للهاتف النقال: أدوات تساعدك

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

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

.. إقرأ بقية الموضوع »

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

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

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: التدرجات

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

كما أن في هذا الدرس سوف تتعرف على الخاصية التي تقوم بعمل التدرجات في CSS وتكتب الخاصية بأكثر من طريقة بسبب دعم المتصفحات لها مثل تطبيق خاصية التدرجات في متصفح Firefox الذي يستخدم محرك Gecko وفي متصفح Safari الذي يستخدم محرك Webkit. علماً بأن خاصية التدرجات Gradient تكتب في كقيمة في خاصية background-image، ومدعومة في المتصفحات التي تستخدم محرك Webkit و Gecko.

.. إقرأ بقية الموضوع »

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

في الموضوع السابق تحدثت عن تصميم الويب للهاتف النقال كمقدمة وبشكل عام مع بعض الأمثلة على تصفح مواقع الويب من المتصفحات الموجودة في الهواتف.

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

.. إقرأ بقية الموضوع »

 1 2 3 4 5 >>

تابع آخر مواضيع المدونة عبر هذه الوسائل

إشترك في القائمة البريدية لتصلك آخر مواضيع المدونة

صفحات المدونة

أقسام المدونة

مواضيع مختارة

مواقع صديقة


Plugin from the creators ofBrindes Personalizados :: More at PlulzWordpress Plugins