طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
بررسي تازه هاي ويژوال استوديو 2012
عرضه ويندوز 8 و تبلت هاي Surface بزرگ ترين خبرهاي مايکروسافت در طول پاييز سال 2012 بودند.
مايکروسافت تغيير تمرکز به سمت ديتا را تشخيص داده است. بد نيست بدانيد Eric Schmidt از گوگل به تازگي گفته حجم داده هايي که اکنون در طول دو روز توليد مي شوند بسيار بيشتر از چيزي است که بين آغاز زندگي نسل بشر روي کره زمين تا سال 2009 توليد شده بود.
در حالي که ما چنين سيل شگفت آوري از داده ها را توليد مي کنيم، روش هاي دسترسي به آن ها بايد متنوع تر و ساده تر شوند و نسل جديد برنامه ها بايد به گونه اي طراحی وب سایت شوند که بتوانند به طور غيرهم زمان با هر منبع داده چه به صورت محلي و چه روي اينترنت ارتباط برقرار کنند (زيرا به داده هايي دسترسي پيدا خواهند کرد که در تنوع گسترده اي از مکان ها نگهداري مي شوند و گاهي اوقات اين کار را از طريق اتصال هاي غيرقابل اعتماد و کند انجام مي دهند). مايکروسافت اين نسل جديد از برنامه ها را «برنامه هاي مدرن» مي نامد.
استفاده از ارتباطات غيرهم زمان به جاي ارتباطات هم زمان به برنامه ها اجازه مي دهد تا در طول واکشي داده ها در پشت صحنه، همچنان به تعاملات کاربر پاسخ گو باشند. اين در حالي است که روش هاي هم زمان سنتي تر باعث مي شدند برنامه تا زمان تکميل واکشي داده ها متوقف گردد. در اين حالت ممکن است به نظر برسد که برنامه قفل شده، تاثيري که همه ما آن را تجربه کرده ايم. البته روش غيرهم زمان مدتي است که امکان پذير شده است اما عرضه Net Framework 4.5. و ويژوال استوديو 2012 پياده سازي آن را آسان تر مي نمايد.
براي مثال ساده ترين متدي که در حال حاضر براي ناهم زماني مورد استفاده قرار مي گيرد، عبارت است از:
Dim urlContent As String=Await Client.GetstringAsync() n
اين فرمان Await جديد، اجراي روش جاري را تا زمان تکميل وظيفه اي که منتظرش هستيم به تعويق مي اندازد،
يک نسخه بهبود يافته از Entity Framework وجود دارد که به اين سرويس وب امکان مي دهد به داده هايي دسترسي پيدا کرده و آن ها را مصرف نمايد که برنامه شما سپس قادر به استفاده از آن ها خواهد بود. يکي از ويژگي هاي جديد اين فريم ورک، سهولت به روزرساني آن در هنگام تغيير ساختارهاي داده است، حتي با داده هاي زنده. نسخه هاي قبلي شما را ملزم مي کردند تا آبجکت هاي بانک اطلاعاتي را رها (Drop) نموده و سپس دوباره آن ها را ايجاد کنيد، يک خبر واقعا بد براي يک سايت وب زنده. خوشبختانه مشکل مذکور حالا به همراه چند باگ ديگر برطرف شده است.
بديهي است که اگر در حال برنامه نويسي براي ويندوز هستيد، ويژوال استوديو هميشه ابزار توسعه دسکتاپ انتخابي شما بوده است اما وضعيت در مورد برنامه نويسي وب چگونه است؟ ما در اينجا به دنبال ارايه يک نقد کامل از ويژوال استوديو نيستيم، اما ترجيح مي دهيم حوزه هايي که مورد توجه برنامه نويسان وب خواهند بود مانند روش هاي جديد طراحي اپليکيشن ها را برجسته کنيم.
عرضه ويندوز 8 در عين حال با راه اندازي Windows Store هم زمان بود. اين فروشگاه همانند نمونه مشهور iTunes Store شرکت اپل بازاري براي برنامه نويسان است تا اپليکيشن هاي خود را براي تاييد توسط مايکروسافت ارايه نموده و سپس آن ها را به کاربران عرضه کرده يا بفروشند. در واقع تنها روش براي نصب اپليکيشن هاي ويندوز RT روي بسياري از ابزارها، استفاده از اين فروشگاه خواهد بود. به منظور برنامه نويسي براي Windows Store در ويژوال استوديو، شما ابتدا بايد براي دريافت يک اکانت برنامه نويسي ثبت نام کنيد. رويکرد مذکور مزاياي قابل توجهي براي برنامه نويسان دارد زيرا از اين طريق به آساني مي توانند به ميليون ها کاربر ويندوز دسترسي پيدا کنند، اما يک برنامه نويس چطور مي تواند اطمينان پيدا کند که اپليکيشن او در بالاي ليست ظاهر خواهد شد؟ برنامه نويسان قبلا هم مي توانستند از طريق وب به تمام کاربران دسترسي داشته باشند، پس واقعا چرا به چنين خط مشي گذاري اضافي توسط يک شرکت بزرگ ديگر نياز دارند؟
اجازه بدهيد اميدوار باشيم در حالي که اپليکيشن ها دايما ارزان تر مي شوند، اين مسيرهاي فروش جديد به يک مسابقه رو به پايين منتهي نشود. نتيجه اين روند کاهش درآمدها براي همه خواهد بود، البته به استثناي آن دسته معدود از برنامه نويساني که به شهرتي رسيده اند، آن هم با تعداد فراواني از اپليکيشن هايي که عملکرد محدود و پشتيباني ضعيف دارند
بسياري از برنامه نويسان در اين صنعت، تنوعي از ابزارهاي برنامه نويسي را به کار مي گيرند که هر يک قدرت هاي خاص خودشان را دارند. Dreamweaver براي نگهداري سايت هاي وب ASP و HTML عالي است، در حالي که Expression Web براي طراحي Stylesheet ها با پشتيباني از استايل هاي CSS و قابليت هاي خوب پيش نمايش مفيد خواهد بود. ويژوال استوديو براي کـدنويـسي و توسـعه سايت هاي ASP.NET عالي است و گروه زيادي از Notpad++ 1 و Firebug براي جاوا نيز استفاده مي کنند. در واقع ابزارهاي فراوان ديگري نيز وجود دارند که بر حسب کارهاي مختلف مي توانيد آن ها را در جعبه ابزار هر برنامه نويسي پيدا کنيد.
در حالي که ويژوال استوديو مي تواند براي برنامه نويسي ASP.NET بسيار مفيد باشد، اما هميشه در حوزه طراحي ضعيف بوده است. کدنويسي جاوااسکريپت در اين مجموعه امکان پذير بود، اما هميشه به يک ويژگي اضافه شده براي تسکين نياز برنامه نويسان شباهت داشت که پشتيباني آن چندان فراتر از بررسي ترکيب بندي (Syntax) با IntelliSense نبود. اما اين وضعيت با تبديل شدن جاوااسکريپت، HTML5 و CSS به روش هاي اصلي براي ايجاد اپليکيشن هاي Windows Store، در حال تغيير است. نسخه جديد ويژوال استوديو بايد به طور چشمگيري در اين حوزه بهبود پيدا مي کرد
اگر در Silverlight برنامه نويسي مي کنيد، شايد بهتر باشد براي طراحي و احتمالا حتي براي کدنويسي ابتدايي از ابزار Expression Blend استفاده کنيد. حالا Blend به صورت توکار در ويژوال استوديو 2012 پياده سازي شده است که تنها براي برنامه نويسان Silverlight يک موهبت عالي به شمار نمي آيد، زيرا مي تواند در هنگام ايجاد اپليکيشن هاي Windows Store به عنوان يک ابزار طراحي براي ويندوز RT نيز مورد استفاده قرار گيرد. با اين حال توجه داشته باشيد که قابليت مذکور فعلا تنها روي يک باکس ويندوز 8 امکان پذير خواهد بود.
اگر براي طراحي يک اپليکيشن Windows Store که از HTML و جاوااسکريپت استفاده مي کند به دنبال کمک هستيد، ويژوال استوديو 2012 يک نااميدي واقـعي خواهـد بـود زيرا فاقد يک نماي طراحي (Design View) است. اين فرآيند با نوشتن برنامه هاي وب در ويژوال استوديو که هميشه يک نماي طراحي (گرچه نه چندان دقيق، اما بدون ترديد مفيد) را در اختيار شما قرار مي داد، تفاوت زيادي دارد. مثل گذشته، شايد به اين فکر بيفتيد که توسعه فناوري هاي زيربنايي آن قدر سريع انجام شده که فرصتي براي بالغ سازي آن ها وجود نداشته است. به هر حال ابزارهاي طراحي در يک مسابقه سرعت گير افتاده اند و به طور چشمگير طراحی وب سایت از فقدان کاربردپذيري و عملکرد رنج مي برند. اين وضعيت شرم آور است زيرا استقرار drag-and-drop عناصر و پيش نمايش صحيح مي توانست ويژوال استوديو را به يک ابزار نهايي در طراحي HTML تبديل نمايد. تا زماني که اين اتفاق بيفتد، ويژوال استوديو هنوز بيشتر يک ابزار برنامه نويسي خواهد بود، در حالي که آزمايش تغييرات Stylesheet بايد با بهره گيري از پيش نمايش در يک مرورگر انجام شود. توسعه دهندگان برنامه هاي وب بايد همچنان منتظر روياي مقدس خود بمانند: ابزاري با يک نماي طراحي که به اندازه ويژوال استوديو 6 براي برنامه هاي دسکتاپ، خوب باشد.
پس از آن که کار اپليکيشن دست ساز و به دقت تنظيم شده شما به پايان رسيد، ويژوال استوديو به طور کامل با Windows Store ادغام مي شود تا به شما امکان دهد آن را به ميليون ها کاربر ويندوز در سراسر جهان بفروشيد. براي تيم هاي برنامه نويسي، يک سيستم آزمايش و نسخه گذاري کامل در نسخه هاي گران تر ويژوال استوديو پياده سازي شده است. ويژوال استوديو 2012 مي تواند روي سيستم شما با نسخه هاي قبلي هم زيستي داشته باشد؛ يک نکته مهم که به شما اطمينان مي دهد نسخه هاي قبلي کدتان همچنان قابل ويرايش خواهند بود و با نسخه جديد چارچوبNET. شکسته نخواهند شد.
فرآيند نصب بسيار جالب توجه است زيرا براي اولين بار به شما امکان مي دهد تصميم بگيريد که مي خواهيد آن را روي کدام هاردديسک خود نصب کنيد. نسخه هاي قبلي ويژوال استوديو (همانند بسياري از محصولات هسته مايکروسافت) بخش عمده اي از ساختار خود را روي درايو C نصب مي کردند، بدون آن که گزينه اي براي تغيير اين وضعيت وجود داشته باشد.
روي سيستم ما اين نسخه تنها 2 مگابايت از فضاي درايو C را اشغال کرد، در حالي که 3 گيگابايت از درايو بزرگ تر D به آن اختصاص يافته است. اگر گزينه Web Install را انتخاب کنيد، فرآيند نصب سريعي خواهيد داشت زيرا تنها فايل هاي مورد نياز براي ماشين خاص شما و گزينه هاي انتخاب شده، دانلود خواهند شد. وقتي ويژوال استوديو 2012 را براي اولين بار اجرا مي کنيد، از شما مي خواهد تا محتواي مورد نظرتان را انتخاب کرده و سپس نصب خود را براي نوع برنامه نويسي که انجام مي دهيد سفارشي سازي نماييد. اگر يک برنامه نويس جاه طلب هستيد و مي خواهيد امکان کدنويسي در حوزه هاي مختلف را در اختيار داشته باشيد، مي توانيد تمام گزينه ها را انتخاب کنيد. توجه داشته باشيد که ادامه فرآيند نصب به اضافه کردن اجزاي مورد نظر شما اختصاص خواهد يافت که مي تواند زمان زيادي طول بکشد. براي مثال، فرآيند نصب ما به 242 ماژول نياز داشت.
پس از اتمام اين مرحله، براي شروع بازي آماده هستيد و اگر مي خواهيد از jQuery استفاده کنيد، بايد پشتيباني از آن را با استفاده از nget manager اضافه کنيد. nget يک متد اپن سورس براي بازيابي مجموعه هايي از فايل ها (گاهي اوقات از سرورهاي مختلف) است و در عين حال دانلودهاي قطع شده را به صورت يکپارچه اداره مي کند. جامعه اپن سورس مدت ها است که از آن استفاده مي کند اما تنها همين اواخر مايکروسافت آن را در داخل ابزارهاي برنامه نويسي خود جاسازي نموده است. Nget به طور معمول توسط خط فرمان هدايت مي شود اما در حالي که ويژوال استوديو 2012 مي تواند يک کنسول nget را (براي شرايطي که ترجيح مي دهيد يا نياز داريد از اين روش استفاده کنيد) در اختيار شما قرار دهد، يک اينترفيس کاربري خوب براي ماژول هاي مختلف با عملکردهاي اضافي مانند jQuery را نيز ارايه مي کند.
هنگام برنامه نويسي در جاوااسکريپت يا يکي از چندين کتابخانه آن مانند jQuery، فرآيند ديباگ مي تواند به يک مساله تبديل شود. بسياري از ما ضميمه عالي Firebug براي فايرفاکس استفاده مي کنيم اما مدتي است که توانايي ديباگ کامل جاوااسکريپت در داخل ويژوال استوديو تعبيه شده (هر چند که بر اساس قضاوت انجمن ها، به کار انداختن آن مي تواند بسياري از افراد را سردرگم نمايد)
ما توصيه نمي کنيم که اين گزينه را در تمام مرورگرهاي خود غيرفعال کنيد زيرا باعث مي شود اگر يک اسکريپت معيوب روي سايت وبي که مشغول بازديد از آن هستيد وجود داشته باشد، دايما با پيام هاي ديباگ مواجه شويد. ما براي چيدمان خود از کروم به عنوان مرورگر پيش فرض، اينترنت اکسپلورر به عنوان مرورگر پيش فرض در داخل ويژوال استوديو و فايرفاکس براي ساير کارهاي ديباگ جاوااسکريپت استفاده مي کنيم. پيکربندي مذکور کاملا براي ما کار مي کند و کاملا بديهي است که وقتي مشغول آزمايش يک سايت وب جديد هستيد بايد از تمام مرورگرهاي مذکور (در کنار گزينه هاي ديگر) استفاده نماييد. با اين حال اگر بخواهيم صادق باشيم بايد بگوييم اگر CSS سايت شما به طور صحيح نوشته شده باشد، اين روزها با تفاوت بسيار اندکي مابين مرورگرهاي مختلف مواجه خواهيد شد و تفاوت هاي موجود نيز تاثير چنداني بر تجربه کاربران از سايت شما نخواهند داشت.
يکي از ويژگي هاي مفيد که ما آن را متد «Double Tabbing» نوشتن کد برنامه در ويژوال استوديو مي ناميم نيز با ادغام کد HTML5 ارتقا پيدا کرده است. براي ارايه مثالي از ماهيت و ارزش ويژگي مذکور، تصور کنيد مي خواهيد از برچسب جديد video در HTML5 استفاده نماييد. همان طور که احتمالا از قبل کشف کرده ايد، برچسب مذکور هنوز يک نمونه آشفته به شمار مي آيد. شما بايد سه نسخه متفاوت از ويديوي خود را براي مرورگرهاي مهم ارايه کرده و کدتان نيز بايد اين موضوع را با ترکيب طاقت فرسايي منعکس کند. در ويژوال استوديو 2012 شما تنها بايد <vid را تايپ کنيد تا يک منوي dropdown ظاهر شود که گزينه video در آن انتخاب شده است. حالا اگر روي کليد Tab کليک کنيد، کد زير در صفحه وب شما درج خواهيد شد:
<video Controls=»controls»>
</source src=»file.mp4» type=»video/mp4» >
</source src=»file.webm» type=»video/webm» >
</source src=»file.gov» type=»video/ogg» >
<video/>
{}media only screen and (max-width:1024px) and (max-height: 768px@
اين ارتقا براي موتور IntelliSense تقريبا براي تمام کد کار مي کند اما اضافه شدن آن به خصوص در HTML يک کمک عالي است. با مطالعه مستندات What›s new مربوط به ويژوال استوديو 2012، متوجه مي شويد که به پشتيباني بيشتر در ويرايشگر CSS براي بعضي از استانداردهاي استايل جديد اما کاملا تاييد شده مانند border-radius (که امکان ايجاد گوشه هاي منحني که ايجاد آن ها در گذشته مشکل ساز بوده است را فراهم مي کند)، اشاره شده است. متاسفانه همانند بسياري از وعده هاي ديگر، اين موضوع نيز آنقدرها که اميدوار هستيد واقعيت ندارد. ترديدي نيست که موتور IntelliSense حالا عبارتي که تايپ مي کنيد را تشخيص مي دهد، اما اگر modify style را براي تغيير يا ايجاد يک استايل انتخاب کنيد، حاشيه در زبانه box ظاهر نمي شود. اشاره به اين نکته جالب خواهد بود که Expression Web مايکروسافت بيش از يک سال است که چنين پشتيباني را فراهم مي کند.
در حالي که عنـاصر کـاذب CSSحـالا تـوسط Intellisense پشتيباني مي شوند (که باز هم يک کمک عالي براي کدنويسان HTMLبه شمار مي آيد)، توانايي ويژوال استوديو براي تغيير خودکار برچسب منطبق با آن ها نيز يک ويژگي مفيدتر است. تاکنون چند بار يک برچسب <h2>را مثلا به <h3>تغيير داده ايد و سپس فراموش کرده ايد که برچسب <h2/>متناظر با آن را تغيير دهيد؟ حالا اين کار به طور خودکار انجام مي شود که قابليت هوشمندانه اي است.
يک ضميمه ديگر که در هنگام کار روي يک طرح به شما کمک مي کند، گزينه جديد انتخاب رنگ (Color Picker) است
برچسب: طراحی وب سایت, طراحی سایت, طراحی وب,
نویسنده: rozita
اگر شما يک طراح وب هستيد حتما ميدانيد که هر عنصر در وب سايت مکان و هدف مخصوص به خود را دارد.
بسياري از طراحان صفحات را از بالا به پايين طراحي ميکنند يعني تمرکز خود را روي هدر، نوار کناري، و محتويات اصلي گداشته و از پرداختن به فوتر غافل ميشوند. با اين حال طراحی سایت سايتهاي اندکي هم هستند که طراحي فوتر آنها کاملا تخصصي و مناسب با اهداف سايت ميباشد، در زير چند نمونه مناسب از طرحهاي عملي براي ساخت يک فوتر حساب شده، با انتخابهاي فکر شده نشان داده خواهد شد.
8 روش براي بهبود فوترهاي معمولي و رايج - webtarget.ir
?- قرار دادن نقشه سايت در فوتر
فوتر هاي معمولي و رايج - webtarget.ir
. گاهي بهترين طراحان هم در شيوه طراحي خود تجديد نظر ميکنند بخصوص وقتي که به يک سايت با طراحي غير معمول و خلاقانه بر مي خورند
يکي از بهترين راه ها براي ترغيب کردن بازديد کننده هايي که در حال تمام کردن محتواي يک صفحه از سايت شما هستند و در فکر گام بعدي وب گردي خود مي باشند قرار دادن نقشه سايت در فوتر است.
ارائه لينک تمامي محتويات سايت بصورت مختصر و سازمان يافته يک راه حل عالي براي علاقه مند نگه داشتن بازديد کننده براي ادامه جستجو در سايت شماست و مسلما جايي بهتر از فوتر براي اينکار وجود ندارد. بازديد کننده گان مختلف دوست دارند محتواي متفاوتي هم ببينند پس وجود نقشه سايت با لينکهاي مختلف ميتواند نظر خيلي از آنها را به خود جلب کند و همين امر باعث بالا رفتن تعداد دفعات بازديد سايت شما به ازاي صفحات بازديد شده هر کاربر مي شود.
Sitemap Footer ها همچنين ميتوانند فرصتي باشند براي پرداختن بيشتر به طراحي ساير بخشهاي سايت، بدين صورت که اگر محتويات فوتر شما داراي يک ساختار منسجم با جزئيات کامل از کل وب سايت باشد شما ديگر ميتوانيد بقيه بخشهاي وب سايت خود را با دانستن اينکه کل ساختار سايت شما بصورت کاملا شفاف در پايين هر يک از صفحات موجود است خيلي خلاقانه تر از قبل طراحي کنيد.
?- اطلاعات تماس
داشتن بخش اطلاعات تماس در فوتر امروزه يک روش محبوب براي گرفتن يک نتيجه خوب است
حذف کردن لينک اطلاعات تماس مي تواند براي افرادي که به دنبال راهي براي ارتباط با شما هستند بسيار ناخوشايند باشد. همچنين لينکي که براحتي نتوان آن را در صفحه پيدا کرد ميتواند بازديد کننده را از ادامه کار نا اميد کند ،پس بايد هر فرصتي را براي بازديد کننده ،براي ارتباط با خود فراهم کنيد.
سعي کنيد اطلاعات تماس خود را بصورت کامل و شفاف ارئه کنيد همچنين اگر از خدمات پستي براي ارائه محصولات در سايت استفاده ميکنيد حتما آدرس و کد پستي محل خود را نيز قيد کنيد.
?- لينک هاي مهم
8 روش براي بهبود فوترهاي معمولي و رايج - webtarget.ir
هدر شما مي تواند موضوعات را به دسته بندي هاي گوناگون تقسيم کرده باشد ولي شما مي توانيد در فوتر خود يکسري از لينکهاي منتخب و مهم خود را نيز بگذاريد.
وقتي يک کاربر به قسمتهاي پايين يک صفحه مي رسد ممکن است تصميم به بيرون رفتن از سايت شما را بگيرد ولي اگر شما در فوتر چيز بخصوصي براي ترغيب او مثل لينک يک مقاله جالب يا يک خبر جديد يا … داشته باشيد فوتر يکبار ديگر مي تواند به عنوان آخرين تلاش براي جلب توجه کاربر به شما سرويس بدهد. بر خلاف نقشه سايت در اين روش لينک تمام صفحات موجود به کاربر ارائه نمي شود بلکه فقط چند گزينه منتخب براي جلب توجه بيشتر به او پيشنهاد ميشود.
نگاهي به آمارهاي ترافيکي سايت بصورت عيني ميتواند به شما بگويد که کداميک از اين لينکها واقعا جذاب و پر کشش بوده ، اگر شما آنها را با لينکهاي غير محبوب جايگزين کنيد ميتوانيد اصطلاحا کليک خور آن لينکها را بصورت کاملا محسوس بالا ببريد و همچنين پس از چند بار تکرار و بررسي ميتوانيد يک فوتر بسيار موثرتر از قبل داشته باشيد.
?- سازماندهي لينکها
8 روش براي بهبود فوترهاي معمولي و رايج - webtarget.ir
اگر شما تعداد زيادي لينک در فوتر خود قرار داده ايد يقينا مدل Sitemap را براي خود انتخاب کرده ايد
بهترين کار اين است که آنها را به بخشهاي مربوط به هم و هر بخش را در يک ستون قرار دهيد ،بعنوان مثال اگر شما يک لينک اخبار شرکت، يک لينک درباره ما ،يک لينک همکاري با ما و يک صفحه تماس با ما داشته باشيد بايد آنها را به ترتيب اهميت چيده و در يک ستون با عنوان ” درباره <نام شرکت> ” قرار دهيد.
با ساختن چند بخش با استفاده از اصول پايه طراحي ميتوانيد مهارت خود در طراحي را نشان دهيد. استفاده از آيکون هاي بزرگ با طرحهاي فريبنده،با استفاده از اصول اوليه طراحي مثل استفاده از فضاي خالي و تغيير کنتراست ميتواند واقعا جلب توجه کند.
اين اصول را در سايت خود پياده سازي کنيد به نحوي که به بقيه سايت تاکيد داشته باشد و به يوزر يک احساس خوب و ماندگار را منتقل کند.
?- در تعامل باشيد
8 روش براي بهبود فوترهاي معمولي و رايج - webtarget.ir
امروزه ديدن لينک مکانهايي که کاربران توسط آن ميتوانند با گرداننده گان سايتها يا ديگر دنبال کننده گان در تعامل باشند در فوتر ها بسيار رايج است ،اقلب سايتها بويژه وبلاگها هميشه يک ليست براي مطالب محبوب و همچنين بروزرساني هاي اخير شبکه هاي اجتماعي در فوتر يا وبلاگ خود دارند.بر خلاف ديگر گزينه ها اين يک روش فوق العاده براي پوياي بخشيدن به قالب سايت شماست بطوريکه همچنان پيشنهاداتي براي جلب توجه افرادي که به پايين صفحه ميرسند به آنها ارائه ميشود.
?- قرار دادن لينکهاي وابسته و اعتبارات در فوتر
8 روش براي بهبود فوترهاي معمولي و رايج - webtarget.ir
شما قطعا نميخواهيد اين لينکها را در سراسر محتويات مهمتر سايت خود پراکنده کنيد
بهترين مکان براي قرار دادن لينک هايي مثل شرايط و ضوابط، حق کپي رايت، لينکهاي وابسته، شرکاء، خدمات مرتبط و هر چيز ديگري که بطور غير مستقيم مربوط به ترويج شرکت شماست فوتر است.
اين لينکها به ندرت مهمتر از محتويات اصلي سايت ميشوند اما اگر آنها بايد در سايت شما وجود داشته باشند بهترين مکان براي آنها قطعا در فوتر خواهد بود.
?- قرار دادن نوار جستجو
بعضي مواقع کاربر شما نميتواند مطلب مورد نظر خود را پيدا کند در اينصورت فوتر انديشمنداده ترين مکان براي قرار دادن نوار جستجو است.
جايي که بازديدکننده گان ميتوانند مطلب مورد نظر خود را پيدا کرده يا با استفاده از کلمات کليدي يا موضوع مورد نظر آنرا جستجو کنند. اينجا آخرين جايي است که بازديد کننده قبل از ترک کردن سايت به قصد جستجوي مطلب مورد نظر خود خواهد ديد پس کمک کردن به او براي پيدا کردن موضوع مورد علاقه اش از هر راهي ميتواند بسيار مهم باشد. اين نيز فرصتي براي شما ايجاد ميکند که کاربر بتواند ديگر صفخات را که احتمال ارتباط با موضوع مورد نظر او را دارد بازديد کند که همين امر باعث افزايش بازديد سايت شما ميشود.
اگر شما هنوز نميدانيد که نوار جستجوي شما مورد استفاده قرار ميگيرد يا خير اين را در نظر داشته باشيد که با استفاده از يک فيلد فرم مخفي ، يک URL متغيير يا يک اقدام جداگانه براي فرم ميتوانيد بفهميد چه تعداد کاربر را با استفاده از نوار جستجو توانسته ايد در سايت نگه داريد
نتيجه گيري
فوتر سايت شما به هيچ وجه نبايد يک مکان خسته کننده و تکراري باشد بلکه ميتواند محلي پر جنب و جوش و پر استفاده در خدمت ترويج هر چه بيشتر سايت شما،محصولات شما، صفحات اجتماعي شما وبسياري ديگر باشد.
همه چيز بستگي به تجربه کاربر يا User Experienceاز سايت دارد .توجه کاربران را جلب کنيد ،پيدا کردن محتوا براي کاربر آسان کنيد، لينکهاي جالب و اطلاعات بروز را در سايت خود قرار دهيد .داشتن يک فوتر بي نقص دفعات بازديد سايت شما را افزايش خواهد داد و به ترويج هر چه بيشتر سايت و برند شما کمک خواهد کرد.
و در آخر
فوتر شما چگونه طراحي شده ؟ آيا نقشه سايت در فوتر داريد؟ لينک شبکه هاي اجتماعي چطور؟
با نظرات خود ما را در دانستن نحوه طراحي يک فوتر بي نقص ياري دهيد.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
با پيشرفت وب و هنر طراحي آن، زبان کُد نويسي اش، اَبَرمتن يا اچ تي ام ال، پيچيده تر و پرانعطاف تر شد. ابزاري مانند جدول ها که بيشتر براي نمايش نمودارهاي داده اي بودند، بزودي مورد استفاده نادرست، براي چيدمان هاي پنهان در صفحه هاي طراحی وب قرار گرفتند. با پيدايش صفحه هاي الگوي وب يا «CSS»، روش نادرست طراحي با جدول هاي پنهان در صفحه، از گردونه خارج، و بجاي آن استفاده مناسب از صفحه هاي الگوي وب يا «CSS»، جايگزين شد.
فن آوري هاي يکپارچه سازي داده گاه ها (Database)، مانند زبان هاي کُدنويسي سمت سرور (Server-Side Scripting) مانند CGI, PHP, ASP.NET, ASP, JSP و ColdFusion، و استانداردهاي طراحي مدرن با الگوها (CSS)، ساختار سايت هاي وب را باز هم تغيير داده و آنرا پيشرفته تر کرده اند.
همچنين با آمدن نگاره هاي جاندار و فن آوري هاي پويانمايي به صفحه ها، مانند فِلَش (Flash)، چهره وب بيشتر از پيش تغيير کرد و توانمندي هاي تازه به سازندگان رسانه و طراح هاي وب داده شد، و توانايي هاي بيشتر و کارايي ها تازه مرورگرها براي html.
طراحي وب سايت
وب سايت مجموعه اي از اطلاعات درباره موضوع و يا عنوان خاص است. طراحي يک وب سايت مشخص کننده آرايش و ساختــار صفحات وبي است که بوجود آورنده وب سايت خواهند بود. يک صفحه وب شامـــل اطلاعاتي درمورد هدف ايجــاد وب سايت ميباشد. يک وب ســايت را همــانند کتابي تصور کنيد کـه هر صفحه وب در حکم برگي از کتاب خواهد بود.
در زمينه طراحي وب سايت جنبه هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده مي شود.
براي وب سايت هاي تجاري عمومي، موارد زير از جمله اصلي ترين آنها به شمار مي روند:
1.طراحي سايت بر طبق عنوان و محتواي مطالب مي باشد.
2.مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند.
3.سايت بـــايد قابل فهم بوده و برقـــراري ارتبــاط با آن حتي براي مخاطباني کـه آشنايي چنداني بـا وب ندارند، آســـان باشد. چنانچه سايت به اندازه کافي بزرگ بوده و اطلاعات زيادي را شامــل شود، بـايد اطلاعات راهنما را به گونه اي بکار برد که به سرعت در اختيار بيننده قرار گيرند.
4.نماي کــار بايد کلي بوده و تمام صفحه را دربر گيرد تا بتواند پايـداري و ثبات را القــا کند. سبک نگارش بايد زيبا و تخصصي بوده و مناسب با طراحی سليقه مخاطبان و محتواي سايت باشد.
5.در نگارش متون و اطلاعاتي که مخاطب به دنبال آنها است بايد بزرگ نمايي شود تا به بيننده القا کند که اين همان چيزي است که به دنبال آن بوده است.
6.همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در موتورهاي جستجوي اصلي چنين شود.
يک وب سايت معمولا شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (index) ناميده مي شود. بعضي از وب سايت هـــا از صفحه اي استفـــاده ميکنند کـــه معمولا صفحه خوش آمد ناميده مي شود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.
بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل مي شوند.
هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبان FTP انجام ميشود. هنگامي که سايت منتشر شد، مدير سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده مي کند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت هاي ديگر، ايجاد پيوند با وب سايتهاي مشابه و غيره امکان پذير است.
نمونه طراحي استاتيک : http:\\rohanit.com
تاريخچه وب سايت
طرح وب سايت
طرح وب به قالب نمايشي و طراحي گرافيکي صفحات موجود در وب سايت مي گويند که معرف محتوا و مطالب آن وب سـايت مي باشد. طرح وب جلوه بصـري هدف وب سايت است و اولين بخش از يک صفحه وب است که ذهن مخاطب را با خود درگير مي کند.
طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سـايت و به کمک ذهن خلاق و ذوق هنري خود در بکار بردن ابعاد و رنگها، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در کليه صفحات وب سايت، نماي تکرار شونده و خسته کننده را به مخاطب القا نکند. در وب سايت بايد از الگوي ثابتي در صفحات استفاده کرد که کاربر به هنگام ديدن صفحات متوجه اين است که همه صفحات در يک سايت مشخص هستند.
Adobe Flash
Adobe Flash (سابقا Macromedia Flash) يک برنــامه ايجاد انيميشن و يــا برنامه کاربردي گرافيکي قوي است که براي سـاخت و اجرا کردن محتواي پويـــا، مطالب چند رسانه اي مــانند صدا و تصويــر و برنامه هــاي کاربردي محاوره اي بر روي وب و از طريق مرورگر (Browser) مورد استفاده قرار مي گيرد.
فلش مــانند اغلب قــالب هــا و تــوافقنــامه هــاي اينترنتي نبوده و يک محصول تـــائيد شده از طرف ســازمــان استانداردهـا نمي باشد. فلش بسيار محدودکننده تر از قالب HTML بوده کـه به هر حال ديدن آن احتياج به يک Plugin اختصاصي دارد و با بيشتر امکانات کاربردي مرورگرهاي وب مانند دکمه Back سازگاري ندارد مگر اين که لينکي به يک صفحه HTML جديد از فــايل فلش پيوند داده شده بـــاشد که در اين صورت انيميشن صفحه قبـل بــايد از ابتدا شروع شود، تــا جائيکه محدوديتهــاي موجود ممکن است بــا توجه به اهداف طراحي وب سـايت، بي ربط بنظر برسند.
براساس آمـار 98 درصد از کاربــران وب در آمريکا برنــامه اجراي فلش را بـرروي رايــانه هاي خود نصب کرده اند و حدود 45 تا 56 درصد از آنها آخرين نسخه اين برنامه را دارند که البته نوساناتي نيز در اين آمار وجود دارد.
بسياري از طراحـان گرافيک از فلش به جهت کنترل کاملي کـه برروي هر بخش از طرح به آنها مي دهد و حرکت و روحي که به هر المان اضافه ميشود استفاده ميکنند.
برخي از طراحــــان برنــامه هــاي کاربردي به اين دليل از فلش استفــاده مي کنند که به آنهــــا اجازه ســـاخت برنــامه هائي را مي دهد که نيــازي به دوباره خواني و يـــا رفتن به صفحه جديد به ازاي هر فعل و انفعـــالي را ندارد. فلش توانائي استفاده از فونت هايي که برروي اغلب رايانه ها نصب نشده اند را دارد.
سايتهــاي بسياري وجود دارد که تمامــا در قالب فلش هستند. سايتهــاي ديگري نيز از فلش به جاي فايلهــاي تصويــري jpeg و يا gif استفـاده مي کنند، البته با قابليت حجم کمتر فايلهــاي برداري و سرعت بيشتر دريــافت فايلها.
همينطور از فلش مي توان براي جلوگيري از تکثير و يا جستجوي غير مجاز استفاده کرد.
مخالفان فلش ادعــا مي کنند که وب سايتهاي فلش طرحي کامل نداشته و اغلب داراي رابط کاربر مغشوش و غير استاندارد مي باشند. هم اکنون موتورهاي جستجو قادر به فهرست بندي فايلهـاي فلش نيستند که باعث مي شود مطالب ســايت به سادگي پيدا نشده و مورد جستجو قرار نگيرند، دليل آن اين است کـه بسيــاري از موتورهــاي جستجوگر، وب ســايتها را بــا تکيه بر متن، فهرست بندي مي کنند. البته اين قابليت وجود دارد که براي مرورگرهائي که توانائي نمايش فايلهــاي فلش را ندارند، مطالب جايگزين مشخص شود که اين مطالب به درک بهتر موتورهاي جستجوگر از سايت مي انجامد و باعث بوجود آوردن ديد بهتري از سايت مي شود.
زبــان اسکريپت نويسي فلش، Action Script ناميده مي شود و بـــه زبــان JaveScript شباهت دارد کــه البتـه ويژگي هاي مفيدي را با يکديگر ادغام نموده است. مثلا در خصوص اندازه قلم، پاسخ به رويدادهاي زمـان اجرا، امکاناتي براي افراد نابينا و بسياري ويژگيهاي ديگر.
ActionScript يک زبان شي گرا بوده که امکان استفاده از CSS ،XML و طراحي برنامه هاي کاربردي وب بر پـايه کلاس هاي ساخت يافته را در فلش به ما مي دهد.
وب سايت هاي پوياو ايستا
وب سايتهاي ايستا معمولا به وب سايتهايي گفته مي شود که صفحات آن يک بار ايجاد و تا مدت زماني تغيير نمي يابند و در صورت نياز به تغيير و بروزرساني صفحات آن معمولا اين کار پر دردسر و زمان بر است و در صورت نياز به تغيير بايستي صفحه تغيير يافته منتشر ( Upload ) گردد .
وب سايتهاي دايناميک به وب سايتهايي گفته مي شود که در طراحي آن از زبانهاي برنامه نويسي استفاده شده است و در صورت نياز به تغيير در سايت ( ايجاد صفحه جديد ، ويرايش متون ، ايجاد پيوند و ... ) اينکار به سادگي و توسط نرم افزار نوشته شده مخصوص آن انجام مي پذيرد .
در وب سايتهاي دايناميک صفحه به پايگاه داده وصل بوده و با توجه به درخواست کاربر ( جستجو ، پيوند به صفحه و ... ) محتويات صفحات تغيير مي يابند .
روش قديمي مورد استفاده در طراحي صفحات وب (HTML)، بصورت ايستا (Static) است که بـراي تبديل آن به مطالب پويا دو روش وجود دارد:
•روش سمت سرويس دهنده (Server-side)
•روش سمت سرويس گيرنده (Client-side)
در روش Server-side يک سرور وب که نرم افـــزار خاصي را اجرا ميکند، يک صفحه HTML مطابق بـا درخواست کاربر و متناسب با ديگر متغيرها ايجاد مي کند.
:: زبانهاي اسکريبت نويسي متداول عبارتند از:
PHP-Perl-JSP-ColdFusion-ASP-ASP .NET-Ruby-Python
مانند دايرکتوري معروف ايراني www.yaoo.ir که آينده روشني در انتظار اين سايت ميباشد.هزاران ايراني روزانه از اين دايرکتوري بازديد کرده و به اهدافشان ميرسند.
در روشClient-side ، کدهــا در مرورگــر طراحی کاربـر اجـرا مي شوند و بنـابراين بــراي کارهــاي مهم نبــايد از اين روش استفاده شود زيـرا از قابليت ها و امکانات کاربر اطلاعي نداريم . اين روش بيشتر هنگــام آرايش و تزيين صفحه وب و يــا بکــار بـردن مطالب بي دوام و بلادرنگ مورد استفـاده قــرار مي گيرد کـــه در بيشتــر مواقع اين اعمــال بوسيله JavaScript انجام مي شود.
DHTML سمت سرويس گيرنده نيز در جهت افزايش تحرک و فعل و انفعالات در صفحات وب بوجود آمده است که البتـه در کنــار امکــانــاتي کـه عرضه نموده ميتواند بــــاعث بروز مشکلاتي پيرامون دسترسي به صفحــات و يــا بهينه ســـازي موتورهاي جستجو گردد. اغلب نرم افزارهــاي طراحي شده بــراي کمک به افــراد معلول و بيشتر موتورهاي جستجو از DHTML سمت سرويس گيرنده پشتيباني نمي کنند.
در صورتي که فهرست (Menu) يک وب سايت بوسيله JavaScript ساخته شده باشد، بطور معمول موتورهاي جستجو قادر به تشخيص صفحـاتي که در فهرست، پيوند داده شده اند نيستند مگر اين که تمهيداتي در جهت قراردادن راهنماهاي جايگزين در ديگر جاهاي صفحه در نظر گرفته شده باشد.
ASP .NET
تکنولوزي توليد و نوسعه صفحات دايناميک مي باشد که به سه زبان #VB, C# , J نوشته مي شود.
ASP .NET بخشي از NET Platform. شرکت مايکروسافت و جانشين تکنولوژي قديمي تر از آن بــه نــــام ASP است. ASP .NET بر پــايــه "زبـــان مشترک زمــان اجـــرا" ساخته شده است، به اين معني که برنــامه نويســان مي توانند کــدهاي ASP .NET را بــا استفــاده از هر زبــان برنامه نويسي NET. مايکرو سافت بنويسند.
پايگاه داده (Database)
در علوم رايانه، پايگاه داده به عنوان يک مجموعه ساخت يــافته از داده ها يا اطلاعات ذخيره شده در يک رايانه تعريف مي شود. بطوريکه ميتوان آنرا براي پاسخ به درخواستها کاوش نمود.
داده هاي بازيــافت شده در جواب درخواستها، اطلاعاتي را به ما مي دهند که به عنوان نتــايج، مورد استفاده قرار مي گيرند. برنــامه کامپيوتري مورد استفــاده براي اداره کردن و جستجو نمودن يک پايگــاه داده، سيستم مديريت پايگــاه داده (DBMS) ناميده ميشود. خصوصيـات و طراحي سيستمهــاي پايگــاه داده در علم اطلاعات گنجانده شده اند.
Microsoft SQL Server يکي از انواع پايگاه داده مي باشد که از سيستم مديريت پايگاه داده رابطه اي استفاده مي کند و توليد شده توسط مايکروسافت است.
HP - PHP: Hypertext Preprocessor
PHP يک زبان برنامه نويسي انعکاسي است که در ابتدا براي توليد صفحات وب پويا ساخته شده بود.
PHP بيشتر در اسکريپت نويسي سمت سرويس دهنده بکار ميرود. بطور کلي PHP بر روي يک سرويس دهنده وب اجــرا مي شود بطوري کــه کدهــايPHP بــه عنوان داده هاي ورودي گرفتــه شده و صفحــات وب بـه عنوان خروجي ايجــاد مي شوند، بعلاوه از PHP ميتـوان براي اسکريپت نويسي(Command-line) و نيـــز ايجــاد رابــط گرافيکي کاربـــر سمت سرويس گيرنده استفــاده کــرد. PHP مي تواند بر روي اکثــر سرورهــاي وب و تقريبــا هر سيستم عاملي به راحتي قرار گيرد.
همچنين گروه PHP، کد منبع کامـل خود را براي ساخت، تغيير و توسعه PHP جهت استفــاده شخصي کاربـران، در اختيار آنها قرار داده است
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
بروند، شبکه عصبي از آنها ديگر استفاده نمي کند و مسير ديگري را در مغز انتخاب مي کند. از ديدگاه وي اين امکان وجود دارد که شبکه اي با تعداد زيادي اتصالات براي تکرار ايجاد شوند تا در صورت نابودي بخشي از آن، همچنان به صورت مجموعه اي به هم پيوسته کار کند. تا نيمه دهه ?? ميلادي کسي به نظرات او توجه اي نکرد. تا اينکه در سال ???? نيروي هوايي آمريکا و«آزمايشگاه هاي بل» به نظرات او علاقه مند شدند و پنتاگون با سرمايه گذاري در طراحي و ساخت شبکه اي براساس نظريات او موافقت کرد. طراحی وب سایت
ولي آقاي باران (Baran) بنابر دلايلي حاضر با همکاري با نيروي هوايي آمريکا نشد. در اين ميان دانشمندي با نام تيلور (Tailon) وارد موسسه آرپا (ARPA) شد. او مستقيما به آقاي هرتسفلد رييس موسسه پيشنهاد کرد: (ARPA) آرپا هزينه ايجاد يک شبکه آزمايشي کوچک با حداقل چهار گره را تامين کند که بودجه آن بالغ بر يک ميليون دلار مي شد. با اين پيشنهاد تيلور تجربه اي را آغاز کرد که منجر به پيدايش اينترنت امروزي شد. او موفق شد در سال ????، دو کامپيوتر را در شرق و غرب آمريکا به هم متصل کند. با اين اتصال انقلابي در نحوه صدور اطلاعات در دنياي ارتباطات رخ داد که نتيجه آن را امروز همگي شاهد هستيم. اين شبکه به بسته هايي (packet) از داده ها که به وسيله کامپيوترهاي مختلف ارسال مي شدند اتکا داشت. پس از انکه ازمايشها سودمندي انرا مشخص کردند ساير بخش هاي دولتي و دانشگاهها پژوهشي تمايل خود را به وصل شدن به ان اعلام کردند . ارتباطات الکترونيکي به صورت روشي موثر براي دانشمندان و ديگران به منظور استفاده مشترک از داده ها در امد. در همان زمان که ARPAnet در حال رشد بود تعدادي شبکه پوشش محلي (LAN) در نقاط مختلف آمريکا به وجود امد. مديران LANها نيز به وصل کردن کامپيوترهاي شبکه هاي خود به شبکه هاي بزرگتر اقدام کردند . پروتوکل اينترنت ARPAnet IP زبان استاندارد حکمفرما براي برقراري ارتباط کامپيوترهاي شبکه هاي مختلف به يکديگر شد.تاريخ تولد اينترنت به طور رسمي اول سپتامبر ???? اعلام شده است. زيرا که اولين “IMP” در دانشگاه “UCLA” واقع در سانتاباربارا در اين تاريخ بارگذاري شده است.
از اوايل دهه ???? رشد استفاده از اينترنت به صورت تصاعدي افزايش يافت . يکي از علل چنين استقبالي ابزار جستجويي مانند Gopher و archie بوده است اما اينها در سال ???? تحت تاثير word wide web قرار گرفتند که به وسيله CERN يا ازمايشگاه فيزيک هسته اي اروپا ساخته شد . با ان که اينترنت از ابتدا طوري بود که مبادله اطلاعات براي تازه واردان بسيار ساده باشد. بزرگترين جهش در وب در سال ???? با عرضه نرم افزار موزاييک mosaic که نخستين برنامه مرورگر وب گرافيکي بود به وجود امد. برنامه موزاييک محصول تلاش دانشجويان و استادان بخش "مرکز ملي کاربردهاي ابر کامپيوتر " در دانشگاه ايلينويز آمريکا بود. براي نخستين بار موزاييک امکانات اشاره و کليک (به وسيله موش) را فراهم کرد. کاربران مي توانستند صفحات وب (web page) يا مجموعه اي از متن و گرافيک را کنار هم بگذارند تا هر کسي که ميخواست انها را بتواند روي اينترنت ببيند. وقتي با موش روي طراحی وب سایت کلمه ها يا تصاوير خاصي که hyper link ناميده مي شد کليک مي کردند برنامه موزاييک به طور خود کار يک صفحه ديگر باز مي کرد که به کلمه يا تصوير خاص و کليک شده اختصاص داشت. بهترين بخش اين سيستم انجا بود که hyper linkها مي توانستند به صفحاتي روي همان کامپيوتر يا هر کامپيوتر ديگر اينترنت با خدمات وب اشاره کنند. صفحات وب هر روز متولد مي شدند و مفهوم موج سواري يا surfing روي وب متولد شد. اواسط سال ???? سه ميليون کامپيوتر به اينترنت وصل شده بود و در ان هنگام اجراي عمليات اهسته نشده بود. صفحات جديد وب که شامل همه چيز از اسناد دولتي تا مدارک شرکت ها و مدل هاي جديد لباس بود در سراسر دنيا چندين برابر شد . موزاييک و جانشينان ان مانند navigator محصول شرکت " نت اسکيپ " اينترنت را از قلمرو علمي به ميان مردم اوردند. طبق اخرين امار ?? درصد کاربران بعد از سال ???? وارد اين محيط شده اند. ميليون ها انساني که از اينترنت استفاده مي کنند نيازي ندارند که نکات فني مانند TCP/IP را بدانند . امروزه شرکتهاي خدمات دهنده اينترنت يا ISP اين کار را به عهده دارند.رشد روز افزون ان و ساده تر شدن استفاده ان همچنان ادامه دارد . هر چه تعداد مردم بيشتري به اينترنت رجوع کنند تعداد شرکت هاي سازنده برنامه هاي اينترنت بيشتر مي شود.با انکه بعضي از عاشقان اينترنت ان را نوعي شيوه زندگي مي دانند. در نظر بيشتر کاربران منبع سرگرمي اطلاعات است ولي بيشترين مصرف ان پست الکترونيکي يا همان email است که يکي از ابزارهاي ارتباطي کار امد به شمار مي رود. پيامها از کامپيوتري به کامپيوتر ديگر با سرعت پرواز مي کنند و منتظر ميمانند تا شخص فرصت خواندن انها را پيدا کند . وب امکانات خوبي براي کپي از نرم افزارهاي مجاز از لحاظ کپي فراهم ميسازد. وقتي که مي بينيم که در مدت کوتاهي اينترنت به چنين رشدي نايل آمده است، مطمئنا دشوار خواهد بود که آينده او را پيش بيني کنيم. طبق نظر کارشناسان ماهانه ?? درصد به تعداد کاربران اينترنت افزوده مي شود ولي تعداد دقيق کاربران که روزانه از آن استفاده مي کنند مشخص نيست. هرچند که پاره اي از کارشناسان تعداد آنها را تا ??? ميليون نفر حدس مي زنند. تعداد رسمي کاربران اينترنتي را در سال ???? کارشناسان ??? ميليون نفر اعلام کرده بودند.
قطعا در سال هاي آينده تحولات شگرفي را در زمينه شبکه هاي اينترنتي شاهد خواهيم بود. به وسيله اينترنت انسان به راه هاي جديدي دست پيدا کرد. در کنار اين شانس جديد توسط اينترنت، بايد بگوييم خطراتي نيز در رابطه با سياست و اقتصاد و علم به دنبال خواهد داشت. فرم امروزي اينترنت مديون همکاري تمام کاربران اينترنت در سرتاسر گيتي است که با اين تصور که اطلاعات موجود در سطح جهان را به راحتي با يکديگر مبادله کنند. اين تصوري بود که آقاي باران(Baran) از اينترنت داشت و اميدواريم در آينده نيز تکامل اينترنت در اين مسير باشد.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
Creative Web Design
We handle just about any web design work you can throw at us. Whether you’re a small business owner, freelancer, artist, writer, or bespoke candlestick maker, we’ll get you online with a great looking creative web design that works. From large not-for-profits to micro-businesses, we design websites tailored to each and every one
of our clients. Check out our latest web designs to see for yourself\
We love designing easy to use, professional, highly creative websites. What’s more, we make sure they’re easy to update so someone in your office can manage the site easily in house without any coding knowledge. Explainafide is a complete web design agency; we handle everything from website design, inteet marketing, branding, search engine optimisation (SEO), e-commerce solutions, copywriting and of course any graphic design work you can dream of.
If you have an average website, your business is nearly as bad off as if it had no website at all.
And we don’t do average…
More than most industries, web developers tend to use a bewildering amount of buzz words and catch phrases, leaving potential clients confused and out of pocket. That’s where we come in….
At Explainafide, we give you straightforward advice to decode the Mumbo-Jumbo and help you make an informed decision on what will work best for you and your company.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
Media چيست؟
در يک سند HTML برخي قسمت هاي صفحه مخصوص پرينت گرفتن مي باشند و بايد از style مربوط به print پيروي کنند و بعضي ديگر از قسمت ها از جمله navigation سايت نيازي به print ندارند و ميتوناد از هر نوع style اي استفاده کند.
از اين رو css چندين خصوصيت براي کنترل نحوه ي نمايش سند در رسانه هاي (media) مختلف فراهم مي کند.
براي هدف قرار دادن رسانه هاي مختلف بايد از صفت media در تگ <link> يا در تگ style استفاده کرد يا درون قواعد نوشته شده ي css ميتوان از قاعده ي @media براي نشان کردن رسانه هاي مختلف استفاده کرد.
انواع media
انواع مختلف media عبارت اند از
all : مخصوص تمامي deviceها
braille : استفاده براي deviceهاي مخصوص نابينايان
embossed : استفاده براي printer هاي مخصوص خط braille
handheld : استفاده براي device هاي جيبي و قابل حمل مثل tabletها
print : اين مقدار براي ارائه ي style به printer استفاده ميشود. (در مروگرها مي توان از قسمت print preview براي مشاهده ي يک صفحه در اين حالت استفاده کرد.)
projection : استفاده براي ويدئو پروژکتورها
screen : مخصوص نمايش در صفحه نمايش کامپيوتر
tv : استفاده براي تلويزيون
مقدار پيشفرض : all
فقط مقادير screen , print و all در مرورگرها به صورت گسترده پشتيباني مي شوند.
استايل print
حال کد رو در مرورگر اجرا کنيد، و سپس دکمه ي CTRL+P رو بزنيد تا به حالت print preview برويد، خواهيد ديد که دقيقا متون در حالت print همانند حالت screen هست.
حال ما ميخواهيم براي حالت print يک استايل متفاوت بنويسم
کد زير رو به کدهاي css اضافه کنيد :
اگر دقت کرده باشيد، بعضي مواقع در هنگام پرينت يک صفحه html لينک ها غير فعال مي شوند، و ديگر معلوم نيست که اين متن، به کدام صفحه لينک شده است، پس حتما راهي براي نمايش دادن آدرس لينک ها باشد، در css خصوصيتي به نام content وجود دارد، که از ان براي اضافه کردن متني به ابتدا يا انتهاي متن موجود استفاده مي شود.
مثال کد html
کد بالا تعيين مي کند که پس از تگ a در داخل پرانتر مقدار صفت href آن لينک را قرار دهد
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
در اين جلسه از آموزش css با گزينشگرهاي صفت يا همان attr selectors آشنا خواهيم شد.
براي انتخاب يک صفت در css پس از انتخاب تگ، صفت و مقدار آنرا در داخل [] قرار مي دهيم به کد زير دقت کنيد :
tagname[attribute="value"] {
// some code
}
براي مثال مي خواهيم با استفاده از صفت alt رنگ متن مان را تغيير دهيم
کد html
1
<p alt="red-text">7lea</p>
2
<p alt="blue-text">7lea</p>
کد css
p[class="blue-text"] {color: blue;}
اين کد تعيين ميکند تگ p که مقدار صفت class ان برابر با blue-text است رنگش را برابر با آبي قرار بده.
کد بالا و کد
.blue-text {color: blue;}
کار يکساني را انجام مي دهند. البته فقط مرورگرهاي مدرن و ie9+ از همه ي صفت ها پشتيباني مي کنند مرورگرهاي قديمي فقط از تگ input، صفت type پشتيباني مي کنند.
بسيار خب اموزش اين جلسه به پايان رسيد
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
طراحی وب سایت
2013/06/09آموزش html, آموزش طراحي سايت, طراحي سايتديدگاه ها
در سلسله آموزشهاي طراحي سايت آنلاينر به بخش چهارم Event attribute در html پرداختيم.
در اين مقاله قصد بررسي embed کردن : video sound flash را داريم , و ميخواهيم اين فايل ها را در صفحه وب خود وارد کنيم.
وارد کردن يک فايل فلش
براي اينکه بتوانيد يک فايل فلش را در صفحه وب خود وارد کنيد بايد قدم به قدم و مرحله به مرحله دستور العمل هاي زير را اجرا نماييد.
- پوشه اي در آدرس ريشه سايت خود با نامي دلخواه ايجاد کنيد. اين پوشه چون بايد حاوي فايل هاي فلش باشد پس بهتر است نام آن پوشه را flash انتخاب کنيد تا فايل هاي سايت شما مرتب و سازماندهي شوند. ميتوانيد حتي اين پوشه را در کنار صفحه وب خود (لوکال) قرار دهيد و پس از گرفتن نتيجه درست آن را توسط FTP به هاست خود منتقل نماييد.
?- فايل فلش خود را در پوشه ايجاد شده قرار دهيد. نام فايل فلش را به ياد داشته باشيد تا در کد نويسي مجبور به ارجاع دوباره به فايل فلش نشويد در اين مثال ما نام فايل را flashhtml.swf قرار ميدهيم.نکته ديگر اينکه سعي کنيد تا حد امکان حجم فايل فلشي که در صفحه وب استفاده ميکنيد کم باشد تا در سرعت لود صفحه وب سايت شما تاثير کمتري داشته باشد. پيشنهاد ما براي اندازه فايل فلش عرض ??? پيکسل و ارتفاع ??? پيکسل است.
?- فايل html صفحه وب خود را باز کرده و مکاني را براي درج فايل فلش خود انتخاب نماييد.در صورت تمايل تگ DIV براي نگهداري اين ويديو در جاي مناسب خود ايجاد نماييد.
?- کدهاي زير را در مکان انتخاب شده در صفحه وب خود قرار دهيد.
طراحی وب سایت
<object width="500" height="500">
<param name="movie" value="flash/flashhtml.swf">
<embed src="flash/flashhtml.swf" width="500" height="500">
</embed>
</object>
5- فايل خود را ذخيره کرده و اجرا نماييد تا نتيجه تمرين خود را مشاهده نماييد.
وارد کردن يک فايل صوتي در صفحه HTML
مواقعي لازم است تا يک فايل صوتي را در صفحه وب خود درج نماييد. به طوري کاربر بتواند به کليپ صوتي در صفحه وب شما گوش دهد.
به مثال زير دقت کنيد:
<HTML>
<HEAD>
<TITLE> testing </TITLE>
</HEAD>
<BODY>
<EMBED SRC="aladdin.mid" HIDDEN="true" AUTOSTART="true"
STARTTIME="00:10" ENDTIME="00:30">
</BODY>
</HTML>
در مثال بالا آدرس فايل صوتي توسط صفت SRC مشخص ميشود.
صفت HIDDEN اگر با مقدار true مقدار دهي شود شيء مورد نظر مخفي خواهد شد و کاربر نميتواند آن را مشاهده نمايد ولي کليپ صوتي پخش خواهد شد.
صفت autostart اگر مقدار true داشته باشد با لود شدن کامل صفحه کليپ صوتي شروع به پخش شدن ميکند.
صفت starttime نيز مکان شروع به پخش کليپ صوتي را تعيين ميکند . دراين مثال مقدار آن برابر ??:?? قرار داده شده است، اين بدين معني است که فايل صوتي از ثانيه ?? شروع به پخش ميکند.
مسلما صفت endtime نيز مکان اتمام کليپ صوتي را تعيين ميکند. مقدار ??:?? در اين مثال بدين معني است که کليپ صوتي در ثانيه ?? ام به پايان برسد.
صفات ديگري نيز وجود دارد که در اين مثال استفاده نشده است. در زير اين صفات توضيح داده شده اند.
VOLUME = اين صفت ميزان صدا را تعيين ميکند.
LOOP=”true”|”false” همانطور که مشاهده ميکنيد صفت loop با دو مقدار true و false تعيين ميشود. اگر مقدار آن true تعيين شود با اتمام کليپ صوتي اشاره گر آن به اول کليپ برگشته و دوباره شروع به پخش خواهد کرد. اين عمليات تا بستن صفحه وب ادامه ميابد.
PLAYCOUNT = و اين صفت نيز تعداد دفعات پخش کليپ صوتي را تعيين ميکند. اگر مقدار اين صفت را برابر ? قرار دهيم با پخش ? دفعه کليپ صوتي عمليات پخش اتمام ميابد.
وارد کردن يک فايل ويديويي در HTML
براي وارد کردن يک ويدئو به صفحه وب خود راه هاي متعددي وجود دارند که هر کدام مزيت ها و مشکلاتي نسبت به يکديگر دارند.
به مثال زير دقت کنيد. براي نشان دادن يک کليپ ويدئويي در صفحه وب از تگ video استفاده شده است که اولين ايراد آن اين است که اين تگ در مرور گر هاي قديمي قابل به نمايش نيست.
انواع مختلف فايل هاي ويدئويي با فرمت هاي مختلف توسط تگ source شناسانده شده است تا در مواقعي که احيانا مرورگري از يک نوع فايل پشتيباني نکرد فايل هاي ديگري براي نمايش وجود داشته باشند.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
</body>
</html>
روش ديگر براي نمايش يک کليپ ويدئويي اين است که از همان روشي که فايل هاي فلش را در صفحه وب نمايش ميدهيم نيز براي نمايش کليپ ويدئويي نيز استفاده کنيم. از معايب اين روش اين است که کليپ تصويري بايد به فايل فلش تبديل شود. ودومين عيب آن اين است که مرور گر هايي که فايل هاي فلش را پشتيباني نکنند نميتوانند کليپ تصويري شما را نمايش دهند.
طراحی وب سایت
در آموزش بعد به embedDeprecated tags ميپردازيم.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
شايد به جرات بتوان گفت که راحت ترين روش براي موقعيت دهي به عناصر استفاده از موقعيت دهي مطلق براي عناصر است. در هنگام استفاده از موقعيت دهي مطلق مي بايست موقعيت آن عنصر را از بالا و چپ صفحه نيز معين کنيم. تصور کنيد از يک مغازه جواهر فروشي مي خواهيد خريد کنيد و آدرس يک قطعه طلا را مي خواهيد به شخص فروشنده بدهيد، مي گوييد " مي توانم آن ساعتي را که در ستون پنجم است و از بالا در رديف سوم قرار دارد را ببينم؟"
استفاده کردن از موقعيت دهي مطلق به سادگي انجام مي شود تنها کافيست که جهت هاي مد نظر خود را (موقعيت آن عنصر از بالا و چپ) در کنار موقعيت مطلق داده شده به عنصر در فايل css آن اضافه نماييد. در مثال زير، ما موقعيت هاي top و left را براي يک div با عرض 90px در نظر گرفته ايم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان به ميزان px200 فاصله ايجاد کرده ايم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id="redblock">This is the red block.</div>
<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>
</body>
</html>
design-web-142.jpg
آماده شدن براي جابجايي عنصر با استفاده از موقعيت دهي:
در اين قسمت به موقعيت دهي مطلق به عناصر و با توجه به فاصله آنها از بالا و چپ نسبت به پنجره مرورگر شروع مي کنيم. به همين دليل مي بايست ابتدا زماني را در نظر بگيريد و استايل هاي موقتي را که داده ايد حذف کنيد. در نتيجه ما نيز استايل هاي پدينگ و بردر داده شده را که به عنصر body مان داده بوديم پاک مي کنيم.
- فايل style. css را باز کردهو پدينگ و بردر داده شده به عناصر Body را پاک کنيد.
- در عوض به جاي آن، دو خصيصه padding و margin را نوشته و مقادير آنها را برابر با صفر قرار دهيد.
استايل هاي بکار برده شده براي عناصر body شما در فايل css مي بايست مانند زير باشد:
body {
background-color: #e2edff;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}
حالا مرورگر خود را refresh نماييد آنچه که ملاحظه مي نماييد مي بايست همانند تصوير زير باشد:
design-web-143.jpg
تگ هاي سر تيتر درون صفحه يعني BubbleUnder.com و About Us به وسيله مارجين احاطه شده اند. که اين مارجين توسط مرورگر به آنها داده شده حتي اگر ما خودمان به آنها مارجين ندهيم. ايده خوبي است که بياييم و اين مارجين ها را از بين ببريم وسعي کنيم تا تيترها تا آنجايي که امکان دارد به گوشه بالا و سمت چپ div دربرگيرنده آن نزديک شوند. اين امر باعث مي شود تا موقعيت دهي به تيتر ها براي ما راحتتر شده و همچنين مطمئن مي شويم که صفحه وب ما درون تمامي مرورگر ها به صورت يکسان نمايش مي يابد.
- در فايل style.css تگ h1 را بيابيد.
- خصوصيت جديدي به آن اضافه نماييد و مقدار مارجين آن را برابر با صفر قرار دهيد.
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
- tagline p# را نيز درون فايلcss يافته و مقدار مارجين آن را حذف نماييد:
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}
صفحه سايت خود را refresh نماييد. فواصلي که قبل و بعد از تيترهاي ذکر شده در تصوير بالا گفته شد مي بايست از بين رفته شده باشد و تصويري همانند شکل زير را مشاهده نماييد.
design-web-144.jpg
خوب حالا در اين مرحله سايت شما از هر زمان ديگري زشت تر خواهد شد اما مهم نيست و نبايد نگران باشيد چرا که اين امر موقت است و تنها بايد توجه داشته باشيد که براي اينکه به راحتي جابجا شدن عناصري از صفحه را که مي خواهيد و به صورت مطلق جاي آنها را درون صفحه معين کنيد را مشاهده نماييد به آنها Border اي با رنگ قرمز بدهيد تا جابجايي آنها برايتان مشخص باشد. سپس به انتهاي فايل css خود خصوصيت جديد زير را اضافه نماييد.
#navigation, #bodycontent, #header {
position: absolute;
}
حالا فايل css را ذخيره کرده و مجددا صفحه سايت را refresh نماييد.
• به هيچ وجه از به هم ريختگي سايت خود نگران نشويد !
حتما الان از به هم ريختگي سايت خود ناراحت هستيد و با خود مي گوييد که آيا هر بار که مي خواهيد از موقعيت دهي مطلق استفاده نماييد با همچين صحنه اي روبرو خواهيد شد؟! بسياري از طراحان وب سايت براي هر عنصري از سايت که مي خواهند از موقعيت دهي مطلق استفاده کنند از همان ابتدا فاصله آن را از بالا و سمت چپ پنجره مشخص مي نمايند تا آن عنصر سر جاي خود قرار گيرد و با تصويري مانند آنچه که شما با آن مواجه شده ايد را برخورد نکنند، اين کار تنها با تمرين امکان پذير است و به نظر من اهميت کار در اينجاست که شما با اين روند به طور کامل آشنا شويد.
design-web-145.jpg
همانطور که ميبينيد هر سه قسمتي که مقدار مطلق گرفته اند در گوشه چپ و بالاي سايت بر روي يکديگر افتاده اند، چون ما به مرورگر براي هر يک از آنها مقدار مجزايي نداده ايم و بنابراين مرورگر تنها آنها را همانطور که در سورس مقدار دهي شده اند نمايش مي دهد. تنها مي داند که آنها به طور مطلق مقدار دهي شده اند و اينکه موقعيت هر يک از آنها کجاست را نمي داند.
پس بياييد با جابجا کردن محتواي اصلي سايت و منوي راهبري به سمت پايين محتواي تگ Header را ببينيد. در فايل css خود دستور زير را اضافه کنيد:
#navigation, #bodycontent {
top: 120px;
}
اين دستور باعث مي شود تا دو عنصر , #navigation #bodycontent به سمت پايين شيفت يابند. اين تغيير را مي توانيد در تصوير زير ببينيد. حالا موقعيت از top را براي اين دو عنصر تعيين کرديم اما همانطور که در شکل مي بينيد، منوي راهبري و متن درباره ما بر روي هم ديگر افتاده اند پس از سمت چپ به آنها موقعيت (فاصله) مي دهيم تا در کنار يکديگر قرار گيرند. به همين دليل به عنصر bodycontent به اندازه px200 از سمت چپ فاصله مي دهيم تا از منوي راهبري که پهنايي برابر با 180px دارد فاصله گرفته و در کنار آن قرار گيرد.
design-web-146.jpg
پس با توجه به توضيحات داده شده آنچه که مي بايست به css خود اضافه کنيد تا ظاهر سايت درست شود، بدين صورت است:
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 200px;
}
design-web-147.jpg
براي اينکه طراحي صفحه سايت ما تمام شود همچنان کمي کار لازم است تا انجام شود:
- محدوده header و tagline تا انتهاي سطر ادامه ندارند.
- بين tagline و h1 فاصله بيهوده اي وجود دارد.
- پدينگ و بردر هاي قرمز داده شده به عناصر را مي بايست حذف کنيم.
- يک يا دو کامنت مي بايست به css مان اضافه کنيم تا توضيح بدهيم که در اين قسمت چه کاري انجام داده ايم.
خوب حالا شروع مي کنيم به ايجاد تغييرات گفته شده در بالا تا طرح نهايي اين صفحه از سايتمان ساخته شود.
- تگ body و منوي راهبري را از بالا به جاي px120 به ميزان 107px فاصله دهيد . اين کار باعث مي شود تا پس از حذف کردن بردر هاي قرمز فاصله ميان تگ ها مناسب باشد.
- بردرهاي قرمز رنگي را که پيش تر ايجاد کرده بوديم را حذف مي کنيم.
- در نهايت فکر خوبيست تا براي تمامي عناصري که موقعيت مطلق داده ايم کامنتي براي توضيح بنويسيم تا بدانيد که چکاري انجام داده ايد.
به اين ترتيب آنچه که با توضيحات بالا براي ايجاد تغيير در فايل css خود ايجاد کرده ايم، به صورت زير خواهد بود:
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
from the top-left coer of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent
left: 200px;
}
#header {
width: 100%;
}
به اين صورت سوال مطرح شده اين است که اين تغييرات وب سايت ما را به چه شکلي در مي آورد؟ صفحه ساخته شده وب شما نيز بايد همانند تصوير زير باشد:
design-web-148.jpg
تقريبا مي توان گفت که ظاهر سايت عالي شده است اما يک کار کوچک ديگر نيز مي توان انجام داد تا ديگر طراحي سايت ما عالي به نظر برسد. به تگ Header يک بردر از بالا با ضخامت 3px بدهيد. براي منوي راهبري از همان رنگ آبي اي که براي tagline استفاده کرده ايد و بياييد تا بردر نقطه چين دور منوي راهبري را حذف کنيم. دستورات تغييرات گفته شده نيز بدين صورت خواهد بود:
#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
aspx پسوند فايل default و IR پسوند دامنه ماست. خب حالا فرق .com و .net و .ir و … در چيست؟ هر يک از پسوند هاي دامنه معناي خاصي دارد. مثلا پسوند .ac.com يا ac.ir را براي دانشگاه ها و موسسات آموزش مي گذارند. هر دامنه بسته به نوع خود در سازمان مربوطه و هر سازمان اجازه اجاره آن را از سازمان خاصي مي گيرد. براي مثال براي ثبت دامنه phpassistant.ir ، ما بايد به سازمان نيک مراجعه کنيم تا آن را براي ما ثبت کنند. دامنه هايي با پسوند عمومي مثل net يا com در سازماني به نام Domain Name Register Center ثبت مي شود. اگر شما بخواهيد دامنه اي ثبت کنيد مشخصات شما را مي خواهند. خواستن مشخصات به اين دليل است که مشخصات شما در پايگاه Whois ثبت شود و از دزديده شدن دامنه شما جلوگيري شود. Whois چيست؟ کجاست؟ Whois يک پايگاه وابسته به سازمان ثبت دامنه است که با جستجوي هر دامنه DNS ، نام مشخصات مالک و نام ثبت کننده نمايش داده مي شود که آن را در سايت هاي اجاره دامنه حتما ديده ايد.
DNS دامنه چيست؟ مانند آجرهاي يک خانه است. آدرس DNS ها ممکن است به صورت زير باشد:
ns1.server.com
ns2.server.com
DNS براي اين که هاست شما به دامنه شما مربوط شود ، تنظيم مي شود. سرور هاي ns1 ممکن است قطع باشند به همين دليل بايد ns2 کار کند. اگر به هر دليلي Data Center هاست شما از بين برود ، DNS هاي شما نيز از بين مي روند تا دامنه بدون هاست شما دزديده نشود.
هاست يا Host يعني چه؟ با توضيحات بالا فهميديد که هاست و دامنه به يک ديگر وابسته اند. هاست (Host) در زبان انگليسي به معني ميزبان است. يعني ميزباني سايت شما برعهده شرکتي است که شما انتخاب کرديد. Host يک کامپيوتر تحت شبکه است که توسط cpanel سايت شما کنترل مي شود. محتواي اين کامپيوتر يک سيستم عامل است که شما انتخاب کرديد لينوکس يا ويندوز. و در درايو هاي ديگر محتوايي که شما از طريق cpanel براي سايت خود ريخته ايد وجود دارد. پس Host هم يک کامپيوتر است که با وسايل جانبي پيشرفته و مودم هاي مخصوص ، به cpanel متصل شده و در شبکه اينترنت پخش مي شود. براي اين هاست ها بايد حتما DNS دامنه تنظيم شود. ممکن است بگوييد من و دوستم از يک هاست خريده ايم ولي DNS هايمان فرقي ندارد. چرا؟ DNS پرتکول خاصي ندارد و تنظيمات DNS نيز توسط مرورگر ها قابل مشاهده نيست. DNS فقط شامل يک نشاني نيست بلکه به طور اتوماتيک يوزرنيم و پسورد هاست مربوطه نيز در هاست ها به آدرس DNS فرستاده مي شود تا بتوان کنترل DNS را در دست گرفت.
هاست VPS چيست؟ هاست VPS فقط در يک کامپيوتر اجرا مي شود و توسط سخت افزار هاي مخصوص مجازي سازي مي شود. يک سوپر کامپيوتر وظيفه چندين کامپيوتر را دارد و به هر سايت مقداري رم و فضا اختصاص مي دهد. اين هاست ها معمولا گران هستند ولي سرعت آن ها بيش از بقيه هاست است. هاست VPS معمولا براي سازمان هاي هاستينگ خيلي قوي و پرمشتري گذاشته مي شود.
Data Center چيست؟ وقتي سايت هايي مثل فيس بوک تا اين حد بازديد دارند خب بديهيست که اگر بخواهند تمام اطلاعات ميليون ها کاربر را بر روي يک کامپيوتر هاست مجازي يا هاست معمولي ذخيره کنند کامپيوتر بلافاصله کرش کرده و تمام اطلاعات کاربران در عرض يک چشم به هم زدن از بين مي رود. پس بايد جهت کمتر شدن هزينه و افزايش مقدار فضا آن ها را به قسمت هاي مختلفي که شبيه کابل هاي برق هستند و در آن اطلاعات ? و ? رد و بدل مي شود. هر هاست معمولي مجازي يا هر نوع هاست بايد يک يا چند Data Center داشته باشد.طراحی وب سایت
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
آموزش طراحی وب سایت
وظيفه اصلي تگ div در واقع چيدمان صفحه و طراحی وب سایت قالب صفحه است و به همين دليل است که نسبت به table فوق العاده انعطاف پذيرتر است. شما براحتي مي توانيد يک div را در هر مکاني از صفحه در کوتاهترين زمان قرار بدهيد. حالا به اين انعطاف پذيري قابليت حرکت ( انتقال ) را که با کمک تکنولوژي آژاکس اضافه شده نيز بي افزاييد.
از طرف ديگر، div کد کمتر و بهينه تري (<div> </div>) نسبت به يک table (که معادل <table><tr><td></td></tr></table>) ايجاد مي کند. که اين هم باعث کاهش حجم صفحه توليدي مي شود و هم باعث لود شدن سريعتر صفحه .
نکته ديگري که وجود دارد آن است که crawler ها که وظيفه جستجوي و ذخيره کردن صفحات را براي موتورهاي جستجو ( مثلگوگل ) بعهده دارند. چون بصورت معنايي صفحات را crawl مي کنند بنابراين اگر صفحه شما بهتر و معنايي تر ايجاد شده باشد ، ازPage rank بالاتري هم برخوردار خواهد بود. مشکل Crawler ها در ايجاد ارتباط بين مطالب داخل تيبل است. زمانيکه شما مطالب مرتبط با يک موضوع را در بخش هاي مختلف يک تيبل قرار ميديد Crawler ها در نحوه ارتباط اين بخش ها با هم و همچنين نحوه ارتباطشون با مطلب اصلي دچار سردرگمي ميشن.
نکته ديگري که يک div را در قالب بندي دردرجه بالاتري قرار مي دهد، انعطاف پذيري آن در CSS هاست. به اين معني که شما مي توانيد يک قالب چندين منظوره ايجاد کنيد و بعد با تغيير مکان div ها که با css انجام مي دهيد . کل قالب صفحه تغيير شکل پيدا مي کند.
حالا با اين همه برتري div نسبت به table ممکن است براي شما اين سوال ايجاد شود که table براي چه مواردي بايد استفاده شود. طراحان html همانطور که div را براي قالب بندي وقرار دادن متن و تصوير طراحی وب سایت پياده سازي کردند. table را هم براي ايجاد صفحات به شکل Tab و ايجاد جداول ( ليست هاي موجود در صفحه) بوجود آوردند. در اکثر مواقع توصيه مي شود که براي پياده سازي Tab ها از table استفاده کنيد. همانطور که مسلما خود شما هم متوجه شديد با استفاده از يک table براحتي مي توان يک tab را پياده سازي کرد. درصورتي که اگر بخواهيد همان tab را با div پياده سازي کنيد بايد زمان و انرژي بيشتري صرف کنيد.
در کل با توجه به اين نکات کليدي طراحی وب سایت :
حجم کمتر صفحه توليد شده
Page rank بالاتر در گوگل و ساير search engine ها
قالب انعطاف پذيرتر
براي قراردادن متن و تصوير در وب توصيه شده که از div استفاده شود
کنترل بيشتر بوسيله css
جدول صرفا براي ساختار tabي مناسب است
کنترل و حرکت توسط آژاکس
…
به شما اکيدا توصيه مي کنم که بجاي استفاده از table در قالب بندي صفحات از div استفاده کنيد و از قدرت آن لذت ببريد.
....
عنوان اصلي : Creating First Web Site In Dreamweaver CS4
آموزش طراحي سايت هاي بسيار زيبا اما ساده در نرم افزار Adobe Dreamweaver CS4 به مدت زمان 2 ساعت و 40 دقيقه در آموزش مالتي مديا محصول موسسه آموزشي Lynda ارائه شده بر روي 1 حلقه CD به همراه فايل هاي تمريني
اين آموزش پروسه طراحي يك سايت را در نرم افزار دريم ويور CS4 به شما مي آموزد از ساختن يك صفحه ساده HTML تا استايل گذاري بر روي آن بوسيله CSS و همچنين نحوه ساخت انواع فرم ها به عنوان مثال فرم تماس با ما .
اين مجموعه آموزش بهترين مجموعه آموزش براي شروع آموختن طراحي وب است .
در ادامه با برخي از سرفصل هاي درسي اين مجموعه آموزش Dreamweaver CS4 آشنا مي شويم :
آشنايي با مدرس مجموعه و سرفصل هاي اين كورس آموزشي از زبان مدرس شامل 3 درس
آموزش مفاهيم اوليه وب و وب سايت ها شامل 3 درس
آموزش ساخت صفحات طراحی وب سایت در دريم ويور شامل 5 درس
آموزش اعمال CSS ها براي سبك بندي صفحات وب در Adobe Dreamweaver CS4 شامل 4 درس
آموزش پيشرفته CSS ها در Dreamweaver CS4 شامل 5 درس
آموزش ذخيره و استفاده از قالب ها در Dreamweaver CS4 شامل 1 درس
آموزش وارد كردن تصاوير در صفحات وب شامل 2 درس
آموزش ساخت Photo Gallery و كاربرد فايل هاي فلش در صفحات وب شامل 3 درس
آموزش ساخت فرم تماس وب سايت در Dreamweaver CS4 شامل 2 درس
آموزش تست كردن نهايي براي رفع ايرادات آن و در نهايت آموزش كامل قرار دادن يك وب سايت بر روي اينترنت شامل 3 درس
و چندين و چند آموزش كاربردي ديگر مانند آموزش آماده سازي طراحی وب سایت براي موتورهاي جستجو ، استفاده از FTP و بسياري موارد ديگر
مشخصات اين مجموعه :
زبان آموزش ها انگليسي روان و ساده
داراي آموزش هاي مالتي مديا و دسته بندي شده
ارائه شده بر روي 1 حلقه CD به همراه فايل هاي تمريني
مدت زمان آموزش 2 ساعت و 40 دقيقه !
محصول موسسه آموزش آموزشي ليندا
فروشنده: فروشگاه تخصصي شركت فرين
روش خريد: براي خريد آموزش ساخت طراحی وب سایت با Dreamweaver CS4 ، پس از كليك روي دكمه زير و تكميل فرم سفارش، ابتدا محصول يا محصولات مورد نظرتان را درب منزل يا محل كار تحويل بگيريد، سپس وجه كالا و هزينه ارسال را به مامور پست بپردازيد. جهت مشاهده فرم خريد، روي دكمه زير كليك كنيد.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita
در مطلب گذشته از بخش آموزش مقدماتی جاوا اسکریپت (javascript)، خلاصه و کوتاه در مورد این زبان انعطاف پذیر و کاربردهای آن در صفحات طراحی وب سایت(html9گفتیم و چند مثال را با هم بررسی کردیم؛ در این مطلب می خواهیم متغیرها، محاسبات، عملگرها و نکات کلی مورد نیاز جهت آشنایی و شروع کدنویسی جاوا اسکریپت را به کمک مثال با هم مرور کنیم، سعی کرده ایم که آموزش ها به ساده ترین و در عین حال کاربردی ترین شکل ممکن عنوان شوند تا از طرح مباحث خسته کننده و تکراری جلوگیری شود.
نکات کلی که باید در باره طراحی وب سایت بدانید:
- جاوا اسکریپت حساس به حروف بزرگ و کوچک است، یعنی به فرض متغیر var با Var از نظر مفسر این زبان متفاوت است.
- برای قرار دادن متن راهنما بین کدها از شیوه /*متن راهنما*/ یا متن راهنما// استفاده کنید.
- کدهای جاوا اسکریپت بین تگ head یا body قابل اجرا هستند و به صورت فایل خارجی نیز می توان آنها را ایمپورت کرد.
- جاوا اسکریپت زبانی سمت کاربر است، یعنی تنها روی مرورگر کاربران قابل پردازش و اجرا است.
متغیر ها در جاوا اسکریپت
شاید واژه متغیر در نگاه اول کمی پیچیده به نظر برسد اما در یک بیان ساده متغیر چیزی نیست جزء عنصری که طی یک فرایند برنامه نویسی ممکن است در چند موقعیت مختلف و یا با مقادیر مختلف مورد استفاده قرار گیرد، به عنوان مثال کارخانه ای را تصور کنید که مواد اولیه را (به عنوان متغیر) تهیه کرده و در طی فرایند تولید و انجام فعل و انفعالاتی، تبدیل به محصولات قابل استفاده می کند، متغیر در جاوا اسکریپت و اکثر زبان های برنامه نویسی کارکردی اینچنین دارد (البته در بیانی خیلی ساده)،
از بخش آموزش مقدماتی جاوا اسکریپت (javascript)، خلاصه و کوتاه در مورد این زبان انعطاف پذیر و کاربردهای آن در صفحات وب (html) گفتیم و چند مثال را با هم بررسی کردیم؛ در این مطلب می خواهیم متغیرها، محاسبات، عملگرها و نکات کلی مورد نیاز جهت آشنایی و شروع طراحی وب سایت کدنویسی جاوا اسکریپت را به کمک مثال با هم مرور کنیم، سعی کرده ایم که آموزش ها به ساده ترین و در عین حال کاربردی ترین شکل ممکن عنوان شوند تا از طرح مباحث خسته کننده و تکراری طراحی وب سایت جلوگیری شود.
نیازسنجی و اینکه چرا می خواهیم PHP را فرا بگیریم؟
به نظر من این مرحله یکی از مهمترین مراحلی است که باید به درستی پشت سر بگذارید. این مرحله مهم است چون در هر کاری اصلی ترین و ابتدایی ترین عامل ،هدف انجام کار است. وقتی شما به هدف واقف باشید قاعدتاً اشتیاق بیشتری به یادگیری دارید و میدانید که وقتتان را بیهوده تلف نکرده اید.
شما میخواهید یک زبان برنامه نویسی را یاد بگیرید،در آن حرفه ای شوید و به احتمال زیاد از آن کسب درآمد کنید.از استثنا ها که بگذریم شما حداقل چند سال باید روی این موضوع زمان بگذارید پس بهتر است زمانی این کار را انجام دهید که مطمئن شده باشید که زبان درستی را انتخاب کرده اید که می تواند نیازهای شما را در طراحی وب سایت برآورده کند.اگر هنوز در انتخاب زبان PHP برای یادگیری شک دارید و مزایا و کاربرد آن نسبت به زبانهای دیگر برای شما واضح و روشن نشده است ،بهتر است جلوتر نروید و اول این مرحله را به سرانجام برسانید.
فراگیری مفاهیم اولیه برنامه نویسی
هر زبان برنامه نویسی یک اصول و مفاهیم پایه دارد. به عنوان مثال قبل از اینکه شما دستور for یا while را در php بخواهید بخوانید و استفاده کنید بهتر است اندکی با مفهوم حلقه ها و محل کاربرد آنها آشنایی پیدا کنید.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita