بهترین اطلاعات کامپیوتری

دریم ویور : رویاباف طراحان وب | HTML , | علی فیروزجنگ

دریم ویور : رویاباف طراحان وب

نام این نرم افزار به معنای رویاباف میباشد ، البته از نظر من ماکرومدیا در این مورد اصلا اقراق نکرده است . چون کار این نرم افزار آنچنان ظریف و استثنایی است که جز در رویای شما قابل تصور نیست . در این مقاله در مورد قابلیتهای نرم افزار Dreamweaver صحبت خواهد شد .

کار دریم ویور چیست ؟

نرم افزار Dreamweaver از شرکت Macromedia در نگاه اول نرم افزار ساده ای جهت ساخت صفحات HTML (Hyper Text Markup Language) است . که به ما کمک میکند تا مجبور نشویم کدهای زبان HTML را حفظ کنیم و با چند حرکت و کلیک دستورات به زبان HTML انجام میشوند و در واقع باید بگوییم این نرم افزار Dreamweaver است که Tag های زبان HTML را کاملا حفظ کرده و برای ما انجام میدهد .

شاید اولین سوالی که برای شما پیش بیاید این است که چه اشخاصی به سوی نرم افزار Dreamweaver میروند و چرا از نرم افزار های رقیب Dreamweaver یعنی GoLive از شرکت Adobe و FrontPage از شرکت Microsoft استفاده نکنیم . جواب این است که نرم افزار Dreamweaver از شرکت Macromedia و همچنین نرم افزار GoLive از شرکت Adobe برای طراحان وبی است که کارهای گرافیکی میتوانند بکنند یا بهتر بگویم طراح گرافیکی هستند اما نرم افزار FrontPage از شرکت Microsoft برای کسانی بیشتر به درد میخورد که کار آنها اتوماسیون اداری است یعنی با مجموعه برنامه Office از شرکت Microsoft کار میکنند بهتر است . و برای آنهایی که زمینه کارشان گرافیک است از بین نرم افزارهای Macromedia Dreamweaver MX 2004 و Adobe GoLive CS نرم افزار Dreamweaver را انتخاب کردند، زیرا نرم افزار Dreamweaver با نرم افزار Fireworkes از همین شرکت Macromedia است به خوبی مکالمه میکند و نرم افزار GoLive با نرم افزار Adobe ImageReady به خوبی مکالمه میکند و آنها نیز چون Target کارشان شرکت Macromedia است نرم افزار Dreamweaver MX 2004 را انتخاب کردیم .

Dreamweaver MX 2004 به جز ساخت صفحات HTML از نوع Static و Dynamic میتواند به ساخت صفحات با PHP و ASP و ASP.NET و JSP و ColdFusion نیز به ما کمک کند ، همچنین این برنامه فلش را بخوبی پشتیبانی میکند و همین امر در طراحی سرعت ما را افزایش و خطاهای ایجاد شده در فرانت پیج را در هنگام کار با فلش ها کاهش میدهد . این برنامه ساخت behavior ها را نیز بخوبی پشتیبانی میکنید . امکانات دیگر آن در هنگام کار با برنامه چندان زیاد است که گاهی از اینهمه ابزار به هیجان می آیید . پس از این پس برای بافتن رویاهای خود در وب یک رویاباف دارید !

|+| نظرات ()

تاریخ ثبت : چهارشنبه 23 شهریور 1384 ساعت : 11:09 ق.ظ

سایت خود را مطابق تکنولوژی جستجوگر ها طراحی کنید | HTML , | علی فیروزجنگ

سایت خود را مطابق تکنولوژی جستجوگر ها طراحی کنید

بسیاری از وب سایت ها هستند كه نمیتوانند ترافیك كافی را برای سایت خود بدست آورند ، یكی از این علت ها یك نكته ساده است : ” وب سایت برای موتور های جستجوگر بهینه نشده “ . در این مقاله اعمالی كه برای بهینه سازی وب سایت در برخورد با موتور های جستجو باید صورت گیرد شرح داده میشود :

1. صفحات را مطابق میل جستجوگر ها طراحی كنید :

