Facebook إلى متى ؟


لماذا لا نترك facebook ؟ أو بعبارةٍ أخرى لمادا لسنا قادرين على ترك facebook بالرغم من أن هناك العديد من مواقع التواصل الاجتماعي على الأنترنت ؟ لماذا لسنا قادرين على قول لا لإنتهاك خصوصية المستخدم ؟ لماذا لسنا قادرين على قول لا للرضوخ لجميع قوانين facebook ؟ و نحن نعلم جيداً أن facebook هو أداة استخباراتية رفيعة المستوى لمن يدفع أكتر ، facebook عميل لكل من يدفع له المال ، لا يخفى عليكم أن facebook له علاقات مع حكومات الدول التي تريد التجسس على شعوبها ، facebook يعرف كل شيء عنك سواء كنت بإسم Messi أو مراد علمدار أو sousou و حتى لو كان لديك email مثل cristiano@gmail.com ، لدى facebook جميع ما قلته و ماكتبته سواء على جدارك أو في رسالة إلى أحد أصدقائك ، جميع رسائلك وحواراتك مع أصدقائك محفوضة و يمكن لإدارة facebook استخراجها في أي وقت ارادت أو بمعنى أدق في أي وقت دفع لها المال لذلك، فقط معرفة هذا يجب أن يجعل كل دي عقل يراجع نفسه و يسأل نفسه : هل أنا مضطر أن تعرف facebook كل هذا عني ؟ و الجواب هو لا يا أخي ، لست مضطراً لأي شيٍ من هدا ، الخيار خيارك والكرة في ملعبك فيإختر ما شئت ، إما أن تراقب كل ماتفعله و تقوله ومن تصادق و .. و-.. و- ، وإما أن تترك facebook ، وفي رأيي الخيار الثاني هو الأمثل ، و لكن ربما تقول دعونا من هاذا الكلام الفارغ ، أنا لا يهمني أن يعرف facebook عني كل شي أنا فقط استعمله من أجل الترفيه لا أكتر ، قد يكون معك حق ولكن ليس كل الحق ، فالإنسان بطبيعته لا يحب أن يكون مراقباً ، فكيف وأنت تعلم أنا هناك شخصاً لا بل أشخاصاً يراقبونك ويعرفون كل ما قمت به وماتقوم به ، و ما ستقوم به مادمت عبد مخلصاً لإمبراطورية facebook ، أنا لن أخوض في حديث facebook صهيوني وما إلى ذلك لأني بصراحة لا أريد أن أقول شيء لست متأكداً منه ، ولكن يبقى إحتمالاً راجحاً وكبيراً ، إذاً ما العمل وما الحل ؟ الحل سهلٌ وبسيط كما أخبرتكم ، لنترك facebook ، آه ولكن إنتضر أنا لدي الكثير من الأصدقاء هناك ولا أسطتيع أن اتركه ، حسناً إنتقل إلى غيره وادعو أصدقاءك لينضموا إليك، ولكن أريد بديلاً جيداً؟ ماذا أختار؟ حسناً سأعرض بعد البدائل التي تستحق التجريب ولك حرية استكشافها وحدك .
هناك شبكة إجتماعية في طريق النمو و فيها شيء مميز و جميل حقيقةً، هو أنك تحصل على مقابل مالي من تكوينك للصداقات، نعم مقابل مالي بالدولار، فقط من تكوينك للصداقات و مشاركة المحتوى معة أصدقائك ،هذه الشبكة هي TSU : www.tsu.co ، ولا كن المقابل المالي الذي تحصل عليه ليس بذلك المبلغ الذي قد يغنيك من فقرك ، فقط عشرات الدولارات و ربما مئات إذا كنت نشيطاً ولديك الكثير من الاصدقاء و المتابعين، لكن بصراحة الفكرة جميلة جداً ، لا أحد يتجسس عليك وتربح مالاً من تكوينك لصداقات .... شيء جميل.

