اذهب إلى المحتوى
  • 0

تشغيل html و css و js على الموبايل

Mohammed Hendawy

السؤال

Recommended Posts

  • 1

ليس لدي فكرة عن كيفية تشغيل HTML , CSS, JavaScript من الجوال، وانصحك بشدة بان تعمل على حاسوب ولو كانت مواصفاته متواضعة فالبرمجة من الهاتف ليست جيدة، فلن تحصل على توثيق كافي للعمل على الهاتف.

بعد قول هذا فيمكنك تجريب استخدام مواقع الـ online مثل codepen.io، حيث يقوم بتشغيل الكود مباشرةً. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

هناك تطبيق جديد على الموبايل يدعى Dcoder يمكنك من البرمجة بالكثير من التقنيات و أطر العمل.

يمكنك الإطلاع عليه من هنا.

بالطبع لن يكون مثل البرمجة على الحاسوب، و لكن يمكنك استعماله في البداية لمشاريع صغيرة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

في البداية يجب عليك فهم كيف يتم الربط بين ملفات HTML , CSS, JavaScript.

وهناك عدة طرق، ولكن الطريقة الأسهل هي بإضافة رابط ملفات CSS و JavaScript داخل ملف HTML.

وHTML هي لغة تصميم صفحات الويب ويمكن الربط بين ملفات HTML و CSS عن طريق استخدام عنصر الـlink.

ويتم وضع هذا العنصر في العنوان <head> من صفحة HTML، واستخدام الـlink للإشارة إلى ملف CSS الذي يحتوي على التعليمات البرمجية المتعلقة بتصميم الصفحة. 

وللقيام بذلك عليك جميع ملفات المشروع داخل مجلد واحد على هاتفك.

مثال:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

وكما ترى استخدمت العنصر <link> مع تحديد الخاصية rel="stylesheet" التي تشير إلى أن هذا العنصر يربط بين ملف HTML وملف CSS.

وتحديد الخاصية type="text/css" التي تشير إلى نوع الملف الذي يتم الربط به، وهو ملف CSS. وأخيراً تحديد مسار الملف الذي يتم الربط به بإستخدام الخاصية href="style.css".

وإذا كان الملف داخل مجلد آخر في مجلد المشروع، أي مثلاً داخل مجلد باسم mohamedفيجب كتابة المسار بشكل صحيح كالتالي:

<head>
  <link rel="stylesheet" type="text/css" href="mohamed/style.css">
</head>

أما بالنسبة للربط بين ملفات HTML و JavaScript فهو يتم عن طريق استخدام العنصر <script>.

فعند وضع الكود البرمجي للـ JavaScript داخل العنصر <script>، سيتم تنفيذ الكود عند تحميل الصفحة.

وذلك من خلال ربط ملف JavaScript الخارجي باستخدام الخاصية src، بتحديد مسار الملف الذي يتم الربط به.

مثال:

<head>
  <script src="كود.js"></script>
</head>

ولا تنسى كتابة اسم الملف والمسار الصحيح، فهنا قمنا بربط كود الجافاسكريبت بواسطة ملف باسم كود.js

أشهر محررات الأكواد على الهاتف

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

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

1- DroidEdit

محرر نصوص يحتوي على العديد من الميزات المفيدة مثل الإكمال التلقائي، والتميز اللوني، وإدارة الملفات، وتوفير مساحة التخزين السحابية.

2-Quoda

يوفر Quoda الكثير من الميزات المفيدة للمستخدمين، مثل تمييز الألوان وتحرير الشفرة المصدرية وحفظ المشروعات.

3- Acode

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

4- Turbo Editor

محرر نصوص بسيط وسهل الاستخدام يتيح للمستخدمين الوصول إلى أدوات التحرير المهمة بسرعة، مثل البحث، والاستبدال، والتميز اللوني.

5- QuickEdit

محرر نصوص بسيط وسهل الاستخدام يتيح للمستخدمين الوصول إلى أدوات التحرير المهمة بسرعة، مثل البحث، والاستبدال، والتميز اللوني.