برای یك موتور جستجو گرافیك سایت شما یا فلش ها و كد های جاوا اسكریپت جذابی كه ساخته اید اهمیتی ندارد . بلكه چیزی كه یك موتور جستجو نیاز دارد روان بودن كد نوشته شده در صفحات است . منظور من نوشتن كامنت در بین تگ ها یا رعایت كردن فاصله ها نیست بلكه استفاده از تگ هایی است كه جستجوگر ها از آنها استفاده میكنند . تگ های مهم در یك صفحه وب عبارتند از : تگ title و description و Keywordsو Alt . ( این روزها بعضی از موتور های جستجو فقط از تگ Keywords برای ارائه نتایج استفاده میكنند ).

چند نكته :

· اگر از جدول ها برای ساخت صفحات سایتتان بهره گرفته اید ، سعی كنید از كد های ساده استفاده كنید نه از تگ های تو در توی پیچیده .

· استفاده از فریم ها باعث سر گیجه موتور های جستجو میشود كه به ضرر شماست . در ضمن استفاده از فریم ها دیگر در طراحی سایت ها متداول نیست .

· اگر از كد های جاوا اسكریپت استفاده كرده اید برای فراخوانی فایل های جاوا اسكریپت خارجی از كد های كوتاه استفاده كنید .

· استفاده از تگ Alt در تگ تصاویر موتور های جستجو را در یافتن موضوع تصاویر كمك میكند . حتما از این تگ برای عكس ها استفاده كنید .

· متن اصلی را قبل از عكس ها در صفحاتتان قرار دهید و یا حداقل عكس ها را در میان متن قرار دهید .

2. كلمات كلیدی Keywords :

استفاده از این تگ بسیار اهمیت داره و نوع كلمات استفاده شده در اون هم مهمه . سایت wordtracker كلمات كلیدی خوبی را برای هر نوع سایتی پیشنهاد میدهد كه میتوانید از آن بهره بگیرید . تعداد كلماتی كه میتوان در این تگ استفاده كرد محدودیت خاصی ندارد ، اما برای حصول نتیجه بهتر از 10 الی 15 كلمه برتر استفاده كنید .

3. محتوای سایت :

بسیاری از موتور های جستجو از متن اصلی صفحات برای یافتن كلمات كلیدی استفاده شده در تگ keywords استفاده میكنند . پس استفاده درست از كلمات كلیدی و مطابقت آن كلمات با متن شما بسیار اهمیت دارد. كلمات اصلی متن را در تگ heading و یا bold بگذارید و یا آن را لینك كنید تا جستجوگر ها به آن لغات اهیت ویژه ای دهند .

4. عنوان سایت :

تگ title یكی از مهم ترین بخش ها از دید جستجوگر هاست . عنوان صفحات نیز باید مانند كلمات كلیدی درست و مطابق متن انتخاب شود . چون گاهی موتور های جستجوگر به عناوین صفحات بیش از كلمات كلیدی اهمیت میدهند . تعداد كلماتی كه در عنوان صفحات استفاده میكنید نیز برای اینكه از حد استاندارد جستجوگر ها خارج نباشد باید حداكثر 9 كلمه باشد .

5. تگ توضیحات :

موتور های جستجو هنگام نشان دادن نتایج جستجوی خود ، اطلاعات تگ متای توضیحات هر صفحه را برای نمایش توضیحات آن سایت نمایش میدهند .بنابراین نوشتن توضیحات جذاب و درست بیننده را به سوی سایت شما جذب میكند . استاندارد تعداد كلمات این تگ 20 الی 25 كلمه میباشد .

6. گرافیك :

استفاده از عكس اگر چه زیبایی خاصی به سایت شما میدهد اما حتی با تگ ALT نیز یك عكس به اندازه چند كلمه قدرت ندارد . چون موتور های جستجو فقط كلمات را میشناسند و عكس ها را هم با تگ Alt آنها شناسایی میكنند . بنا براین استفاده از عكس به جای لینك و یا بجای متن از خوانایی سایت شما برای چشم های یك موتور جستجوگر می كاهد .

7. نقشه سایت :

نقشه سایت كمك بسیاری به جستكوگر ها میكند تا تمام صفحات سایت شما را شناسایی كنند . ابزار های زیادی بر روی وب هست كه نقشه سایت شما را در چند كلیك میسازد .

8. لینك های هدایتگر :

لینك هایی كه به دیگر صفحات سایت میدهید باید ساده باشد . استفاده از منوهای pop up‌ و فلش و مانند آن از خوانایی لینك های شما می كاهد .اگر مجبور به استفاده از لینك های پیچیده در طراحی سایت هستید میتوانید از لینك های ساده در انتهای صفحات استفاده كنید تا موتور های جستجوگر نیز بتوانند لینك های شما را شناسایی كنند .

