انشاء موقع متجاوب ليعمل على الهواتف و التابلت افضل
4 min read
![انشاء موقع متجاوب ليعمل على الهواتف و التابلت افضل انشاء موقع متجاوب ليعمل على الهواتف و التابلت افضل](https://code95.com/app/uploads/2016/11/responsiv-webbdesign-1024x755.jpg)
Posted: 08 Sep, 2024
إزاي اخلى الموقع بتاعى موقع متجاوب (Responsive) علشان يتقرى على الأجهزة الصغيرة؟
تعرف دلوقتي ان في معظم المواقع 80% من مستخدمينها بيفتحوا الموقع من خلال الموبايل، و20% بس هما اللي بيفتحوه من الديسكتوب، علشان كده إنت لازم تهتم بالناس دي كويس جدا، ومتنساش بردوا الـ 20%.
طيب ازاي اقدر اهتم بالناس دي؟ ببساطة خالص هتعمل الموقع بشكل مقرى على جميع مقاسات الشاشات، انا مركز اوي اني بقول مقاسات الشاشات، مش موضوع موبايلات خالص.
وعلشان تقدر تعمل كده لازم تكون عارف كويس جدا الفرق بين (Responsive, Mobile Site, Mobile Application)
تعالوا نشوف الفرق بين الثلاث حاجات دول وكمان بأمثلة، بس قبل ما نتكلم ما تيجي افكروكوا كده بشوية حاجات.
الموقع هو الصفحات اللي العميل بيشوفها، يعني السيرفر بيرد على العميل بصفحات، والصفحات دي مكونة من اكواد HTML وجواها اكواد الـ CSS and Javascript، مين بقى اللي مسئول عن اظهار الصفحة؟ بالطبع هيكون الـ (Browser) علشان كده الـ Browsers المختلفة ممكن تظهر الموقع بشكل مختلف عن بعض.
ايه أحسن طريقة فى إدارة المشروعات.
أدى ابسط البساطة، في الـ Responsive الـ Browser هو اللي مسئول عن تغيير حجم الصفحة والكلام اعتماداً على عرض الـ Screen، وبالطبع لو كان موبايل فهيكون على حسب اتجاه الشاشة كمان، وكل ده بيحصل بسرعة. طبعا الدومين مش هيتغير، يعني اللي بيفتح موقع lite.almasryalyoum.com ، هيفتح نفس الموقع من على الموبايل مثلا. طبعاً أحسن في محركات البحث، لأن هو لسة موقع واحد بس وبيفتح على اكتر من حجم شاشة.
ودا فيديو بسيط هيفهمك ازاي تستخدم Google Chrome علشان تجرب موضوع الـ Responsive ده
https://www.youtube.com/watch?v=6UPTTO2ORhY
أمثلة الموضوع ده كتير جدا جدا، حاول تفتح المواقع دي من على الموبايل ومن على الكمبيوتر علشان توصلك الصورة.
www.alborsanews.com ،www.dailynews.com ،www.weladelbalad.com ،www.maghrabi.com.sa ،www.123kora.com، nogoumfm.net او افتح كل المواقع اللي انت متعود عليها.
هنا الموضوع مختلف حبتين، هنا بقى السيرفر هو اللي مسئول عن ان يعرف انك جاى من موبايل علشان يوجهك لموقع جديد خالص متبرمج مخصوص علشان يظهر على الموبايل.
يعني الموضوع هيبقى موقع جديد، وفي الغالب هيبقى subdomain جديد اسمه m. وطبعا دي إختصار لكلمة موبايل.
الحركة دي ليها ميزة وليها عيوب؛ الميزة هنا ان متحكم في حجم الصفحة، يعني مثلا تقدر تخلى السيرفر ما يرجعش مثلا اجزاء معينة في الصفحة، وبكده بتوفر في حجم استهلاك البيانات لأجهزة الموبايل.
والعيوب بقى كتيرة الصراحة، اولهم انه هيكون في دومين جديد، ثاني حاجة ان المبرمج نفسه هيضطر يعمل موقعين مش واحد بس، طبعا مع الاشتراك في باك اند واحده بس هيكون هيعمل الفرنت اند مرتين.
من أشهر الناس اللي عاملة موضوع الـ subdomain اللي اسمه m هما الفيسبوك، حاول تفتح كده الفيسبوك من على الموبايل Browser هتلاقي الدومين فوق مكتوب قبله حرف الـ m.
الإختيار ده مش بديل عن الاثنين اللي فوق إنما ممكن يكون مكمل ليهم، بمعنى ممكن الموقع يكون موقع متجاوب (Responsive) وكمان معمولة Mobile Application، علشان الناس اللي هتفتح الموقع من الموبايل يقدروا يشوفوه كويس، وكمان عندهم الحرية إنهم ينزلوا الـ Mobile Application.
وكمان الناس هنا بيحتاجوا يعمل Mobile Application علشان يستفيدوا بحاجات زيادة عن الحاجات اللي بتقدمها المواقع زي مثلا الكاميرا، الـ Push Notification، الـ Storage، وحاجات تانية كتير.
هل يستطيع المبرمجون الاستغناء عن الفلاش فى إظهار الجرافيكس فى مواقع الانترنت؟
السؤال بقى، أستخدم مين في الثلاثة دول؟
مبدأيا كده القرار لحضرتك طبعا، بس من وجهة نظرنا إحنا إن مفيش موقع هيقدر يطلع دلوقتي إلا لو كان موقع متجاوب (Responsive)، وبالنسبة بقى للموبايل ابليكيشن لو قدرت تقنع العميل بتاعك انه يعمله يبقى خير وبركة، غير كده لازم تشبط في حتة الـ Responsive.
1- الـ Responsive
![responsive website](https://code95.com/app/uploads/responsible.jpg)
2- الـ Mobile Site
![responsive mobile site](https://code95.com/app/uploads/mobile-site-display.jpg)
3- برمجة الـ Mobile Application
![responsive mobile application](https://code95.com/app/uploads/Mobile_Application.jpg)
Posted: 08 Sep ,2024
Read Also
![شركة برمجة تطبيقات في جدة شركة برمجة تطبيقات في جدة](https://code95.com/app/uploads/2024/02/1707654460_377_64572_1-1024x512.png)
شركة برمجة تطبيقات في جدة
تتزايد الحاجة الى شركة برمجة تطبيقات في جدة مع تزايد استخدام تطبيقات الجوال والبرامج الذكية التي تخدم المواطنين في عدة مجالات خلال الحياة اليومية، ففي كل يوم جديد يتم ابتكار…...
![شركة برمجة تطبيقات شركة برمجة تطبيقات](https://code95.com/app/uploads/2023/12/1705589194_234_26398_1-3-1024x512.webp)
شركة برمجة تطبيقات
تعتبر شركة برمجة تطبيقات وتصميم مواقع إلكترونية شكل من أشكال الابتكار التكنولوجي والتقدم المجتمعي الذي لم يعد يُقاس فقط بالتطور الصناعي والزراعي كما كان سائدًا من قبل بل أصبح اليوم…...
![برمجة تطبيقات برمجة تطبيقات](https://code95.com/app/uploads/2023/12/1705594203_303_29796_1-1024x512.webp)
برمجة تطبيقات
برمجة تطبيقات الهواتف الذكية في عصرنا الحالي أصبحت فرصة من فرص العمل والربح والتطوير وابتكار الحلول للأعمال المختلفة والمساهمة في توسيع دائرة النشاط التجاري أو الصناعي أو الخدمي فعن طريق…...
![برمجة تطبيقات الهاتف الذكي برمجة تطبيقات الهاتف الذكي](https://code95.com/app/uploads/2023/12/1705589389_869_27866_-3-1024x513.webp)
برمجة تطبيقات الهاتف الذكي
برمجة تطبيقات الهاتف الذكي من أفضل المجالات الموجودة في البرمجة في هذا الوقت، ويزداد الطلب عليها يوميًا بسبب استخدامات الهاتف الذكي المتعددة حيث أصبح الهاتف يغنيك عن استخدام الكمبيوتر والأجهزة…...
![برمجة تطبيقات الجوال برمجة تطبيقات الجوال](https://code95.com/app/uploads/2023/09/1701186137_959_11382_1701185664_787_11382_b015e326be9ff2f01-2.webp)
برمجة تطبيقات الجوال
يتزايد الإقبال على برمجة تطبيقات الجوال بشكل يومي بسبب تطور الهواتف الذكية والجوالات والاجهزة اللوحية بشكل مذهل خاصة خلال العقدين الماضيين، فلا يكاد يمضي يومًا واحدًا دون استخدام أحد تطبيقات…...
![تعلم كيفية برمجة تطبيق اندرويد خطوة بخطوة وابدأ رحلتك مع عالم التقنية والابتكارات تعلم كيفية برمجة تطبيق اندرويد خطوة بخطوة وابدأ رحلتك مع عالم التقنية والابتكارات](https://code95.com/app/uploads/2023/07/1701186231_154_11006_1701185734_204_11006_43-3.webp)
تعلم كيفية برمجة تطبيق اندرويد خطوة بخطوة وابدأ رحلتك مع عالم التقنية والابتكارات
هل فكرت يومًا في برمجة تطبيق اندرويد أو كانت لديك فكرة تحلم بتحويلها إلى برنامج يتم تحميله على الهاتف الذكي ويستفيد منه الاف الاشخاص؟ حسنًا إن كنت واحدًا من أولئك…...