واحدة من الشبكات التي أثارت إعجابي هي شبكة foojbook و شعار هذه الشبكة هو لا لفيسبوك ، شبكة تحرص على حرية المستخدم وبها العديد من المزايا الرائعة ، وهذه الشبكة هي إحدى شبكات منصة FRIENDICA الكبيرة. هناك أيضاً منصة ضخمة بها العديد من الشبكات الحرة والمفتوحة المصدر ، حرية تامة ، لا قيود ولا شروط ، حتى أنك يمكنك صنع شبكتك الخاصة ، مثال على ذلك بعض الشركات التي تصنع شبكة خاصة بها لعمالها ، هذه المنصة هي منصة Diaspora.org والتي تشبه كتيراً منصة Friendica، إذا دخلت إلى https://diasporafoundation.org سترى أن الحرية والخصوصية هي الشعار الأول لهذه المنصة , نذكر أيضاً منصة Redmatrix التي يمكنك تخصيصها بشكل مذهل و التي تجدب الكثير من المستخدمين إليها بشكل متواصل ، و قريباً سيتم تحويل شبكة foojbook إلى هذه المنصة عوضاً عن منصة Friendica ، , هناك أيضاً مشروع Libertree المشروع الذي لايزال في نسخته الألفا ، في نسخته الحالية يحتوي على وضائف أساسية و مجتمع محترف من المطورين و المهووسين بالمعلوماتية ، الموقع حالياً يتم التسجيل به فقط من خلال تلقي دعوة أي يجب أن يتم دعوتك من مستخدم أخر حتى يمكنك التسجيل ، يمكنكم الدخول إلى غرفة المحادتة الخاصة بالمشروع و طلب دعوة من الاعضاء هناك ، يتم إععطاوئكم رابط تسجيل مباشر ، عملية التسجيل جد بسيطة
. لنقل وداعاً لطفيليات فيسبوك .

قالب بلوجر خطوة خطوة(تنسيق css):

لغة السي أس أس لغة تنسيقية، أي أن دورها في الصفحات الموجودة على شبكة الانترنت يتمثل في التنسيق واظهار المحتوي بشكل جميل ومبهرج(ههه).
لا يحتاج النبوغ في هذه اللغة لجهد كبير لقلة قواعدها وسهولة استيعابها عندنا نحن البشر. لكن النتائج التي يمكن أن يقدمها كل فرد منا تختلف من شخص لآخر. فإتقانك لهذه اللغة ومعرفتك لقواعدها لا يعني أن صفحاتك ستكون جميلة في أعين الآخرين (ربما لدوقك الفاسد أو أنك مميز عن الآخرين). لذلك نجد أن المبدعين في مثل هذا الصنف من اللغات جلهم مصممون.

تنسيق قالبنا: 

في الأسطر الآتية سنقوم بتنسيق قالبنا (قالب برموج). وللعلم هذا القالب ثابت (أي أن حجم عناصره لا ولن يتغير بتغير أبعاد النافدة التي تحتويه).

*{
    margin: 0;
    padding: 0;
}
html{
    direction: rtl;
}

body{
    margin: 0;
    padding: 0;
    background: url('pixels.png') repeat #F7941E;   
}

#page-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#outer-wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

/*header styles*/
#header{
    display: none
}

#crosscolPages{
    margin: 0;
    padding: 0;
    background: url('برموج.png');
    height: 280px;
}

#crosscolPages ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 121px;
    position: relative;
    right: 839px;
    border-radius: 0 0 10px 10px;
    background: #231F30;
    overflow: hidden;
}

#crosscolPages li{
    margin: 0;
    padding: 0;
    float: right;
}

#crosscolPages li a{
    display: block;
    margin: 0;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: fantasy;
}

#crosscolPages li a:hover{
    color: #F7941E;
}

/* navigation bar */
#crosscolLabels{
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: solid 1px #231F20;
}

#crosscolLabels ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#crosscolLabels li{
    float: right;
    /*background:#231F20;*/
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

#crosscolLabels p{
    margin: 0;
    padding: 0;
    color: #F7941E;
    padding: 5px 10px 5px 10px;
    font-family: fantasy;
    background:#231F20;
}
#crosscolLabels li a{
    display: block;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: sans-serif;
    font-size: 100%;
    background:#231F20;
}