رعایت اصول فوق باعث میشود تا سایت شما در نتیجه جستجوی جستجوگر های معروف رتبه بالاتری را بدست آورد .

|+| نظرات ()

تاریخ ثبت : چهارشنبه 23 شهریور 1384 ساعت : 10:09 ق.ظ

متاتگ چیست ؟ | HTML , | علی فیروزجنگ

متاتگ چیست ؟

متاتگ ها راهی برای شناساندن وب سایت شما به جهان خارج است . عنوان تگ هایی که برای صفحات سایت خود تعریف میکنید موتور های جستجوگر را در شناختن مطالب داخل سایت شما یاری میکند .

دو نوع اصلی متاتگ وجود دارد :

این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود . مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر !

HTTP-EQUIV

این نوع از متاتگ برای تعیین اطلاعات داخل صفحه وب استفاده میشود که باعث میشود صفحه وب شما با راحتی بیشتری برای موتورهای جستجوگر شناخته شود ... مثلا زبان این صفحه ، نام طراح ، کلمات کلیدی این صفحه و ...

NAME

متاتگ ها کجای صفحه وب نوشته میشوند ؟

متاتگ ها را باید داخل تگ head نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت.

به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name و HTTP-EQUIV در خود دارد .

مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver">

تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content کلمات کلیدی سایت خود را بنویسید .

مثال : NAME="description" CONTENT=" persian web design center">

تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه !

مثال :<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

تگ بالا تاریخ انقضای این صفحه وب را تعیین میکند . یعنی اگر کسی این صفحه وب را یکبار دیده باشد وقتی این زمان فرا برسد و او دوباره آدرس این سایت را در مرورگرش بزند این صفحه از داخل cache لود نمیشود بلکه از سرور دانلود میشود .

|+| نظرات ()

تاریخ ثبت : چهارشنبه 23 شهریور 1384 ساعت : 10:09 ق.ظ

نمایش عكسی به دنبال نشانگر ماوس | HTML , | علی فیروزجنگ

