شرح اختيار خط معين في سي اس اس ثري css3

خاصية font-face

خاصية font-face مخصصة لوضع تفاصيل الخط الذي تريد إضافته إلى تنسيق الصفحة، مثل نوع خط وعنوان الخط. وتكتب قبل تنسيق الفقرة أو العنوان أو النص الذي تريد تنسيقه بشكل عام. تكتب هذه الخاصية كما توضح شفرة CSS التالية:

@font-face {

–

}

لو إفترضنا أننا نريد إستخدام خط Delicious في عنوان للفقرة، نحدد الخط وعنوانه الخارجي في خاصية font-face بهذه الطريقة:

  font-family: Delicious;

 src: url(Delicious-Bold.otf);

}

كما أنه يفضل أن يكون عنوان الخارجي للخط مرافق لملف CSS أو يمكنك كتابة عنوانه المحدد، في المثال السابق ستجد أن عنوان الخط يشير إلى Delicious-Bold.otf وهو موجود بجانب ملف CSS.

مثال عملي: إختيار خط لعنوان فقرة

المثال الذي سأطرحه بسيط جداً عبارة عن عنوان وفقرة، بحيث يتم تنسيق العنوان بأحد الخطوط الذي أستخدمها في تصاميمي وهو خط Hacen Typographer Bold، قبل عرض المثال أبدأ في المثال نقوم بعرض شفرة HTML الخاصة بالدرس:

<h2>تطبيقات على CSS3</h2>

<p>نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.</p>

<p>عند الإنتهاء  من جميع دروس هذه السلسلة سأضع قائمة الدروس من خلال هذه   التدوينة، لتكون مرجع لها بشكل دائم وهو سبب كتابتي لهذا الموضوع. لن أضع   أي عنوان حالياً ولكن سأبدأ بكتابة دروس CSS3 خلال هذه الأيام وتحديث هذه   التدوينة مع كل درس جديد.</p>

بعد ذلك نستخدام خاصية font-face في تحديد خط Hacen Typographer Bold بإسمه وعنوانه:

@font-face {

font-family: Hacen Typographer Bold;

src: url(Hacen Typographer Bold.ttf);

 font-weight: bold;

}

يجب يكون خط Hacen Typographer Bold موجود بجانب ملف CSS حسب ما يشير عنوان الخط في الشفرة السابقة، إضافةً إلى تحديد الخط في عنوان الفقرة (فقرة تطبيقات على CSS3) من خلال شفرة CSS التالية:

h2 {

 font-family: Hacen Typographer Bold;

}

هذه الصورة تمثل النتيجة كاملة عبر متصفح Safari:

طريقة إختيار الخط لإستخدامه في التصميم

عند إختيارك للخطوط المناسبة لك فإن نتيجة ظهور هذه الخطوط ستكون في كاملة في متصفح Safari، الإصدارات الأخيرة من متصفح Firefox و Opera لا يدعمان إختيار الخطوط بشكل صحيح وخاصة عند إختيار خط عربي ولكن النتيجة تظهر بشكل ممتاز في متصفح Safari وهذا بفضل ميزة تنعيم الخط Font Smoothing، هذه صورة للمثال السابق في عدة متصفحات بإستخدام خاصية font-face:

لذا أنصح بإستخدام بدائل لخاصية font-face إذا لم يدعم المتصفح الخاصية بشكل صحيح، يمكنك رؤية بعض تفاصيل دعم متصفح الفايرفوكس لخاصية Font-Face مع المقارنة ببقية المتصفحات على سبيل المثال.

هل أنت من نوعية الأشخاص التى تنسى الصيغة العامه للدوال والاوامر البرمجية فى php؟

هل أنت من نوعية الأشخاص التى تحب تنظيم الكود البرمجى؟

اذا عليك بأستخدام أقوى محرر php موجود على الشبكة العنكبوتية ؟

انه الاسطورة netbeans

قبل أن اشرح الخصائص المهمة لهذا العملاق,

نحمل البرنامج الأول:

1- لتشغيل البرنامج ستتطلب ان تقوم بتثبيت مكتبة الجافا:

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

فى هذا الدرس سوف نتعرف على كيفية برمجة محرك بحث داخلى يقوم بالبحث فى قواعد البيانات عن اى كلمة او جملة تكتبها فى محرك البحث الداخلى بالموقع ,ويمكنك من خلال هذا الدرس ان تقوم بعمل خاصية البحث فى اى اسكربت تقوم ببرمجته مهما كانت عدد جداوله ومهما كانت عدد حقوله , افهم فكرة الدرس واطلق العنان لطموحاتك

خطوات تطبيق الدرس:

