دروس بالفيديو لتعلم الفلاش من البداية الى الاحتراف
ببرنامج Adobe Flash Professional
مقدمة دورة ActionScript 3.0
تابع باقي الدروس من هنــــــــا
بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
أحيانًا كثيرة نريد حفظ أكثر من صورة خلال تصفح الإنترنت وغالبًا نستخدم الطريقة التقليدية
( كليك يمين على الصورة >> Save as image).
ولكن هذه الطريقة تكون مجهدة فى حالة وجود أكثر من صورة أو فى حالة إذا كنا نريد الإحتفاظ بصور موقع بالكامل بما فيه الخلفيات.
لهذا فقد وفر لنا متصفح الفايرفوكس أكثرمن إضافة لحفظ الصور تمكن المستخدم من حفظ أكثر من صورة فى آن واحد بضغطة واحدة سوف أشرح كل إضافة ومميزاتها.
بالتوجه إلى هذا الرابط يمكن تحميل الإضافة وتثبيتها على متصفح الفايرفوكس ثم إعادة تشغيل المتصفح (Restart)
ولحفظ مجموعة من الصور فى صفحة الويب إضغط كليك يمين على هذه الصفحة وإختيار
Pick images من القائمة.
ستظهر نافذة بها جميع الصور التى بالصفحة قم بتحديد الصور المراد الإحتفاظ بها وتحديد فولدر لحفظها به هكذا
وهذه الأداة لها مميزات أكثر من رائعة فهى ليست فقط تمكنك من حفظ أكثر من صورة
ولكن ممكن أن تحفظ صور موقع بالكامل بالخلفيات.
وتعتبر هذه الأداة مفيدة لأصحاب المواقع حيث تمكن صاحب الموقع بالإحتفاظ بصور قالب الموقع أو المدونة بألبوم بيكاسا
أو جوجل درايف حتى لا تفقد بمرور الوقت .
من مميزات هذه الإضافة أيضا إنه بالإمكان تحديد كل الروابط الموجودة بصفحة الويب وفتحها مرة واحدة.
يمكن أيضًا الحصول على الروابط الحالية لكل الصور.
إمكانية تحديد إمتدادات معينة للصور التى نريد الإحتفاظ بها
أيضا يمكن فلترة الصور بصفحة الويب على حسب حجم وأبعاد الصور.
لضبط إعدادات الأداة إضغط كليك يمين ثم option
يمكن تحديد الأجزاء التى تريد حفظها فإن أردت مثلا حفظ صور موقع بالكامل شامل الخلفيات يمكن ضبط ذلك بالإعدادات عن طريق الذهاب للتبويب General ثم تنشيط Save background images
منقول من مدونة كن داعيا للخير
إقرأ المزيد http://www.condaianllkhir.com/2013/01/save-image-firefox.html#ixzz2jmzJ27c2
بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
هذه مجموعة هامة من أكواد الجافاسكريبت و html لمصممى المواقع والمدونات
ويمكن أيضا إضافتها لصفحات الفيس بوك
أولاً :أكواد النصوص
كود النص العريض<b>اكتب النص هنا </b>
كود تحديد اتجاه النص
<p dir="rtl" align="right">اكتب هنا النص الذي سيظهر من اليمين إلى اليسار</p>
كود التحكم فى حجم الخط ولونه ونوعه
<CENTER><FONT COLOR="#كود اللون المرغوب" FACE="اسم الخط المرغوب" SIZE="4">اكتب هنا ما تريد</FONT></CENTER>
أكواد الألوان موجودة هـــــــــنـــــاااااااااا
كود نص يتحرك لأعلى
<marquee behavior="scroll" direction="up" height="140" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()"> <center><br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 1 <br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 2 <br>مدونة كن داعيا للخير 3 <br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 4 <br>......</center> </marquee>
كود نص يتمدد وينكمش
<table align="center" width="98%"><tr><td>
<HTML>
<HEAD>
<script language="JavaScript">
var sizes = new Array("0px", "1px", "2px", "3px", "4px");
sizes.pos = 0;
function elast() {
var el = document.all.elastic;
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 4) || (0 == sizes.pos))
el.direction *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
setInterval('elast()', 100)
</script>
</HEAD>
<BODY>
<h1 align="center" id="elastic"><font size="3">مدونة كن داعيا للخير</font></hi>
</BODY>
</HTML></td></tr></table>
كود نص متأرجح يميناً ويسارا
<marquee scrolldelay="60" scrollamount="3" width="400" direction="left" behavior="alternate" bgcolor="#FF0000">مدونة كن داعيا للخير</marquee>
كود إظهار نصوص بها روابط بالتناوب
<div style="position:relative;center:0px;top:0px">
<span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
</div>
<script type="text/javascript">
var tickercontents=new Array()
tickercontents[0]='مدونة كن داعيا للخير <a href="http://conda3ianllkhir.blogspot.com/">text</a>'
tickercontents[1]='اكتب هنا نص عادي رقم 1 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'
tickercontents[2]='اكتب هنا نص عادي رقم 2 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'
tickercontents[3]='اكتب هنا نص عادي رقم 0 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'
var tickdelay=3000 //delay btw messages
var highlightspeed=10 //10 pixels at a time.
////Do not edit pass this line////////////////
var currentmessage=0
var clipwidth=0
function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
window.onload=start_ticking
</script>
كود نص متحرك
<div align="center"> <table border="0" width="100%" style="border-collapse: collapse"> <tr><td class="alt1" colspan="3"><b> <font size="4" color="000000"> <marquee direction="right" width="100%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5">مدونة كن داعيا للخير </marquee></font></b></td> </tr></table></div>
كود شريط متحرك مع روابط
<marquee direction="right" width="100%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5"> <a href="اكتب هنا عنوان الموقع">اكتب هنا اسم الموقع</a> ------ </marquee>
كود نص يضئ بالتدريج
<h2>
<script language="JavaScript1.2">
var message="مدونة كن داعيا للخير"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100 //in milliseconds
///No need to edit below this line/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</h2>
</font></p>
كود نص يضئ بألوان مختلفة
<b>
<font size="5">
<script>
// ********** عدل هنا
var text="مدونة كن داعيا للخير"
var speed=80 // سرعه تغير الالوان
// ********** لا تعدل شي هنا
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</font></b>
</font></p>
ثانياً : أكواد الصور
كود إضافة صورة
<img src="رابط الصورة" >
كود صورة مع رابط
<CENTER><a href="الرابط"> <img src="رابط الصورة" width="30" height="80" border="2" align=" middle" /></a></CENTER>
كود تغيير الصور تلقائيا
<center><style type="text/css">
#pscroller1{
font-size: 14px;
font-family: Tahoma;
width: 250px;
height: 250px;
border: 0px solid black;
padding: 5px;
background-color: white;
}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]='<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTX_E1nRPNx8Kg7YrrdOh5U-a8irJutSu5LLJoxfaxiodLr2NkZ6UxqNL_9Gp93A34p-0avqWHca_pDHOn6jTKzQCj10hcBAEaYZsIOeVFiyCHwGH_xzVLuIXUQu_H9EyqHdGv5wT-2I6B/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif">'
pausecontent[1]='<img border="0" src="رابط الصورة 2">'
pausecontent[2]='<img border="0" src="رابط الصورة 3">'
pausecontent[3]='<img border="0" src="رابط الصورة 1">'
</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
</script>
</center>
كود صور متحركة
<img
src="رابط الصورة المتحركة"
onload="NcodeImageResizer.createOn(this);" border="0"
originalWidth="250" originalHeight="270">
يمكن التحكم فى طول وعرض الصور بتغيير قيمها يدويا وتغيير إتجاه الشريط بتغيير كلمة up بالكود إلى down أو right أو lift
كود شريط الصور المتحرك مع روابط
<center/>
<div class="textwidget"><marquee direction="up" width="115" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="125" align="left"><br /> <a href="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="مدونة كن داعيا للخير" width="115" src="http://img12.imageshack.us/img12/914/75539242.png" height="115" /></a>
<br/>
<a href="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="مدونة كن داعيا للخير" width="115" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTX_E1nRPNx8Kg7YrrdOh5U-a8irJutSu5LLJoxfaxiodLr2NkZ6UxqNL_9Gp93A34p-0avqWHca_pDHOn6jTKzQCj10hcBAEaYZsIOeVFiyCHwGH_xzVLuIXUQu_H9EyqHdGv5wT-2I6B/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif"height="115" /></a>
<br/>
<a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة" height="115" /></a>
<br/>
<a href="
ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="
رابط الصورة"height="115" /></a>
<br/>
<a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورةرابط الصورة" height="115" /></a>
<br/>
<a href="ضع الرابط هنا/search?updated-max=2011-07-26T10%3A47%3A00-07%3A00&max-results=7
" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة
"height="115" /></a>
" width="115" src="
<p/></p></marquee></div></center>
ثالثاً : أكواد الروابط
كود إضافة رابط
<a href="ضع الرابط هنا">Nom du site</a>
فتح الرابط في نافذة جديدة
<a href="ضع الرابط هنا" target="_blank">Nom du site</a>
فتح الرابط في نفس النافذة
<a href="ضع الرابط هنا" target="_self">Nom du site</a>
لون الرابط
<a style="color:اسم اللون باللغة الانجليزية;" href="رابط الموقع">Nom du site</a>
رابعا:أكواد إسلامية
كود القرآن الكريم
خامسا:أكواد إخبارية
سادسا:سكربتات متنوعة
كود القرآن الكريم
<center><iframe align="center" allowtransparency="1" frameborder="0" height="334" id="IW_frame_1438" scrolling="no" src="http://www.tvquran.com/add/index.htm" width="302"></iframe></center></div>
شريط الحديث والدعاء
<iframe align="center" src="http://www.wathakker.net/outdoor-strip-marquee.html" frameborder="0" allowtransparency="1" scrolling="no" width="474" height="41" vspace="0"></iframe>
خامسا:أكواد إخبارية
أخبار BBC
<iframe name="I1" marginwidth="1" marginheight="1" height="30" width="90%" scrolling="no" border="0" frameborder="0" src="http://news.bbc.co.uk/hi/arabic/news/ticker.stm"></iframe>
شريط قناة الجزيرة
شريط العربية نت
<iframe frameborder="0" height="50" marginheight="0" marginwidth="0" scrolling="no" src="http://www.faisal1.com/News_Grab/jazeera.php" width="100%"></iframe>
شريط العربية نت
<div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div>
كود وضع الفلاش
(يمكن التحكم فى الطول والعرض بتغيير قيم width,height)
<object width="150" height="340"> <param value="MYFLASH.swf" name="movie"/> <embed width="150" src="URL OF MYFLASH.swf" height="340"> </embed> </object>
كود إضافة صفحة موقع داخل صفحة موقعك
<div dir="rtl" style="text-align: right;" trbidi="on"> <iframe height="500" src="رابط الموقع" width="600"></iframe></div> </div>
سكربت طباعة الصفحة
<a href="javascript:window.print()">اطبع هذه الصفحة</a>
سكريبت آلة حاسبة
<SCRIPT>
function compute(obj)
{obj.expr.value = eval(obj.expr.value)}
var one = '1'
var two = '2'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string)
{obj.expr.value += string}
function clear(obj)
{obj.expr.value = ''}
</SCRIPT>
<FONT COLOR="#CC0000" face="Arial"><P><B>الألة الحاسبة
الإلكترونية</B></P></FONT>
<FORM name="calc">
<DIV align="center">
<TABLE border="1" bgcolor="#0033CC">
<TR>
<TD colSpan="4"><INPUT size=30
name=expr action="compute(this.form)"></TD></TR>
<TR>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, seven)" type=button value=" 7 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, eight)" type=button value=" 8 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, nine)" type=button value=" 9 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, divide)" type=button value=" / "></P></TD></TR>
<TR>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, four)" type=button value=" 4 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, five)" type=button value=" 5 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, six)" type=button value=" 6 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, multiply)" type=button value=" * "></P></TD></TR>
<TR>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, one)" type=button value=" 1 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, two)" type=button value=" 2 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, three)" type=button value=" 3 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, minus)" type=button value=" - "></P></TD></TR>
<TR>
<TD bgColor="#000033" colSpan=2>
<P><INPUT onclick="enter(this.form, zero)" type=button value=" 0 "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, decimal)" type=button value=" . "></P></TD>
<TD bgColor="#000033">
<P><INPUT onclick="enter(this.form, plus)" type=button value=" + "></P></TD></TR>
<TR>
<TD bgColor="#000033" colSpan=2>
<P><INPUT onclick=compute(this.form) type=button value=" = "></P></TD>
<TD bgColor="#000033" colSpan=2>
<P><INPUT onclick=clear(this.form) type=reset value=AC>
</P></TD></TR></TABLE></DIV></FORM>
<P align="center">
<FONT face="Courier , New tahoma , erdana, arial, helveticav" size="2"
color="#0000FF"><B><A target="_blank"
لمن يريد ان يكون مبرمجا
ربما قرأت العشرات من المقالات حول هذا العنوان ولهذه اللحظة لاتزال متوترا حول "موضوع البرمجة" .
حسنا انك شخص هاوي تريد تعلم البرمجة, متحير حول نقطة البداية, نوع اللغة التي ستبدأ بها....
لنتطرق اولا الى فوائد كونك مبرمجا قبل كل شيء فلعل هذا سيكون حافزا لدخولك هذا العالم الواسع.
مافائدة البرمجة؟
بغض النظر عن اللغة التي ستتعلمها او الطريقة او المكان او الغاية.. – بشكل عام – هناك عدة فوائد لكونك مبرمج:
1- اضافة لكون البرمجه تقوي مهارات الرياضيات لديك فهي تعتبر عامل مهم لترقيتك في وظيفتك ان كنت تعمل في اختصاص يهتم بتكنولوجيا المعلومات او البرامجيات على حد سواء, حيث يمكنك خوض الامتحانات المخصصة للغة التي تتقنها وحصولك على الشهادة من الشركة الام يعتبر رصيدا وظيفيا جيدا.
2- ان لم تكن موظف وبغض النظر عن عملك فان المبرمجين يمكنهم العمل من خلال الويب بما يسمى Freelancing حيث هناك مواقع كثيره يمكن للمبرمجين الاشتراك بها وتقديم خدماتهم بمقابل مادي.
3- نظرا لتوسع الويب بشكل خاص وتطور منصات العمل البرمجي وتعدد البرامجيات وتخصصها ادى الى زيادة الطلب على المبرمجين من مختلف المستويات حيث يعمل المبرمجون في الشركات بنظام الساعات حيث تخصص لكل ساعة عمل مبلغ معين, لذا فأن مستقبل البرمجة مستقبل واعد جدا.
4- لست ملزما بالارتباط بشركة او جهة ما لتقدم خدماتك فيمكنك تطوير برامج خاصة بك وعرضها على الزبائن بشكل فردي او من خلال مجموعات.
5- كما يمكنك التباهي امام اصدقائك بكونك تعلم لغة لايعلمها اغلب سكان الارض! (ان كان هذا يشعرك بتحسن)
ماذا سافعل بالضبط؟
ان اختيارك البرمجة تحديدا لايقتضي بكتابة الاكواد فقط. عندما تتعلم مبادئ البرمجة للغة ما ستتعلم انشاء هيكلية البرامج التي ستقوم ببرمجتها, لو فرضنا ان البرنامج يتكون من جزئين معنويين (الواجهة , والهيكل) ولنفرض ان الواجهة هي كل ماتراه من نصوص ورسوم وقوائم في برنامج ما والهيكل هو الجزء البرمجي المخفي الذي يعمل خلف الواجهة لتنفيذ الايعازات التي تقوم بفعلها.
كمبرمج سينصب اهتمامك بالجزء الهيكلي, لكن من خلال تعلمك لايمكن توفير مبرمج متفرغ ليصمم لك البرامج "الواجهة" اذن لابد لك من انشاءها بنفسك حيث الهيكل والواجهة جزيئن لايتجزءان احدهما يكمل الاخر, فعند تعلمك لغة C++ مثلا فأنك تتعلم تصميم وبرمجة البرامج لكن ستتركز الدروس على الناحية البرمجية اكثر من التصميمية.
اعتقد في هذه النقطه قد تكونت لديك فكرة شامله...
ما اللغة الي يجب ان أبدأ بها؟
ان لغات البرمجة تختلف كبصمات الابهام لدى البشر وأن تشابهت في بعض الصفات, فلكل لغة اسم وطريقة للكتابة وخصائص معينه وفوائد تختلف عن اللغة الاخرى مثلا لغة البرمجة PHP لغة سهل بسيطة وانسيابيه تستعمل لبرمجة صفحات الويب الديناميكية وتطبيقات الويب وتتميز بسهولتها وكونها مصدر مفتوح بخلاف ذلك فأن لغة C# مثلا قد تكون معقده قليلا لكنها لغة متينه وقوية وذات استعمالات واسعه ويمكن انشاء البرامج المكتبية من خلال هذه اللغة ولايمكن انشاء صفحات الويب... وهكذا
لذا.. إن كنت محب لتطبيقات الويب والمواقع الديناميكية مثل موقع الفيس بوك او تويتر فلعلك تبدا بلغة مخصصة لبرمجة صفحات الويب مثل PHP اوColdfusion او ASP او Perl أو غيرها من اللغات.
يمكنك العثور على تفاصيل كل لغة والفرق بينها على الرابط http://www.objs.com/survey/lang.htm
اما اذا كانت البرامج المكتبيه او الالعاب تلفت انتباهك فيمكنك البدء بتعلم لغة برمجة البرامج مثل C++ أو C أو Java أو Visual basic أو غيرها
يمكنك العثور على تفاصيل اكثر حول لغات البرمجة والفرق بينها والافضل منها على
لك حرية اختيار اللغة التي تبدأ بها لكن كأختيار عالمي يفضل الناس لغة PHP للويب لسهولتها ولغة C++ للبرامج
قبل ان تبدأ :
1- البرمجة تحتاج الى شخص صبور, اعتقد هذه الكلمة المناسبة تماما, فالعديد من الاشخاص تركوا البرمجة واصبحت لهم ككابوس, البرمجة كائن منطقي ان كانت طريقتك صحيحه وخاليه من الاخطاء يصمت وان كنت ترتكب الاخطاء يصيح في وجهك لذا تحل بالصبر فكأي مبرمج مبتدء سوف ترتكب الاخطاء ولن يعمل برنامج من اول مره وستصاب بالملل, حاول مرة ومرة ثانية وثالثة الى ان يعمل البرنامج بنجاح حينها تشعر بالابتهاج.
2- طبق الدروس التي تتعلمها بالتوالي, كل درس جديد تتعلمه قم بتطبيقه بالحاسوب اكثر من مره لان الاكواد البرمجية هيه باللغة الانجليزية وتكون عادة اختصارات ورموز سهلة النسيان مارس التطبيقات العملية في اوانها ولا تحاول تعلم اكثر من درس في الوقت المخصص لدرس واحد.
3- عادة تكون هنالك اسئلة في نهاية كل فصل ( ان لم تكن هناك فحاول الحصول على اسئلة حول الموضوع من الانترنت) هذه الاسئله تضمن فهمك للمادة بشكل جيد في حال استطاعتك حلها جميعها وان كان هناك اترباك في نقطة ما قم بالعوده للموضوع المخصص وحاول فهم الخطأ.
4- كما قلت ان البرمجة سهلة النسيان لذا حتى في حال انتهاءك من تعلم لغة ما استمر بالممارسه التطبيقية وحاول تعلم التقنيات الجديدة ومتابعة تحديثات اللغة التي تصدر من موقع اللغة نفسها .
5- ان تعلمك لغة ما يسهل لك الطريق بشكل كبير لتعلم لغة اخرى فاللغات متشابهه الى حد ما بطريقة كتابتها وخواصها.
6- ان لغة Java هي ليست لغة JavaScript كما هو Ham ليس hamster!
المتغيراتبعيدا ً عن البرمجة فإن المتغيرات هي حاويات خزن ضخمة يمكنها خزن أي شيء ومهما كان حجمه حتى لو كان القمر "كيو" بكامله, إذن وظيفتها الأساسية هي خزن القيم سواء بصورة مؤقتة أم دائمية والمتغيرات في الواقع مرنة جدا ً حيث يمكنك التعامل مع القيم التي تحملها المتغيرات وتعديلها والإضافة إليها وطباعتها أو انجاز العمليات الرياضية عليها, بشكل عام, المتغيرات تتكون من عنصرين, اسم المتغير و القيمة المسندة.
يمكن أن لا يحتوي المتغير على أي قيمة لكن ستبقى القيمة موجودة وهي فارغة, كما أن كل متغير يجب أن يحمل اسما ً وفي PHP تسمية المتغيرات تخضع لشروط محددة وهي يجب أن تبدأ بعلامة الدولار دائما ً $ أما عن أسماء المتغيرات فيجب أن تبدأ بحرف أو _ ثم يليه حرف ولا يمكن استخدام الرموز مثل * أو / أو غيرها في تسمية المتغيرات وهذه بعض الأمثلة عن المتغيرات:
$_pet;
$my_name;
$number;
حيث جميع المتغيرات يجب أن تبدأ بعلامة الدولار وتنتهي بالفارزة المنقوطة, وان المتغيرات في الحقيقة حساسة لحالة الأحرف حيث أن هذه المتغيرات آلاتية جميعها متغيرات مختلفة تماما في وجهة نظر PHP :
$NAME;
$Name;
$name;
إن ما أنشأناه هنا هو متغيرات لا تحمل أي قيمة وللاستفادة من ميزة المتغيرات يمكننا إسناد القيم المختلفة لها والتعامل معها في وقت لاحق.
ملاحظة :
طالما يبدو "كيو" كأسم شخصية كارتونية, في الواقع أن كيو هو قمر صناعي غايته ليست التقاط الإشارة وإعادة بثها وإنما هو مشروع من قبل اليونسكو لحمل رسائل يكتبها أي شخص في العالم وخزنها على شكل أقراص مدمجة ثم سينطلق بها القمر في نهاية العام 2010-2011 إلى الفضاء وسيدور حول مدار الأرض لعدة عقود ثم يهبط بعد ذلك لينقل صورة إلى عالم الغد عن عالم اليوم تتضمن أفكار وقيم وحضارات اليوم. www.keo.org
لإسناد القيم إلى المتغيرات نستخدم إشارة = بعد اسم المتغير وقبل الفارزة المنقوطة:
$my_id=411;
حيث أن المتغير $my_id الآن أصبح لديه قيمة عددية وهي 411.
لإسناد قيمة عددية مهما كانت كبيرة نستخدم نفس الطريقة وهنا تتخلص PHP من عقدة نفسية لدى اغلب المبرمجين وهي "إدارة الذواكر" حيث في لغة PHP لست مضطرا لتحديد حجم المتغير كما في اللغات الأخرى .
لإسناد النصوص إلى المتغيرات سنستخدم علامات الاقتباس المزدوجة أو المفردة كما في المثال التالي:
$my_name="ali";
$my_name='ali';
ولفهم ميزة المتغيرات الفعلية لنشاهد هذا المثال:
1.<?php
2.$id=0;
3.$age="hello";
4.if (id==0)
5.{
6.$age="welcome admin";
7.}
8.?>
(لقد استخدمت الأرقام والنقاط التي تليها للتوضيح فقط ولا يتم كتابتها في البرمجة)
في السطر الأول يبدأ وسم PHP وينتهي بالسطر 8
في السطر الثاني أنشأنا متغير يحمل الرقم 0 وفي السطر الثالث أنشأنا متغير يحمل نص وهو hello .
في السطر الرابع أنشأنا جملة شرطية تختبر ما إذا كان المتغير id يساوي 0 (وهو كذلك) فيتم تغيير قيمة المتغير age من القيمة hello إلى welcome admin .
هنا تظهر مرونة المتغيرات في إمكانية تغيير قيمها عدة مرات ومن نصوص إلى أرقام أو بالعكس وهنا حقا ً طرائق واسعة للتعامل مع المتغيرات.
لا تهتم بشأن الأسطر 4-7 إن كنت لا تعرفها فهي مواضيع لم يتم شرحها بعد.
حسنا ً لقد تمكنا من تغيير قيمة المتغير إلى قيمة أخرى ولكن ماذا لو أردنا إضافة قيمة إلى قيمة أخرى؟ طبعا ً يمكنك تقنيا ً كتابة الكود التالي من خلال ما تعلمته:
1.<?php
2.$id=0;
3.$age="hello";
4.if (id==0)
5.{
6.$age="hello admin";
7.}
8.?>
لكن هناك طريقة أكثر منطقية من خلال إضافة (.) النقطة وتتم إما نضيف متغير يحمل نص أو عدد إلى متغير آخر أو نضيف قيمة إلى قيمة أخرى داخل المتغير الواحد, قم بفتح برنامج محرر النصوص لديك واكتب التالي ولا تكتب الأرقام والنقاط التي تليها:
1.<?php
2.$first_name="Mike";
3.$last_name="Shinoda";
4.$total_name=$first_name." ".$last_name;
5.echo $total_name;
6.?>
ثم اخزن الملف بأسم (name.php) داخل المسار C:\xampp\htdocs
في السطر الثاني تم إنشاء متغير يحمل قيمة نصية ثم في السطر الثالث متغير يحمل قيمة أخرى وفي السطر الرابع أنشانا متغير جديد يدمج المتغير الأول مع المتغير الثاني أي يدمج الاسم Mike مع الاسم Shinoda وكما تلاحظ تم وضع علامتي اقتباس مزدوجة مفصولة بفراغ وهذا الفراغ وضع لكي يمنع التصاق قيمة المتغير الأول (الاسم الأول) وقيمة المتغير الثاني (الاسم الثاني). وفي السطر الرابع نقوم بطباعة أو إخراج المتغير الجديد total_name الذي يحوي كلا الإسمين.
كما يمكنك فصل الإسمين بوضع فراغ بنهاية الاسم الأول أو بداية الاسم الثاني.
قم بفتح مستعرض الويب واذهب إلى http://localhost/name.php
ستلاحظ النتيجة التالية:
Mike Shinoda
استخدمنا النقطة لدمج متغيرين والحقيقة يمكننا دمج عدة متغيرات مع بعضها مهما كانت قيمها...
قم بإزالة علامتي الاقتباس من الملف السابق مع إزالة نقطة واحدة وذلك لدمج المتغيرين بواسطة نقطة واحدة ومن دون أي فاصل, قم بإعادة تحميل الصفحة وشاهد الفرق.
دوال الاخراجإن تعريف الدوال هي أوامر برمجية تكتب لتحقيق غرض معين, هذه الأوامر يقوم مترجم اللغة بترجمتها و تنفيذها, بعض هذه الأوامر تخص المخدم كدالة الحصول على IP وبعضها يختص بقواعد البيانات كدالة mysql_connect والتي تقوم بالاتصال بقاعدة البيانات والبعض الآخر يختص بصفحة الويب نفسها كدوال الإخراج.
تعتبر دوال الإخراج هي الأكثر استخداما ً في صفحات الويب الديناميكية وتقوم هذه الدالة بعرض قيمة ما على الصفحة, قد تكون هذه القيمة نص أو رقم أو زر أو صورة أو حتى يمكن أن تكون دالة أخرى.
مبدئيا ً لدينا أربع دوال لإخراج القيم على الصفحة في لغة PHP وجميعها تعمل العمل نفسها مع بعض الفروق البسيطة.
echo
أن الدالة echo تقوم بطباعة القيم على المتصفح وتتعامل بالدرجة الأساس مع النصوص والأرقام كما في المثال التالي:
<?php
echo "hello world";
echo ("I am a programmer");
?>
لا يوجد فرق بين الدالة الأولى والثانية عدا عند استخدامنا الدالة لطباعة المتغيرات فيجب استخدام echo(); لتجميع الكود البرمجي.
كما ترى بدأ كود PHP بوسم البداية <?php ثم كتبنا كود PHP وهو عبارة عن دالتين تقومان بطباعة نصوص مختلفة وما ستلاحظه هو وجود الفارزة المنقوطة عند نهاية كل سطر (أو بالأحرى عند نهاية كل سطر برمجي), فالسطر البرمجي يحتوي على أوامر أو دالة ما أو اختبار شرط .... وبنهاية كل من هذه الكتل البرمجية يجب وضع الفارزة المنقوطة دلالة للمترجم على انتهاء هذه الجملة البرمجية.
لذا ستعتاد على الفارزة المنقوطة وبالطبع لا يمكنك الاعتراض لان جميع لغات البرمجة الحديثة تعتمد الفارزة المنقوطة كنهاية للجملة البرمجية.
لا توجد فروق واضحة بين echo و print إلا أن هناك آراء حول أن print تتعامل بشكل أسرع مع المتغيرات:
<?php
print "hi there";
?>
printf
تعتبر printf مفيدة في حالة دمج النصوص مع المتغيرات الديناميكية حيث أن هذه الدالة الأسرع من حيث التعامل مع هذا النوع من القيم, ربما لن تجد فائدة قيمة من هذه الميزة لكن سيسهل تعديل القيم الديناميكية بصورة حيث تكون منفصلة عن النصوص والأرقام الاستاتيكية أو الساكنة :
<?php
printf ( "my favorite number is:", 5);
?>
سيؤدي هذا الكود إلى عرض الجملة: my favorite number is: 5
sprintf
بعض المبرمجين لا يعتبرون sprintf كدالة إخراج صرفة لكنها في النهاية تؤدي دور الإخراج بطريقة أو بأخرى, حيث يتم إسناد هذه الدالة إلى متغير ولا يمكن استخدامها كدالة منفردة:
<?php
$age=sprintf("my age is:", 19);
?>
كما إنها تؤدي نفس دور الدالة printf من حيث فصل القيم الديناميكية عن القيم الأخرى.
إن دوال الإخراج لا يقتصر دورها على إخراج النصوص فقط حيث ستتعلم في الدروس القادمة إخراج ناتج عملية رياضية أو ناتج جملة التحقق من الشرط وكذلك إخراج ناتج دوال أخرى.
الرحلة مع PHPبعد أن تعرفت على البرامج اللازمة للبدء بالبرمجة فقد حان الوقت لمواجهة PHP وجها ً لوجه, لذا كن لبقا ً ومؤدبا ً بعض الشيء, معظم الأشخاص الذين يتعلمون البرمجة يتركون فكرة التعلم عند وصولهم إلى التطبيق العملي.. فالأخطاء تظهر في كل مكان, الخطاء إملائية أخطاء منطقية وسيبدأ القارئ بقراءة الدروس من دون تطبيق ويصاب بخيبة الأمل عندما يدرك إن البرمجة ليست بهذه السهولة..
في الواقع جزء من هذا الكلام صحيح لكنه مبالغ فيه كثيرا, لذا فسأحاول جعل هذه الدروس اقرب إلى أذهان المبتدئين مع التطبيقات والأمثلة العملية السهلة, واجبك هو التركيز والمتابعة والمتسلسلة.
وسوم لغة PHP
لكل لغة هنالك إشارة بدء وأخرى للانتهاء وذلك ليتعرف عليها المخدم الخاص بهذه اللغة وليميزها عن باقي اللغات هذه الإشارات تسمى الوسوم وللغة PHP عدة وسوم يمكن للمترجمات التعرف عليها:
<? ?>
في الحقيقة هذه هي اقصر وأسهل وسوم لغة PHP والتي يمكن استخدامها كما يلي:
<?
هنا لغة php
?>
بعيدا ً عن السهولة والراحة فلهذا الوسم مساوئ أيضا ً لاسيما في صفحات الويب التي تحتوي على أكثر من لغة, فهذا الوسم يتعارض مع وسوم لغات XML و XHTML التي تحتوي على نفس وسم لغة PHP لذا لا أفضل استخدام هذا الوسم إطلاقا ً.
<% %>
إن كنت مبرمج لغة ASP وها أنت الآن تحاول تعلم تقنية جديدة فحتما ً انك ستألف هذا الوسم, الآن PHP6 تدعم هذا النوع من الوسوم وهو نفس الوسم الذي تستخدمه لغة ASP فبات يعرف بين مبرمجي PHP بوسم ASP.
إن PHP5 لا تدعم هذا الوسم وان جربت فلن تترجم الصفحة ويتم عرض الكود مباشرة. لكن يمكنك استخدامه في PHP6 بنفس الطريقة:
<%
هنا لغة php
%>
<script/> <script language="php">
اعتقد انك تحاول التفكير بكيفية كتابة هذا الوسم وما إذا يتم كتابة الترويسة <script/> أولا ً أم الأخرى, وهل هناك داع لعلامات الاقتباس... هذا الوسم ممل وطويل لذا اغلب المبرمجين إن لم يكن جميعهم لا يستخدمون هذا الوسم لذا لا اعتقد تريد أن تكون مختلفا ً عن العالم في هذه الفقرة.
لكن بالرغم من هذا يمكنك استخدام هذا الوسم إذا رغبت بالتنويع:
<"script language="php>
هنا لغة php
</script>
<?php ?>
يعد هذا الوسم من أكثر الوسوم استخداما ً فهو يعبر عن هذه اللغة أولا ً وتستطيع مترجمات PHP التعرف عليه بسهوله حتى بوجود لغات برمجة أخرى:
<?php
هنا لغة php
?>
هذا هو الوسم الذي أفضل أنت تعتاد عليه طلية حياتك البرمجية لن تتعود على كتابته الآن ولكن ستفعل بعد بعض الوقت, صدقني ما أحاول فعله هنا هو منعك من اكتساب عادات برمجية سيئة!
التعليقات
عندما تقرر العمل في شركة كمطور ويب فأول شيء عليك الاعتياد عليه هو العمل الجماعي أي انك جزء من فريق ستعملون على مشروع ما, فعندما يكون على عاتقك برمجة صفحة ما وسيكون زميلك مسئول عن تطويرها بعد مدة معينة, لابد أن يعرف ماهية الكود البرمجي الذي كتبته وماذا يعمل, ومن أين أتيت بهذا المتغير مثلا ً, لذا تقدم PHP طريقة رائعة للتعليق على الكود البرمجي وشرحه من خلال مجموعة ترويسات مبسطة يمكنك تضمينها على شكل اسطر منفردة أو مجموعة اسطر أو بعد السطر البرمجي مباشرة, لنتعرف على طرق التعليق:
1. طريقة double-slash وان أي كلمة بعد هذه الإشارة تعتبر تعليقا ً ولكن تكفي لسطر واحد فقط:
<?php
هذه دالة تقوم بطباعة كلمة hello //
;"hello"echo
?>
2. طريقة التعليق متعدد الأسطر, حيث تضع / ثم * وبعدها يمكنك كتابة تعليقك لا يهم إذا كان متعدد الأسطر أو لا ثم اغلق منطقة التعليق بواسطة * ثم /:
<?php
*/
هذه دالة تقوم بطباعة كلمة hello
والدالة التي بعدها تنشئ متغيرا ً
/*
;"hello"echo
$new;
?>
3. طريقة # للتعليق في سطر واحد, فهي تشبه // إلى حد كبير :
<?php
هذه دالة تقوم بطباعة كلمة hello #
;"hello"echo
?>
Dreamweaver
إن من أشهر البرامج استخداما في برمجة صفحات الويب الديناميكية هو Dreamweaver . قبل أن تتحد شركتا Adobe و Macromedia كان Dreamweaver هو إصدار شركة Macromedia ولم يكن يدعم اللغة العربية بشكل كامل, أما الآن فقد أصبح Dreamweaver من إنتاج شركة Adobe المشهورة .
فقد ظهر Dreamweaver CS2 و Dreamweaver CS3 و Dreamweaver CS4 و مؤخرا ً Dreamweaver CS5.إن إصدارات CS والتي تحمل اللاحقة ME (Middle East) قد بدأت عمليا ً الدعم المتواصل للغة العربية على طول السنوات المنصرمة وبدءا ً من الإصدار CS3 الذي قدم دعما ً كاملا ً للغة العربية سواء باستخدام واجهة تصميم الصفحات أو الواجهة البرمجية.
يمكنك شراء برنامج Adobe Dreamweaver ذو إصدارات CS ME من المكتبات المتوفرة بمنطقتك أو من خلال الانترنت, وعادة يتم بيع حزمة Adobe الكاملة التي تتضمن برامج تصميم ومعالجة الصور والصوت وتحرير الفيديو وغيرها من البرامج المهمة للمصممين في مختلف المجالات.
بالنسبة لي فأنا استخدم برنامج Adobe Dreamweaver CS3 ME ولذا سأقوم بشرح طريقة تثبيته أما بالنسبة لبقية الإصدارات فلا تختلف عملية تثبيتها تقريبا.
من المميزات الكثيرة التي يوفرها Dreamweaver هي بالإضافة إلى تلوين الكود البرمجي وترقيم الأسطر فهو يحتوي على كتل برمجية جاهزة تساعد في عملية البرمجة وكذلك يحتوي على بعض الأدوات المساعدة مثل معالج إنشاء اتصال بقواعد البيانات أو صفحة دخول المستخدم الذي يغنيك عن كتابة العشرات من الاكواد البرمجية, كما يوفر Dreamweaver ميزة تحرير الصفحات مباشرة على المخدم أي لا تحتاج لتحميل الصفحة وتحريرها على حاسوبك ثم رفعها على المخدم كما كان سابقا, هناك العديد من الميزات التي ظهرت في Adobe Dreamweaver CS3 قد لا يسعني ذكرها الآن.
لتثبيت برنامج Adobe Dreamweaver CS3 ME قم بفتح ملف التثبيت الرئيسي سيتم في البداية فك ضغط ملفات التثبيت إلى مجلد في أي مسار تختاره ثم بعدها سيتم تلقائيا فتح نافذة معالج التثبيت الذي سيرشدك خلال مراحل هذا البرنامج. بعد انتهاءك من تثبيت وتسجيل المنتج قم بفتحه, في البداية سيسألك ما إذا كنت تريد استخدام البرنامج بواجهة التصميم ام بواجهة البرمجة, قم باختيار واجهة التصميم حيث يمكنك التبديل بينهما لاحقا :
أما خانة Files فهي تستعرض مسار المشروع الحالي الذي تقوم بالعمل عليه سواء كان في حاسوبك الشخصي أم على مساحة على الويب ويُظهر الملفات الموجودة وإمكانية رفع ملفات جديدة وحذف أخرى والكثير من المميزات الأخرى الموجودة.
إن ما يتميز به Dreamweaver هو الإضافات أو Extensions حيث تسهل الإضافات عملية إنشاء موقع بشكل كبير جدا وتقلص الوقت اللازم لذلك حيث يحتوي Dreamweaver على مجموعة إضافات غنية مبيتة في البرنامج كما يمكنك تنزيل الإضافات التي تناسبك من الويب وتثبيتها من خلال خاصية Extension Manager واستعمالها لاحقا, فتوجد إضافات إنشاء واجهة الموقع وإضافات خاصة بإنشاء سجل زوار وأخرى يمكنها إنشاء اكواد تسجيل دخول وخروج المستخدمين وغيرها الكثير مما جعل من عملية تصميم المواقع عملية ممتعة حقا وهناك الكثير من الأشخاص غير المبرمجين الذين يقومون بإنشاء مواقع ديناميكية صرفة باستخدام هذه الإضافات والتي ستمكنهم من إنشاء اكود مخصصة بواسطة مربعات حوار .
ملاحظة:
ليس ملزما ً عليك اختيار بمحرر نصوص محدد, فأنت حر في الاختيار طالما هذه البرامج تؤدي نفس المهمة, ولكن في رأيي الشخصي فأني أفضل إن تستخدمDreamweaver فأنه نوعا ً ما سيحبب إليك البرمجة إن كانت الأخيرة تسبب لك مشكلة نفسية.
في الدروس القادمة ستخوض عملية البرمجة بشكل جدي وستقوم بالتعرف على PHP أكثر كما سأتطرق لاحقا لمفاهيم هذه اللغة وبعض الدوال فيها مضمن أمثلة تطبيقية وشرح مفصل.
لذا لتكون لوحة مفاتيحك مستعدة وأنت أيضا, ولا بأس بكوب قهوة إثناء التعلم.
محرر النصوص- تهيئة البيئة المناسبة للبرمجة
2- محرر النصوص:هناك عدة أنواع من محررات النصوص التي تستطيع استخدمها لبرمجة صفحات الويب وهي حقا توفر خدمات وإضافات كثيرة ومفيدة .
إن كنت قد حاولت تعلم البرمجة بلغة ما سابقا فعلى الأرجح انك قرأت أو سمعت بعض المبرمجين لا يهتمون بمحرر النصوص غالبا وربما قد ينصحونك باستخدام Notepad (محرر النصوص المبيت في Windows) لأنه سهل ومجاني, في الحقيقة إن محرر النصوص ک(Notepad) يجعل المهمة أصعب بالنسبة للأشخاص الذين يتعلمون البرمجة لأول مرة, رغم أن الأخير يمكن استخدامه لبرمجة صفحات الويب لكن هناك بالطبع خيارات أفضل.
لقد استخدمت لتوك Notepad عند اختبار المخدم, وكان على الأرجح سهل الاستخدام في نظرك.. في البرمجة مصطلح "سهل الاستخدام" لا يعني شيئا ً مهما ً.
يمكنك استخدام برنامج Notepad الموجود في إصدارات ويندوز المختلفة.
Start>all programs> accessories> notepad
| |||
يمكنك تنزيل Notepad++ الإصدار 5.8.0 من الموقع http://notepad-plus-plus.org/ar/release/5.8.2
بعد تنزيل البرنامج قم بفتحه, ستظهر نافذة تطلب منك اختيار لغة معالج التثبيت.
يحتوي Notepad++ العديد من الخصائص المفيدة لتسهيل عملية البرمجة كترقيم الأسطر, ففي البرمجة هناك مصطلح يسمى Bugs أو العلل وتعني الأخطاء المنطقية أو الإملائية التي يرتكبها المبرمج أثناء عملية البرمجة مما يؤدي إلى عدم عمل البرنامج أو صفحة الويب بالشكل المطلوب, لذا فيتوجب على المبرمج إزالة هذه العلل Debugging من خلال اختبار الصفحة أو البرنامج ومعرفة موقع الخطأ.. في PHP تحديدا ً يقوم مترجم لغة PHP بترجمة الصفحة وإذا كان هناك خطأ ما فسيتوقف المترجم عند هذا الخطأ ويرسل نوع الخطأ والسطر الذي يوجد فيه, لذا إن كنت تستخدم محررات نصوص لا تحتوي على ميزة ترقيم الأسطر فمن الصعب إيجاد خطأ في صفحة تحتوي علي 200 سطر برمجي في برنامج لا يرقم الأسطر.
لذا فأن فائدة Notepad++ تكمن هنا, إضافة إلى ذلك فأن برنامج Notepad++ يقوم بتلوين الكود البرمجي مما يسهل إيجاده في وقت لاحق, وما اقصده هنا هو تلوين الدوال بلون و وسوم لغة ما بلون آخر والمتغيرات والقيم بلون آخر وهكذا.. إن Notepad++ ليس محرر نصوص فقط بل يمكن استخدامه لكتابة اكواد للغات برمجة مختلفة يمكنك اكتشاف اللغات التي تستطيع البرمجة بها بسهولة من خلال قائمة "لغة البرمجة" .
|
التعامل مع حزمة XAMPP
أما عن أزرار Admin الموجودة بجانب كل خدمة فوظيفتها ادارة تلك الخدمة والتحكم بها بشكل عملي, قم بالضغط على Admin بجانب Apache. ستفتح الصفحة الرئيسية للحزمة XAMPP .
في شريط العنوان سترى http://localhost/xampp ان مصطلح localhost هو عنوان الوصول للصفحات المخزنة على حاسوبك باستخدام برنامج مخدم محلي, أي ستمتلك كل عناصر المخدمات المتوفرة على الشبكة لاستعراض صفحات ديناميكية ولكن يحدد استخدامها داخليا ً, مما سيجعل من localhost عالم الانترنت خاصتك.
يخبرك XAMPP في الصفحة الرئيسية انه تم تثبيت الحزمة بنجاح وانه يمكنك البدء باستخدام الخدمات التي توفرها هذه الخدمة.
الآن لنقم باختبار بسيط للمخدم الخاص بك, قم بفتح برنامج Notepad واكتب الكود التالي:
في شريط العنوان سترى http://localhost/xampp ان مصطلح localhost هو عنوان الوصول للصفحات المخزنة على حاسوبك باستخدام برنامج مخدم محلي, أي ستمتلك كل عناصر المخدمات المتوفرة على الشبكة لاستعراض صفحات ديناميكية ولكن يحدد استخدامها داخليا ً, مما سيجعل من localhost عالم الانترنت خاصتك.
يخبرك XAMPP في الصفحة الرئيسية انه تم تثبيت الحزمة بنجاح وانه يمكنك البدء باستخدام الخدمات التي توفرها هذه الخدمة.
الآن لنقم باختبار بسيط للمخدم الخاص بك, قم بفتح برنامج Notepad واكتب الكود التالي:
التبادل الاعلاني