6- Code Peeker Pro

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

7- Codeanywhere

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

إذا كنت تعمل على الموبايل وتريد فتح ملف HTML , CSS, JavaScript وتشغيلهم مع بعض كمشروع واحد

فهناك بعض الخطوات التي يجب اتباعها:

- أولاً، تحتاج إلى تحميل تطبيق محرر نصوص يدعم لغات البرمجة الثلاثة، مثل VS Code أو Atom أو Sublime Text. هذه التطبيقات تساعدك على كتابة وتنسيق الكود بشكل سهل وسريع.
- ثانياً، تحتاج إلى إنشاء مجلد folder جديد على ذاكرة الموبايل الخارجية أو الداخلية، وتسميه باسم المشروع الذي تريد إنشائه. في هذا المجلد، تنشئ ثلاث ملفات files جديدة باسم index.html وstyle.css وscript.js. هذه الملفات تحتوي على الكود الخاص بكل لغة من لغات البرمجة الثلاثة.
- ثالثاً، تحتاج إلى ربط الملفات الثلاثة مع بعضها في ملف index.html. لذلك، تستخدم عنصر link لربط ملف style.css، وتستخدم عنصر script لربط ملف script.js. هذه العناصر توضع في قسم head من ملف index.html. مثال:

index.html

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- من خلال هذا السطر نستدعي ملف CSS -->
<link rel="stylesheet" href="./style.css">
<title>مشروعي</title>
</head>
<body>
<!-- هنا تضع كود HTML الخاص بالمحتوى -->
  
  
<!--  من خلال هذا السطر نستدعي ملف JavaScript -->
<script src="./script.js"></script>
</body>
</html>

- رابعاً، تحتاج إلى كتابة الكود الخاص بك في كل ملف من الملفات الثلاثة.

  1. في ملف index.html، تستخدم عناصر HTML لإنشاء بنية structure صفحة الويب.
  2. في ملف style.css، تستخدم قواعد CSS لإضافة التنسيق style والتخطيط layout لصفحة الويب.
  3. في ملف script.js، تستخدم أوامر JavaScript لإضافة التفاعل interactivity والديناميكية dynamicity لصفحة الويب.

- خامساً، تحتاج إلى تحميل تطبيق متصفح ويب web browser يدعم عرض صفحات HTML المحلية local، مثل Chrome أو Firefox أو Opera أو Brave. هذه التطبيقات تساعدك على فتح وتجربة المشروع الذي أنشأته.

هناك العديد من تطبيقات محررات الأكواد المتاحة على منصات الأندرويد والأيفون

وبعض أفضل هذه التطبيقات هي:

1- "Codeanywhere": هذا التطبيق متاح للأندرويد والأيفون، ويمكن استخدامه لتحرير الأكواد وإدارة المواقع. كما يتضمن العديد من المميزات الإضافية مثل خدمات التخزين السحابية ودعم FTP.

2- "DroidEdit": هذا التطبيق متاح فقط على الأندرويد، ولكنه يعتبر واحداً من أفضل محررات الأكواد المتوفرة. يدعم العديد من لغات البرمجة ويتضمن خاصية التعديل الذكي وظهور التلوين المفيد لتحرير الأكواد.

3- "Textastic": هذا التطبيق متاح فقط على الأيفون، ويتيح تحرير الأكواد بشكل مريح وسريع. يتضمن أيضاً ميزة البحث والاستبدال ومزود بميزات الخط.

4- "Sublime Text": هذا التطبيق متاح فقط على الأندرويد، ويتيح تحرير الأكواد بسلاسة. يوفر أيضاً خيارات التحكم في الألوان والتنسيق للنصوص.

5- "Coda": هذا التطبيق متوفر فقط على الأيفون. ويتيح للمستخدمين تعديل الأكواد من أي مكان، كما يحتوي على عدد من الميزات الإضافية مثل خدمات التخزين والسحابية ودعم FTP.

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

تعلم البرمجة عن طريق الموبايل - حسوب I/O (hsoub.com)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...