1-انشاء قاعدة بيانات كمثال حتى يتم البحث فيها

2-انشاء ملف form.htm الخاص بعمل مستطيل البحث

3-انشاء ملف style.css الخاص بتجميل شريط البحث

4-انشاء ملف mysql.php الخاص بالاتصال ومحاكاة قاعدة البيانات وتنفيذ عملية البحث فى الجداول والحقول

5-انشاء ملف processform.php الذى سوف يقوم تنفيذ الكلمة او الجملة التى تم كتابتها فى محرك البحث ليتم البحث عنها

اولا: انشاء قاعدة البيانات

سوف نقوم بانشاء قاعدة بيانات وراح نسميها users, وبداخلها سوف ننشأ جدول اسمه users وعدد حقوله 5 حقول

-id

-firstname

-lastname

-email

-comments

تمام الحين راح ندخل بعض البيانات فى هذا الجدول حتى نستخدمها كمثال للبحث عنها

انا قمت بادخال بعض الاسماء وبياناتهم

شوف الصورة

تمام انتهينا من انشاء قاعدة البيانات ………

يوجد خطوة مهمة جدا وهى اننا نريد ان نقوم بعمل Index من النوع fulltext
للجدول اللى راح نبحث فيه
ولعمل ذلك فقط قم بعمل هذا الامر من خلال اختيار زر sql لتنفيذ أمر sql

بحيث راح يكون الناتج كالصورة الاتية:

ثانيا: انشاء ملف form.htm

وهو عبارة عن صفحة الفورم الخاصة بمستطيل البحث الذى سوف سيكون محرك البحث

وانا استخدمت بعض الجافا اسكربت لتعطى لمسة جمالية للفورم وجعلنا action هذا الفورم

هو تنفيذ ملف processform.php الذى سوف يشرح فيما بعد

كود ملف form.htm

محرك بحث

<script type="text/javascript" language="javascript">// <![CDATA[
window.onload=function(){

if(document.getElementById&&document.
getElementsByTagName&&document.createElement){

var sfield=document.getElementsByTagName(‘form’)[0].elements[0];

if(!sfield){return};

sfield.onfocus=function(){this.value=”};

sfield.onblur=function(){

if(!this.value){this.value=’ادخل الكلمة المراد البحث عنها’};

}

}

}
// ]]></script></pre>
<h1>محرك البحث فى قاعدة البيانات</h1>
<div><form action="processform.php" method="get">
<input title="ادخل الكلمة المراد البحث عنها" type="text" name="searchterm" value="ادخل الكلمة المراد البحث عنها" />

<input title="Search Now!" type="submit" name="search" value="بحـث" /></form></div>
<pre>

ثالثا: انشاء ملف style.php

سوف نقوم بتجميل الفورم الخاص بنا فى الصفحة السابقة

وهذا هو كود الملف

background: #ccc;

margin: 0;

padding: 0;

}

h1{

width: 375px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #339;

font: normal 18px Arial, Helvetica, sans-serif;

color: #fff;

border: 1px solid #000;

text-align: center;

}

h2{

font: bold 18px Arial, Helvetica, sans-serif;

color: #339;

}

p{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

}

a:link,a:visited{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #00f;

text-decoration: none;

}

a:hover{

color: #f00;

text-decoration: underline;

}

.maincontainer{

width: 375px;

padding: 10px;

margin-left: auto;

margin-right: auto;

background: #f0f0f0;

border: 1px solid #000;

}

.rowcontainer{

padding: 10px;

margin-bottom: 10px;

background: #ccf;

}

.searchbox{

width: 200px;

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

.searchbutton{

width: 80px;

font: bold 12px Arial, Helvetica, sans-serif;

color: #000;

}

رابعا: انشاء ملف mysql.php

طبعا هذا هو أهم ملف سوف يكون فى درسنا, والذى سوف ينفذ عملية البحث فى قاعدة البيانات عن الكلمة او الجملة التى تريد البحث عنها

الملف عبارة عن كلاس تقوم بتنفيذ عدة عمليات متكاملة منها

1-الاتصال بقاعدة البيانات

2-تنفيذ عملية البحث للكلمة او الجملة المراد البحث عنه

كود ملف mysql.php

if(!$value){

throw new Exception(‘Invalid parameter ‘.$parameter);

}

$this->{$parameter}=$value;

}

$this->connectDB();

}

// connect to MySQL

private function connectDB(){

if(!$this->conId=mysql_connect($this->host,$this->user,$this->password)){

throw new Exception(‘Error connecting to the server’);

}

if(!mysql_select_db($this->database,$this->conId)){

throw new Exception(‘Error selecting database’);

}

}

// run query