#crosscolLabels li a:hover{
    background: none;
    color: #231F20;
    font-family: fantasy;
    
}

#line-under-header{
    height: 16px;
    background: #231F20;
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 265px;
}
#line-under-footer{
    height: 75px;
    background: #231F20;
    width: 100%;
    z-index: -1;
    margin-top: -75px;
    padding: 0;
}

/*========= التنسيقات الخاصةب الجسم الرئيسي الذي يحتوي الرسائل وغيرها من المكونات ====*/
#main-wrapper{
    width: 65%;
    float: right;
    margin-left: 10px;
    margin-top: 20px;
    background: #231F20;
    border-radius: 20px 20px 0 0;
    
}

/*======= النتسيقات الخاصة بالقائمة الجانبية =============================*/
#sidebar-wrapper{
    float:right;
    background: #231F20;
    margin-top: -30px;
    width: 30%;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    padding-bottom: 5px;
}

#sidebar-wrapper #search-bar{
    width: 90%;
    margin: auto;
}

#sidebar-wrapper #search-bar .search-box{
    width: 84.9%;
}

#sidebar-wrapper #most-readed-posts{
    width: 100%;
    margin: auto;
    text-align: center;
}

#sidebar-wrapper #most-readed-posts h2{
    font-size: 100%;
}
#sidebar-wrapper #most-readed-posts .most-readed-titles a{
    color: #F7941E;
    text-decoration: none;
    display: block;
    padding: 10px 0 10px 0;
}

#sidebar-wrapper #most-readed-posts .most-readed-titles a:hover{
    background: #F7941E;
    color: #231F20;
}

/*======== التنسيقات الخاصة بالرسائل=================*/

.posts{
    width: 96%;
    margin: auto;
    margin-top: 10px;
    background: #F7941E;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid #F7941E;
}

.posts .post-header{
    background: #F15A29;
    overflow: hidden;
}

.posts .post-header ul{
    list-style: none;
    overflow: hidden;
}

.posts .post-header ul li{
    float: right;
}

.posts .post-header h2{
    font-family: "Courier New";
    clear: both;
    margin: 0;
    margin-left: 40px;
    display: inline;
    
}

.posts .post-header h2 a{
    text-decoration: none;
    color: inherit;
    
}
.posts .post-header h2 a:hover{
    color: white;
    
}
.posts .post-header .post-date{
    background: #F7941E;
    margin: 0;
    border-radius: 0 0 10px 10px;
    padding: 5px;
    margin-bottom: 5px;
    box-shadow: 0px 0px 2px 3px #333;
    
}

.post-body{
    background: white;
    padding: 5px;
    font-family: arial, sans-serif;
    font-size: 24px;
    line-height: 1.5;
}

/*======== التنسيقات الخاصة بالذي ===========*/
#footer{
    clear: both;
    background: #231F20;
    overflow:hidden;
}
#footer #copyright{
    float: right;
    width: 65%;
    text-align: center;
    margin-top: 30px;
    font-size: 120%;
    color: #FFF;
}
#footer #share-blog{
    overflow:hidden;
    float: left;
    width: 35%;
}
#footer ul{
    list-style: none;
}

#footer ul li{
    float: right;
}
#footer #share-blog ul li a{
    display: block;
    margin: 5px;
    margin-top: 10px;
    border-radius: 10px;
}
#footer #share-blog ul li a img{
    background: transparent;
    width: 65px;
    height: 53px;
    
}


قالب بلوجر خطوة خطوة (قالب الhtml):


 بعد رؤيتنا لتقسيم المدونة وتصميمها نبدأ بكتابة صفحة html موافقة لها. سنقوم باستخدام الاصدار الأخير (الخامس) من هذه اللغة لنتجنب بعض التفاصيل التي سنقوم بمعالجتها في السلسة القادمة.

نبذة قصيرة عن لغة ال html:

