جميع الأنشطة

يتم تحديث محتوى هذا السجل تلقائيا   

  1. أمس
  2. الاسبوع الماضي
  3. Earlier
  4. Facade Pattern

    بسم الله الرحمن الرحيم استكمالا للحديث عن أكثر Design pattern استخداما في بيئة Android, وبعد أن كنا قد بدأنا في الحديث عن أنواع Structural pattern, اليوم سيكون حديثنا عن Facade Pattern, فنبدأ بالسؤال المعتاد ماهو Facade Pattern؟ لنبدأ بتعريفه: إذا فهو Pattern يستخدم لتبسيط interfacees لأجزاء النظام, الصورة التالية ستكون شارحة جدا لوظيفة واّلية عمل هذا Pattern. جميل جدا, أعتقد أن المفهوم بات متضحاً جدا, فلندلف إلى تطبيقه بالمثال التالي. لتعلم أنه Pattern بسيط وواضح جدا, فلو فرضنا أن لدينا interface اسمه line, ولديه three claases قاموا بعمل implementation لهذا interface. وهم straight و curve و snaky. public interface Line { void draw(); } class straight public class Straight implements Line { @Override public void draw() { System.out.println("straight"); } } class curve public class Curve implements Line { @Override public void draw() { System.out.println("curve"); } } snaky class public class Snaky implements Line { @Override public void draw() { System.out.println("snaky"); } } أصبح لدينا مجموعة من classes, لو كان النظام الذي سنقوم ببنائه أكبر من ذلك سيكون من الصعب جدا تذكر هذه classes, لذلك سنقوم ببناء Facade class يحل هذه المشكلة ويبسط التعامل معها. public class LineMaker { private Line straight; private Line curve; private Line snaky; public LineMaker() { straight = new Straight(); curve = new Curve(); snaky = new Snaky(); } public void drawStraight(){ straight.draw(); } public void drawCurve(){ curve.draw(); } public void drawSnaky(){ snaky.draw(); } } أصبح التعامل هذه المجموعة من classes غاية في البساطة ويمكن التعامل معها في main كالتالي public static void main(String[] args) { LineMaker lineMaker = new LineMaker(); lineMaker.drawStraight(); lineMaker.drawCurve(); lineMaker.drawSnaky(); } } بينما لو لم نقم باستخدام facade class سيكون شكل main كالتالي: public static void main(String[] args) { private Line straight = new Straight(); private Line curve = new Curve(); private Line snaky = new Snaky(); straight.drawStraight(); curve.drawCurve(); snaky.drawSnaky(); } } طبعا هذا المثال يبسط المشكلة لكن في حال كان حجم النظام كبير ستواجه مشكلة في التعامل مع هذه الكمية من classes. وصلى الله وسلم وبارك على نبينا محمد وعلى اّله وصحبه أجمعين. المراجع: - sourcemaking.com/design_patterns - java design pattern , rohit joshi - head first design pattern - tutorialspoint.com
  5. Adapter pattern

    بسم الله الرحمن الرحيم كما ما بدأناه بالحديث عن أكثر Design pattern استخداما في بيئة Android واليوم سنتحدث عن أحد أنواع Structural pattern , ألا وهو Adapter pattern ,قبل أن نبدأ, وبما أننا في أول pattern في هذه السلسة من نوع Structural فماذا نعني ب Structural pattern ؟ Structural pattern : هو تصميم للكود بطرق تسهل فهم العلاقة بين classes و objects والربط بينها. جميل جدا, إذا ماهو Adapter pattern ؟ من كتاب GoF ولتبسيط الأمور, هذا pattern يستخدم لربط بين two classes لا يمكن الربط بينهما لعدم التوافق. كثيراً ما تكون التعريفات غير مفيدة, لنبدأ بكتابة بعض الأكواد تشرح هذا pattern. بداية دعنا نعرف المشكلة, لو فرضنا أن لديك class قديم قمت ببنائه, ومن ثم اردت الربط بينه وبين class جديد فلن تقوم بإعادة كتابته, وإنما تقوم ببناء interface يقوم بالربط بينهم كما سنقوم بذالك في المثال التالي. لنفترض أن لدينا نظام إدارة فصول إلكتروني, وأردنا ربطه مع نظام حضور وانصراف جديد,فكان شكل interface الخاص بنا كالتالي. public interface Xattendance { public String getStuedntName(); public long getStuedntId() ; public String getTime(); public void setStuedntName(String stuedntName); public void setStuedntId(long stuedntId); public void setTime(String time); } ثم قمنا بعمل implementation له داخل هذا class public class XattendanceImpl implements Xattendance{ String stuedntName; long stuedntId; String time; public String getStuedntName() { return stuedntName; } public void setStuedntName(String stuedntName) { this.stuedntName = stuedntName; } public long getStuedntId() { return stuedntId; } public void setStuedntId(long stuedntId) { this.stuedntId = stuedntId; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } } ولكن وقع الإشكال عندما أردنا ربط هذا class الخاص بنا نظام لتحضير والذي كان شكل interface الخاص به كالتالي: public interface XnewAttendaceSystem { public String getName() ; public void setName(String name); public String getId(); public void setId(String id); public String getMinute(); public void setMinute(String minute); public String getHour(); public void setHour(String hour); } وclass الذي سيقوم بعمل implementation له بهذا الشكل public class XnewAttendaceSystemImpl implements XnewAttendaceSystem{ String name; String id; String minute; String hour; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getMinute() { return minute; } public void setMinute(String minute) { this.minute = minute; } public String getHour() { return hour; } public void setHour(String hour) { this.hour = hour; } } فكما ترى لدينا two classes من نوعين مختلفين, فيلزمنا إنشاء class لنسميه المحول, حيث يمكننا عن طريقه ربط two classes مع بعضهما. وهو يقوم بعمل implementation ل XnewAttendaceSystem وفي constructor يستقبل object من نوع Xattendance ويقوم بالتحويل public class fromOldClassToNewSystem implements XnewAttendaceSystem{ String name; String id; String minute; String hour; final Xattendance xattendance; public fromOldClassToNewSystem(Xattendance xattendance) { this.xattendance = xattendance; adapt(); } @Override public String getName() { return this.name; } @Override public void setName(String name) { this.name = name; } @Override public String getId() { return this.id; } @Override public void setId(String id) { this.id = id; } @Override public String getMinute() { return this.minute; } @Override public void setMinute(String minute) { this.minute = minute; } @Override public String getHour() { return this.hour; } @Override public void setHour(String hour) { this.hour = hour; } public void adapt(){ setName(xattendance.getStuedntName()); setId(xattendance.getStuedntName()); setHour(xattendance.getTime().substring(0, 1)); setMinute(xattendance.getTime().substring(3, 4)); } } فكما ترى تم تحويل object من نوع إلى أخر, فدعنا نلقي نظرة عن طريقة استخدم هذا pattern. سنقوم بإنشاء بيانات نقوم نحن بكتابتها- من الممكن أن تكون البيانات قادمة من API أو من Database, ولكن هنا لتبسيط المقالة ستكون مكتوبة يدوياً- ومن ثم نحولها من النظام الخاص فينا, إلى النظام الذي قمنا بالربط معه. public static void main(String[] args) { Xattendance x = new XattendanceImpl(); x.setStuedntId(10110101); x.setStuedntName("ameen"); x.setTime("12:30"); XnewAttendaceSystem obj = new fromOldClassToNewSystem(x); //test System.out.println(obj.getName()); System.out.println(obj.getHour()); } وبهذا نلاحظ أنه تم إرسال البيانات من نظام إلى أخر باستخدام adapter pattern. ختاما لتعلم أن لدينا نوعان من adapter الأول هو object adapter وهو الذي تعاملنا معه في المثال اّنف الذكر, والذي استخدمنا في بنائه مبدأ composition, والأخر هو adapter class والذي يعتمد في بنائه على multiple inheritance وهو غير مدعوم في java تجنباً لمشكلة DDD (deadly diamond of death), ولكن يمكنك تطبيقها باستخدام لغات تدعم multiple inheritance كلغة C++ ويكون شكل Digram كالتالي: إلى هنا, هذا ما كان في الجعبة ووفق الله الجميع وصلى الله وسلم وبارك المراجع: - sourcemaking.com/design_patterns - java design pattern , rohit joshi - head first design pattern
  6. شكرااااااااااااااااااااااااااااا
  7. السلام عليكم ورحمة الله وبركاته طرحنا مسابقة عالم البرمجة للنقاش الهادف ، و هدفنا إثراء المحتوى العربي في مجال البرمجة ، فاز معنا الطرح المتميز و المفيد حيث قام بتقييم المقالات وترقيتها من قبل فريقنا المكون من @Alhazmy13 @منصور العتيبي @Ali Majrashi @mamoudi @A7med @cammac سنذكر بهذه المقالة الفائزين معنا ، و مقالاتهم ، و نشكرهم على ماقدموا من فائدة للجميع ، و إثراء المحتوى العربي في البرمجة. الفائزون في شهر December-2016 @Abather المقال الفائز: @وضاح العوني المقال الفائز: @Hana Alalwi المقال الفائز: @يعرب المصطفى المقال الفائز: في الختام: هدفنا في موقع عالم البرمجة إثراء المحتوى العربي في مجال البرمجة ، و تعزيز حب المساعدة بين المبرمجين تستطيع كتابة ماتحب في ساحات النقاش ، و يمكن تكون احد الفائزين معنا بمسابقة عالم البرمجة للنقاش الهادف فهي مازالت مستمره ايضا تستطيع مساعدة المبرمجين بالإجابة عن أسئلتهم ، و حل المشاكل التي تواجههم بقسم سؤال وجواب ؛ لتكون مرجع لبقية المبرمجين شعارنا في عالم البرمجة "إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة." -ابن القيم- وممكن تستفيد من حبيبي القارئ اعلم ان فريق عالم البرمجة يصب كل جهودة لمساعدة المبرمجين الذين يخصصون من وقتهم لنشر العلم المفيد ويساعدون الغير ويارب يقدرنا نوقف معكم ونساعدكم قد مانقدر.
  8. بسم الله الرحمن الرحيم استكمالا للحديث عن أكثر Design pattern استخداما في بيئة Android, وبعد أن كنا قد بدأنا في الحديث عن أنواع Structural pattern, اليوم سيكون حديثنا عن Facade Pattern, فنبدأ بالسؤال المعتاد ماهو Facade Pattern؟ لنبدأ بتعريفه: إذا فهو Pattern يستخدم لتبسيط interfacees لأجزاء النظام, الصورة التالية ستكون شارحة جدا لوظيفة واّلية عمل هذا Pattern. جميل جدا, أعتقد أن المفهوم بات متضحاً جدا, فلندلف إلى تطبيقه بالمثال التالي. لتعلم أنه Pattern بسيط وواضح جدا, فلو فرضنا أن لدينا interface اسمه line, ولديه three claases قاموا بعمل implementation لهذا interface. وهم straight و curve و snaky. public interface Line { void draw(); } class straight public class Straight implements Line { @Override public void draw() { System.out.println("straight"); } } class curve public class Curve implements Line { @Override public void draw() { System.out.println("curve"); } } snaky class public class Snaky implements Line { @Override public void draw() { System.out.println("snaky"); } } أصبح لدينا مجموعة من classes, لو كان النظام الذي سنقوم ببنائه أكبر من ذلك سيكون من الصعب جدا تذكر هذه classes, لذلك سنقوم ببناء Facade class يحل هذه المشكلة ويبسط التعامل معها. public class LineMaker { private Line straight; private Line curve; private Line snaky; public LineMaker() { straight = new Straight(); curve = new Curve(); snaky = new Snaky(); } public void drawStraight(){ straight.draw(); } public void drawCurve(){ curve.draw(); } public void drawSnaky(){ snaky.draw(); } } أصبح التعامل هذه المجموعة من classes غاية في البساطة ويمكن التعامل معها في main كالتالي public static void main(String[] args) { LineMaker lineMaker = new LineMaker(); lineMaker.drawStraight(); lineMaker.drawCurve(); lineMaker.drawSnaky(); } } بينما لو لم نقم باستخدام facade class سيكون شكل main كالتالي: public static void main(String[] args) { private Line straight = new Straight(); private Line curve = new Curve(); private Line snaky = new Snaky(); straight.drawStraight(); curve.drawCurve(); snaky.drawSnaky(); } } طبعا هذا المثال يبسط المشكلة لكن في حال كان حجم النظام كبير ستواجه مشكلة في التعامل مع هذه الكمية من classes. وصلى الله وسلم وبارك على نبينا محمد وعلى اّله وصحبه أجمعين. المراجع: - sourcemaking.com/design_patterns - java design pattern , rohit joshi - head first design pattern - tutorialspoint.com
  9. بسم الله الرحمن الرحيم كما ما بدأناه بالحديث عن أكثر Design pattern استخداما في بيئة Android واليوم سنتحدث عن أحد أنواع Structural pattern , ألا وهو Adapter pattern ,قبل أن نبدأ, وبما أننا في أول pattern في هذه السلسة من نوع Structural فماذا نعني ب Structural pattern ؟ Structural pattern : هو تصميم للكود بطرق تسهل فهم العلاقة بين classes و objects والربط بينها. جميل جدا, إذا ماهو Adapter pattern ؟ من كتاب GoF ولتبسيط الأمور, هذا pattern يستخدم لربط بين two classes لا يمكن الربط بينهما لعدم التوافق. كثيراً ما تكون التعريفات غير مفيدة, لنبدأ بكتابة بعض الأكواد تشرح هذا pattern. بداية دعنا نعرف المشكلة, لو فرضنا أن لديك class قديم قمت ببنائه, ومن ثم اردت الربط بينه وبين class جديد فلن تقوم بإعادة كتابته, وإنما تقوم ببناء interface يقوم بالربط بينهم كما سنقوم بذالك في المثال التالي. لنفترض أن لدينا نظام إدارة فصول إلكتروني, وأردنا ربطه مع نظام حضور وانصراف جديد,فكان شكل interface الخاص بنا كالتالي. public interface Xattendance { public String getStuedntName(); public long getStuedntId() ; public String getTime(); public void setStuedntName(String stuedntName); public void setStuedntId(long stuedntId); public void setTime(String time); } ثم قمنا بعمل implementation له داخل هذا class public class XattendanceImpl implements Xattendance{ String stuedntName; long stuedntId; String time; public String getStuedntName() { return stuedntName; } public void setStuedntName(String stuedntName) { this.stuedntName = stuedntName; } public long getStuedntId() { return stuedntId; } public void setStuedntId(long stuedntId) { this.stuedntId = stuedntId; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } } ولكن وقع الإشكال عندما أردنا ربط هذا class الخاص بنا نظام لتحضير والذي كان شكل interface الخاص به كالتالي: public interface XnewAttendaceSystem { public String getName() ; public void setName(String name); public String getId(); public void setId(String id); public String getMinute(); public void setMinute(String minute); public String getHour(); public void setHour(String hour); } وclass الذي سيقوم بعمل implementation له بهذا الشكل public class XnewAttendaceSystemImpl implements XnewAttendaceSystem{ String name; String id; String minute; String hour; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getMinute() { return minute; } public void setMinute(String minute) { this.minute = minute; } public String getHour() { return hour; } public void setHour(String hour) { this.hour = hour; } } فكما ترى لدينا two classes من نوعين مختلفين, فيلزمنا إنشاء class لنسميه المحول, حيث يمكننا عن طريقه ربط two classes مع بعضهما. وهو يقوم بعمل implementation ل XnewAttendaceSystem وفي constructor يستقبل object من نوع Xattendance ويقوم بالتحويل public class fromOldClassToNewSystem implements XnewAttendaceSystem{ String name; String id; String minute; String hour; final Xattendance xattendance; public fromOldClassToNewSystem(Xattendance xattendance) { this.xattendance = xattendance; adapt(); } @Override public String getName() { return this.name; } @Override public void setName(String name) { this.name = name; } @Override public String getId() { return this.id; } @Override public void setId(String id) { this.id = id; } @Override public String getMinute() { return this.minute; } @Override public void setMinute(String minute) { this.minute = minute; } @Override public String getHour() { return this.hour; } @Override public void setHour(String hour) { this.hour = hour; } public void adapt(){ setName(xattendance.getStuedntName()); setId(xattendance.getStuedntName()); setHour(xattendance.getTime().substring(0, 1)); setMinute(xattendance.getTime().substring(3, 4)); } } فكما ترى تم تحويل object من نوع إلى أخر, فدعنا نلقي نظرة عن طريقة استخدم هذا pattern. سنقوم بإنشاء بيانات نقوم نحن بكتابتها- من الممكن أن تكون البيانات قادمة من API أو من Database, ولكن هنا لتبسيط المقالة ستكون مكتوبة يدوياً- ومن ثم نحولها من النظام الخاص فينا, إلى النظام الذي قمنا بالربط معه. public static void main(String[] args) { Xattendance x = new XattendanceImpl(); x.setStuedntId(10110101); x.setStuedntName("ameen"); x.setTime("12:30"); XnewAttendaceSystem obj = new fromOldClassToNewSystem(x); //test System.out.println(obj.getName()); System.out.println(obj.getHour()); } وبهذا نلاحظ أنه تم إرسال البيانات من نظام إلى أخر باستخدام adapter pattern. ختاما لتعلم أن لدينا نوعان من adapter الأول هو object adapter وهو الذي تعاملنا معه في المثال اّنف الذكر, والذي استخدمنا في بنائه مبدأ composition, والأخر هو adapter class والذي يعتمد في بنائه على multiple inheritance وهو غير مدعوم في java تجنباً لمشكلة DDD (deadly diamond of death), ولكن يمكنك تطبيقها باستخدام لغات تدعم multiple inheritance كلغة C++ ويكون شكل Digram كالتالي: إلى هنا, هذا ما كان في الجعبة ووفق الله الجميع وصلى الله وسلم وبارك المراجع: - sourcemaking.com/design_patterns - java design pattern , rohit joshi - head first design pattern
  10. طريقة إضافة خصائص جديدة لشريط الأدوات في ال xcode

    إصدار الxcode المستخدم : 8.0 لغة سويفت 3 في هذا الدرس سنتعلم طريقة إضافة خصائص إضافية في شريط الخصائص ( properties inspector ) في برنامج الxcode بطريقة سهلة و بسيطة حيث ستتمكن من إضافة مؤثرات بصرية إضافية لعناصر واجهة المستخدم كالحد (stroke or border ) و الزوايا الدائرية للأشكال.. مثلا سيكون بإمكانك عمل الظل و الحدود مع الزوايا الدائرية للview و ال label كما هو موضح في الصورة التالية. لاحظ وجود خيارات جديدة في الشريط الأيمن للتحكم بقيم الحد و الظل و الزوايا الدائرية إذن لنبدأ الدرس.. -في البداية.. قم بفتح الxcode و اختر create new xcode project ثم اختر single view application - قم بعمل كلاس جديد عن طريق File > New > File أو بالضغط على cmd+n ثم اختر cocoa touch class -قم بتسمية الclass بأي اسم يناسبك و تأكد من اختيار UIView عند Subclass of: كما هو موضح في الصورة ثم اضغط next الآن قم بإضافة IBDesignable قبل بداية التعريف بالكلاس في كلاس CustomizableView ليبدو بهذه الطريقة: import UIKit @IBDesignable class CustomizableView: UIView { } هذه الكلمة التي قمت بإضافتها تعطيك إمكانية ربط الكلاس مع الmain story board بحيث يقوم الاكس كود بمزامنة التغييرات التي تجريها على هذا الكلاس مع ال story board و إظهار النتائج مباشرة دون الحاجة إلى تشغيل الsimulator الاختبار النتيجة التي توصلت إليها الآن قم بإضافة الكود التالي إلى الكلاس.. @IBInspectable var cornerRadius:CGFloat = 0{ didSet{ self.layer.cornerRadius = cornerRadius } } -كما تلاحظ في البداية قمنا بإضافة @IBInspectable وهذه الكلمة تسبق المتغير الذي يحمل اسم cornerRadius و هذا أيضا يربط الكلاس مع الstory obard بطريقة أخرى بحيث يمكنك الآن التحكم بقيمة هذا المتغير من شريط الخصائص في الstory board مما سيؤدي إلى تغير قيمة هذا المتغير بناء على القيم المحددة في ال stroy board - بعد ذلك قمنا بإضافة المتغير cornerRadius و هو الذي سنستخدمه لتغيير الزوايا المنحنية في الview إلى زوايا دائرية و اخترنا نوع القيمة لتكون CGFloat و هو النوع المناسب لهذه الخاصية. - قمنا بإسناد القيمة 0 للمتغير كقيمة ابتدائية ثم بعد ذلك اضفنا الأقواس و هذه الأقواس تساعدك في إضافة تفاصيل أخرى للمتغير. - بداخل الأقواس قمنا بإضافة كلمة didSet متبوعة بأقواس و هذه الكلمة تمثل مجموعة من الأوامر يحددها المستخدم بحيث تطبق هذه الأوامر مباشرة بمجرد تغيير قيمة المتغير ، و هي يمكن تشبهها بالدالة function بحيث يقوم المبرمج بتحديد الأوامر التي ستوقوم هذه الدالة بها حالما يتم تغيير قيمة المتغير cornerRadius -اذن ما هي هذه الأوامر التي سيتم استدعاؤها ؟ self.layer.cornerRadius = cornerRadius كما هو موضح فإن self تمثل الاوبجكت من هذا الكلاس customizableView و بما أن هذا الكلاس يرث من الView فإنه سيرث خصائصها و التي منها layer ليقوم باستخدام الخاصية cornerRadius التي بداخل الlayer و التي تتحكم بمدى استدارة زوايا الشكل ثم يقوم بتغيير قيمتها لتساوي المتغير cornerRadius الذي نتحكم بقيمته من الstory board كما ذكرنا سابقا بفضل الخاصية @IBInspectable اذن مالذي سيحدث بالضبط؟ بمجرد إضافة عنصر view في الاكس كود و جعله يرث من الكلاس customizableView ستظهر لك الخواص المعروفة لهذا الview في شريط الخصائص كاللون و الحجم و المحاذاة ..الخ بالإضافة إلى خاصية مميزة جديدة لهذا الview فقط و هي الcornerRadius حيث ستظهر لك في شريط الخصائص بفضل كلمة @IBInspectable ثم سيكون بإمكانك تعديل قيمة ال cornerRadius و بمجرد تعديلها ستستدعى دالة didSet التي قمنا بإضافتها سابقا و بالتالي سيطبق أمر تغيير الcornerRadius الخاص بالشكل لتتغير قيمته من 0 إلى القيمة التي قمت بتحديدها له في شريط الخصائص و أخيرا سترى أن زوايا الview بالفعل أصبحت تتغير مباشرة و هذا بفضل كلمة @IBDesignable التي قمنا بإضافتها للكلاس customizableView لنطبق ذلك عمليا.. - قم بالذهاب إلى الstory board وإضافة view إليها و قم بتلوين هذا الview باللون الذي يناسبك. - الآن اذهب إلى الأيقونة التي بجانب أيقونة الخصائص و التي تسمى identity inspector و قم بتغيير الكلاس الخاص بالview إلى CustomizableView كما هو موضح في الصورة - انتظر قليلا ثم عد إلى الخصائص ستلاحظ و جود الخاصية الجديدة cornerRadius في أعلا شريط الخصائص كما هو واضح في الصورة.. - الآن قم بتغيير القيم لتلاحظ تغير زوايا الشكل بطريقة جميلة يمكنك إضافة المزيد من الخصائص التي بإمكانك التحكم بها بنفس الطريقة.. لإضافة خاصية الحد (border) : @IBInspectable var border:CGFloat = 0{ didSet{ self.layer.borderWidth = border } } لإضافة خاصية الظل ( لا أنصح بها لأنها قد تؤدي إلى بطء البرنامج بسبب معالجة الظل التي تستهلك الكثير من الأداء): @IBInspectable var shadow:CGFloat = 0{ didSet{ self.layer.shadowRadius = shadow } } @IBInspectable var opacity:Float = 0{ didSet{ self.layer.shadowOpacity = opacity/20 } } @IBInspectable var offset:CGFloat = 0{ didSet{ self.layer.shadowOffset.height = offset self.layer.shadowOffset.width = offset } } هذه الإضافات ليست خاصة للview فقط و إنما يمكنك إضافتها لأي عنصر رسومي في البرنامج فمثلا: بإمكانك فعل المثل للlabel كل ما عليك فعله : - قم بعمل كلاس جديد باسم customizableLabel على سبيل المثال - اجعله يرث من UILabel في خيار subclass of عند إنشاء الكلاس - قم بإضافة كلمة @IBDesignable عند بداية الكلاس -قم بنسخ نفس الكود الخاص بالcustomizableView و لصقه في كلاس customizableLabel - استمتع
  11. مشكورين بس انا مبتدئة عملت الكود دا👇 وانا عايزة اعرض بياناتى في المتصفح بس واجهتني مشكلة عرض ملف وكودو بالاخضر عملت المسار بس بجيب لي كل الملفات وانا عايزة اسم الملف الدخلتو في قاعدة البيانات بس <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title></title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/bootstrap-rtl.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/heroic-features.css" rel="stylesheet"> </head> <?php $conn=mysql_connect("localhost","root",""); mysql_select_db("cv"); mysql_query("set names utf8"); $res=mysql_query("SELECT * FROM addcv "); while($row=mysql_fetch_array($res)) { ?> <div class="container"> <div class="row"> <div class="col-lg-12"> <table align="center"> <tr> <td><p>&nbsp;</p></td></tr> <tr> <td><p>&nbsp;</p></td></tr> <tr> <td><p>&nbsp;</p></td></tr> </tr> <table width="1449" border="0"> <tr> <td width="245" align="center" bgcolor="#FFFFFF">&nbsp;</td> <td width="95" align="center" bgcolor="#FFFFFF">&nbsp;</td> <td width="99" align="center" bgcolor="#FFFFFF">&nbsp;</td> <td width="89" align="center" bgcolor="#FFFFFF">&nbsp;</td> <td width="160" align="center" bgcolor="#FFFFFF">&nbsp;</td> <td width="215" align="center" bgcolor="#FFFFFF">&nbsp;</td> <td width="516" align="center" bgcolor="#FFFFFF">&nbsp;</td> </tr> <tr> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right" bgcolor="#FFFFFF"><img src="<?php echo $row['cv_img']; ?>"></td> <td align="right">&nbsp;</td> </tr> <tr> <td align="right" bgcolor="#FFFFFF">&nbsp;</td> <td align="right" bgcolor="#FFFFFF">&nbsp;</td> <td align="right" bgcolor="#FFFFFF">&nbsp;</td> <td align="right" bgcolor="#FFFFFF">&nbsp;</td> <td align="right" bgcolor="#FFFFFF">&nbsp;</td> <td align="right" bgcolor="#FFFFFF"> <label>الاسم</label><?php echo $row['cv_name']; ?></td> <td align="right" bgcolor="#FFFFFF">&nbsp;</td> </tr> <tr> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right" bgcolor="#FFFFFF"> <label>اسم الكلية</label><?php echo $row['cv_collge']; ?></td> <td align="right">&nbsp;</td> </tr> <tr> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right" bgcolor="#FFFFFF"> <label>رقم الهاتف</label><?php echo $row['cv_bhone']; ?></td> <td align="right">&nbsp;</td> </tr> <tr> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right" bgcolor="#FFFFFF"> <label>الايميل</label><?php echo $row['cv_mail']; ?></td> <td align="right">&nbsp;</td> </tr> <tr> <td height="244" align="center"><?php } ?></td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right">&nbsp;</td> <td align="right" bgcolor="#FFFFFF"> <label>السيرة</label> <a href="upload/<?php echo $row['cv ']; ?>"><button type="button" name="cv" >cv</button></a> </td> <td align="right">&nbsp;</td> </tr> uploadدا اسم الملف الخزن فيه ملفات الpdfفي المشروع // </table> </div> </div> </div> </body> </html>
  12. إصدار الxcode المستخدم : 8.0 لغة سويفت 3 في هذا الدرس سنتعلم طريقة إضافة خصائص إضافية في شريط الخصائص ( properties inspector ) في برنامج الxcode بطريقة سهلة و بسيطة حيث ستتمكن من إضافة مؤثرات بصرية إضافية لعناصر واجهة المستخدم كالحد (stroke or border ) و الزوايا الدائرية للأشكال.. مثلا سيكون بإمكانك عمل الظل و الحدود مع الزوايا الدائرية للview و ال label كما هو موضح في الصورة التالية. لاحظ وجود خيارات جديدة في الشريط الأيمن للتحكم بقيم الحد و الظل و الزوايا الدائرية إذن لنبدأ الدرس.. -في البداية.. قم بفتح الxcode و اختر create new xcode project ثم اختر single view application - قم بعمل كلاس جديد عن طريق File > New > File أو بالضغط على cmd+n ثم اختر cocoa touch class -قم بتسمية الclass بأي اسم يناسبك و تأكد من اختيار UIView عند Subclass of: كما هو موضح في الصورة ثم اضغط next الآن قم بإضافة IBDesignable قبل بداية التعريف بالكلاس في كلاس CustomizableView ليبدو بهذه الطريقة: import UIKit @IBDesignable class CustomizableView: UIView { } هذه الكلمة التي قمت بإضافتها تعطيك إمكانية ربط الكلاس مع الmain story board بحيث يقوم الاكس كود بمزامنة التغييرات التي تجريها على هذا الكلاس مع ال story board و إظهار النتائج مباشرة دون الحاجة إلى تشغيل الsimulator الاختبار النتيجة التي توصلت إليها الآن قم بإضافة الكود التالي إلى الكلاس.. @IBInspectable var cornerRadius:CGFloat = 0{ didSet{ self.layer.cornerRadius = cornerRadius } } -كما تلاحظ في البداية قمنا بإضافة @IBInspectable وهذه الكلمة تسبق المتغير الذي يحمل اسم cornerRadius و هذا أيضا يربط الكلاس مع الstory obard بطريقة أخرى بحيث يمكنك الآن التحكم بقيمة هذا المتغير من شريط الخصائص في الstory board مما سيؤدي إلى تغير قيمة هذا المتغير بناء على القيم المحددة في ال stroy board - بعد ذلك قمنا بإضافة المتغير cornerRadius و هو الذي سنستخدمه لتغيير الزوايا المنحنية في الview إلى زوايا دائرية و اخترنا نوع القيمة لتكون CGFloat و هو النوع المناسب لهذه الخاصية. - قمنا بإسناد القيمة 0 للمتغير كقيمة ابتدائية ثم بعد ذلك اضفنا الأقواس و هذه الأقواس تساعدك في إضافة تفاصيل أخرى للمتغير. - بداخل الأقواس قمنا بإضافة كلمة didSet متبوعة بأقواس و هذه الكلمة تمثل مجموعة من الأوامر يحددها المستخدم بحيث تطبق هذه الأوامر مباشرة بمجرد تغيير قيمة المتغير ، و هي يمكن تشبهها بالدالة function بحيث يقوم المبرمج بتحديد الأوامر التي ستوقوم هذه الدالة بها حالما يتم تغيير قيمة المتغير cornerRadius -اذن ما هي هذه الأوامر التي سيتم استدعاؤها ؟ self.layer.cornerRadius = cornerRadius كما هو موضح فإن self تمثل الاوبجكت من هذا الكلاس customizableView و بما أن هذا الكلاس يرث من الView فإنه سيرث خصائصها و التي منها layer ليقوم باستخدام الخاصية cornerRadius التي بداخل الlayer و التي تتحكم بمدى استدارة زوايا الشكل ثم يقوم بتغيير قيمتها لتساوي المتغير cornerRadius الذي نتحكم بقيمته من الstory board كما ذكرنا سابقا بفضل الخاصية @IBInspectable اذن مالذي سيحدث بالضبط؟ بمجرد إضافة عنصر view في الاكس كود و جعله يرث من الكلاس customizableView ستظهر لك الخواص المعروفة لهذا الview في شريط الخصائص كاللون و الحجم و المحاذاة ..الخ بالإضافة إلى خاصية مميزة جديدة لهذا الview فقط و هي الcornerRadius حيث ستظهر لك في شريط الخصائص بفضل كلمة @IBInspectable ثم سيكون بإمكانك تعديل قيمة ال cornerRadius و بمجرد تعديلها ستستدعى دالة didSet التي قمنا بإضافتها سابقا و بالتالي سيطبق أمر تغيير الcornerRadius الخاص بالشكل لتتغير قيمته من 0 إلى القيمة التي قمت بتحديدها له في شريط الخصائص و أخيرا سترى أن زوايا الview بالفعل أصبحت تتغير مباشرة و هذا بفضل كلمة @IBDesignable التي قمنا بإضافتها للكلاس customizableView لنطبق ذلك عمليا.. - قم بالذهاب إلى الstory board وإضافة view إليها و قم بتلوين هذا الview باللون الذي يناسبك. - الآن اذهب إلى الأيقونة التي بجانب أيقونة الخصائص و التي تسمى identity inspector و قم بتغيير الكلاس الخاص بالview إلى CustomizableView كما هو موضح في الصورة - انتظر قليلا ثم عد إلى الخصائص ستلاحظ و جود الخاصية الجديدة cornerRadius في أعلا شريط الخصائص كما هو واضح في الصورة.. - الآن قم بتغيير القيم لتلاحظ تغير زوايا الشكل بطريقة جميلة يمكنك إضافة المزيد من الخصائص التي بإمكانك التحكم بها بنفس الطريقة.. لإضافة خاصية الحد (border) : @IBInspectable var border:CGFloat = 0{ didSet{ self.layer.borderWidth = border } } لإضافة خاصية الظل ( لا أنصح بها لأنها قد تؤدي إلى بطء البرنامج بسبب معالجة الظل التي تستهلك الكثير من الأداء): @IBInspectable var shadow:CGFloat = 0{ didSet{ self.layer.shadowRadius = shadow } } @IBInspectable var opacity:Float = 0{ didSet{ self.layer.shadowOpacity = opacity/20 } } @IBInspectable var offset:CGFloat = 0{ didSet{ self.layer.shadowOffset.height = offset self.layer.shadowOffset.width = offset } } هذه الإضافات ليست خاصة للview فقط و إنما يمكنك إضافتها لأي عنصر رسومي في البرنامج فمثلا: بإمكانك فعل المثل للlabel كل ما عليك فعله : - قم بعمل كلاس جديد باسم customizableLabel على سبيل المثال - اجعله يرث من UILabel في خيار subclass of عند إنشاء الكلاس - قم بإضافة كلمة @IBDesignable عند بداية الكلاس -قم بنسخ نفس الكود الخاص بالcustomizableView و لصقه في كلاس customizableLabel - استمتع
  13. نستخدم الرابط التشعبي في ملفات الـ HTML للربط بملفات أخرى عبر الويب. الوسم Anchor و الخاصية Href نحن نستخدم الوسم <a> لعمل ربط مع ملف أخر . من خلال الوسم anchor يمكن الانتقال إلى أي مورد على الشبكة سواء كان صفحة ويب أو صورة أو ملف صوت أو ملف فيديو ... الخ. التركيبة البنائية " الصيغة العامة " لوسم الرابط تأخذ الشكل التالي : <a href="/ss/elmasrysoftware/url">النص المعروض عبر المتصفح</a> حيث يستخدم الوسمين <a> و </a> لعمل anchor لنموذج ربط ، و تستخدم الخاصية href لتحديد عنوان الملف أو المستند الذي يتم الربط به ، أما الكلمات الموجودة بين وسمي الفتح و الإغلاق سوف يتم عرضها عبر المتصفح على شكل رابط. كما يتضح من المثال التالي: <a href="http://www.elmasrysoftware.com/"> نحو مجتمع عربي تكنولوجي </a> حيث يظهر الكود السابق عبر المتصفح بالشكل التالي: سمة الهدف The Target Attribute من خلال سمة الهدف يمكنك تحديد أين يتم فتح الملف المربوط ، سواء في نفس النافذة أو من خلال نافذة جديدة للمتصفح. الكود التالي يقوم بفتح الملف في نافذة متصفح جديدة. <a href="http://www.elmasrysoftware.com/" target="_blank"> نحو مجتمع عربي تكنولوجي </a> سمة الاسم The Name Attribute تستخدم سمة الاسم لعمل أسم للـ anchor ، عند استخدام اسم الـ anchors نحن نستطيع عمل رابط ينتقل مباشرة إلى جزء محدد داخل نفس الصفحة ، بدلا من ترك المستخدم يتجول عبر الصفحة ليجد ما يبحث عنه أو يتطلع إليه. الكود التالي يعرض الصيغة العامة لسمة اسم الـ anchor <a name="Name"> اسم </a> سمة الاسم تستخدم لعمل أسم للـ anchor ، و يمكنك أن تستخدم أي أسم أو عبارة أو جملة تريد استخدامها. الكود التالي يحدد أسم anchor <a name="win"> شارك و اربح </a> يجب أن تلاحظ أنه لا يتم عرض anchor المسمى بطريقة خاصة. للربط المباشر بقسم "tips"، أضف علامة # وسمي anchor إلى بنهاية URL كما يلي: الكود التالي يحدد أسم anchor <a href="http://www.elmasrysoftware.com/tiba.html#win"> شارك و اربح </a> الرابط التشعبي شارك و اربح داخل ملف tiba.html يأخذ الشكل التالي : <a href="#win"> شارك و اربح </a> لاحظ أن: أضف دائماً شرطة أخيرة إلى مراجع المجلدات الفرعية. إذا كنت تربط كما يلي: href="http://www.elmasrysoftware.com/html" ستقوم بتوليد طلبي HTTP إلى الخادم، نظراً لأن الخادم سيقوم بإضافة شرطة إلى العنوان وينشئ طلباً جديداً مثل هذا: href="http://www.elmasrysoftware.com/html/" تستخدم غالباً الـ anchors المسماة لإنشاء "جدول محتويات" في بداية المستند الكبير. سيتم تسمية كل فصل من المستند بـ anchor مسمى ويتم وضع رابط بكل هذه الـ anchors في قمة المستند. إذا لم يجد المستعرض الـ anchor المسمى الذي تم تحديده، فسينتقل إلى قمة المستند. لن تحدث أخطاء. وسم الربط Tag Description <a> تحديد الـ anchor
  14. القائمة الثنائية المترابطة (doubly linked list ): لتتمكن من الفهم الجيد لهذه القوائم لابد أن يكون لديك فهم مسبق بالقائمة الأحادية المترابطة (single linked list ). هي عبارة عن سلسة أشبه ماتكون بعربات قطار ذات اتجاهين مترابطة مع بعضها البعض. تتكون هذه القائمة من : 1.العقدة (node): هي المكون الأهم في هذه القائمة إذ أنها تحتوي على البيانات المخزنة في القائمة. و كل عقدة يجب أن يكون لها مؤشرين (reference) أحدهما يشير إلى العقدة السابقة في القائمة و هو السابق (prev) و الآخر يشير إلى العقدة التالية في القائمة و هو التالي (next) لنتمكن من خلالهما بربط كافة العقد في القائمة مع بعضها البعض . فبالتالي يمكننا أن نقول أن العقدة الواحدة يجب أن يكون لها : 2.المؤشر التالي ( next reference): هو سهم يخرج من الطرف الخلفي للعقدة ليُشير إلى العقدة التالية ((كما هو موضح بالرسمة)). 3.المؤشر السابق (previous reference): هو سهم يخرج من الطرف الأمامي للعقدة ليُشير إلى العقدة السابقة ((كما هو موضح بالرسمة )). 4. الرأس (header): و هو بداية القائمة و يكون بأولها و لا يحتوي على أي بيانات و يكون له مؤشر التالي next فقط , ليشير من خلاله على العقدة التالية, بالتالي هو نوع خاص مختلف عن بقية العقد في القائمة إذ أنه لا يحفظ أية بيانات و له مؤشر واحد فقط . 5.الذيل (trailer): وهو كما يتضح من اسمه إذ أنه سيكون بآخر القائمة و لا يحوي أي بيانات إنما يحتوي على مؤشر واحد فقط ليشير إلى العقدة السابقة في القائمة و هو السابق prev . , و أيضاً حاله كحال الرأس إذ أنه لا يحفظ أية بيانات وله مؤشر واحد فقط أيضاً . فلو أردنا تطبيق كل مافي السابق و إجراء بعض العمليات على القائمة باستخدام الجافا : 1.إنشاء القائمة :class Node فسنقوم بداية بإنشاء العناصر الأساسية للقائمة package dllist; public class Node { protected int storeD; protected Node next; protected Node prev; public Node(int SD){//constructor storeD = SD; next = null; prev =null; } public int getStoreD(){return storeD;}//to return the data public Node getNext(){return next ;} public Node getPrev(){return prev;} public void setStoreD(int SD){ storeD=SD;} public void setNext(Node n){next=n;} public void setPrev(Node p){prev=p;} } public class Node { protected int storeD; protected Node next; protected Node prev; هنا قمنا بإنشاء كلاس يحوي ثلاث متغيرات من نوع protected و هي المكونات الأساسية للقائمة و هي عبارة عن: 1. storeD هو متغير يحمل قيمة البيانات المحفوظة داخل القائمة و بما أنني أود حفظ أرقام فبالتالي و ضعتها من نوع int . 2. next و هو المتغير الذي سيُعبر عن المؤشر التالي و هو من نوع Node بالتالي هو object من الكلاس Node . 3. prev هو متغير الذي سيُعبر عن المؤشر السابق و هو من نوع Node بالتالي هو object من الكلاس Node أيضاً . public Node(int SD){//constructor storeD = SD; next = null; prev =null; } هذا هو الكونستركتور للكلاس Node يأخذ قيمة البيانات المراد وضعها في القائمة و يعطي بعدها قيم مبدأية لكل من (next ,prev,storeD). storeD -->تم إسناد قيمة المتغير SD له و هي قيمة يتم إرسالها أثناء إنشاء العقد . next = null ,prev =null--> هذه القيمة المبدأية لهما لايحملان أي قيمة لأنه لم يتم إنشاء القائمة حتى الآن . public int getStoreD(){return storeD;}//to return the data public Node getNext(){return next ;} public Node getPrev(){return prev;} هذه الدوال لكل المتغيرات السابقة مهمتها فقط إرجاع قيم هذه المتغيرات . public void setStoreD(int SD){ storeD=SD;} public void setNext(Node n){next=n;} public void setPrev(Node p){prev=p;} هذه الدوال لكل المتغيرات الثلاث السابقة و هي مهمتها إعطاء قيمة لتلك المتغيرات فقط و لاترجع أي قيمة . class DLL و هو الذي سنضع فيه كافة الدوال التي ستعمل على القائمة : من إضافة و حذف و طباعة ... public class DLL { protected Node head; protected Node tail; protected int size; بداية سنقوم بتعريف المتغيرات و هي هنا ستكون head , tail,size : head+tail -->تمثلان رأس و ذيل القائمة . size -->يمثل عدد العقد في القائمة . public DLL(){ head=new Node(0); tail=new Node(0); tail.setNext(null);//no Node after tail head.setPrev(null);//no node before head tail.setPrev(head);//tail refer to head head.setNext(tail);//head refer to tail } head +tail --> يحملان قيمة المتغير storeD بصفر لأنها لايحملان أي بيانات و لايتم تخزين البيانات فيهما . tail.setNext(null); head.setPrev(null); وضعنا tail.setNext -->null لأنه لاتوجد أي عقدة بعده بالتالي كما ذكرت سابقاً بأن له فقط مؤشر واحد و هو السابق . وضعنا head.setPrev -->null لأنه لاتوجد أي عقدة قبله بالتالي كما ذكرت سابقاً بأن له فقط مؤشر واحد و هو التالي . tail.setPrev(head);//tail refer to head head.setNext(tail);//head refer to tail هنا يشير head إلى tail و يشير tail إلى head بهذا الشكل : لأنه لا توجد عقد حتى الأن في القائمة فسيكون بشكل مبدأي كل منهما يشير إلى الآخر . public boolean isEmpty(){//to check if the list is empty or not return (head.getNext()==tail&&tail.getPrev()==head); } isEmpty: هي دالة تستخدم فقط للتأكد إذا ما كانت القائمة خالية أو لا . //1.add nodes to the list (in first ) public void addF(Node n){ Node w = head.getNext(); n.setNext(w); n.setPrev(head); head.setNext(n); w.setPrev(n); size ++ ; } إضافة عقدة addF : هي دالة تقوم بإضافة العقد في بداية القائمة و ذلك يعني أن أي عقدة جديدة سيتم إضافتها في أول القائمة و يتم إزاحة العقدة التي كانت بأول القائمة لتكون الثانية و هكذا . فهي تأخذ متغير من نوع Node أي يمرر لها ليمثل العقدة الجديدة المراد إضافتها . كما في التالي : المطلوب إضافة العقدة v إلى القائمة باستخدام هذه الدالة سيكون شكل القائمة كالتالي : و سيكون هكذا شكل القائمة عند إضافة أي عقدة باستخدام هذه الدالة . //2.for print the list public void display (){ Node C = head.getNext(); while (C.getNext()!=null){ System.out.println(C.getStoreD()); C = C.getNext();} System.out.println(""); } display طباعة : هذه الدالة تم إنشاؤها لطباعة عناصر القائمة بعد إضافتها . //3.for delete last node in the list . public Node delLast(){ if(isEmpty()){ System.out.println("ERROR:the list is empty !"); return null;} else { Node v=tail.getPrev(); Node u=v.getPrev(); tail.setPrev(u); u.setNext(tail); v.setNext(null); v.setPrev(null); size--; return v;} } حذف آخر عقدة delLast : هذه الدالة لحذف آخر عقدة من القائمة بدايةً قبل الحذف يتم التأكد من أن القائمة ليست خالية بوضع دالة ()isEmpty في شرط فلو كانت هذه القائمة خالية سيقوم بطباعة رسالة خطأ و يقوم بإرجاع قيمة null. أما في حالة كانت القائمة تحتوي على عقد سيتم حذف العقدة الأخيرة من القائمة و بعدها يقوم بإرجاع العقدة المحذوفة . فلو كان هذا شكل القائمة قبل الحذف : فسيتم حذف العقدة V سيبدو شكل القائمة هكذا : و الان بعدما تعرفنا لبعض أنواع الدوال التي نستطيع استخدامها للتعديل على القوائم الثنائية المترابطة سنقوم باستخدامها . public class DLList { public static void main(String[] args) { DLL Linked = new DLL(); Linked.addF(new Node (10)); Linked.addF(new Node (20)); Linked.addF(new Node (30)); System.out.println(" after add :"); Linked.display(); Linked.delLast(); System.out.println(" after delete last node:"); Linked.display(); } هذا هو main class : بداية قمنا بعمل object من كلاس DLL لنستطيع من خلاله استخدام الدوال السابقة . بالتالي بعد تطبيق كل ما في السابق هكذا سيكون شكل شاشة الإخراج : output screen :
  15. الرموز البرمجية للحروف في HTML بعض الرموز مثل < لها معني خاص في لغة الـ HTML ، و لذلك لا يمكن استخدامها داخل النصوص . و لعرض علامة أصغر من " < " داخل ملف HTML ، يجب أن نستخدم الرمز البرمجي للحرف " character entity ". الرموز البرمجية للحروف " Character Entities " كما ذكرنا فإن بعض الرموز تعطي لها معنى خاص في لغة HTML ، على سبيل المثال علامة أصغر من " < " هي التي تحدد بداية وسم الـ HTML . فإذا أردنا أن يعرض المتصفح تلك الحروف كما هي بالضبط فيجب علينا إدراج الرموز البرمجية للحروف داخل كود HTML. الرموز الخاصة تتكون من ثلاثة أجزاء : الجزء الأول : علامة AND " & " في حالة استخدام اسم الرمز البرمجي " entity name " ، ، أو علامةAND " & " و علامة شباك " # " في حالة استخدام رقم الرمز البرمجي " entity number ". الجزء الثاني : أسم أو رقم الرمز. الجزء الثالث : علامة الفاصلة المنقوطة " ; " . و لعرض علامة أصغر من داخل ملف HTML يجب علينا كتابتها بالصيغة التالية : (&lt;)OR(&#60;) من الأفضل استخدام صيغة الأسماء بدلاً من صيغة الأرقام و ذلك لأنها أسهل في تذكرها ، و لكن المشكلة في ذلك هو أنه ليست جميع المتصفحات تدعم entity names الجديدة ، بينما نجد أن دعم الـ entity numbers جيد جداً في أغلب المتصفحات . لاحظ أن : الرموز البرمجية " entities " حساسة لحالة الأحرف . أمثلة للتعرف على الرموز البرمجية للحروف. المسافات بين الكلمات Non-breaking Space من أكثر الرموز البرمجية للحروف " character entity " شيوعاً في ملفات الـ HTML هي المسافة بين الكلمات " Non-breaking Space " عادة ما تقوم HTML بعملية تهذيب للمسافات داخل النصوص ففي حالة ما إذا قمت وضع مسافة عشر مرات بين كلمتين داخل النص فإنه عن العرض من خلال المتصفح سوف تقوم الـ HTML بتحويل هذا العدد من المسافات إلى مسافة واحدة أي أنها سوف تقوم بحذف 9 مسافات من الـ 10 ، و لإضافة مسافات داخل النص يجب عليك استخدام الرمز البرمجي character entity " &nbsp; ". الرموز البرمجية الأكثر شيوعاً Result Description Entity Name Entity Number مسافة &nbsp; &#160; < أصغر من &lt; &#60; > أكبر من &gt; &#62; & علامة عطف &amp; &#38; " علامة اقتباس &quot; &#34; ' فاصلة علوية &apos; &#39; يعض الرموز البرمجية الشائعة Result Description Entity Name Entity Number ¢ السنت " جزء من الدولار " &cent; &#162; £ جنية &pound; &#163; ¥ ين ياباني &yen; &#165; § قسم &sect &#167; © حقوق محفوظة &copy; &#169; ® علامة تجارية مسجلة &reg; &#174; × علامة الضرب &times; &#215; ÷ علامة القسمة &divide; &#247; المرجع العام للرموز البرمجية
  16. تنسيق النص في الـ HTML لغة الـ HTML تحدد العديد من العناصر لعرض تنسيقات مختلفة للنص مثل نص عريض أو نص مائل إلي أخر الأشكال المعروفة و من خلال الأمثلة التالية يمكنك التعرف على تلك العناصر. هل شاهدت صفحة ويب وأعجبتك و تساءلت " كيف فعلوا ذلك ؟ ". هل تريد أن تعرف كيف تم تصميم تلك الصفحة الأمر بغاية البساطة إختر القائمة " VIEW " من شريط الأدوات في متصفحك ثم إختار الأمر "SOURCE " أو " PAGE SOURCE " ، سوف يتم فتح نافذة تعرض لك أكواد الـ HTML لهذه الصفحة . وسوم تنسيق النص Tag Description <b> تحديد نص عريض <big> تحديد نص كبير <em> Defines emphasized text <i> تحديد نص مائل <small> تحديد نص صغير <strong> تحديد نص قوى " بارز " <sub> تحديد نص منخفض. <sup> تحديد نص مرتفع. <ins> تحديد نص مضاف <del> تحديد نص مشطوب <s> تم استبعاده، استخدم <del> بدلاً منه. <strike> تم استبعاده، استخدم <del> بدلاً منه. <u> تم استبعاده، استخدم <del> بدلاً منه. وسوم الإخراج في الحاسب الآلي Tag Description <code> تحديد نص كود الحاسب الآلي. <kbd> تحديد نص لوحة المفاتيح. <samp> تحديد كود للحاسب الآلي عينة. <tt> تحديد نص الآلة الكاتبة. <var> تحديد متغير. <pre> Defines preformatted text <listing> تم استبعاده، استخدم <pre> بدلاً منه. <plaintext> تم استبعاده، استخدم <pre> بدلاً منه. <xmp> تم استبعاده، استخدم <pre> بدلاً منه. وسوم الإقتباس والتوضيح والتنويه Tag Description <abbr> تحديد اختصار. <acronym> Defines an acronym <address> تحديد عنصر عنوان. <bdo> تحديد اتجاه النص. <blockquote> تحديد اقتباس طويل. <q> تحديد اقتباس قصير. <cite> تحديد تنويه. <dfn> تحديد مصطلح تعريف. أمثلة 1- هذا المثال يوضح كيفية تنسيق النص في ملفات HTML 2- هذا المثال يوضح كيف يمكنك التحكم في بدايات الأسطر و المسافات من خلال الوسم pre. 3- هذا المثال يوضح كيفية عرض الوسوم المختلفة على شاشة حاسبك. 4- هذا المثال يوضح كيفية كتابة العناوين في صفحة HTML. 5- يوضح هذا المثال كيفية معالجة الاختصار. 6- هذا المثال يوضح كيفية تغيير اتجاه الكتابة للنص. 7- هذا المثال يوضح كيفية التعامل مع الاقتباسات الطويلة و القصيرة. 8- هذا المثال يوضح كيفية الإشارة إلى النص المحذوف أو المضاف إلى صفحة HTML.
  17. ماشاء الله شرح موفق وممتع يعطيك العافيه يارب ❤️❤️❤️🌹🌹🌹
  18. القائمة الثنائية المترابطة (doubly linked list ): لتتمكن من الفهم الجيد لهذه القوائم لابد أن يكون لديك فهم مسبق بالقائمة الأحادية المترابطة (single linked list ). هي عبارة عن سلسة أشبه ماتكون بعربات قطار ذات اتجاهين مترابطة مع بعضها البعض. تتكون هذه القائمة من : 1.العقدة (node): هي المكون الأهم في هذه القائمة إذ أنها تحتوي على البيانات المخزنة في القائمة. و كل عقدة يجب أن يكون لها مؤشرين (reference) أحدهما يشير إلى العقدة السابقة في القائمة و هو السابق (prev) و الآخر يشير إلى العقدة التالية في القائمة و هو التالي (next) لنتمكن من خلالهما بربط كافة العقد في القائمة مع بعضها البعض . فبالتالي يمكننا أن نقول أن العقدة الواحدة يجب أن يكون لها : 2.المؤشر التالي ( next reference): هو سهم يخرج من الطرف الخلفي للعقدة ليُشير إلى العقدة التالية ((كما هو موضح بالرسمة)). 3.المؤشر السابق (previous reference): هو سهم يخرج من الطرف الأمامي للعقدة ليُشير إلى العقدة السابقة ((كما هو موضح بالرسمة )). 4. الرأس (header): و هو بداية القائمة و يكون بأولها و لا يحتوي على أي بيانات و يكون له مؤشر التالي next فقط , ليشير من خلاله على العقدة التالية, بالتالي هو نوع خاص مختلف عن بقية العقد في القائمة إذ أنه لا يحفظ أية بيانات و له مؤشر واحد فقط . 5.الذيل (trailer): وهو كما يتضح من اسمه إذ أنه سيكون بآخر القائمة و لا يحوي أي بيانات إنما يحتوي على مؤشر واحد فقط ليشير إلى العقدة السابقة في القائمة و هو السابق prev . , و أيضاً حاله كحال الرأس إذ أنه لا يحفظ أية بيانات وله مؤشر واحد فقط أيضاً . فلو أردنا تطبيق كل مافي السابق و إجراء بعض العمليات على القائمة باستخدام الجافا : 1.إنشاء القائمة :class Node فسنقوم بداية بإنشاء العناصر الأساسية للقائمة package dllist; public class Node { protected int storeD; protected Node next; protected Node prev; public Node(int SD){//constructor storeD = SD; next = null; prev =null; } public int getStoreD(){return storeD;}//to return the data public Node getNext(){return next ;} public Node getPrev(){return prev;} public void setStoreD(int SD){ storeD=SD;} public void setNext(Node n){next=n;} public void setPrev(Node p){prev=p;} } public class Node { protected int storeD; protected Node next; protected Node prev; هنا قمنا بإنشاء كلاس يحوي ثلاث متغيرات من نوع protected و هي المكونات الأساسية للقائمة و هي عبارة عن: 1. storeD هو متغير يحمل قيمة البيانات المحفوظة داخل القائمة و بما أنني أود حفظ أرقام فبالتالي و ضعتها من نوع int . 2. next و هو المتغير الذي سيُعبر عن المؤشر التالي و هو من نوع Node بالتالي هو object من الكلاس Node . 3. prev هو متغير الذي سيُعبر عن المؤشر السابق و هو من نوع Node بالتالي هو object من الكلاس Node أيضاً . public Node(int SD){//constructor storeD = SD; next = null; prev =null; } هذا هو الكونستركتور للكلاس Node يأخذ قيمة البيانات المراد وضعها في القائمة و يعطي بعدها قيم مبدأية لكل من (next ,prev,storeD). storeD -->تم إسناد قيمة المتغير SD له و هي قيمة يتم إرسالها أثناء إنشاء العقد . next = null ,prev =null--> هذه القيمة المبدأية لهما لايحملان أي قيمة لأنه لم يتم إنشاء القائمة حتى الآن . public int getStoreD(){return storeD;}//to return the data public Node getNext(){return next ;} public Node getPrev(){return prev;} هذه الدوال لكل المتغيرات السابقة مهمتها فقط إرجاع قيم هذه المتغيرات . public void setStoreD(int SD){ storeD=SD;} public void setNext(Node n){next=n;} public void setPrev(Node p){prev=p;} هذه الدوال لكل المتغيرات الثلاث السابقة و هي مهمتها إعطاء قيمة لتلك المتغيرات فقط و لاترجع أي قيمة . class DLL و هو الذي سنضع فيه كافة الدوال التي ستعمل على القائمة : من إضافة و حذف و طباعة ... public class DLL { protected Node head; protected Node tail; protected int size; بداية سنقوم بتعريف المتغيرات و هي هنا ستكون head , tail,size : head+tail -->تمثلان رأس و ذيل القائمة . size -->يمثل عدد العقد في القائمة . public DLL(){ head=new Node(0); tail=new Node(0); tail.setNext(null);//no Node after tail head.setPrev(null);//no node before head tail.setPrev(head);//tail refer to head head.setNext(tail);//head refer to tail } head +tail --> يحملان قيمة المتغير storeD بصفر لأنها لايحملان أي بيانات و لايتم تخزين البيانات فيهما . tail.setNext(null); head.setPrev(null); وضعنا tail.setNext -->null لأنه لاتوجد أي عقدة بعده بالتالي كما ذكرت سابقاً بأن له فقط مؤشر واحد و هو السابق . وضعنا head.setPrev -->null لأنه لاتوجد أي عقدة قبله بالتالي كما ذكرت سابقاً بأن له فقط مؤشر واحد و هو التالي . tail.setPrev(head);//tail refer to head head.setNext(tail);//head refer to tail هنا يشير head إلى tail و يشير tail إلى head بهذا الشكل : لأنه لا توجد عقد حتى الأن في القائمة فسيكون بشكل مبدأي كل منهما يشير إلى الآخر . public boolean isEmpty(){//to check if the list is empty or not return (head.getNext()==tail&&tail.getPrev()==head); } isEmpty: هي دالة تستخدم فقط للتأكد إذا ما كانت القائمة خالية أو لا . //1.add nodes to the list (in first ) public void addF(Node n){ Node w = head.getNext(); n.setNext(w); n.setPrev(head); head.setNext(n); w.setPrev(n); size ++ ; } إضافة عقدة addF : هي دالة تقوم بإضافة العقد في بداية القائمة و ذلك يعني أن أي عقدة جديدة سيتم إضافتها في أول القائمة و يتم إزاحة العقدة التي كانت بأول القائمة لتكون الثانية و هكذا . فهي تأخذ متغير من نوع Node أي يمرر لها ليمثل العقدة الجديدة المراد إضافتها . كما في التالي : المطلوب إضافة العقدة v إلى القائمة باستخدام هذه الدالة سيكون شكل القائمة كالتالي : و سيكون هكذا شكل القائمة عند إضافة أي عقدة باستخدام هذه الدالة . //2.for print the list public void display (){ Node C = head.getNext(); while (C.getNext()!=null){ System.out.println(C.getStoreD()); C = C.getNext();} System.out.println(""); } display طباعة : هذه الدالة تم إنشاؤها لطباعة عناصر القائمة بعد إضافتها . //3.for delete last node in the list . public Node delLast(){ if(isEmpty()){ System.out.println("ERROR:the list is empty !"); return null;} else { Node v=tail.getPrev(); Node u=v.getPrev(); tail.setPrev(u); u.setNext(tail); v.setNext(null); v.setPrev(null); size--; return v;} } حذف آخر عقدة delLast : هذه الدالة لحذف آخر عقدة من القائمة بدايةً قبل الحذف يتم التأكد من أن القائمة ليست خالية بوضع دالة ()isEmpty في شرط فلو كانت هذه القائمة خالية سيقوم بطباعة رسالة خطأ و يقوم بإرجاع قيمة null. أما في حالة كانت القائمة تحتوي على عقد سيتم حذف العقدة الأخيرة من القائمة و بعدها يقوم بإرجاع العقدة المحذوفة . فلو كان هذا شكل القائمة قبل الحذف : فسيتم حذف العقدة V سيبدو شكل القائمة هكذا : و الان بعدما تعرفنا لبعض أنواع الدوال التي نستطيع استخدامها للتعديل على القوائم الثنائية المترابطة سنقوم باستخدامها . public class DLList { public static void main(String[] args) { DLL Linked = new DLL(); Linked.addF(new Node (10)); Linked.addF(new Node (20)); Linked.addF(new Node (30)); System.out.println(" after add :"); Linked.display(); Linked.delLast(); System.out.println(" after delete last node:"); Linked.display(); } هذا هو main class : بداية قمنا بعمل object من كلاس DLL لنستطيع من خلاله استخدام الدوال السابقة . بالتالي بعد تطبيق كل ما في السابق هكذا سيكون شكل شاشة الإخراج : output screen :
  19. شرح App Shortcuts

    قامت شركة قوقل باطلاق انسخة ٧.١ من نظام نوقا ولم يكن التحديث لاصلاح المشاكل وانما جلب معه بعض المميزات الجديدة ولعل من ابرزها هو اختصارات التطبيق App Shortcuts وسنقوم باذن الله في هذا الدرس بشرح هذه الميزه وطريقة استخدامها. ماهي App Shortcuts ومتى نستخدمها ؟! ببساطة تقوم باضافة قائمة على التطبيق تسمح للمستخدم بعرضها دون الدخول الى التطبيق وهي مشابهه لما يوجد في نظام ios . ويمكن استخدامها لعرض مهمات او خصائص للمستخدم تسهل الوصول لها بسرعه وسلاسة !، تحتوي على نوعين : static : تضاف في ملفات الريسورس للتطبيق وتكون ثابته ولايمكن تغييرها الا بنشر التطبيق مره اخرى dynamic : نقوم باضافة في الوقت الفعلي ويمكن تحديثها دون الحاجة الى نشر التطبيق مره اخرى اضافة App Shortcuts : اضافة اختصارات التطبيق تكون بشكل سهل وسنبدأ باضافة القائمة الثابته والتي سنعرفها من ملفات resources . STATIC SHORTCUTS ساقوم بافتراض ان لديك مشروع في تطبيق اندرويد ستديو واحتاج منك الذهاب الى ملف AndroidManifest.xml وستقوم باضافة meta-data الموجود في الكود في الاسفل : <meta-data android:name="android.app.shortcuts" android:resource="@xml/shortcuts" /> تلاحظ في تاق meta-data يوجد android:resource وهذا المفتاح من يتعامل مع resource في التطبيق والذي عرف في res/xml/shourtscuts.xml هنا يمكنك تعريف اختصاراتك الثابته للتطبيق. الان سنقوم باضافة اختصار يفتح لنا مثلاً StaticShourtcutActivity كما سنلاحظ في الكود التالي : <?xml version="1.0" encoding="utf-8"?> <shortcuts xmlns:android="http://schemas.android.com/apk/res/android"> <shortcut android:enabled="true" android:icon="@drawable/ic_home_black_24dp" android:shortcutDisabledMessage="@string/static_shortcut_disabled_message" android:shortcutId="static" android:shortcutLongLabel="@string/static_shortcut_long_label" android:shortcutShortLabel="@string/static_shortcut_short_label"> <intent android:action="android.intent.action.VIEW" android:targetClass="com.example.ahmed.appshoutcut.StaticActivity" android:targetPackage="com.example.ahmed.appshoutcut" /> </shortcut> </shortcuts> تلاحظ ان root للكود هو shortcuts والذي سيقوم بالتعامل مع اكثر من shourtcut في التطبيق : enabled هنا تقوم بتفعيل او الغاء تفعيل الاختصار icon الايقونة الخاصة بالاختصار shortcutDisabledMessage تظهر رسالة في حال قام المستخدم بالضغط على اختصار غير مفعل shortcutLongLabel عنوان طويل يظهر في حال كان الانشر يستطيع عرضها “التابلت مثلاً” shortcutShortLabel هنا هو النص الذي سيظهر للمستخدم كعنوان للاختصار intent هنا المهمه او الامر الذي سيظهر في حال المستخدم اختار الاختصار DYNAMIC SHORTCUTS الان سنقوم بالتعامل مع النوع الثاني من الاختصارات وهي “المتغيره” والتي تتحدث مباشرة دون الحاةه الى نشر التطبيق مره اخرى وعلى عكس الاختصارات الثابته لن نحتاج الى اضافتها في xml او resource التطبيق ولكن سنقوم بكتابتها في كود Java . الان سنقوم باضافة اول اختصار متغير وسنتعامل مع ShortcutManager و ShortcutInfo.Builder وسنقوم ببناء اول اختصار متغير في الشاشة الرئيسية MainActivity.onCreate# ShortcutManager shortcutManager = getSystemService(ShortcutManager.class); ShortcutInfo webShortcut = new ShortcutInfo.Builder(this, "shortcut_web") .setShortLabel("a7med.name") .setLongLabel("Open a7med.name web site") .setIcon(Icon.createWithResource(this, R.drawable.ic_web_black_24dp)) .setIntent(new Intent(Intent.ACTION_VIEW, Uri.parse("http://a7med.name"))) .build(); shortcutManager.setDynamicShortcuts(Collections.singletonList(webShortcut)); الان عند تشغيل التطبيق سنلاحظ اضافة الاختصار الثاني الخاص بنا . هناك الكثير عن App Shortcuts سأتكلم عنه في تدوينات لاحقة باذن الله شكرا لكم جميعاً وعذراً على الانقطاع
  20. الدرس الحادي عشر : التحكم بألاردوينو من خلال الانترنت نبذة عن الدرس : في هذا الدرس سوف نقوم بعمل جهاز من خلال نستطيع التحكم بالأردوينو من خلال الإنترنت بحيث يكون هناك موقع يربط بين المستخدم و الاردوينو. وتكون الاردوينو متصلة بالواي فاي من خلال درع الواي فاي ( Wifi Shield ). دروع الاردوينو (Arduino Shields): الدروع أو شيلد : هي لوحة إلكترونية يكون حجمها نفس حجم الاردوينو توضع فوق الاردوينو لإضافة ميزة جديدة , حيث توفر الوقت بدلا من صنع دائرتك الخاصة و أيضا سهلة الاستخدام ,يحتوي الدرع على عدد من الدبابيس المعدنية يتم إدخال في منافذ الاردوينو , ويوجد العديد من أنواع الدروع من أبرزها : درع الواي فاي (Wifi Shield): وهو يسمح للاردوينو بالاتصال بالانترنت من خلال الواي فاي . درع الايثرنت (Ethernet Shield ): يتيح للاردوينو ميزة الاتصال بالإنترنت وذلك من خلال كيبل الايثرنت. درع التحكم بمحرك الخطي (Motor Shield ) : هذا الدرع يضيف للاردوينو سهولة في التحكم بالمحرك والتحكم بسرعة المحرك . وهناك الكثير من أنواع الدروع ويمكنك البحث عنها من خلال هذا الموقع : http://shieldlist.org متطلبات المشروع : أردوينو أونو أسلاك توصيل المرحل (Relay) درع الواي فاي (Wifi shield ) إضاءة كهربائي الدائرة الكهربائية: تنبية تتضمن هذه الدائرة توصيل تيار مقياسه 220 فولت وهذ التيار خطير ويجب التعامل معه بحذر , لا تقم بتوصيل الجهاز الكهربائي بالمرحل وهو في حالة إنه موصول بالكهرباء .تاكد تماما إنه في حالة عزل عن الكهرباء (غير موصل بالكهرباء). أنصح بالرجوع للدرس السابق وذلك لفهم آلية عمل وبرمجة المرحل. الكود البرمجي : #include <SPI.h> #include <WiFi.h> char ssid[] = "Waduino"; // هنا تضع اسم الشبكة char pass[] = "11112222"; // هنا يكون كلمة السر الخاصة بالشبكة int light=6; // المنفذ الخاص بالمرحل int status = WL_IDLE_STATUS; WiFiServer server(80); void setup() { Serial.begin(9600); pinMode(light, OUTPUT); if (WiFi.status() == WL_NO_SHIELD) { Serial.println("WiFi shield not present"); // إذ تم طباعة هذه الجملة ع الشاشة الرجاء التاكد من توصيل درع الواي فاي بالاردوينو while (true); // هنا توقف محاول الاتصال بالشبكة } while ( status != WL_CONNECTED) { Serial.print("Attempting to connect to Network named: "); // إذ تم طباعة هذا الجملة فعي تعني بانه جاري المحاولة الاتصال بالشبكة Serial.println(ssid); // طباعة اسم الشبكة المراد الاتصال بها status = WiFi.begin(ssid, pass); // نرى هنا دالة للاتصال بشبكة الواي فاي تحمل متغيرين الاول اسم الشبكة والاخر كلمة السر delay(10000); } server.begin(); // بداية تفعيل السيرفر على بورت 80 printWifiStatus(); // هنا يتم حالة الاتصال بالواي فاي مثل اسم الشبكة و الاي بي } void loop() { WiFiClient client = server.available(); // هنا ينتظر حتى ياتي مستخدم للموقع if (client) { // إذ يوجد اتصال مع المستخدم يقوم بالاتي Serial.println("new client"); String currentLine = ""; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.write(c); if (c == '\n') { if (currentLine.length() == 0) { client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println(); /* بداية الجزء الخاص بالموقع وهي زرين الاول لتشغيل الاضاءة والاخر لايقافها */ client.print("<center>"); client.print("<form action=\"/H\">"); client.print("<input type=\"submit\" value=\"ON\"/>"); client.print("</form>"); client.print("<br>"); client.print("<form action=\"/L\">"); client.print("<input type=\"submit\" value=\"OFF\"/>"); client.print("</form>"); client.print("</center>"); /*نهاية جزء الخاص بالموقع */ client.println(); break; } else { currentLine = ""; } } else if (c != '\r') { currentLine += c; } if (currentLine.endsWith("GET /H")) { digitalWrite(light, LOW); } if (currentLine.endsWith("GET /L")) { digitalWrite(light, HIGH); } } } client.stop(); Serial.println("client disonnected"); } } void printWifiStatus() { Serial.print("SSID: "); Serial.println(WiFi.SSID()); // دالة طباعة معلومات الشبكة IPAddress ip = WiFi.localIP(); Serial.print("IP Address: "); Serial.println(ip); long rssi = WiFi.RSSI(); Serial.print("signal strength (RSSI):"); Serial.print(rssi); Serial.println(" dBm"); Serial.print("To see this page in action, open a browser to http://"); Serial.println(ip); } بعدها الانتهاء من رفع الكود إلى الاردوينو نقوم بفتح شاشة المرقاب التسلسلي سوف تظهر هذه الرسالة : إذ ظهرت هذه الرسالة فهي دليل على اتصال الاردوينو بالشبكة . نقوم بفتح الـ IP من خلال المتصفح من خلال الكمبيوتر أو الجوال . قد يختلف الـ IP من شبكة إلى أخرى . يظهر لنا هذا الموقع زر ON للتشغيل الاضاءة و زر OFF لايقاف الاضاءة طريقة معرفة الاردوينو بإن المستخدم قائم بالضغط على زر إيقاف أو تشغيل إذ قام المستخدم بالضغظ على زر التشغيل سوف ينتهي عنوان الصفحة بـ : ?H أما زر إيقاف يكون أخر العنوان : ?L ويقوم الاردوينو بقراءة عنوان الصفحة من خلال متغير currentLine إذ كان أخر العنوان يكون ?H سوف يقوم بتشغيل الاضاءة أما إذ كانت أخر العنوان ? L سوف يقوم بإطفاء الاضاءة حل التحدي السابق : هذا التحدي مذكور في هذا الدرس Waduino_6.ino وإلى هنا نصل إلى ختام درس هذا اليوم أتمنى إني أوضحت المعلومة بشكل المطلوب للاسئله والاستفسار اترك تعليق وسوف يتم الرد عليك ونراكم إن شاء الله في دروس قادمة .
  21. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته ...، أولاً اعتذر جداً عن التأخر في طرح الشرح الذي كان من المفترض يكون بعد أسبوع من الموضوع السابق تطرقنا في شرحنا السابق الى مفهوم القائمة أحادية الرابط وشرحنا استخداماته وطريقة عملها نظريا شرحنا هذا سيكون عمليا من الدرجة الأولى بحيث سيكون كله حول الأكواد وتفصيلها. ١. إنشاء العقدة Node: كما نعلم بأن Node هي الوحدة الأساسية لبناء قائمة أحادية الرابط أو القوائم بشكل عام ونستطيع بأن نصفها بأنها الحجر الذي يستخدم لبنائها. لذلك يجب علينا بنائها ابتداءً. public class SLLNode { public int info; public SLLNode next; public SLLNode(int i){ this(i, null); } public SLLNode(int i, SLLNode n){ this.info = i; this.next = n; } } هذا الكلاس والذي سمي بـ SSLNode هو الذي يصف لنا كل عقدة على حدى. وكل عقدة تتكون من info وهو المتغير الذي يحتوي على البيانات (المعلومة) وفي حالتنا هذه تكون البيانات من نوع int. وكذلك next وهو عبارة عن الرابط الذي يصل العقدة الحالية بالعقدة التي تليها ومن الطبيعي أن يكون من نوع SLLNode. هذا الكلاس يحتوي على two Constructor وهما عبارة عن وظائف تستخدم لإنشاء العقد Nodes. الأولى تستخدم لإنشاء عقدة لكنها لا ترتبط بأخرى كما نرى فيها فقد قمنا باستدعاء الميثود الثانية وقمنا بوضع null مكان الرابط. أما الثانية فتنشأ عقدة ترتبط بأخرى. (قمت بتفصيلها في الموضوع السابق) ٢. إنشاء القائمة أحادية الرابط: الكلاس السابق يمكننا من إنشاء عقدة واحدة لكن في هذا الكلاس سنتمكن من إنشاء قائمة كاملة تتكون من عدد من العقد Nodes. أ. مؤشر لأول عنصر وآخر عنصر بالقائمة: لكي نسهل عملية التنقل داخل القائمة سنقوم بإنشاء مؤشرين أحدهما يشير إلى أول عنصر بالقائمة (head: الرأس)، والآخر يشير إلى آخر عنصر بالقائمة (tail: الذيل). هذين المؤشرين عبارة عن متغيريين من نوع SSNode. protected SLLNode head, tail; في بداية إنشاء القائمة (أو في حالة كانت القائمة خالية) فإن هذين العنصريين يكونان خاليين: public SLList(){ head = tail = null; } كما يتبين في هذه الـ Constructor. ب. فحص القائمة إذا كانت خالية أو لا: هذه الـ Method مهمة جداً ولها أستخدام في جل الـ Methods الأخرى، ومهمتها هي فحص إذا ما كانت القائمة خالية أو لا. وتقوم بإرجاع قيمة Boolean إما true أو false. public boolean isEmpty(){ return head == null; //or return tail == null; } بكل بساطة في حال كان الرأس خالي فإن القائمة خالية كذلك، بالإمكان الإستعانة بالذيل كذلك فمن المستحيل أن يكون أحدهما خالي دون الآخر. ب. إضافة عنصر جديد إلى الرأس (بداية القائمة): public void addToHead(int el){ head.next = head; head = new SLLNode(el); if (tail = null){ tail = head; } } أولا نجعل الرأس يشير إلى نفسه لكي نربط العنصر الجديد بالعنصر الأول السابق. عندها نقوم بإنشاء عنصر Node ونجعله الرأس الجديد في حالة كانت القائمة خالية نجعل الذيل يشير إلى نفس العنصر الذي يشير له الرأس. ملاحظة: عندما يشير الرأس والذيل إلى نفس العنصر فهذا يعني بأن لدينا عنصر واحد فقط في القائمة. ج. إضافة عنصر جديد إلى الذيل (نهاية القائمة): public void addToTail(int el){ if(!isEmpty()){ tail.next = new SLLNode(el); tail = tail.next; }else{ head = tail = new SLLNode(el); } } نفحص القائمة إذا كانت خالية: - في حالة كانت غير خالية: ننشأ عنصر جديد ونجعل الذيل الحالي يشير إليه، ومن ثم نجعله الذيل الجديد. - في حال كانت القائمة خالية: ننشأ عنصر جديد ونجعل الرأس والذيل يشيران إليه. د. حذف العنصر الموجود بالرأس (أول عنصر): public int deleteHead(){ int el = head.info; if(head == tail){ head = tail = null; }else{ head = head.next; } return el; } هذه الـ method تقوم بحذف العنصر الموجود بالرأس ومن ثم ترجع قيمته. أولا نحفظ القيمة داخل متغير el لكي لا تضيع بعد حذف العنصر. ومن ثم نفحص إذا كانت القائمة: - تحتوي على عنصر واحد: فعندها نجعل الرأس والذيل يسيران إلى لا شيء null وتكون القائمة حينها خالية. - تحتوي على أكثر من عنصر: فعندها نجعل العنصر الذي بعد الرأس هو الرأس الجديد، وفي هذه الحالة سيكون العنصر لا يوجود ما يشير إليه ويحذف. ومن ثم ترجع القيمة التي تم حذفها. هـ- حذف العنصر الموجود بالذيل (آخر عنصر): public int deleteTail(){ int el = tail.info; if(tail == head){ head = tail = null; }else{ SLLNode temp; for(temp = head; temp.next != tail; temp = temp.next); tail = temp; tail.next = null; } return el; } كما في السابق نحتفظ بقيمة العنصر لكي نقوم بإعادته بعد الإنتهاء من عملية الحذف لكن الحذف من الذيل ليس بسهولة الحذف من الرأس. نفحص التالي: - في حالة أن القائمة تحتوي على عنصر واحد فقط: فعندها نحذف القائمة كلها بجعل الرأس والذيل null. - في حالة أن القائمة تحتوي على أكثر من عنصر: أولا علينا أن نبحث عن العنصر السابق للذيل (العنصر قبل الأخير)، وذلك بأستخدام for loop قبلها علينا أن ننشأ مؤشر مؤقت باسم temp وفي بداية الـ loop نجعله يشير إلى الرأس، وننقله من عنصر إلى آخر إلى أن يصل إلى العنصر ما قبل الأخير وذلك بفحص إذا ما كان temp.next أي العنصر الذي يليه هو tail فعندها نكون وصلنا إلى العنصر ما قبل الأخير. بعد أن نجد العنصر ما قبل الأخير نجعل الذيل الجديد ومن ثم نجعل الذيل يشير إلى null لكي يتم حذف العنصر الأخير تماماً. و. طباعة جميع عناصر القائمة: public void printAll(){ System.out.print("["); for(SLLNode temp = head; temp != null; temp = temp.next){ System.out.print(temp.info + " "); } System.out.println("]"); } كما شرحنا سابقا نستخدم for loop للتنقل بين عناصر القائمة وطباعة قيمة كل عنصر على الشاشة. ز. فحص وجود العنصر في القائمة أو لا: public boolean isInList(int el){ if(isEmpty()){ return false; }else{ SLLNode temp; for(temp = head; temp.info != el && temp.next != null; temp = temp.next); return temp != null; } } للبحث عن وجود قيمة داخل القائمة من عدمه يجب علينا أن نتنقل داخل القائمة عنصر بعنصر، وسنستخدم الأسلوب السابق وهو باستخدام for loop. ولكن قبلها يجب علينا أن نتأكد من أن القائمة غير خالية. الـ for loop ستتوقف في إحدى حالتين في حالة وجدة العنصر داخل القائمة وذلك ببطلان الشرط (tmep.info != el) أو في حالة وصول temp إلى نهاية القائمة. عندها سنرجع القية المعاكسة لهذا الشرط (tmep != null) في حالة وصول الـ temp إلى نهاية القائمة بدون أن يجد العنصر فعندا سيكون temp يساوي null وفي هذه الحالة سيرسل false أما في حالة إجاد العنصر فعندها temp لن يكون null ويرسل true. ح. حذف عنصر من القائمة: public void delete(int el){ if(!isEmpty() && isInList()){ if(head == tail && head.info == el){ head = tail = null; }else if(el == head.info){ head = head.next; }else{ SLLNode pre, temp; for(temp = head.next, pre = head; temp.info != el; pre = temp, temp = temp.next); if(temp != null){ pre.next = temp.next; if(temp == tail){ tail = pre; } } } } } في حالة أردنا حذف عنصر من القائمة علينا أن نفكر في جميع الإحتمالات وهي كالتالي: - هل القائمة غير خالية؟! وهل العنصر في القائمة ولتححق سنستخدم isEmpty و isInList، في حالة لم تكن القائمة خالية وكان العنصر بالقائمة ننتقل للخطوة التالية: * هل القائمة تحتوي على عنصر واحد؟!: في هذه الحالة نقوم بحذف هذا العنصر ونجعل القائمة خالية. * هل القائمة تحتوي على أكثر من عنصر والعنصر المراد حذفة بالرأس؟: عنذها نحذف الرأس كما أشرنا في الفقرة (د). *الخيار الأخير هو أن العنصر موجود داخل القائمة: في هذه الحالة نحتاج للبحث عن العنصر بنفس الأسلوب السابق لكننا هنا على خلاف الخطوات السابقة نحتاج إلى متغيرين مؤقتين أحدهما يشير إلى العنصر المراد حذفه والآخر يشير إلى العنصر الذي يسبقه. ولكي نقوم بذلك فعند إنشاء temp وهو العنصر المؤقت الذي سنبحث عن طريقه للعنصر المراد حذفه نجعل pre العنصر الذي يسبقه وذلك كما يلي: pre = head , temp = pre.next كما نعلم فنحن لسنا بحاجة لفحص الرأس فقد تأكدنا من أن العنصر ليس بالرأس. تنتهي for loop في حال إجاد العنصر المراد حذف مع العلم بأننا لن نصل إلى نهاية القائمة لأننا تأكدنا من أن العنصر موجود في القائمة في الخطوة الأولى. وعند نهاية كل دورة من for loop نقوم بتحديث قيمتي pre and temp. بعد ذلك نجعل الـ pre يشير للعنصر الذي يلي temp أي يشير للعنصر الذي بعد العنصر المراد حذفه عندها لن يكون هناك ما يشير إليه ويحذف. ** تأكد أخير في حال أن العنصر الذي حذفنها هو الأخير فعندها يجب أن نجعل الذيل يشير إلى null. #شرح مفصل للـ for loop المستخدمة مع القوائم بشكل عام: لأهميتها القصوى سوف أفصلها أكثر، إبتداءً بالشكل العام لها: for (SLLNode temp = head; temp != null; temp = temp.next); أولا نقوم بإنشاء متغير مؤقت ونسميه بأي أسم كان هذا المتغير في بداية الـ loop سيشير لأول عنصر بالقائمة وهو الرأس head بعد ذلك يتأكد من تحقق الشرط وهو أن هذا المتغير لا يساوي null (أي أنه غير خالي)، ومن ثم يحدث قيمة المتغير وذلك بجعله العنصر التالي له عن طريق (temp = temp.next) ومن ثم يقوم بالتأكد من الشرط مجدداً هكذا حتى يصل إلى أن temp مساوي لـ tail وعندها يسنتقل للعنصر الذي يليه وهو في الحقيقة null لأنه tail.next دائما يساوي null وهكذا تنتهي for loop. ملاحظة: قمت بوضع ملفات للـ SLLNode and SLList classes في المرفقات تحتوي على تعليقات توضيحية. أتمنى من الله أن أكون قد وفقت في تفصيل موضوعنا هذا في حفظ الله إلى لقاء آخر SLList.java SLLNode.java
  22. الدرس الحادي عشر : التحكم بألاردوينو من خلال الانترنت نبذة عن الدرس : في هذا الدرس سوف نقوم بعمل جهاز من خلال نستطيع التحكم بالأردوينو من خلال الإنترنت بحيث يكون هناك موقع يربط بين المستخدم و الاردوينو. وتكون الاردوينو متصلة بالواي فاي من خلال درع الواي فاي ( Wifi Shield ). دروع الاردوينو (Arduino Shields): الدروع أو شيلد : هي لوحة إلكترونية يكون حجمها نفس حجم الاردوينو توضع فوق الاردوينو لإضافة ميزة جديدة , حيث توفر الوقت بدلا من صنع دائرتك الخاصة و أيضا سهلة الاستخدام ,يحتوي الدرع على عدد من الدبابيس المعدنية يتم إدخال في منافذ الاردوينو , ويوجد العديد من أنواع الدروع من أبرزها : درع الواي فاي (Wifi Shield): وهو يسمح للاردوينو بالاتصال بالانترنت من خلال الواي فاي . درع الايثرنت (Ethernet Shield ): يتيح للاردوينو ميزة الاتصال بالإنترنت وذلك من خلال كيبل الايثرنت. درع التحكم بمحرك الخطي (Motor Shield ) : هذا الدرع يضيف للاردوينو سهولة في التحكم بالمحرك والتحكم بسرعة المحرك . وهناك الكثير من أنواع الدروع ويمكنك البحث عنها من خلال هذا الموقع : http://shieldlist.org متطلبات المشروع : أردوينو أونو أسلاك توصيل المرحل (Relay) درع الواي فاي (Wifi shield ) إضاءة كهربائي الدائرة الكهربائية: تنبية تتضمن هذه الدائرة توصيل تيار مقياسه 220 فولت وهذ التيار خطير ويجب التعامل معه بحذر , لا تقم بتوصيل الجهاز الكهربائي بالمرحل وهو في حالة إنه موصول بالكهرباء .تاكد تماما إنه في حالة عزل عن الكهرباء (غير موصل بالكهرباء). أنصح بالرجوع للدرس السابق وذلك لفهم آلية عمل وبرمجة المرحل. الكود البرمجي : #include <SPI.h> #include <WiFi.h> char ssid[] = "Waduino"; // هنا تضع اسم الشبكة char pass[] = "11112222"; // هنا يكون كلمة السر الخاصة بالشبكة int light=6; // المنفذ الخاص بالمرحل int status = WL_IDLE_STATUS; WiFiServer server(80); void setup() { Serial.begin(9600); pinMode(light, OUTPUT); if (WiFi.status() == WL_NO_SHIELD) { Serial.println("WiFi shield not present"); // إذ تم طباعة هذه الجملة ع الشاشة الرجاء التاكد من توصيل درع الواي فاي بالاردوينو while (true); // هنا توقف محاول الاتصال بالشبكة } while ( status != WL_CONNECTED) { Serial.print("Attempting to connect to Network named: "); // إذ تم طباعة هذا الجملة فعي تعني بانه جاري المحاولة الاتصال بالشبكة Serial.println(ssid); // طباعة اسم الشبكة المراد الاتصال بها status = WiFi.begin(ssid, pass); // نرى هنا دالة للاتصال بشبكة الواي فاي تحمل متغيرين الاول اسم الشبكة والاخر كلمة السر delay(10000); } server.begin(); // بداية تفعيل السيرفر على بورت 80 printWifiStatus(); // هنا يتم حالة الاتصال بالواي فاي مثل اسم الشبكة و الاي بي } void loop() { WiFiClient client = server.available(); // هنا ينتظر حتى ياتي مستخدم للموقع if (client) { // إذ يوجد اتصال مع المستخدم يقوم بالاتي Serial.println("new client"); String currentLine = ""; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.write(c); if (c == '\n') { if (currentLine.length() == 0) { client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println(); /* بداية الجزء الخاص بالموقع وهي زرين الاول لتشغيل الاضاءة والاخر لايقافها */ client.print("<center>"); client.print("<form action=\"/H\">"); client.print("<input type=\"submit\" value=\"ON\"/>"); client.print("</form>"); client.print("<br>"); client.print("<form action=\"/L\">"); client.print("<input type=\"submit\" value=\"OFF\"/>"); client.print("</form>"); client.print("</center>"); /*نهاية جزء الخاص بالموقع */ client.println(); break; } else { currentLine = ""; } } else if (c != '\r') { currentLine += c; } if (currentLine.endsWith("GET /H")) { digitalWrite(light, LOW); } if (currentLine.endsWith("GET /L")) { digitalWrite(light, HIGH); } } } client.stop(); Serial.println("client disonnected"); } } void printWifiStatus() { Serial.print("SSID: "); Serial.println(WiFi.SSID()); // دالة طباعة معلومات الشبكة IPAddress ip = WiFi.localIP(); Serial.print("IP Address: "); Serial.println(ip); long rssi = WiFi.RSSI(); Serial.print("signal strength (RSSI):"); Serial.print(rssi); Serial.println(" dBm"); Serial.print("To see this page in action, open a browser to http://"); Serial.println(ip); } بعدها الانتهاء من رفع الكود إلى الاردوينو نقوم بفتح شاشة المرقاب التسلسلي سوف تظهر هذه الرسالة : إذ ظهرت هذه الرسالة فهي دليل على اتصال الاردوينو بالشبكة . نقوم بفتح الـ IP من خلال المتصفح من خلال الكمبيوتر أو الجوال . قد يختلف الـ IP من شبكة إلى أخرى . يظهر لنا هذا الموقع زر ON للتشغيل الاضاءة و زر OFF لايقاف الاضاءة طريقة معرفة الاردوينو بإن المستخدم قائم بالضغط على زر إيقاف أو تشغيل إذ قام المستخدم بالضغظ على زر التشغيل سوف ينتهي عنوان الصفحة بـ : ?H أما زر إيقاف يكون أخر العنوان : ?L ويقوم الاردوينو بقراءة عنوان الصفحة من خلال متغير currentLine إذ كان أخر العنوان يكون ?H سوف يقوم بتشغيل الاضاءة أما إذ كانت أخر العنوان ? L سوف يقوم بإطفاء الاضاءة حل التحدي السابق : هذا التحدي مذكور في هذا الدرس Waduino_6.ino وإلى هنا نصل إلى ختام درس هذا اليوم أتمنى إني أوضحت المعلومة بشكل المطلوب للاسئله والاستفسار اترك تعليق وسوف يتم الرد عليك ونراكم إن شاء الله في دروس قادمة .
  23. float max = 0, min = 0; int maxIndex = 0, minIndex = 0; for(int s = 0; s<avg.length; s++){ if(avg[s] > max){ max = avg[s]; maxIndex = s; } } for(int s = 0; s<avg.length; s++){ if(min == 0 ){ min = avg[s]; minIndex = s; }else if(min > avg[s]){ min = avg[s]; minIndex = s; } } System.out.println("Highest Average is " + name[maxIndex]); System.out.println("lowest Average is "+name[minIndex]); طبعا هذا خليه في الخارج مو في داخل for loop الأولى.
  24. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته ...، أولاً اعتذر جداً عن التأخر في طرح الشرح الذي كان من المفترض يكون بعد أسبوع من الموضوع السابق تطرقنا في شرحنا السابق الى مفهوم القائمة أحادية الرابط وشرحنا استخداماته وطريقة عملها نظريا شرحنا هذا سيكون عمليا من الدرجة الأولى بحيث سيكون كله حول الأكواد وتفصيلها. ١. إنشاء العقدة Node: كما نعلم بأن Node هي الوحدة الأساسية لبناء قائمة أحادية الرابط أو القوائم بشكل عام ونستطيع بأن نصفها بأنها الحجر الذي يستخدم لبنائها. لذلك يجب علينا بنائها ابتداءً. public class SLLNode { public int info; public SLLNode next; public SLLNode(int i){ this(i, null); } public SLLNode(int i, SLLNode n){ this.info = i; this.next = n; } } هذا الكلاس والذي سمي بـ SSLNode هو الذي يصف لنا كل عقدة على حدى. وكل عقدة تتكون من info وهو المتغير الذي يحتوي على البيانات (المعلومة) وفي حالتنا هذه تكون البيانات من نوع int. وكذلك next وهو عبارة عن الرابط الذي يصل العقدة الحالية بالعقدة التي تليها ومن الطبيعي أن يكون من نوع SLLNode. هذا الكلاس يحتوي على two Constructor وهما عبارة عن وظائف تستخدم لإنشاء العقد Nodes. الأولى تستخدم لإنشاء عقدة لكنها لا ترتبط بأخرى كما نرى فيها فقد قمنا باستدعاء الميثود الثانية وقمنا بوضع null مكان الرابط. أما الثانية فتنشأ عقدة ترتبط بأخرى. (قمت بتفصيلها في الموضوع السابق) ٢. إنشاء القائمة أحادية الرابط: الكلاس السابق يمكننا من إنشاء عقدة واحدة لكن في هذا الكلاس سنتمكن من إنشاء قائمة كاملة تتكون من عدد من العقد Nodes. أ. مؤشر لأول عنصر وآخر عنصر بالقائمة: لكي نسهل عملية التنقل داخل القائمة سنقوم بإنشاء مؤشرين أحدهما يشير إلى أول عنصر بالقائمة (head: الرأس)، والآخر يشير إلى آخر عنصر بالقائمة (tail: الذيل). هذين المؤشرين عبارة عن متغيريين من نوع SSNode. protected SLLNode head, tail; في بداية إنشاء القائمة (أو في حالة كانت القائمة خالية) فإن هذين العنصريين يكونان خاليين: public SLList(){ head = tail = null; } كما يتبين في هذه الـ Constructor. ب. فحص القائمة إذا كانت خالية أو لا: هذه الـ Method مهمة جداً ولها أستخدام في جل الـ Methods الأخرى، ومهمتها هي فحص إذا ما كانت القائمة خالية أو لا. وتقوم بإرجاع قيمة Boolean إما true أو false. public boolean isEmpty(){ return head == null; //or return tail == null; } بكل بساطة في حال كان الرأس خالي فإن القائمة خالية كذلك، بالإمكان الإستعانة بالذيل كذلك فمن المستحيل أن يكون أحدهما خالي دون الآخر. ب. إضافة عنصر جديد إلى الرأس (بداية القائمة): public void addToHead(int el){ head.next = head; head = new SLLNode(el); if (tail = null){ tail = head; } } أولا نجعل الرأس يشير إلى نفسه لكي نربط العنصر الجديد بالعنصر الأول السابق. عندها نقوم بإنشاء عنصر Node ونجعله الرأس الجديد في حالة كانت القائمة خالية نجعل الذيل يشير إلى نفس العنصر الذي يشير له الرأس. ملاحظة: عندما يشير الرأس والذيل إلى نفس العنصر فهذا يعني بأن لدينا عنصر واحد فقط في القائمة. ج. إضافة عنصر جديد إلى الذيل (نهاية القائمة): public void addToTail(int el){ if(!isEmpty()){ tail.next = new SLLNode(el); tail = tail.next; }else{ head = tail = new SLLNode(el); } } نفحص القائمة إذا كانت خالية: - في حالة كانت غير خالية: ننشأ عنصر جديد ونجعل الذيل الحالي يشير إليه، ومن ثم نجعله الذيل الجديد. - في حال كانت القائمة خالية: ننشأ عنصر جديد ونجعل الرأس والذيل يشيران إليه. د. حذف العنصر الموجود بالرأس (أول عنصر): public int deleteHead(){ int el = head.info; if(head == tail){ head = tail = null; }else{ head = head.next; } return el; } هذه الـ method تقوم بحذف العنصر الموجود بالرأس ومن ثم ترجع قيمته. أولا نحفظ القيمة داخل متغير el لكي لا تضيع بعد حذف العنصر. ومن ثم نفحص إذا كانت القائمة: - تحتوي على عنصر واحد: فعندها نجعل الرأس والذيل يسيران إلى لا شيء null وتكون القائمة حينها خالية. - تحتوي على أكثر من عنصر: فعندها نجعل العنصر الذي بعد الرأس هو الرأس الجديد، وفي هذه الحالة سيكون العنصر لا يوجود ما يشير إليه ويحذف. ومن ثم ترجع القيمة التي تم حذفها. هـ- حذف العنصر الموجود بالذيل (آخر عنصر): public int deleteTail(){ int el = tail.info; if(tail == head){ head = tail = null; }else{ SLLNode temp; for(temp = head; temp.next != tail; temp = temp.next); tail = temp; tail.next = null; } return el; } كما في السابق نحتفظ بقيمة العنصر لكي نقوم بإعادته بعد الإنتهاء من عملية الحذف لكن الحذف من الذيل ليس بسهولة الحذف من الرأس. نفحص التالي: - في حالة أن القائمة تحتوي على عنصر واحد فقط: فعندها نحذف القائمة كلها بجعل الرأس والذيل null. - في حالة أن القائمة تحتوي على أكثر من عنصر: أولا علينا أن نبحث عن العنصر السابق للذيل (العنصر قبل الأخير)، وذلك بأستخدام for loop قبلها علينا أن ننشأ مؤشر مؤقت باسم temp وفي بداية الـ loop نجعله يشير إلى الرأس، وننقله من عنصر إلى آخر إلى أن يصل إلى العنصر ما قبل الأخير وذلك بفحص إذا ما كان temp.next أي العنصر الذي يليه هو tail فعندها نكون وصلنا إلى العنصر ما قبل الأخير. بعد أن نجد العنصر ما قبل الأخير نجعل الذيل الجديد ومن ثم نجعل الذيل يشير إلى null لكي يتم حذف العنصر الأخير تماماً. و. طباعة جميع عناصر القائمة: public void printAll(){ System.out.print("["); for(SLLNode temp = head; temp != null; temp = temp.next){ System.out.print(temp.info + " "); } System.out.println("]"); } كما شرحنا سابقا نستخدم for loop للتنقل بين عناصر القائمة وطباعة قيمة كل عنصر على الشاشة. ز. فحص وجود العنصر في القائمة أو لا: public boolean isInList(int el){ if(isEmpty()){ return false; }else{ SLLNode temp; for(temp = head; temp.info != el && temp.next != null; temp = temp.next); return temp != null; } } للبحث عن وجود قيمة داخل القائمة من عدمه يجب علينا أن نتنقل داخل القائمة عنصر بعنصر، وسنستخدم الأسلوب السابق وهو باستخدام for loop. ولكن قبلها يجب علينا أن نتأكد من أن القائمة غير خالية. الـ for loop ستتوقف في إحدى حالتين في حالة وجدة العنصر داخل القائمة وذلك ببطلان الشرط (tmep.info != el) أو في حالة وصول temp إلى نهاية القائمة. عندها سنرجع القية المعاكسة لهذا الشرط (tmep != null) في حالة وصول الـ temp إلى نهاية القائمة بدون أن يجد العنصر فعندا سيكون temp يساوي null وفي هذه الحالة سيرسل false أما في حالة إجاد العنصر فعندها temp لن يكون null ويرسل true. ح. حذف عنصر من القائمة: public void delete(int el){ if(!isEmpty() && isInList()){ if(head == tail && head.info == el){ head = tail = null; }else if(el == head.info){ head = head.next; }else{ SLLNode pre, temp; for(temp = head.next, pre = head; temp.info != el; pre = temp, temp = temp.next); if(temp != null){ pre.next = temp.next; if(temp == tail){ tail = pre; } } } } } في حالة أردنا حذف عنصر من القائمة علينا أن نفكر في جميع الإحتمالات وهي كالتالي: - هل القائمة غير خالية؟! وهل العنصر في القائمة ولتححق سنستخدم isEmpty و isInList، في حالة لم تكن القائمة خالية وكان العنصر بالقائمة ننتقل للخطوة التالية: * هل القائمة تحتوي على عنصر واحد؟!: في هذه الحالة نقوم بحذف هذا العنصر ونجعل القائمة خالية. * هل القائمة تحتوي على أكثر من عنصر والعنصر المراد حذفة بالرأس؟: عنذها نحذف الرأس كما أشرنا في الفقرة (د). *الخيار الأخير هو أن العنصر موجود داخل القائمة: في هذه الحالة نحتاج للبحث عن العنصر بنفس الأسلوب السابق لكننا هنا على خلاف الخطوات السابقة نحتاج إلى متغيرين مؤقتين أحدهما يشير إلى العنصر المراد حذفه والآخر يشير إلى العنصر الذي يسبقه. ولكي نقوم بذلك فعند إنشاء temp وهو العنصر المؤقت الذي سنبحث عن طريقه للعنصر المراد حذفه نجعل pre العنصر الذي يسبقه وذلك كما يلي: pre = head , temp = pre.next كما نعلم فنحن لسنا بحاجة لفحص الرأس فقد تأكدنا من أن العنصر ليس بالرأس. تنتهي for loop في حال إجاد العنصر المراد حذف مع العلم بأننا لن نصل إلى نهاية القائمة لأننا تأكدنا من أن العنصر موجود في القائمة في الخطوة الأولى. وعند نهاية كل دورة من for loop نقوم بتحديث قيمتي pre and temp. بعد ذلك نجعل الـ pre يشير للعنصر الذي يلي temp أي يشير للعنصر الذي بعد العنصر المراد حذفه عندها لن يكون هناك ما يشير إليه ويحذف. ** تأكد أخير في حال أن العنصر الذي حذفنها هو الأخير فعندها يجب أن نجعل الذيل يشير إلى null. #شرح مفصل للـ for loop المستخدمة مع القوائم بشكل عام: لأهميتها القصوى سوف أفصلها أكثر، إبتداءً بالشكل العام لها: for (SLLNode temp = head; temp != null; temp = temp.next); أولا نقوم بإنشاء متغير مؤقت ونسميه بأي أسم كان هذا المتغير في بداية الـ loop سيشير لأول عنصر بالقائمة وهو الرأس head بعد ذلك يتأكد من تحقق الشرط وهو أن هذا المتغير لا يساوي null (أي أنه غير خالي)، ومن ثم يحدث قيمة المتغير وذلك بجعله العنصر التالي له عن طريق (temp = temp.next) ومن ثم يقوم بالتأكد من الشرط مجدداً هكذا حتى يصل إلى أن temp مساوي لـ tail وعندها يسنتقل للعنصر الذي يليه وهو في الحقيقة null لأنه tail.next دائما يساوي null وهكذا تنتهي for loop. ملاحظة: قمت بوضع ملفات للـ SLLNode and SLList classes في المرفقات تحتوي على تعليقات توضيحية. أتمنى من الله أن أكون قد وفقت في تفصيل موضوعنا هذا في حفظ الله إلى لقاء آخر SLList.java SLLNode.java تم ترقية هذا الطرح المميز الى صفحة المقالات
  25. وسوم HTML الأساسية الوسوم الأكثر أهمية في لغة الـ HTML هي الوسوم التي تحدد العناوين و الفقرات و فواصل الأسطر. أفضل طريقة لتعلم الـ HTML يكون من خلال الأمثلة ... لقد قمنا بوضع أكثر من 100 مثال في هذا المنهج يمكنك نقل تلك الأمثلة إلى جهازك و تعديلها لتشاهد التأثيرات على طريقة عرض الصفحة، لا شك أنها طريقة جيدة للتعلم. العناوين يتم تحديد العناوين من خلال الوسوم من <h1> إلى <h6> ، حيث يعد الوسم <h1> هو أكبر مقاس للعنوان بينما نجد أن الوسم <h6> هو أصغر مقاس للعناوين ، كما يتضح من الكود التالي: <h1>عنوان 1</h1> <h2>عنوان 2</h2> <h3>عنوان 3</h3> <h4>عنوان 4</h4> <h5>عنوان 5</h5> <h6>عنوان 6</h6> و من خلال الوسم <h> نجد أن العناوين في الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد العنوان. الفقرات يتم تحديد الفقرات من خلال الوسم <p> ، كما يتضح من خلال الكود التالي: <p>بسم الله الرحمن الرحيم</p> <p>الحمد لله رب العالمين</p> و من خلال الوسم <p> نجد أن الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد الفقرة. من أول السطر يستخدم الوسم <br> في حالة الرغبة في إنهاء السطر الحالي ، و بالبدء من أول السطر و لكن دون بداية فقرة جديدة ، <p>This <br> is a para<br>graph with line breaks</p> لاحظ أن: الوسم <br> لا يحتاج إلى وسم إغلاق <br/>مثل الوسوم الأخرى. الملاحظات والتعليقات داخل ملفات HTML يستخدم وسم التعليقات <-- --!> لإدارج تعليقات داخل أكواد HTML ، تلك الملاحظات سوف يتم تجاهلها من قبل المتصفح بمعنى أنها لن تظهر أثناء عرض الصفحات. يمكنك استخدام التعليقات أو الملاحظات لشرح الكود إذا كان هناك من يساعدك في تحرير صفحات الـ HTML ، أو لتذكرك بعمل الكود إذا أردت العودة إليه بعد فترة. <!--هذا مجرد تعليق أو ملاحظة --> لاحظ أن: لا تنسى وضع علامة التعجب في بداية الكود ، كما أنه لا يجب وضعها في نهاية الكود . لا حظ أن " معلومات مفيدة " عندما تقوم بكتابة نص HTML ، فلن تكون متأكداً من الكيفية التي سيتم عرض النص بها في المتصفح. يجب عليك دائما التأكد من أن النص سوف يتم عرضه من خلال المتصفحات المختلفة بصورة جيدة ... بعض المستخدمين لديهم شاشات كبيرة و البعض الأخر لديه شاشات صغيرة كما أن يمكن للمستخدم أن يتحكم في درجة وضوح الشاشة وفقاً لاحتياجاته ... سيتم إعادة تنسيق النص في كل مرة يقوم المستخدم فيها بتغيير حجم النافذة ... لا تقم مطلقاً بتنسيق النص في المحرر لديك بإضافة أسطر فارغة و مسافات إلى النص. يقوم الـ HTML باقتطاع المسافات الموجودة في النص ... أي عدد للمسافات سوف يعد مسافة واحدة ... و كذلك سوف يتم اعتبار السطر الجديد مسافة واحدة. من العادات السيئة استخدام فقرات فارغة <p> لإدراج أسطر فارغة ... استخدم الوسم <br> ( لكن لا تستخدمه لإنشاء قوائم انتظر حتى تتعلم " القوائم في HTML " ) قد تكون لاحظت أنه يمكن كتابة الفقرات دون وسم النهاية " وسم الإقفال " </p>. الإصدار القادم من HTML لن يسمح لك بترك وسم الإقفال ... يضيف الـ HTML تلقائياً سطراً فارغاً إضافياً قبل و بعد بعض العناصر مثل قبل و بعد الفقرة و العنوان ... نحن نستخدم المسطرة الأفقية ( من خلال الوسم <hr> ) لفصل الأقسام في المثال المذكور. Tag Description <html> هذا الوسم يحدد أن الملف المستخدم هو ملف HTML <body> هذا الوسم يحدد منطقة جسم الملف <h1> to <h6> لتحديد مقاس العنوان من 1 إلى 6 <p> لتحديد الفقرات <br> لتحديد بداية سطر جديد <hr> لعرض خط أفقي <!--> للتعليقات و الملاحظات عدد من الامثلة مثال لصفحة HTML بسيطة تحتوى على الحد الأدنى من الوسوم ، ذلك المثال يوضح كيفية إدراج النص في عنصر جسم الملف و عرضه من خلال المتصفح. الظهور عبر المتصفح كود HTML ذلك المثال يوضح كيفية إدراج النص في عنصر جسم الملف و عرضه من خلال المتصفح. <html> <body dir="rtl"> ذلك المثال يوضح كيفية إدراج النص في عنصر جسم الملف و عرضه من خلال المتصفح. </body> </html> هذا المثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح. الظهور عبر المتصفح كود HTML مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح. مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح. مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح. عنصر الفقرة يتم تحديده من خلال الوسم p . <html> <body dir="rtl"> <p>مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.</p> <p>مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.</p> <p>مثال يوضح كيفية إدراج النص داخل عنصر الفقرة و عرضه من خلال المتصفح.</p> <p>عنصر الفقرة يتم تحديده من خلال الوسم p .</p> </body> </html> </td> </tr> </tbody> </table> </body> </html> هذا المثال يوضح بعض الأساليب الافتراضية لعناصر الفقرة في ملف الـ HTML. الظهور عبر المتصفح كود HTML تلك الفقرى تحتوي على عدد من من السطور داخل كود المصدر لملف الـ HTML. و لكن المتصفح سوف يتجاهل ذلك تلك الفقرة تحتوى على عدد من المسافات داخل كود المصدر لملف الـ HTML. و لكن المتصفح سوف يتجاهل ذلك عدد سطور الفقرة يتوقف على حجم نافذة المتصفح ، إذا قمت بتغيير حجم النافذة ... فإن عدد سطور الفقرة سوف يتغير. <html> <body dir="rtl"> <p> تلك الفقرى تحتوي على عدد من من السطور داخل كود المصدر لملف الـ HTML. و لكن المتصفح سوف يتجاهل ذلك </p> <p> تلك الفقرة تحتوى على عدد من المسافات داخل كود المصدر لملف الـ HTML. و لكن المتصفح سوف يتجاهل ذلك </p> <p> عدد سطور الفقرة يتوقف على حجم نافذة المتصفح ، إذا قمت بتغيير حجم النافذة ... فإن عدد سطور الفقرة سوف يتغير. </p> </body> </html> هذا المثال يوضح كيفية بداية سطر جديد داخل ملف HTML دون بداية فقرة جديدة. الظهور عبر المتصفح كود HTML عندما ترغب في إنهاء السطر الحالي و بداية سطر جديد في نفس الفقرة و دون بداية فقرة جديدة استخدم الوسم br . <html> <body dir="rtl"> <p> عندما ترغب في إنهاء السطر الحالي<br>و بداية سطر جديد<br>في نفس الفقرة و دون بداية فقرة جديدة<br>استخدم الوسم br . </p> </body> </html> هذا المثال يوضح بعض المشاكل مع ملفات HTML. الظهور عبر المتصفح كود HTML كل عام و انتم طيبون. كل عام و انتم طيبون. كل عام و انتم طيبون. كل عام و انتم طيبون. لاحظ أن متصفحك سوف يتجاهل هذا التنسيق! <html> <body dir="rtl"> <p> كل عام و انتم طيبون. كل عام و انتم طيبون. كل عام و انتم طيبون. كل عام و انتم طيبون. </p> <p>لاحظ أن متصفحك سوف يتجاهل هذا التنسيق!</p> </body> </html> هذا المثال يوضح الوسوم التي تتحكم في عرض العناوين في ملفات HTML. الظهور عبر المتصفح كود HTML عنوان رقم 1 عنوان رقم 2 عنوان رقم 3 عنوان رقم 4 عنوان رقم 5 عنوان رقم 6 استخدم وسوم العناوين للعناوين فقط، و لا تستخدمها لعمل خط عريض ... يمكن استخدام وسوم أخرى لذلك سنوضحها فيما بعد. <html> <body dir="rtl"> <h1>عنوان رقم 1</h1> <h2>عنوان رقم 2</h2> <h3>عنوان رقم 3</h3> <h4>عنوان رقم 4</h4> <h5>عنوان رقم 5</h5> <h6>عنوان رقم 6</h6> <p> استخدم وسوم العناوين للعناوين فقط، و لا تستخدمها لعمل خط عريض ... يمكن استخدام وسوم أخرى لذلك سنوضحها فيما بعد.</p> </body> </html> هذا المثال يوضح كيفية عرض العنوان في وسط صفحة HTML. الظهور عبر المتصفح كود HTML عنوان الفقرة في هذه الصفحة تم محازاة العنوان إلى وسط الصفحة <html> <body dir="rtl"> <h1 align="center">عنوان الفقرة</h1> <p>في هذه الصفحة تم محازاة العنوان إلى وسط الصفحة</p> </body> </html> هذا المثال يوضح كيفية إدراج rule رأسي. الظهور عبر المتصفح كود HTML الوسم hr يحدد rule رأسي: موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي <html> <body dir="rtl"> <p>الوسم hr يحدد rule رأسي:</p> <hr> <p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p> <hr> <p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p> <hr> <p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p> </body> </html> هذا المثال يوضح كيفية إدراج تعليق " ملاحظة " مخفية داخل أكواد ملف HTML. الظهور عبر المتصفح كود HTML موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي <html> <body> <!-- يمكنك وضع تعليقك هنا دون أن يتم عرضه في المتصفح --> <p>موقع طيبة نت مهتم برفع المستوى التكنولوجي للعالم العربي و خاصة في مجال تكنولوجيا المعلومات و الإنترنت، و العمل على اللحاق بالثورات العلمية في الغرب التي تخلف عنها عالمنا العربي </p> </body> </html> هذا المثال يوضح كيفية إضافة لون كخلفية لصفحة HTML. الظهور عبر المتصفح كود HTML لاحظ لون الخلفية! الون الاصفر <html> <body dir="rtl" bgcolor="yellow"> <h3>لاحظ لون الخلفية!</h3> </body> </html>
  26. عناصر الـ HTML ملفات HTML هي ملفات نصية مكونة من عناصر HTML. عناصر الـ HTML تحدد وسوم HTML المستخدمة. وسوم HTML * وسوم HTML تستخدم لتعليم عناصر الـ HTML. * وسوم الـ HTML يتم أحاطتها برمزين هما < و > . * رموز المحيطة بكود الـ HTML، تدعى أقواس الفئة. * وسوم الـ HTML العادية تكتب بشكل مزدوج كما بالشكل التالي: <b>هذا هو شكل الوسم</b> * الوسم الأول هو وسم بداية الكود، و الوسم الثاني هو وسم إغلاق الكود. * النص الموجود بين وسم البداية و وسم الإغلاق هو محتويات العنصر. * وسوم الـ HTML غير حساسة لحالة الأحرف، بمعنى أن الوسم <b> هو ذاته الوسم <B> . عناصر الـ HTML بالرجوع للمثال الذي درسناه في الفصل السابق: <html> <head> <title>عنوان الصفحة</title> </head> <body> هذه هي أول صفحة نقوم بتصميمها. <b>ما رأيكم في هذا النص العريض ؟</b> </body> </html> هذا هو عنصر الـ HTML: <b>ما رأيكم في هذا النص العريض ؟</b> عنصر الـ HTML يبدأ مع وسم البداية <b> ثم محتويات عنصر الـ HTML و هي في ذلك المثال " ما رأيكم في هذا النص العريض ؟ " ثم إغلاق الوسم بوسم الإغلاق </b>. الغرض من الوسم <b> هو تحديد عنصر الـ HTML الواجب عرضه كنص عريض. و هذا أيضاً يعد عنصر HTML: <body> هذه هي أول صفحة نقوم بتصميمها. <b>ما رأيكم في هذا النص العريض ؟</b> </body> هذا العنصر يبدأ مع وسم البداية <body> و ينتهي مع وسم النهاية </body>. الغرض من هذا الوسم تحديد عناصر الـ HTML الموجودة داخل جسم ملف الـ HTML . لماذا نستخدم الحروف الصغيرة في الوسوم؟ منذ دقائق معدودة قلنا أن وسوم HTML غير حساسة لحالة الأحرف و هذا يجعل الوسم <b> يعني نفسه الوسم <B>. و عند تصفحك للمواقع العديدة التي تقوم بشرح دروس الـ HTML سوف تلاحظ أن غالبية تلك المواقع تستخدم الحروف الكبيرة لكتابة وسوم الـ HTML في شرح أمثلتها... و قد تتساءل لماذا نستخدم نحن الحروف الصغيرة؟ الإجابة بسيطة جداً... و هو إذا كنت تريد أن تجهز نفسك و تعدها لأن تتعامل مع الأجيال القادمة من HTML يجب عليك أن تستخدم الحروف الصغيرة للوسوم. فجمعية World Wide Web Consortium " W3C " توصي باستخدام الحروف الصغيرة في كتابة الوسوم ضمن توصياتها لـ HTML 4 و إصدارة XHTML تتطلب استخدام الحروف الصغيرة. سمات الوسم الوسوم يمكن أن تحتوي على سمات، تلك السمات تزودنا بمعلومات إضافية حول عناصر الـ HTML في صفحتك. الوسم الذي يحدد عنصر الجسم في صفحتك هو: الوسم <body>. و بإضافة السمة bgcolor تستطيع أن تخبر المتصفح أن لون الخلفية لصفحتك هو اللون الأحمر كما بالمثال التالي: <body bgcolor="red"> الوسم الذي يحدد الجداول في ملف الـ HTML هو: الوسم <table>. و بإضافة السمة border يمكنك أن تخبر المتصفح أن هذا الجدول بدون حدود كما بالمثال التالي: <table border="0">> السمات دائماً تأتي على شكل أسم أو قيمة و سواء كانت أسم أو قيمة فكلاهما تأخذ الشكل التالي: name="value" السمات دائماً يتم إضافتها في وسم البداية لعنصر الـ HTML. نمط الأقواس قيمة السمة دائماً يجب أحاطتها بأقواس الاقتباس " علامات التنصيص " أقواس الاقتباس المزدوجة هي الأكثر شيوعاً... و لكن هذا لا يمنع استخدام الأقواس المفردة. في بعض الحالات النادرة مثل أن تكون قيمة السمة تحتوي على علامة اقتباس يكون من الضروري استخدام علامات الاقتباس المفردة.
  27. قبل أن تبدأ!!! علينا أولاً أن نتعرف على بعض المفاهيم العامة حول شبكة الإنترنت قبل أن نشرع في تعلم لغة تصميم صفحات الويب " HTML ". ما هي شبكة الإنترنت " the World Wide Web " ؟ World Wide Web " WWW " هي الشبكة العنكبوتية و غالباً ما يطلق عليها شبكة الويب. شبكة الويب هي عبارة عن شبكة تضم جميع أجهزة الحاسب الآلي على مستوى العالم. جميع أجهزة الحاسب على شبكة الإنترنت تتصل ببعضها البعض. جميع أجهزة الحاسب الألي تستخدم إتصال قياسي يسمى HTTP. كيف تعمل شبكة الإنترنت؟ المعلومات الموجودة على شبكة الإنترنت تخزن في ملفات تسمى صفحات الويب. صفحات الويب هي عبارة عن ملفات مخزنة على أجهزة حاسب تسمى خادم الويب. أجهزة الحاسب التي تقرأ صفحات الويب تسمى عميل الويب. عميل الويب يشاهد الصفحات من خلال برنامج يسمي المتصفح. المتصفحات الأكثر شهرة هي Internet Explorer و Netscape Navigator. كيف يتم عرض الصفحات من خلال المتصفح؟ المتصفح يجلب صفحات الويب من الخادم عن طريق الطلب " request ". الطلب يكون عن طريق طلب HTTP القياسي و الذي يشتمل على عنوان الصفحة. عنوان الصفحة يشبه المثال التالي: http://www.elmasrysoftware.com كيف يقوم المتصفح بعرض الصفحات؟ جميع صفحات الويب تحتوي على تعليمات عرض الصفحات. المتصفحات تعرض الصفحات بواسطة قراءة تعليمات العرض. تعليمات العرض الأكثر شيوعاً تسمى وسوم الـ HTML. وسوم الـ HTML تشبه المثال التالي: <p>هذه مجرد فقرة لعرض المثال</p>. من يضع معايير الويب؟ معايير شبكة الإنترنت لا يتم وضعها من قبل الشركات العاملة في هذا المجال. الجهة المتحكمة بالكامل في شبكة الإنترنت هي جمعية " W3C ". W3C هي اختصار لمجموعة كلمات World Wide Web Consortium. W3C هي التي تقوم بوضع المواصفات المعيارية لشبكة الويب على نحو متصل و بصفة مستمرة. من أكثر معايير الويب شيوعاً هي HTML، و CSS، و XML. المعيار القياسي الأخير من HTML هو XHTML 1.0.
  28. من خلال هذا المنهج التعليمي يمكنك تعلم كيفية تحرير ملفات موقعك الشخصي باستخدام لغة HTML. سوف تكتشف مدى سهولة، و متعة تعلم لغة الـ HTML. مبادئ أساسية لغة الـ HTML قبل أن تبدأ في هذا الفصل نتحدث عن بعض المعلومات الأساسية التي يجب معرفتها قبل دراسة لغة الـ HTML. مقدمة في الـ HTML في هذا الفصل احاول شرح ما في لغة HTML من خلال وضع تعريف لها ، و كيفية استخدام وسوم HTML لتنسيق صفحات الويب. سوف تتعلم كيفية تحرير ملفات الـ HTML و كيفية مشاهدتها في متصفحك، كما تتعلم كيفية مشاهدة كود المصدر لملفات الـ HTML. مع اعطائك بعض الإرشادات لاستخدام وسوم الـ HTML. العناصر من خلال هذا الفصل سوف نتعرف على عناصر ملف الـ HTML ، كيف أن هذه العناصر تحدد استخدام وسوم الـ HTML. الوسوم الأساسية من خلال هذا الفصل سوف نقوم بتحرير بعض الأمثلة البسيطة لنتعلم سوياً الوسوم الأساسية للغة الـ HTML. تنسيق النصمن خلال هذا الفصل سوف نستخدم نفس الأمثلة البسيطة التي استخدمنها في الفصل السابق لشرح وسوم التنسيق في لغة الـ HTML. هذه الأمثلة توضح وسوم تنسيق النص، و وسوم الإخراج للحسب الآلي، و وسوم الاقتباس، و الوسوم التوضيحية. الرموز البرمجية بعض الرموز لها معاني خاصة في لغة الـ HTML مثل علامة أصغر من ( < ) و التي تستخدم لتحديد بداية وسم الـ HTML، في هذا الفصل سوف نتعرف على المعاني الخاصة في الـ HTML، و كيفية استخدام الرمز البرمجي لهذه العلامة داخل كود الـ HTML لعرضها عبر المتصفح. الروابط هذا الفصل يشرح وسوم الروابط في لغة الـ HTML، سوف نتعرف على كيفية إدراج الروابط و التحكم فيها سواء كانت روابط لصفحات أخرى أو روابط للبريد. الإطارات من خلال هذا الفصل اقوم بشرح وسوم الإطارات... سوف نتعرف على الإطارات الرأسية و الأفقية و كذلك كيفية عمل إطارات متعددة. الجداول من خلال هذا الفصل نشرح الجداول المختلفة في لغة الـ HTML، هذا الفصل يبين كيفية إدراج عناوين و حدود للجداول، كما يوضح كيفية إدراج صورة في خلية الجدول، و كيفية التحكم في الخلايا و دمجها و كذلك المسافات بين الخلايا. القوائم من خلال هذا الفصل اقوم بنشر القوائم المختلفة في لغة الـ HTML، مثل القوائم المرتبة و القوائم غير المرتبة، و كيفية تداخل القوائم في ملفات الـ HTML. النماذج هذا الفصل يشرح وسوم الإدخال و النماذج في ملفات الـ HTNL، و يعرض كيفية عمل حقول النص ، و مربعات الاختيار و أزرار الراديو و كذلك زر الإرسال . الصور هذا الفصل يشرح وسوم الصور في لغة الـ HTML، و يعرض كيفية إدراج صورة، و كيفية محاذاة الصورة، و طريقة عمل الخرائط المصورة. الخلفيات هذا الفصل يوضح كيفية استخدام الخلفيات في ملفات الـ HTML. تنمية مهارات تخطيط الصفحة هذا الفصل يوضح كيفية استخدام الجداول في ملفات الـ HTML، لتنسيق التخطيط العام لصفحات الـ HTML. الخطوط هذا الفصل يشرح وسم في لغة الـ HTML، و يعرض كيفية تغيير نوع و مقاس الخط لمخرجات النص في صفحات الويب. الأنماط هذا الفصل يشرح وسوم الأنماط في لغة الـ HTML، و يعرض كيفية استخدام الأنماط في ملفات الـ HTML، و كيفية ربط ملفات الأنماط الخارجية. رأس الصفحة هذا الفصل يشرح وسوم رأس الملفات في لغة الـ HTML، و يعرض الوسوم المختلفة التي توضع داخل عنصر رأس الملف وسوم الميتا هذا الفصل يوضح وسوم الميتا في لغة الـ HTML، و يشرح الاستخدامات المختلفة لها. URL هذا الفصل يشرح Uniform Resource Locators ( URL ) و المنهجية التي يتم بها عنونة الملفات و البيانات عبر شبكة الويب. سكريبتاتهذا الفصل يشرح وسوم السكريبتات في لغة الـ HTML، و يعرض كيفية إدراج سكريبت في ملف الـ HTML، و ما يفعله المتصفح في حال كونه لا يدعم السكريبتات. خادم الويب هذا الفصل و بعد أن اكون انتهيت من دراسة لغة الـ HTML، من الضروري أن نتعلم كيف يمكن لنا نشر موقعنا على شبكة الإنترنت... سوف نتعلم ذلك الآن
  1. عرض المزيد من النشاطات

عالم البرمجة

عالم البرمجة مقالات برمجة و دورات مجانية لإحتراف البرمجة هدفنا تبسيط البرمجة ونشرها بيد الكل بشكل ممتع ومتطور ومحدث بإستمرار لمواكبة جديد تطورات البرمجة الحديثة و المتقدمة بدون مقابل