public function query($query){

if(!$this->result=mysql_query($query,$this->conId)){

throw new Exception(‘Error performing query ‘.$query);

}

return new Result($this,$this->result);

}

public function escapeString($value){

return mysql_escape_string($value);

}

}

// define ‘Result’ class

class Result {

private $mysql;

private $result;

public function __construct(&$mysql,$result){

$this->mysql=&$mysql;

$this->result=$result;

}

// fetch row

public function fetchRow(){

return mysql_fetch_assoc($this->result);

}

// count rows

public function countRows(){

if(!$rows=mysql_num_rows($this->result)){

return false;

}

return $rows;

}

// count affected rows

public function countAffectedRows(){

if(!$rows=mysql_affected_rows($this->mysql->conId)){

throw new Exception(‘Error counting affected rows’);

}

return $rows;

}

// get ID form last-inserted row

public function getInsertID(){

if(!$id=mysql_insert_id($this->mysql->conId)){

throw new Exception(‘Error getting ID’);

}

return $id;

}

// seek row

public function seekRow($row=0){

if(!is_int($row)||$rowresult,$row)){

throw new Exception(‘Error seeking data’);

}

}

}

?>

رابعا : انشاء ملف processform.php

وهذا الملف هو اللى راح ينفذ عملية البحث

كود ملف processform.php

<!–?php // include MySQL-processing classes require_once ‘mysql.php’; try{ // connect to MySQL $db=new MySQL(array (‘host’=–>’localhost’,’user’=>’root’,’password’=>’root’,
‘database’=>’users’));

$searchterm=$db->escapeString($_GET['searchterm']);

$result=$db->query("SELECT firstname, lastname,comments FROM
users WHERE MATCH(firstname,lastname,comments) AGAINST
(‘$searchterm’)");

if(!$result->countRows()){

echo ‘</pre>
<div>
<h2>لاتوجد اى نتيجة,ارجع للخلف وعاود البحث مرة أخرى</h2>
</div>
<pre>
‘;

}

else{

// display search results

echo ‘</pre>
<div>
<h2>Your search criteria
returned ‘.$result->countRows().’ results.</h2>
‘;

while($row=$result->fetchRow()){

echo ‘
<div>
<strong>First Name:
</strong>’.$row['firstname'].’
<strong>Last Name:
</strong>’.$row['lastname'].’

<strong>Comments:
</strong>’.$row['comments'].’</div>
‘;

}

}

echo ‘</div>
<pre>
‘;

}

catch(Exception $e){

echo $e->getMessage();

exit();

}

?>

شرح الاجزاء المطلوب تعديلها بما يناسب طلبك:

1- اولا تغيير بيانات الاتصال بقاعدة البيانات من خلال هذا السطر

$db=new MySQL(array
(‘host’=>’localhost’,’user’=>’root’,’password’=>’root’,
‘database’=>’users’));

2- تغيير اسم الجدول والاعمدة المراد البحث فيها , وذلك من خلال هذا السطر