نمایش عكسی به دنبال نشانگر ماوس
این یكی دیگه از آموزش هایی است كه با استفاده از اون می تونید یه چیزی رو به دنبال موس به حركت در بیارین , شما می تونید عكس یا عكس هایی رو به دنبال موس به حركت در بیارید.
شما برای این كار باید دقیقا" بعد از <Body> این سورس را به فرم خود اضافه كنید :
<script> var ns = (document.layers)?1:0; var Anim=new Array(); /* holds interval events */ var imgwidth=40; // Image width var imgheight=40; // Image height var button = Array(); // to pre-cache images button[0]=new Image(); button[0].src="pic1.gif"; button[1]=new Image(); button[1].src="pic3.gif"; //Initialize some variables to make the button always to appear on the frame's bottom-right corner if (ns) { document.write("<LAYER NAME='FlyOnOff' LEFT=0 TOP=0></LAYER>"); horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window..innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; }else { document.write("<div id='FlyOnOff' style='position:absolute; visibility:show; left:235px; top:-50px; z-index:2'></div>"); horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } // Moves the button in the right position function checkLocation() { objectXY="FlyOnOff"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-(imgwidth+30)+currentX; y=availableY-(imgheight+20)+currentY; eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); } Anim[0]=setInterval('checkLocation()', 10); (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; (document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition; var Dot_Ro=60; //Dot's distance from the mouse pointer var Dot_Theta=0; //Dot's initial angle var Dot_Speed; //Dot's absolute Angular speed var Dot_Direction=1; //Dot's direction (1=clockwise) var Dot_x=0; //Dot's original position var Dot_y=0; var alpha; //Angle from the fly to the mouse var mult; //Ausiliary variable to define the angle var picX = 20; //Fly's coords. var picY = 100; var mouseX = 0; //Mouse coords. var mouseY = 0; var step = 10; //Pixels var speed = 100;//u-seconds // Dir specifies the right picture; // img pre-caches images. var dir = Array(); dir[-4]="pic1.gif"; dir[-1]="pic2.gif"; dir[-2]="pic3.gif"; dir[-3]="pic4.gif"; dir[3]="pic1.gif"; dir[4]="pic2.gif"; dir[1]="pic3.gif"; dir[2]="pic4.gif"; dir[0]=""; var img = Array(); for (var i=-4; i<5; i++){ img[i]=new Image(); img[i].src=dir[i]; } // Some HTML code to show the fly. if (ns) { document.write("<LAYER NAME='FlyDiv' LEFT=0 TOP=0><img src="+dir[1]+" name='pic'></LAYER>"); }else { document.write("<div id='FlyDiv' style='position:absolute'>"); document.write("<img name='pic' src=" + dir[1] + "></div>"); } // Shows the proper image for the fly. function display(direction) { //direction must be from -4 to 4, but not 0. if (ns) { document.pic.src = dir[direction]; }else{ pic.src = dir[direction]; } } function getMousePosition(e) { mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop; mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft; } //Calculate new position function calcNewPos() { var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2)); Dot_Speed=Math.PI/15; Dot_Theta+=Dot_Direction*Dot_Speed; Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta); Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta); var arg = (Dot_y-picY) / (Dot_x-picX); mult = (Dot_x - picX < 0)? mult = -1:1; alpha = Math.atan(arg); var dx = mult * step * Math.cos(alpha); var dy = mult * step * Math.sin(alpha); picX += dx; picY += dy; } //Shows or hides the fly when the "button" is pressed function showhideAnimation() { if (ns) { document.layers['FlyDiv'].visibility=document.layers['FlyDiv'].visibility=="hide"?"show":"hide"; document.Button.src = document.layers['FlyDiv'].visibility=="hide"?button[1].src:button[0].src; }else { FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden"; Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src; } } // Moves the fly around the screen function moveFly() { // moves the fly in a new position... calcNewPos(); if (ns) { document.layers['FlyDiv'].left = picX; document.layers['FlyDiv'].top = picY; }else{ FlyDiv.style.left = picX - pic.width / 2; FlyDiv.style.top = picY - pic.height / 2; } // ... and changes the image. alpha=-180*alpha/Math.PI; alpha+=22.5; var OK=0; for(var i=0; (i<4)&& !OK; i++){ if (alpha<-Math.PI+45*i){ display(mult*(i+1)); OK=1; } } } // Changes Dot's turning direction function ChangeDotDirection() { Dot_Direction=-Dot_Direction; Dot_Theta+=Math.PI; } //Go! Anim[1]=setInterval('moveFly()', speed); Anim[2]=setInterval('ChangeDotDirection()', speed*50); function killIt() { for(var i=0;i<Anim.length;i++) { if(Anim[i]) { clearInterval(Anim[i]); Anim[i]=null; } } } </script>
خوب حالا توضیحات :
احتمالا" اگرحالا شما صفحه را Refresh كنید می بینید كه چیزهایی شبیه عكس به دنبال موس در حركت می باشد .
برای اینكه شما عكس های خودتان را جای گزین كنید باید در اون پوشه ای كه ای page را قرار دادید 4 فایل عكس به انشعاب gif به نام های pic1.gif , pic2.gif , pic3.gif , pic4.gif را در اون پوشه قرار بدید.
البته در خود سورس هم توضوحاتی نوشتم كه اگه كسی خواست این كار رو سفارشی تر انجام بده می تونه اون ها رو هم تغیییر بده به عنوان مثال در اول سورس یه چیزی مثل این هست var imgwidth=40; // Image width كه با تغییر اون 40 به عددی دیگه می تونید ارتفاع عكس هایی رو كه به دنبال موس هستند رو عوض كنید.

|+| نظرات ()

تاریخ ثبت : چهارشنبه 23 شهریور 1384 ساعت : 10:09 ق.ظ

Last Posts

+ فعالیت نوین، تجارت نوین
+ نسخه نهایی مسنجر 8 یاهو سرانجام عرضه شد
+ Office 2007 بیش از 3 میلیون بار بارگذاری شد
+ فهرست 100 فیلم جذاب تاریخ سینمای آمریكا منتشر شد
+ یک امکان مجاز
+ Yahoo و MSN
+ Gangهای اینترنت باز
+ ویندوز قلابی
+ Samsung و ipod
+ مایكروسافت در آسیا
+ هكرها و سانسور اینترنت
+ گوگل رسما صرف شد
+ گوگل و سلامتی
+ Google و ebay
+ راز مشكلات امنیتی نرم افزار آفیس فاش شد