تعد هذه اللغة بنتا لأم اللغات XML المصنفة تحت اسم اللغات التشعبية ، النصية أو لا أدري ما أسميها لكثرت الترجمات والتسميات العربية التي تحمل الاسم الإنجليزي Markup languages. والمعني الصحيح أو تعريف هذه اللغة يكمن في فهم اسمها والوظيفة التي تأديها بدون اطالة:
الأحرف الأولي ht  التي تمثل اختصار للكلمتين أو الكلمة hypertext المقصود من خلالها الطريقة التي تنتقل بواسطتها خلال الشبكة من صفحة إلي أخري بالضغط على نصوص أو كلمات ذات خاصية مميزة يطلق عليها اسم hyperlinks تسمح لك بالذهاب أو الابحار لأي مكان في الانترنت بطريقة تشعبية لا تخضع لترتيب واضح. ههه فلسفة....

قالب بلوجر خطوة خطوة (هيكل برموج):

هيكل برموج
السلام عليكم في المقال الثاني من هذه السلسلة التي نسأل الله أن يبارك لنا فيها ويوفقنا لتقديم المهم، المفيد الذي ينفع القارئ المهتم، ولا يضر غيره.
كما ذكر في مخطط السلسلة سنبدأ بوضع هيكل لمدونتنا المتكونة من الأجزاء المشهورة أو الشائعة عند جميع المدونين والمصممين والمتمثلة في: قائمة التصفح أو الابحار (navigation bar)، الرأس(header)، الجسم(body)، القائمة الجانبية (sidebar)، الذيل (footer). لكل من هذه الأجزاء مهمته ومحتواه، ودور يلعبه في تقسيم الصفحة وإعطائها معنا وانسجاما من حيث المظهر والمخبر.


الرأس
الجسم
القائمة الجانبية
الذيل

شرح مختلف الأجزاء:

1-    قائمة الابحار (navigation bar): هذا الجزء عبارة عن قائمة بأسماء الصفحات التي تكون مدونتنا مثلا: الرئيسية ( تلقب بhome وليس principal )، أعلن معنا، من أنا...الخ. ربما لاحظت عدم ذكر التصنيفات من: دروس مصوة، برمجة، خذع وغيرها من الأشياء التي تساعد القارئ وتسهل عليه الاطلاع على المقالات المنشورة. والجواب أننا سنقوم بإنشاء قائمتي ابحار، واحدة خاصة بالصفحات المختلفة، والأخري تمثل التصنيفات.
2-    الرأس (header): يحتوي الرأس في غالب الأحيان عنوان (title) المدونة أو الموقع إلي جانب الوصف (description). يمكن أن يستبدل العنوان بصورة أو الاثنين معا.
3-    الجسم (body): الجزء الرئيسي للمدونة، يحتوي المقالات، الإشهارات، التعليقات وغيرها. الجسم المذكور هنا ليس له علاقة بوسم الhtml <body>.
4-    القائمة الجانبية (sidebar): كما يدل عليها اسمها فهي تحوي جميع الأجزاء الجانبية في مدونتنا من أدوات البحث، الاشهارات، الأرشيف، أسماء التدوينات الأكثر مشاهدة، أسماء المدونات الصديقة وغيرها من المكونات. ههه، يدل اسمها أيضا على تموضعها في أحد الجوانب ( أقصد المظهر).
5-    الذيل (footer): دوره الرئيسي يتمثل في اظهار حقوق النشر والتوزيع للمدون. كما يمكنه احتواء بعض الأدوات التي تظهر في القوائم الجانبية، قائمة بسيطة لبعض الصفحات التي لا يمكننا ذكرها في الأعلى وغيرها.
يمكنك أخذ نظرة مسبقة عن قالب المدونة. يمكنك رؤية تقسيمنا جيدا حيث يحتوي القالب قائمة ابحار خلال الصفحات، رأس، قائمة ابحار خلال التصنيفات أو التسميات، جسم، قائمة جانبية وذيل للمدونة.
أرجو أن تبقوا معنا في المقالات القادمة المدرجة تحت عنوان هذا المقال. يتبع إن شاء الله...........

قالب بلوجر خطوة خطوة(مقدمة):


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

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

جميع الحقوق محفوظة عالم الحاسوب 2014