$result=$db->query("SELECT firstname, lastname,comments FROM
users WHERE MATCH(firstname,lastname,comments) AGAINST
(‘$searchterm’)");

وبهيك عند تنفيذ البحث عن اى كلمة ولنفرض اننا راح نبحث عن كلمة call و mazda

راح يكون الناتج مثل الصورة الاتية:

لتحميل ملفات الدرس كاملة : اضغــــط هـــــنا

وسوف نستخدام احدث وأفضل انواع الكابتشا ,

حمل الملفات المطلوبة من هـــــــــــنا

ثم راح تجد فى بدايته فورم يوزر وباسورد

كالاتى:

<?php
if (empty($_POST)) { ?>
<form method="POST">
Username:<br />
<input type="text" name="username" /><br />
Password:<br />
<input type="text" name="password" /><br />

<!– pass a session id to the query string of the script to prevent ie caching –>
<img src="/securimage_show.php?sid=<?php echo md5(uniqid(time())); ?>"><br />
<input type="text" name="code" /><br />

<input type="submit" value="Submit Form" />
</form>

<?php

قم بتغيير الفورمز لاى شىء تريده على حسب برمجيتك انت

ثم فى الكود

echo "<center>Thanks, you entered the correct code.</center>";

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

header(‘Location: http://www.example.com/’);

مثال:

انتهى

فى هذا الدرس راح تعرف كيف نسوى نظام تسجيل دخول قوى ومحمى فى نفس الوقت .

ملفات الدرس عبارة عن ثلاثة ملفات :

1-login.php وهى فورم تسجيل الدخول

2-verify.php وهى صفحة التحقق من العضوية وتنفيذ عمليات mysql الخاصة بقاعدة البيانات

3- users_page.php وهى الصفحة التى سوف يتم التحويل اليها بعد تسجيل الدخول.

شرح طريقة الاستخدام:

أسهل من السهولة ……

افتح ملف verify.php

ثم ادخل بيانات الاتصال بقاعدة البيانات المخزن بها عضويات موقعك بجدول اليوزر

$dbUser = "xxxx"; //Database User Name

$dbPass = "xxxxxx"; //Database Password

$dbDatabase = "db_name"; //Database Name

$email = ‘youremail@someaddress.com’;

[html] $query = sprintf("SELECT * FROM users_table
WHERE username=’%s’ AND
password=PASSWORD(‘%s’) LIMIT 1",mysql_real_escape_string($_POST['username']),mysql_real_escape_string($_POST['password']));
[/html]

ثم غير أعمدة الجدول من هنا

$_SESSION['fname'] = $row['first_name'];

$_SESSION['lname'] = $row['last_name'];
[/html]

ثم غير الصفحة المراد التوجه اليها بعد تسجيل الدخول

فقط

حمل الملفات من هــــــــــنا

نبدأ على بركة الله ………..

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

id: الترميز التلقائى لترقيم الاضافات الجديده

title: لتخزين عنوان الموضوع

content: لتخزين محتوى الموضوع

author: حفظ اسم الكاتب

date: لتخزين تاريخ كتابة الموضوع واضافة الردود

CREATE TABLE `news` (

`id` int(11) NOT NULL auto_increment,

`title` text NOT NULL ,

`content` text NOT NULL,

`author` text NOT NULL,

`date` datetime NOT NULL default ’00-00-0000 00:00:00′,

PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=10 ;
[/html]

ثانيا: عمل ملف الاتصال بقاعدة البيانات وراح نسميه site.inc.php

وقم بتخزينه فى مجلد الاسكربت مباشرة ولنفرض ان اسم المجلد site

$confg['db_uname'] = "user";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //your database username
$confg['db_paswd'] = "pass";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //your database password
$confg['db_host'] = "localhost";&nbsp; //usually localhost
$confg['db_dbase'] = "news";&nbsp;&nbsp;&nbsp;&nbsp; //the database name

########################################################
//create the function to log into the DB

function db_login() {

global $confg;

$link = @mysql_connect($confg['db_host'], $confg['db_uname'], $confg['db_paswd']) or die("Error connecting: " . mysql_error());

@mysql_select_db($confg['db_dbase'], $link);

}

//function for logging out from the DB

function db_logout() {

@mysql_close($link);

}

?>

طبعا ملف الاتصال عبارة عن فانكشن اتصال وفانكشن اغلاق حتى يسهل استدعائهم ب db_login() او db_logout()

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

الحين نسوى مجلد باسم admin داخل مجلد الاسكربت site

ثم راح نقوم بعمل صفحة لاضافة موضوع وراح نسميها add.php

وراح نضعها فى مجلد الادمن

وهذا هو الكود الكامل وراح اشرحه على ثلاثة اجزاء:

// form not yet submitted
// display initial form
if (!$submit)
{

?>

Add New Post<br />
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id"&nbsp; value="id">
Title:<br />
<input size="50" maxlength="60" type="text" name="title"><br />

News Content:<br />
<textarea name="content" cols="40" rows="10"> </textarea> <br />
Author:<br />
<input size="50" maxlength="250" type="text" name="author"> <br />
<input type="Submit" name="submit" value="Update">
</form>

<?

} else {

//set up error array
$err = array();
$count = 0;

//validate the user text input fields
if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }

// if no error found…
if (sizeof($err) == 0) {

db_login();&nbsp; //we defined this function in site.inc.php

// generate and execute query to insert the post
$query = "INSERT INTO news(id, title, content, author, date) VALUES(0, ‘$title’, ‘$content’, ‘$author’, NOW())";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "Update successful. <a href=’index.php’>Go back to the main menu</a>.";
} else {
// errors found
// print as list
echo "<font size=-1>The following errors were encountered: <br>";
echo "<ul>";
for ($x=0; $x<sizeof($errorList); $x++) {
echo "<li>$errorList[$x]";
}
echo "</ul></font>";
}
}
?>

شرح كود الصفحة السابق

اولا: الاتصال بالقاعدة +عمل فورم ادخال البيانات وكتابتها

// form not yet submitted
// display initial form
if (!$submit)
{

?>

Add New Post<br />
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id"&nbsp; value="id">
Title:<br />
<input size="50" maxlength="60" type="text" name="title"><br />

News Content:<br />
<textarea name="content" cols="40" rows="10"> </textarea> <br />
Author:<br />
<input size="50" maxlength="250" type="text" name="author"> <br />
<input type="Submit" name="submit" value="Update">
</form>

<?

} else { &nbsp;

والحين راح نضيف كود للتحقق من المدخلات فى الفورم

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

ولو كانت الفورمز كلها مدرج بها اى عبارة, راح نسوى حالة if بحيث لو حجم مصفوفة الخطأ =0 اى انه لا يوجد اى خطأ, راح نتصل بالقاعدة وندخل البيانات فى الفورمز فى قاعدة البيانات

نشوف الكود

//validate the user text input fields
if (!$title) { $err[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $err[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $err[$count] = "Invalid entry: author"; $count++; }

// if no error found…
if (sizeof($err) == 0) { &nbsp;

واخيرا الاتصال وتخزين البيانات فى القاعدة

// generate and execute query to insert the post
$query = "INSERT INTO news(id, title, content, author, date) VALUES(0, ‘$title’, ‘$content’, ‘$author’, NOW())";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "Update successful. <a href=’index.php’>Go back to the main menu</a>.";
} else {
// errors found
// print as list
echo "<font size=-1>The following errors were encountered: <br>";
echo "<ul>";
for ($x=0; $x<sizeof($errorList); $x++) {
echo "<li>$errorList[$x]";
}
echo "</ul></font>";
}
}
?> &nbsp;

لأحظ اننا استخدمنا دالة ادراج الخطأ errorlist

الحين محتاجين لعمل صفحة لامكانية تعديل الموضوع او حذف

راح نسوى صفحة بها لست لادراج كافة المواضيع المضافة مع اضافة خيار التعديل او الحذف
list.php

db_login();

//Generate the query so we can retrieve all titles in the DB in descending ID order

$query = "SELECT id, title FROM news ORDER BY id DESC";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if records are present
if (mysql_num_rows($result) > 0) {

while($send = mysql_fetch_object($result)) {

echo" $send->title – <a href=’ed.php?id=$send->id’>Edit this</a> – <a href-=’del.php?id=$send->id’>Delete this</a><br /><br />";
}
}
?>

شرح الكود

انكلود لملف الاتصال بالقاعدة>اتصلنا باستدعاء الفانكشن>عملنا استعلام للمدخلات المخزنة فى القاعدة>ثم حسبنا عدد الصفوف الموجودهnum_rows>ثم جلبنا البيانات المخزنة >ادرجنا الناتج على هيئة عنوان الموضوع+خيار التعديل والحذف

الحين راح نسوى صفحة لتعديل المواضيع ed.php التى راح تظهر بعد الضغط على زر edit this

<?
include("../site.inc.php");

// form not yet submitted
// display initial form with values pre-filled
if (!$submit)
{
db_login();

// generate and execute query
$query = "SELECT * FROM news WHERE id = ‘$id’";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// if a result is returned
if (mysql_num_rows($result) > 0)
{
// turn it into an object
$send = mysql_fetch_object($result);

// print form with values pre-filled
?>

Edit News Post
<form action="<? echo $PHP_SELF; ?>" method="POST">
<input type="hidden" name="id"&nbsp; value="<? echo $send->id; ?>">
Title:<br />
<input size="50" maxlength="250" type="text" name="title" value="<? echo $send->title; ?>"><br />
Content:<br />
<textarea name="content" cols="40" rows="10"><? echo $send->content; ?></textarea><br />
Author:<br />
<input size="50" maxlength="250" type="text" name="author" value="<? echo $send->author; ?>"><br />

<input type="Submit" name="submit" value="Update">
</form>

<?
}
// no result returned

else {
echo "<font size=-1>That post does not exist.</font>";
}
}
// form submitted
// start processing it
else
{

// set up error list array
$errorList = array();
$count = 0;

// validate text input fields
if (!$title) { $errorList[$count] = "Invalid entry: title"; $count++; }

if (!$content) { $errorList[$count] = "Invalid entry: content"; $count++; }

if (!$author) { $errorList[$count] = "Invalid entry: author"; $count++; }

if (sizeof($errorList) == 0) {
db_login();

// generate and execute query
$query = "UPDATE news SET title = ‘$title’, content = ‘$content’, author = ‘$author’ WHERE id = ‘$id’";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "<font size=-1>Update successful. <a href=index.php>Go back to the main menu</a>.</font>";

} else {
// errors occurred
// print as list
echo "<font size=-1>The following errors were encountered: <br>";
echo "<ul>";
for ($x=0; $x<sizeof($errorList); $x++)
{
echo "<li>$errorList[$x]";
}
echo "</ul></font>";
}
}

?>

طبعا الكود سهل عبارة عن فورزمز وبها المدخلات المخزنة بالقاعدة وجلبناها من المتغير send من mysql_fetch_array

ثم استخدمنا دالة فحص الخطأ مثل ما شرحنا السابق للتأكد من خلو اى خطأ

ثم استخدمنا امر تحديث البيانات update

الحين راح نسوى صفحة الحذف ونسميها del.php

<?
include("../site.inc.php");

db_login();

// generate and execute query
$query = "DELETE FROM news WHERE id = ‘$id’";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());

// print result
echo "<font size=-1>Deletion successful. <a href=index.php>Go back to the main menu</a>.</font>";

?>

بسيط استخدمنا امر delete

الحين يتبقى نسوى صفحة اندكس بسيطة

ولنفرض انها تكون لصفحة اضافة موضوع

<?php

include("admin/add.php/");

?>

الحين تمام بعد ما انتهينا من السابق

راح نشرح بنية الاسكربت

سوينا ملف الاسكربت واسمه site

بداخله ملف اسمه site.inc.php و ملف index.php ومجلد admin
بداخل مجلد admin توجد الملفات الاتية:

add.php
del.php
ed.php
list.php

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

الخطوه الأولي: قم بتحميل مصدر الكود من هنــــــا

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

الخطوة 3 — استيراد الملفات الضرورية
ضمن ملف HTML الخاص بك (أو أي صفحة هي المسؤولة عن عرض وجهة نظركم)، واستيراد كل من الملفات وprettify.css prettify.js.

الخطوه الثالثه: قم باستيراد الملفات الضروريه
ضمن ملف HTML الخاص بك وقم باستيراد كل الملفات من prettify.js و prettify.css

[html]

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf&mdash;8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>

<script src="highlighter/prettify.js"></script>

</body>
</html>
[/html]

والأن لنقوم بتميز بناء الجمله عن طريق اضافه :

الخطوه الرابعه : قم باستدعاء الداله prettyPrint() :

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>

<pre>
(function() {
var jsSyntaxHighlighting = ‘rocks’;
})();
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>
[/html]

والأن قم باضافه أنماطك الخاصه علي التصميم:

الفيديو اليوم سوف يقوم بعمل اسلوب عرض أنيق لمحتوي موقعك او لعناصر معينه في الموقع تقوم بتسليط الضوء عليها باستخدام CSS :

[html]

view plaincopy to clipboardprint?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
figure { background: #e3e3e3; display: block; float: left;}
#zoom {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}

/* Compliance = IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoom:target {
width: 400px;
}
</style>
</head>
<body>
<h1> "Click" Effect with CSS </h1>
<figure>
<img id="zoom" src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="EE" />
<figcaption>
<ul>
<li>
<a href="#zoom">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>
</body>
</html>
[/html] ]]> https://portal.fwasl.com/%d8%b9%d9%85%d9%84-%d8%aa%d9%83%d8%a8%d9%8a%d8%b1-%d9%88%d8%aa%d8%b5%d8%ba%d9%8a%d8%b1-%d9%84%d8%b9%d9%86%d8%b5%d8%b1-%d9%85%d8%b9%d9%8a%d9%86-%d8%a8%d8%a7%d9%84%d9%86%d9%82%d8%b1/feed/ 1 https://portal.fwasl.com/%d8%a3%d8%b9%d9%85%d8%af%d9%87-%d9%85%d8%aa%d9%81%d8%b1%d9%82%d9%87-css/ https://portal.fwasl.com/%d8%a3%d8%b9%d9%85%d8%af%d9%87-%d9%85%d8%aa%d9%81%d8%b1%d9%82%d9%87-css/#comments Sun, 08 Jan 2012 14:37:34 +0000 http://www.portal.fwasl.com/?p=7641 قامت CSS3 بتقديم هذا النوع من الأعمده وكانت نادرا ما تستخدم ولكن الأن اتسع نطاق استخدامها فهي حاليا المعتمده بجميع مستعرضات الموزيلا ولكن لا يوجد دعم لها في الفايرفوكس ولكن ساريكم الأن فيديو سريع يقوم بتعليمها لك

-moz-column-count: 3;
-moz-column-gap: 10px;

column-count: 3;
column-gap: 10px;
}
[/html]

column-count: عدد المطلوب من الأعمدة للعنصر.
column-gap:الحشو بين كل عمود.
column-rule: يمكن استخدامها لتحديد الحدود ، ومقسم لكل عمود : عمود القاعدة.
column-width: يستخدم لدولة على وجه التحديد عرض كل عمود.

يرجى ملاحظة أنه يجب علينا اختصار كل خاصيه مع webkit أو moz، وفقا لذلك، لذا : : -webkit-column-count.
هل تستخدم CSS columns في موقعك ؟ اذا كانت الإجابه لا,فلم لا ؟!!

1- أنشي مدونه بالموقع Make Blog :
حيث وجود مدونه بموقع العميل يكتب فيها بصفه دوريه قدر الأمكان ، ومن هنا تحصل هذه المدونه علي محتوي جديد وحبذا أن يكون متميز وفريد وبهذا ستحقق من هذه المدونه الكثير من الزيارات والترافيك من خلال الزوار .
وكون المدونة متاحة للزوار سيكون هناك مجال لمشاركه هذه المواضيع عبر المواقع الأجتماعيه مثل الفيس بوك وتويتر …إلخ ، وأيضا التعليقات والتفاعل مع موقعك ، وهذه الأشياء تساهم بقوة في شعبيه موقعك ومع مرور الوقت ستسع قاعدة بيانات مدونتك وتجد أن لديك محتوي قيم يستقطب الزوار عبر محركات البحث مما يحقق بالفائدة الكاملة لموقعك ككل .

2- أشترك بخدمه : Google Analytics :
هذه الخدمة أصبحت شائعة الاستخدام لدي مجتمع الويب ماسترز حيث تتيح لهم إحصاءات حقيقة ودقيقه حول نشاط الموقع اليومي أو الشهري من حيث معدل الزيارات ، المحتوي الأكثر زيارة ، معدل مشاهدة الصفحات وأيضا فترة بقاء الزائر بموقعك ورسوم بيانيه مكثفه لتبسيط الأمور Charts والكثير من المزايا الموجودة بهذه الخدمة المجانية من جوجل ، ومن خلالها تتعقب الزوار وتعرف اهتمامهم اليومي ومصادر ترافيك موقعك مثلا الزوار من أين جاءوا ، والكلمات أو المحتوي الذي يبحثون عنه .
ويمكنك من كل هذا استقطاب الزوار والاهتمام بموقعك ودفعه نحو الأفضل من خلال هذه الإحصاءات .

3- قلل من الأكواد المكتوبة بموقعك Code Mess :
أي موقع سواء ثابت أو ديناميك مبرمج من خلال لغه برمجه معينه يتم وضعه علي الويب ليظهر لنا بشكل نتائج كصفحات HTML وهذه الأكواد عاده ببعض المواقع تكون كبيرة ومتضخمة ومتشعبة في حالة كونك لا تستخدم تقنيات التكويد الحديثة مثل Xhtml,css ، وأيضا كثره استخدام الجافا سكربيت وغيرها من الكماليات التي يتفنن بعض أصحاب المواقع العربية بوضعها وهذه الأكواد لها نتائج سلبية علي موقعك في محركات البحث .

عناكب محركات البحث Spiders همها الأول هو المحتوي ، والمحتوي هذا يجب أن يكون فريد ومكتوب بطريقه دلالية Semantic ومعبر ومن خلال هذا ستحصل علي رتبه أعلي بمحركات البحث ، ومن ثم ستكسب شعبيه أكبر لموقعك ولكن مع فرط الاستخدام بالأكواد سيتضخم الكود المنتج من موقعك مما يعيق عناكب محركات البحث ، وأيضا هذا له وجه أخر سيئ وهو بطء تصفح موقعك Loading Time وينعكس علي الزوار ، لذا تجنب استخدام أكواد الجافا سكربيت المفرط وحاول تستخدم تقنيات الويب الدلالية الحديثة Tabless Semantic Xhtml,css وأيضا عند استخدام أي تقنيه من Java script , Css حاول تضعها بملف خارجي External حتى تتخطها محركات البحث وتصل بشكل أسرع إلي المحتوي وذلك بالنهاية هو الأهم لهذه العناكب .

4- أجعل محتوي موقعك مميز وفريد Unique Content :
لعل كثير من يسمع عن هذه القاعدة وهي أن المحتوي هو الملك ويجب أن يكون المحتوي جديد ومميز مثلا كونك تكتب بالموقع عن تقنيه البرمجه php كمثال يجب أن تكتب شيئ جديد ومميز ولا أقول أن تخترع شيئ جديد ولكن حاول حتى بأسلوب صياغة محتوي الموقع والوصف أن تستخدم مفردات جديد وبالنهاية كل الطرق تؤدي لروما ، ومع هذا التميز بالمحتوي سيحصل موقعك علي شعبيه أكثر بمحركات البحث وحاول أيضا أن يكون المحتوي الداخلي لموقعك مثلا كصفحـات أن يكون مميز وهذا له انعكاس أيحابي ممتاز علي شعبيه موقعك بمحركات البحث وتجنب تكرار المحتوي ونقل المحتوي كنسخ ولصق من المواقع الأخرى لأنه هذا له أثر سلبي علي موقعك ، وسيتم تجاهله من قبل محركات البحث ويعاقب من قبل جوجل .. لأن محركات البحث لم تعاد بسذاجة الماضي وأصبحت تستخدم خوارزميات ذكيه تهدف إلي معرفه كون هذا المحتوي فريد أو مستهلك .
الجانب الأخر إذا أردت أن تنقل أي محتوي من موقع أخر حاول أن تنقله بشكل مختلف وتستخدم مفردات مختلفه وهذا الأمر سيكون الحل السحري لعدم معاقبتك من قبل جوجل .

5- استخدام حقل الوصف Meta Tag :
الجميع يستخدم محركات البحث وبالأخص جوجل وإذا افترضت أنك قمت بالبحث عن موقع ما سيظهر لك اسم الموقع والرابط ووصف مصغر له ، وهذا هو حقل الوصف Meta Description التي يتم إضافته من قبل القائمين علي الموقع ، لذا احرص علي استخدام وصف مميز ومعبر عن موقعك ويجب إلا يزيد عن 160 حرف مع المسافات ولهذا استخدم وصف معبر ومميز للحصول علي اهتمام الزوار وحثهم علي زيارة موقعك

6- أحذف الكلمات المكررة بموقعك Repeated words :
دائما أصحاب الموقع يلجئون لبعض الحيل الغريبة ويعتقدون أنها بمصلحه الموقع من حيث تكرار بعض الكلمات أو الجمل بموقعك والتركيز عليها ، ولكن محركات البحث والحديث هنا عن جوجل بالأخص أنه لا يحب تكرار الكلمات ولا المحتوي المتكرر بشكل عام علي مستوي الويب ولا موقعك بشكل أدق ، لذا تجنب قدر الأمكان تكرار الكلمات وأبحث دائما عن التميز بمحتوي موقعك من حيث كل صفحه وبهذا الأمر ستنال شعبيه أكبر عبر محركات البحث .

7- أضف شريط تنقل لموقعك عبر الهيدر أو الفوتر Navigation Bar :
كثير من التقنيات الحديث لصناعه الويب كمثال الفلاش يوفر بيئة غنية ورائعة للتصميم ولكنه علي الجانب الأخر مضر بشكل كبير لمحركات البحث ولنفرض أنك قمت بتصميم شريط التنقل بالهيدر Navigation Menu بموقعك بشكل فلاشي بهذا الأمر أن لم تتيح لعناكب محركات البحث معرفه هذا الأمر وبالتالي ستتجاهله ولعلاج هذا الأمر يمكنك وضع شريط أخر كنصوص متشعبه Links في الفوتر ويجب عليك أن تضع وصف لهذه الروابط النصية وبهذا تخبر عناكب البحث عن هذه الروابط والتي ستفيدك بشكل قوي في SEO .

8- ضع الرئيسيات في صفحات مستقلة Main Content :
الرئيسيات هي المحتويات الأهم والأكثر تعبيراً حول موقعك ولنفترض موقعك متخصص بصناعه السيراميك أو الأقمشة فبالتالي لابد أنك تقدم مثلا خدمات الغزل والنسيج ..إلخ
لذا احرص علي وضع هذه الخدمات بصفحه مستقلة لكل خدمه وأن تضع نص متميز لشرح هذه الخدمة التي تقدمها ، ومن هذا المنطلق ستجد أن محركات البحث ستقوم بأرشفة هذا المحتوي وتحصل علي شعبيه أكثر بمحركات البحث أي باختصار .. حاول أن تخصص مساحات كبيرة لخدماتك الرئيسيه عبر الموقع ولا تضعها كلها بصفحه واحده لأن هذا له أثر أيحابي عبر محركات البحث .

9- استخدام عنوان مميز ومعبر لكل صفحه Unique & descriptive Title :
العنوان هو أول شيئ ينظر له المستخدم أثناء تحميل صفحه معينه بموقعك .. لذا احرص دائما علي استخدام عنوان الصفحه الذي يظهر بالأعلى في المتصفح بشكل صحيح ومن خلال وصف مميز لموقعك ووضع كلمات مفتاحيه معبره ، وحبذا لو تضع أيضا اسم شركتك أو الاسم الموقع ولكن كل هذا في ظل 60 حرف مع المسافات لذا احرص علي تميز عنوان صفحتك وأن تكون معبره قدر الأمكان .

وبالنهاية هذه 9 قواعد مهمة لمصمم الويب لكي يضعها بالحسبان أثناء تصميم أي موقع لعميل ومن خل هذا سيحصل هذا الموقع علي شعبيه ممتازة ويحقق مبادئ مهمة في مجال SEO .