آخرین مطالب
امکانات وب
پيدايش اينترنت و زبان کدنويسي HTML
اگر به چند دهه قبل بازگرديم تقريبا هيچ کس نميدانست که وب اينترنت و کدنويسي وب چيست ولي امروزه به يکي از مهمترين بخش هاي زندگي بشر تبديل شده است.
اينترنت ديگر تنها مکاني براي يافتن يک رستوران خوب يا لوله کش نيست، بلکه به فضايي گسترده و مناسب جهت کار و کسب درآمد تبديل گشته است
با اين حال شرايط هميشه به همين شکل نبوده و در ابتداي مسير محدوديت هاي فراواني در کدنويسي وب و ارائه اطلاعات وجود داشت
اولين نسل از زبان HTML در آن زمان صفحات وب از متن هايي محدود و در يک ستون تشکيل ميشدند و مودم هاي ديال آپ سرعت بسيار پاييني داشتند به همين دليل طراحان وب هرگز به فکر استفاده از تصوير و فيلم در صفحات سايت نبودند.
Mosaic نام اولين مرورگر براي ارتباط و درک صفحات وب بود که بر روي سيستم عامل Unix راه اندازي شد. براي غلبه بر اين مشکلات و محدوديت ها تلاش هاي فراواني صورت گرفت تا دنياي وب به شکل امروزي آن رسيده است.
نسل دو زبان کدنويسي HTML
مدت زماني طول کشيد تا طراحان وب خود را با تکنولوژي هاي رو به پيشرفت همگام و هماهنگ کنند. به همين دليل با ايجاد هماهنگي و با ايده فعال و زيبا کردن صفحات وب به ناگهان صفحات زيادي با ظاهر هاي بهم ريخته و شلوغ که تنها به استفاده از تصاوير و رنگ هاي مختلف توجه کرده بودند ايجاد شد. دستورات کدنويسي HTML به سرعت افزايش يافت تا جاييکه براي ايجاد يک هماهنگي عمومي نسخه دوم يعني HTML2 رونمايي شد.
پيچيدگي در کدنويسي وب از همين مرحله آغاز شد و بزرگترين مانع سرعت پايين اينترنت در ديافت عکس و گرافيک براي کاربران عمومي بود.
کنسرسيوم جهاني وب
کدنويسي HTML
کنسرسيوم جهاني وب ناظر مستقيم بر استانداردهاي کدنويسي HTML
با گسترده تر شدن امکانات به اين ترتيب سياست هاي کلي و زبان کدنويسي در همه جه يکسان بوده و مرورگرهاي اينترنت براساس همين پروتکل ها عمل خواهند کرد، در نتيجه تفاوت آنها تنها در ظاهر، سرعت و امکاناتشان خواهد بود. همين امر موجب پيشرفت سريعتر و هدفمند اينترنت شد.
W3C با مشخص کردن استاندارهاي کدنويسي براي طراحان وب و نظارت بر رعايت آن يک سامان دهي و هماهنگي جهاني ايجاد کرده و هرگونه تغيير و بروزرساني در آن به سادگي در اختيار همگان خواهد بود.
نسل سوم زبان HTML
نشل سوم تجربه بهتري براي کاربران اينترنتي بهمراه داشت زيرا طراحان و متخصصان کدنويسي وب توجه بيشتري به نظم در صفحات و نحوه ارائه مطالب نشان ميدادند. در اين مقطع قدرت و پتانسيل بالاي اينترنت بر همگان آشکار شد.
نسل چهارم کدنويسي HTML
HTML4 در عمل پيش درآمد و مقدمه اي براي نسل پنچم يا همان زبان کدنويسي HTML5 بشمار ميرود و تا امروز جديدترين نسخه ارائه شده است. اين نسخه جديد افزونه ها و امکانات بسيار زيادي داشته و با تمام مرورگرهاي موجود همخواني لازم را دارد. عده اي دو نسخه اخير را همچنان افزونه هايي بر نسخه سوم ميدانند زيرا توجه به کاربران و راحتي استفاده از اينترنت از HTML3 آغاز شد.
کدنويسي و اينترنت در دنياي امروز
در دنياي کدنويسي امروز طراحان ميتوانند هر ايده اي را به واقعيت نزديک کرده و در سايتهاي اينترنتي به نمايش بگذارند. کوچکترين جزئيات در صفحات قابل تغيير و کدنويسي HTML هستند.
با افزايش استفاده از اينترنت و ورود مفاهيمي مانند بازاريابي اينترنتي، تبليغات آنلاين و موتورهاي جستجو طراحان وب به اين نتيجه رسيدند که تنها نبايد به ظاهر و زيبايي وبسايت هاي خود توجه کنند، بلکه با کدنويسي صحيح و رعايت اصول ميتوانند توجه موتورهاي جستجو را به خود جلب کرده و بازديدکنندگان بيشتري را جذب کنند. اين روند همچنان به رشد و پيشرفت خود ادامه داده و ممکن است در آينده اي نه چندان دور شاهد تغييرات شگرفي در دنياي اينترنت باشيم.
ادامه مطلب کدنويسي HTML و بررسي سير تکاملي زبان HTML
Under Creative Commons License: Attribution Share Alike
Follow us: @websima on Twitter | websima on Facebook
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : hasan webdesigna13 بازدید : 194
Jquery يک زبان برنامه نويسي مبتني بر کتابخانه جاواسکريپت مي باشد که امروزه با گسترش صنعت وب ، و مطرح شدن زمان، سرعت و کيفيت به عنوان اصول مهم در طراحي وب سايت ها و سيستم هاي تحت وب ، به يکي از محبوب ترين و پر کاربردترين تکنيک هاي طراحی و برنامه نويسي تحت وب تبديل شده است . توانايي Jquery در خلق محيط هاي گرافيکي سبک و جذاب ، و امکان ترکيب شدن آسان آن با HTML , CSS آن را به يک رقيب جدي براي Flash تبديل کرده و به عقيده اکثر کارشناسان در آينده نزديک در بسياري از موارد جايگزين Flash خواهد شد.در اين مقاله مختصرا به شرح برخي از ويژگي هاي Jquery مي پردازم.
سازگاري کامل با کليه مرورگرها
سازگاري Jquery با کليه ي مرورگرهاي وب يکي از اصلي ترين مزاياي آن مي باشد . امروزه به دليل گسترش سريع تکنيک هاي برنامه نويسي و به موازات آن ها دگرگوني سريع مرورگرهاي وب ، اصل "سازگاري با کليه مرورگرها" به عنوان يکي از مهمترين اصول طراحي وب مطرح گرديده است که Jquery آن را به طور کامل پوشش مي دهد.
حجم پايين و بارگذاري سريع
سبک بودن و سريع بودن Jquery مهمترين مزيت آن در مقابل Flash مي باشد ، به طوري که حجم کامل کتابخانه 15 Jquery کيلوبايت بوده که در مقابل حجم محيط هاي گرافيکي توليد شده توسط فلش بسيار ناچيز محسوب مي شود و در کشورهايي که هنوز اينترنت پرسرعت براي کليه کاربران در دسترس نيست يک اصل طلايي محسوب مي شود.
سازگار بودن با موتورهاي جستجوگر
Jquery به دليل ترکيب مناسب با HTML و امکان ترکيب با محتوي هاي شامل متن ، اين امکان را براي موتورهاي جستجوگر فراهم مي کند که به آساني متن مورد نظر را پيدا کنند و از اين رو امکان Index شدن صفحه مورد نظر را فراهم مي کند ، که اصلي مهم براي سازگار بودن وب سايت با قوانين SEO (قوانين استاندارد موتورهاي جستجوگر) به شمار مي آيد .
عدم نياز به برنامه جانبي
مزيت ديگر Jquery عدم نياز آن به برنامه کمکي جهت اجرا شدن مي باشد ، با توجه به اين که برنامه هاي توليد شده توسط فلش براي اجرا شدن بر روي کامپيوتر کاربر احتياج به برنامه کمکي مثل Adobe Flash Player مي دارند ، عدم نياز به برنامه هاي کمکي يک مزيت مهم براي Jquery محسوب مي شود . همچنين شايان ذکر است که Jquery با زبان فارسي سازگاري کامل دارد و کاربرهاي ايراني مي توانند به راحتي از مزاياي آن بهره مند شوند. برخي از کاربران معروف Jquery : IBM, Netflix, Google , Microsoft و ....
گردآوري: واهاگن سرکس پور
ر آرشيو
فن تک – مجله اينترنتي فناپ
درباره فن تکتماس با ماخانه
سرخط فن تک
خطرات پرداخت با موبايل افزايش يافته است
درک اهميت معتبر سازي کدهاي HTML
بهترين شرکت هاي نرم افزاري براي کار در سال ????
آموزش نصب Windows Phone SDK 8.0
تبلت VTech InnoTab 3 ويژه کودکان
ويژگي هاي تجاري براي توسعه دهندگان شبيه ساز Firefox OS
مروري بر شارژر بي سيم Qi گوشي گلکسي اس ?
آموزش وارد کردن فيدهاي گوگل ريدر به اکانت Feedly
نکسوس ? جديد تا پايان جولاي وارد تايوان مي شود
راه حل هايي براي مشکلات Windows Phone 8
آينده طراحي وب در ???? چگونه خواهد بود؟
دي ??, ????
?- افزايش طراحي‌هاي واکنش گرا (Responsive) [fn] طراحي هاي واکنش گرا (Responsive): نوعي رويکرد در طراحي يک وب سايت که در آن سايت با لايه هايي انعطاف پذير طراحي مي شود و سايت مي تواند با تشخيص Device که کاربر از آن استفاده کرده است، بهترين وضعيت براي پاسخ گويي به صفحات نمايش را به صورت اتوماتيک انتخاب نمايد . طراحي وب سايت به صورت واکنش گرا باعث مي¬شود تا وب سايت تقريبا در تمامي دستگاه ها با اندازه صفحات متفاوت و مرورگرهاي متفاوت قابل استفاده باشد . [/fn]
در اين مدل طراحي عناصر وب سايت به صورتي قرار مي گيرند که به نسبت تغيير ابعاد صفحه نمايش دستگاه، اندازه عناصر نيز تغيير مي کند و يا حتي بعضي از آنها حذف مي شوند. به طور مثال اندازه عناصر و نحوه نمايش آنها در دستگاه هاي مختلف همانند کامپيوترهاي شخصي، تبلت ها و تلفن هاي هوشمند تغيير مي کند. رشد استفاده از تلفن هاي هوشمند و تبلت ها براي وب گردي از مهمترين دلايل گرايش برنامه نويسان به اين مدل طراحي مي باشد.
جاي تعجب نيست که طراحي Responsive همچنان در طراحی مدل فعلي ادامه پيدا کند. اما در سال ???? بايد منتظر اين باشيم که متدولوژي پشت اين گونه طراحي تغيير کند. به عنوان مثال در آغاز سال ???? ايده اين طرح اين بود که از يک سري Break Point براي هر مدل دستگاه استفاده شود، اما با ورود نسخه ميني از آيپد، اين ايده به چالش کشيده شد و تغيير کرد.
به گزارش مجله فناوري اطلاعات فناپ، پيش بيني مي شود که وب سايتهاي بيشتري از اين مدل طراحي استفاده خواهند کرد تا اطمينان حاصل کنند که وب سايت آنها بر روي طيف گسترده اي از دستگاه ها به خوبي نمايش داده ميشود. ايده توجه نکردن به اندازه صفحه نمايش دستگاه ها کمک مي کند که به طراحي Responsive بهتري دست پيدا کنيم. بنابراين در ???? شاهد خواهيم بود که وب سايت هاي بيشتري از BreakPoint ها براي طراحي خود استفاده خواهند کرد.
?- تايپوگرافي در وسط صحنه خواهد بود
طراحان وب و توسعه دهندگان هميشه تمرکز خود را بر روي کاهش حجم عناصري همچون تصاوير و جاوا اسکريپت ها مي گذارند تا وب سايت سبک تري داشته باشند. همانطور که در چند سال گذشته اولين پيشرفت هاي وب در زمينه هاي نمايشي به وجود آمد، استفاده از اين ترکيب ها طراحان را مجبور مي کرد تا از تصاوير بيشتري در طراحي خود استفاده کنند. اما طراحان بايد بدانند که امکانات خوبي براي زيباتر کردن وب سايت ها موجود مي باشد. يکي از اين امکانات استفاده از @font-face در CSS مي باشد که طراح را قادر مي سازد تا متون مختلف را با فونت هاي مختلفي که بر روي سرور ذخيره شده اند، نمايش دهند. حجم اين فونت ها به نسبت باقي تصاوير و افکت هاي جاوا اسکريپت سبک تر هستند. قبلا اين کار امکان پذير نبود و طراح بايد از فونت هاي استاندارد استفاده مي کرد که ظاهر جالبي نداشتند، اما با اين ويژگي جديد مي توان هر فونتي را براي نوشته ها انتخاب کرد.
استفاده از تايپوگرافي در طراحي Responsive به نسبت استفاده از Layout هاي پيچيده که از تصاوير مختلف و جاوا اسکريپت استفاده مي کنند، بسيار ساده تر مي باشد.
?- خداحافظ فلش!
جاي تعجب نيست که استفاده از فايل هاي فلش در وب سايت ها در سال ???? پايان يابد و ديگر شاهد آن ها نباشيم. استفاده از فلش روزهاي پاياني خود را سپري مي کند و بسيار آشکار است که فلش تنها بر روي يک پاي خود ايستاده است. استفاده از فلش براي SEO وب سايت بسيار بد است و موتورهاي جستجو آن را به عنوان نمره منفي حساب مي کنند، بسياري از تلفن هاي هوشمند از آن پشتيباني نمي کنند (مثلا محصولات اپل) و به روز رساني هاي آن بسيار سخت است و باعث Crash کردن مرورگرها مي شود. علاوه بر اين تکنولوژي هاي جايگزين بسيار خوبي براي آن مثل HTML5 و CSS3 آمده اند.
پيش بيني اين است که در سال ???? شاهد پايان فلش خواهيم بود و طراحان و توسعه دهندگان کمتري به سمت استفاده از آن خواهند رفت.
?- تاثير بيشتر با تصاوير بزرگتر
اين پيش بيني دقيقا در مقابل پيش بيني قبلي در مورد استفاده از تايپوگرافي قرار خواهد گرفت. در پيش بيني قبلي گفتيم که استفاده از تايپوگرافي به خاطر حجم کمتر بيشتر خواهد شد، اما بسياري از وب سايت ها از اين قاعده پيروي نخواهند کرد. آنها تمايل دارند تا از تصاويري با حجم زياد براي رساندن مفهوم خود استفاده کنند و اعتقاد دارند که اين روش تاثير بيش تري بر روي مخاطب خواهد داشت.
در اين لينک و اين لينک مي توانيد ليستي از اينگونه وب سايت ها را ببينيد که با استفاده ار تصاويري با کيفيت و حجم بالا سعي در تحت تاثير قرار دادن مخاطب خود دارند. فکر نمي کنم که روند استفاده از اين ترفند کاهش پيدا کند. اين صحيح است که تصاوير بزرگ مي توانند تاثير بيشتري داشته باشند، و شرکت ها هم مي دانند. بنابراين پيش بيني مي کنيم که اين روند حداقل تا نيمه سال ???? رشد خواهد داشت.
?- فضاي سفيد بيش تري به من بده!
در انتهاي سال ???? وب سايت ها در طراحي خود از فضاي سفيد بيش تري استفاده کردند. پيش بيني مي کنيم که اين روند همچنان در سال ???? ادامه پيدا کند. طراحي وب Responsive و زيبايي استفاده از فضاي خالي (که MySpace از وب سايت هاي پيشرو در اين زمينه مي باشد) هر دو از فاکتورها موجود هستند. استفاده از اين فضاهاي خالي باعث مي شود تا وب سايت شما حرفه اي تر به نظر برسد.
?- اشتراک گذاري بيشتر در شبکه هاي اجتماعي
اگر نگاهي دقيق تر به وب سايت هاي قديمي و يا جديد بيندازيد، حتي وب سايت هاي خبري هم داراي گزينه هايي براي اشتراک گذاري اطلاعات در شبکه هاي اجتماعي هستند. پيش بيني من اين است که وب سايت ها در سال ???? پيوند بيشتري با شبکه هاب اجتماعي خواهند داشت و اين روند به طور گسترده اي افزايش خواهد يافت.
?- رنگ هاي Calmer دوباره استفاده خواهند شد.
گرايش به رنگ ها بيشتر از هر چيز ديگري در حال تغيير هستند. اما مثل اينکه استفاده از زمينه هايي با رنگ آرام در وب سايت هاي جديد شدت يافته است و حتي در طراحي نسخه جديد رابط کاربري PayPal نيز مشهود است. رنگ سال ???? به انتخاب موسسه Pantone’s را نيز مي توانيد در اين صفحه مشاهده کنيد.
پيش بيني اينکه چه رنگ هايي ممکن است براي طراحي وب سايت ها در سال ???? استفاده شود، بسيار سخت است. در هر صورت رنگ هاي روشن شانس بيشتري طراحی براي استفاده در طراحي هاي جديد وب سايت ها و اپليکيشن هاي تلفن هاي همراه خواهند داشت. البته استفاده از رنگهايي همچون ترکيبات سفيد، طوسي و طيف هاي مختلف مشکي دور از انتظار نخواهد بود.
?- اپليکيشن هاي تلفن هاي هوشمند جايگزين نسخه هاي تحت وب خواهند شد
گرايش به کار کردن وب سايت ها بر روي تمام دستگاه ها از جمله تلفن هاي همراه روز به روز بيش تر مي شود. اما در اين ميدان نبرد به نظر مي رسد که وب سايت هاي معروف با ارائه اپليکيشن اختصاصي خود براي تلفن هاي هوشمند بهتر عمل کرده اند. توييتر، فيسبوک، Pinterset و … نمونه هاي مناسبي هستند که اپليکيشن تلفن همراه آنها توانسته است تا تجربه بهتري نسبت به نسخه تحت وب آنان به کاربران منتقل کند.
در سال ???? حرکت از نسخه تحت وب به سمت اپليکيشن هاي اختصاصي براي تلفن همراه توسط وب سايت ها گسترش خواهد داشت و هر روز افراد بيشتري به سمت اپليکيشن هاي اختصاصي خواهند رفت. براي مقايسه کافي است که با تلفن همراه خود يک بار از نسخه تحت وب فيسبوک استفاده کنيد و تجربه خود را با تجربه اپليکيشن فيسبوک مقايسه کنيد.
?- محتواي وب سايت ها همچنان پادشاهي خواهند کرد!
محتواي وب سايت‌ها همچنان به سلطنت خود در سال ???? ادامه خواهند داد. وب سايت ها بدون محتوا حيات نخواهند داشت. چيزي که وب سايت‌ها را در بالاي ليست رسانه ها نگه مي دارد، نياز روز افزون به دسترسي به اطلاعات در هر زمان و مکان است، که ما نيز تمام تلاش خود را جهت برآورده کردن اين نياز در مجله فناوري اطلاعات فناپ به کار گرفته ايم. محتويات وب سايت ها همچنان در رتبه ? گرايش وب سايت ها در سال ???? خواهد بود و پس از آن طراحي Responsive قرار خواهد گرفت.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 221
در اين جلسه از آموزش css با گزينشگرهاي صفت يا همان attr selectors آشنا خواهيم شد.
همانطور که ميدانيد تگ هاي html داراي صفت هايي نيز هستند ما در اين جلسه خواهيم آموخت که چگونه به هر تگ با صفت هاي مختلف استايل متفاوتي دهيم.
براي انتخاب يک صفت در css پس از انتخاب تگ، صفت و مقدار آنرا در داخل [] قرار مي دهيم به کد زير دقت کنيد :
1
tagname[attribute="value"] {
2
// some code
3
}
براي مثال مي خواهيم با استفاده از صفت alt رنگ متن مان را تغيير دهيم
کد html
1
<p alt="red-text">7lea</p>
2
<p alt="blue-text">7lea</p>
کد css
1
p[alt="red-text"] {color: red;}
2
p[alt="blue-text"] {color: blue;}
دقت داشته باشيد که مي توان از همه صفت هاي موجود استفاده کرد حتي class و id به طور مثال :
اين کد تعيين ميکند تگ p که مقدار صفت class ان برابر با blue-text است رنگش را برابر با آبي قرار بده
.blue-text {color: blue;}
کار يکساني را انجام مي دهند. البته فقط مرورگرهاي مدرن و ie9+ از همه ي صفت ها پشتيباني مي کنند مرورگرهاي قديمي فقط از تگ input، صفت type پشتيباني مي کنند.
بسيار خب اموزش اين جلسه به پايان رسيد
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 193
در اين جلسه از آموزش css با گزينشگرهاي صفت يا همان attr selectors آشنا خواهيم شد.
همانطور که ميدانيد تگ هاي html داراي صفت هايي نيز هستند ما در اين جلسه خواهيم آموخت که چگونه به هر تگ با صفت هاي مختلف استايل متفاوتي دهيم.
براي انتخاب يک صفت در css پس از انتخاب تگ، صفت و مقدار آنرا در داخل [] قرار مي دهيم به کد زير دقت کنيد :
1
tagname[attribute="value"] {
2
// some code
3
}
براي مثال مي خواهيم با استفاده از صفت alt رنگ متن مان را تغيير دهيم
کد html
1
<p alt="red-text">7lea</p>
2
<p alt="blue-text">7lea</p>
کد css
1
p[alt="red-text"] {color: red;}
2
p[alt="blue-text"] {color: blue;}
دقت داشته باشيد که مي توان از همه صفت هاي موجود استفاده کرد حتي class و id به طور مثال :
اين کد تعيين ميکند تگ p که مقدار صفت class ان برابر با blue-text است رنگش را برابر با آبي قرار بده
.blue-text {color: blue;}
کار يکساني را انجام مي دهند. البته فقط مرورگرهاي مدرن و ie9+ از همه ي صفت ها پشتيباني مي کنند مرورگرهاي قديمي فقط از تگ input، صفت type پشتيباني مي کنند.
بسيار خب اموزش اين جلسه به پايان رسيد
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 220
The reason why we decided to talk about educational website design is the relevancy of this topic in the mode world. Educational websites gain their popularity day by day. Choosing the right school or kindergarten for their kids, parents mostly rely on Inteet resources. The same situation touches student audience, too. Different researches have proved that users make aesthetic decisions about the overall visual impression of any web page in as little as 50 milliseconds. The importance of first impression can play a great role for your web service. Taking into account that the potential visitors of such websites are mostly young people, website owners have to follow all the newest trends of Educational website style. A weighty part in this case also takes information. Site has to be a source of any kind of information conceing educational process, conditions and regulations.
Let us make it clear: what makes educational sites successful?
Call-to-action. The goal of your site is to involve more clients to your school, kindergarten, etc. Make them want to visit your institution. Show the advantages of it, use more photo and video materials.
Well-built structure. Education services tend to have a lot of content including schedules, documentation for each program, reports and so on. Make sure your content is easy to search around and features clear navigation that makes sense to your visitors.
Make it look smart. The visitors associate your website with what your school does. The better it is presented online, the better opinion the visitors will have
about your work. طراحی وب سایت
When it comes to educational templates which can fit the general view of your educational organization, it shouldn’t be a platform to show off performance – everything has to be wisely balanced.
Today we will try to showcase you the most popular educational trends in design based on our templates collection that you may find interesting to apply for your future service:
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 197
riginal ticket http://trac.elgg.org/ticket/4368 on 42120438-08-31 by trac user ismayil.khayredinov, assigned to unknown.
Elgg version: 1.8.3
I've noticed that some of the css forces the size of the icon to a default even though the config sets a different size. One of the examples would be .elgg-avatar-small > a > img
I was wondering if we could just use config in the css file?
1 participant
elgg-gitbot commented 4 months ago
ewinslow wrote on 42365156-10-26
Elgg version: 1.8.3
There is no visual feedback for selecting an autocomplete item with the keyboard. Something like below would work:
ul.ui-autocomplete > li.ui-menu-item > a.ui-state-hover {
display: block;
border: 1px solid gray;
}
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 223
رويداد هاي موس Mouse Events
onclick : اين رويداد زماني اجرا ميشود که روي عامل مورد نظر کليک شود.
ondblclick :اين رويداد زماني اجرا ميشود که روي عامل مورد نظر دابل کليک شود.
ondrag :اين رويداد زماني اجرا ميشود که عامل مورد نظر درگ شود.
ondragend :اين رويداد در پايان عمليات درگ اجرا ميشود.
ondragenter :اين رويداد زماني اجرا ميشود که عامل مورد نظر در مقصد معتبري درگ شود.
ondragleave :اين رويداد زماني اجرا ميشود که عامل مورد نظر توسط درگ از مکان معتبر خود خارج شود.
ondragover :اين رويداد زماني اجرا ميشود که عامل درگ شده وارد منطقه معتبر شود.
ondragstart :اين رويداد زماني اجرا ميشود که عمليات درگ شروع شود.
ondrop :اين رويداد زماني اجرا ميشود که عامل درگ شده رها شود.
onmousedown :اين رويداد زماني اجرا ميشود که يکي از دکمه هاي موس پايين فشرده شود.
onmousemove :اين رويداد زماني اجرا ميشود که موس حرکت داده شود.
onmouseout :اين رويداد زماني اجرا ميشود که اشاره گر موس از محدوده عامل مورد نظر خارج شود.
onmouseover :اين رويداد زماني اجرا ميشود که اشاره گر موس وارد محدوده عامل مورد نظر شود.
onmouseup :اين رويداد زماني اجرا ميشود که يکي از دکمه هاي موس رها شود.
onmousewheel :اين رويداد زماني اجرا ميشود که دکمه چرخشي موس چرخش داده شود.
onscroll :اين رويداد زماني اجرا ميشود که در نوار اسکرول عامل مورد نظر اسکرول شود.
رويداد هاي موس در صفحات وب از اهميت خاصي برخوردارند به نحوي که هم در کارايي صفحه وب و هم در جذابيت و رفاه کاربر تاثير بسزايي دارد.
مثال زير کاربرد رويدادهاي onmouseup و onmousedown را به خوبي بيان ميکند.
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}
function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
روي متن کليک کنيد.</p>
</body>
</html>
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 233
فصل اول:
اين فصل در واقع آماده کردن کامپيوتر براي کار، قبل از زدن اولين طرح شماست.
قبل از اين که وب سايت خودتان را بسازيد، مي بايست کامپيوتر خود را براي کار آماده نماييد که شامل برنامه هايي است که يا در سيستم شما موجود مي باشد و يا اين که مي بايست آن ها را نصب نماييد.
برنامه هاي زيادي در بازار موجود مي باشد ولي در ابتدا از برنامه هاي رايگان و قابل دسترس استفاده مي کنيم.
وسايل و برنامه هاي اصلي که شما نياز داريد:
1- وسيل? ابتدايي براي ويرايش فايل هاي متني که در واقع صفحه وب شما را شامل ميشود
2- يک مرورگر (web browser) براي ديدن صفحات وب در آن
3- فرستادن صفحه وب سايت به محيط اينترنت با استفاده از ftp client
چون اکثر کاربران ما درايران از ويندوز استفاده مي کنند پس ابزارهاي موجود در ويندوز را بررسي خواهيم کرد.
ابزارهاي اوليه در ويندوز:
1- اديت کردن متن : براي اديت کردن متن در ويندوز مي توانيد از Notepad استفاده نماييد. اين متن، همان صفح? وب است .
براي دسترسي به اين برنامه در محيط ويندوز مسير زير را طي کنيد:
Start > All Programs > Accessories > Notepad
design-web-01.jpg
2- ديدن خروجي فايل : براي ديدن کار خروجي مي بايست از مرورگر و يا browser استفاده کنيم. مرورگرهاي متفاوتي وجود دارد که بحث آنها بسيار مفصل است ولي در محيط ويندوز مرورگر Inteet Explorer در دسترس است.
شما مي توانيد آن را در دسکتاپ خود و يا Quick Launch ويا فولدر برنامه ها و يا در منوي start پيدا کنيد.
design-web-02.jpg
3- براي فرستادن صفحه به محيط وب از دستور ftp استفاده خواهيم کرد که در ادامه به آن اشاره ميکنم.
ابزارهاي ديگر:
براي اديت کردن صفحات خود مي توانيد از برنامه NoteTab استفاده کرد .مزيت استفاده از آن اينست که مي توانيد تب هاي مختلفي را براي صفحات مختلف باز کنيد و بعد از بستن هم در حافظه ش مي ماند و براي دفعه بعد هم باز مي ماند.
design-web-03.jpg
آن را از اين آدرس دانلود نماييد.
همچنين مرورگرهاي گوناگوني وجود دارد که استفاده از آن ها را در کنار Inteet Explorer توصيه مي کنم. اما در اينجا از يکي از بهترين آنها را نام مي برم : firefox
design-web-04.jpg
اما همه عناصر که متن نيستند شما براي ويرايش عکس هم به برنامه هايي نياز داريد که مي توانيد از برنامه هاي زير استفاده کنيد:
Adobe photoshop
Adobe fireworks
Picasa
توصيه من استفاده از فتوشاپ است ، نگران نباشيد يادگيري آن براي کاربرد وب آسان است.
مرحله آخر - درست کردن مکاني است براي فايل هاي ساخته شده :
بعد از ساختن فايل هاي خود مديريت آنها بسيار مهم است و اين که در کجا فايل اصلي و در کجا تصاوير قرار گيرد و به همين ترتيب تمام عناصر وب سايت.
شما بايد يک فولدر بسازيد و تمام عناصر وب سايت خود را در آن قرار دهيد. فرض کنيد در دسکتاپ خود مي خواهيد يک وب سايت بسازيد.
Right click > new > folder
سپس نام وب سايت را انتخاب نماييد .حالا يک فولدر داريد که فايل اصلي به همراه تصاوير و css ,html ,..... را داخل آن قرار مي دهيد.
نگران نباشيد با هم پيش ميريم و به همه موارد خواهيم رسيد.
در فصل بعد شما اولين وب سايت خودتان را مي سازيد.
ادامه دارد اگر مورد استقبال قرار گيرد!
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 214
با سلام خدمت خوانندگان وب سايت عصر نوشتن با قسمت پنجم آموزش طراحي وب سايت از پايه در خدمت شما هستيم . در اين قسمت، براي تهيه يک سايت ساختاري را تعريف مي کنيم که يک ساختار کليدي در تهيه وب سايت هاي مدرن مي باشد و با شناخت اين ساختار مي توانيد در تهيه تمامي وب سايت ها توانا باشيد.
design-web-00.jpg
اضافه کردن يک ساختار به نام div:
تا اين لحظه ساختار پايه اي وب سايت و تگ هاي html و body و p براي پاراگراف وh براي هدر ها را شناختيم و با آن ها کار کرديم و در اين قسمت يک ساختار طلائي به نام div را معرفي مي نماييم.
div يک تگ بلاک است و به همراه تگ span بيشترين استفاده در صفحات استاندارد وب سايت را دارد .
اين تگ معمولا براي قرار دادن گروهي از عناصر داخل آن مورد استفاده قرار مي گيرد و داخل آن مي توان از عناصر ديگر مانند h1 , img , a , p و غيره استفاده کرد.
اين تگ هيچ استايلي از جمله margin و padding ندارد و براي شکل دادن به ظاهر آن از دستورات css استفاده مي کنيم.
به مثال زير دقت نماييد :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
<p>And just one more paragraph.</p>
<div>This is a div.</div>
<div>The content of each div appears on a new line.</div>
<div>But unlike paragraphs, there is no additional padding.</div>
<div>A div is a generic block-level container.</div>
و خروجي:
design-web-45.gif
در واقع اين تگ براي مديريت گروهي از عناصر استفاده مي شود و يا به عبارتي با div مي توانيد صفحه را به قسمت هاي مختلفي تقسيم نماييد .
نکته نويسنده مقاله: بر خلاف تمامي آموزش هاي ديگر در اين جا ابتدا تگ div تدريس مي شود و سپس سراغ تگ table يا همان جدول مي رويم .
به شکل زير دقت کنيد :
design-web-46.jpg
در اين مثال ما صفحه را به قسمت هاي متفاوتي تقسيم کرديم بالا براي بنر و سمت راست براي منو هاي سايت و سمت چپ براي قسمت اصلي سايت.
دقت کنيد که شما داخل تگ div مي توانيد تمامي عناصر مانند p , h1 , ul , a , img را قرار دهيد ولي به طور مثال نمي توانيد تگ div را داخل p قرار دهيد .
با بررسي مثال زير و نکات آن مي توانيد تجربه خوبي کسب کنيد :
در اين مثال ما صفحه را به 2 قسمت header و content body تقسيم کرده ايم . در قسمت header از 2 تگ h1 و p استفاده کرده ايم و در قسمت body content از تگ هاي بسيار زيادي استفاده کرده ايم .
در زير کد هدر نمايش داده شده است :
<div id="header">
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash!</p>
</div>
design-web-47.gif
در اين مثال علاوه بر توضيح تقسيم بندي سايت با تگ div ، استفاده از attribute بسيار مهم id هم توضيح داده مي شود .
Id و قوانين آن:
• معمولا از id براي تفکيک گروه هاي بزرگ مانند 2 مثال قبل استفاده مي شود
• يک نام id فقط يک بار در صفحه قابل استفاده است
• Id يک attribute است و header يک value براي آن طبق اين قانون : attribute="value"
• نام attribute بايد با حروف کوچک باشد مانند id , class و غيره و value آن داخل ""
تگ هاي تو در تو (nesting tag) :
در مطالب گذشته گفتيم که در تگ div مي تواند تگ هاي ديگري همچون p , ul و غيره قرار گيرد در حالي که خود تگ div ميتواند در داخل تگ div ديگري قرار گيرد که به اين نوع تگ هاي تو در تو گفته مي شود .
در بسياري موارد در طراحي هاي حرفه اي مجبوريم که از تگ هاي تو در تو استفاده کنيم و اين روش نظم خاصي به کار طراحي شما مي بخشد .
کد زير مي تواند شما را بيشتر با تگ هاي تو در تو آشنا کند :
<div id="outer">
<div id="nested1">
<p>A paragraph inside the first nested div.</p>
</div>
<div id="nested2">
<p>A paragraph inside the second nested div.</p>
</div>
</div>
در استفاده از تگ هاي تو در تو بايد به قانوني به نام Indenting Markup توجه کرد که شرح مي دهد تگ هاي داخلي را کمي جلوتر از سمت چپ نسبت به والد خود باز کرده و در همان راستا ببنديد . همان طوري که مي بينيد تگ div با id مشخص nested1 کمي با فاصله بيشتر از چپ نسبت به والد خود يعني تگ div با id مشخص outer باز شده است.
نکته ديگري که مي بايست براي خوانايي بيشتر در استفاده از تگ هاي تو در تو دقت نماييد استفاده از کامنت گذاري است که در قسمت هاي قبل توضيح داده شد .
</div> <!-- end of inner div -->
</div> <!-- end of nested div -->
</div> <!-- end of outer div -->
نکته خيلي مهم : استفاده از تگ هاي تو در توي بي مورد مي تواند از ارزش و استاندارد صفحات شما بکاهد و هم چنين هر تگي براي منظوري ساخته شده است مثلا p براي متون بلند و پاراگراف ها .پس در استفاده از تگ ها در طراحي وب خود دقت نماييد .
از اين به بعد سعي مي شود با طرح تمرين هايي به يادگيري شما سرعت بخشيم و البته کساني که بتوانند تمرينها را به درستي انجام دهند شانس بيشتري براي همکاري در آينده خواهند داشت .
براي تمرين اين قسمت از آموزش، شماي تگ هاي صفحه
فراموش نکنيد هنوز وب سايت شما ظاهر مناسبي ندارد براي شکل دادن به وب سايت خود بايد از css استفاده نماييد که در قسمت هاي بعدي توضيح داده خواهد شد .
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 268
اساس آموزش طراحي سايت ارائه شده در اين بخش براساس زبان HTML و اسکريپ نويسي با CSS و Jscript است. توجه کنيد استفاده از زبانهاي PHP و ASP تا حدود زيادي توسط HTML قابل پياده سازي هستند اما از آنجا که هميشه افرادي هستند که بايد تخصص هاي پيچيده پيچيده داشته باشند تا خبرگي خود را نشان دهند از زبانهاي پيچيده تري غير از HTML سود مي برند. به زعم نويسنده ساده زيباست.
نيازمنديها
1- نرم افزار و محيط طراحي سايت: پياده سازي و اجراي وب سايت با برنامه ساده notepad قابل انجام است. برخي نرم افزارهاي ديگر مانند مايکروسافت FrontPage نيز وجود دارند که اصلاً توصيه نمي شود. من به شما برنامه ماکرومديا DreamWeaver را پيشنهاد مي کنم که مي توانيد آنرا از اين لينک دانلود کنيد. البته اکنون شرکت ماکرومديا توسط شرکت Adobe خريداري شده و ممکن است لينک مربوط تغيير کرده باشد.
2- آشنائي کار با گرافيک طراحی وب سایت : درک صحيح از فايلهاي صوتي، تصويري و عکس در طراحي بنرها و انواع افزونه هاي تصويري يا صوتي بسيار الزامي است. برنامه Adobe Photoshop و Xara 3d پيشنهاد من هستند. در ضمن حتما" در بخش آشنائي با فرمت فايلهاي صوتي، تصويري و عکس را مطالعه کنيد.
3- مرورگر يا Browser : نرم افزاري است که توسط آن صفحات وب به اجرا در مي آيند. Inteet Explorer و mozilla firefox از مهمترين مرورگرها هستند. در سيستم عامل هاي Apple mackintosh از مرورگر Netscape استفاده مي شود که در ايران کاربردي ندارد. همچنين Google croom, Safari و Opera نيز از ديگر مرورگرهاي موجود هستند.
استفاده از نرم افزارهاي طراحی وب سایت توانمندي مانند DreamWeaver کار طراحي را بسيار ساده مي کند و شايد تصور کنيد بدون يادگيري کدنويسي هم مي توانيد وب سايت طراحي کنيد. اما نرم افزار هميشه آنچه را که مي تواند توليد مي کند نه آنچه که مي خواهيد. بنابراين به جاي آنکه در طراحي در خدمت نرم افزار باشيد با يادگيري کدنويسي نرم افزار را به خدمت بگيريد.
تهيه مقدمات
طراحی وب سایت را با فرمت htm, mht, php, aspx, ... مي توان ذخيره کرد. وقتي از اينترنت يک صفحه اينترنتي را ذخيره مي کنيد با فرمت htm ذخيره شده و معمولا يک پوشه با نام همان صفحه اينترنتي در کنار صفحه شما مانند زير مشاهده خواهد شد. اسکريپت ها، تصاوير و ساير افزونه ها درون اين پوشه هستند. همه چيز را توضيح خواهم داد، عجله نکنيد.
اين پوشه که با حذف آن صفحه اينترنتي نيز حذف خواهد شد ما را به مفهوم url مطلق و نسبي مي رساند. ما به عنوان يک کاربر به هنگام بازديد از يک سايت به url آن سايت رجوع مي کنيم. url يعني Uniform Resource Locator که يک آدرس منحصر به فرد است. براي نمونه شما وقتي به طراحی وب سایت وب سايت من سر مي زنيد به url من يعني http://www.parsmodir.com رجوع مي کنيد اما من به آدرس فايلهاي خودم با استفاده از پرتکل ftp به جاي http مي کنم. پس شما هنگاميکه يک طراح سايت هستيد با آدرس فايلها سر و کار داريد نه آدرس هاي اينترنتي.
HTTP: hypertext transfer protocol
FTP:file transfer protocol
مفهوم url مطلق يعني ارجاع به آدرس هاي اينترنتي و url نسبي يعني ارجاع به فايلها. بنابراين زمانيکه شما سايت خود را طراحي مي کنيد هميشه از url نسبي استفاده مي کنيد مگر آنکه بخواهيد به يک سايت ديگر آدرس بدهيد. در بحث ايجاد hyperlink يعني بخش سوم بيشتر توضيح خواهم داد. فقط سردرگم نشويد و ادامه بدهيد.
براي شروع يک پوشه درست کنيد. اين پوشه فضاي اينترنت است و با بيرون آن هيچ کاري نداريد. صفحه اصلي يا home Page سايت خود را با نامي مانند index.htm در اين پوشه ايجاد خواهيد کرد. در اين پوشه ساير پوشه هاي اصلي سايت خود را ايجاد کنيد. براي مثال يک پوشه براي عکس، يک پوشه براي فايلهاي css و يک پوشه براي صفحات فرعي سايت. به نمونه زير توجه کنيد:
براي نمونه تصاويري که مي خواهيد در سايت خود استفاده کنيد را در پوشه img ذخيره کنيد. حال فرض کنيد يک عکس با نام Rose.gif در پوشه img ذخيره کرده ام. شما اين فايل را با آدرس www.parsmodir.com/img/rose.gif خواهيد ديد ولي من آنرا به صورت "img/rose.gif" مي شناسم. طراح سايت از آدرس مختصر نسبي استفاده مي کند. بنابراين حالا فايلها و پوشه هاي لازم را ايجاد کنيد و سپس با يکديگر نحوه طراحي صفحه index.htm را آغاز خواهيم کرد.
شروع طراحي طراحی وب سایت
آشنائي با برچسب ها
تمرين اول: در برنامه notepad کدهاي زير را بنويسيد:
<html > <head> </head> <body> My simple sample </body> </html>
صفحه را با نام index.htm ذخيره کنيد. دقت کنيد در برنامه notepad حتما در قسمت save as type گزينه all files را انتخاب کنيد تا پسوند txt خوبخود به انتهاي نام فايل شما اضافه نشود. حال برنامه ذخيره شده را که آيکوني مانند زير دارد را باز کنيد. اين اولين تجربه شما در طراحی وب سایت را تبريک مي گويم. اگر از اينترنت اکسپلورر استفاده کنيد يا از فايرفکس با يکي از دو آيکون زير مواجه خواهيد شد.
inteetfirefox
4. برچسب title : اين برچسب در بخش head قرار مي گيرد و عنوان صفحه روي مروگر يا نوار ابزار را مشخص مي سازد.
<title> Parsmodir </title
با قرار دادن کدهاي زير در بين برچسب هاي head و نمايش صفحه با مرورگر در نوار ابزار ويندوز و نوار عنوان خود صفحه نام Parsmodir را خواهيد ديد.
- صفحه را ذخيره کنيد و با اگر همزمان توسط مرورگر نيز باز است دکمه F5 را فشار دهيد تا بروزرساني شود. يا اگر مروگر را بسته ايد دوباره صفحه را باز کنيد. فشار داده دکمه دکمه F5 در مرورگر براي refresh کردن است و اگر درحال طراحي يک صفحه هستيد به جاي آنکه مدام صفحه را ببنديد و باز کنيد آنرا باز نگه داريد و با زدن دکمه F5 آنرا بروزرساني کنيد تا تغييرات را مشاده کنيد.
ويژگيها و ارزش ها طراحی وب سایت
هر برچسب يک سري ويژگي يا attribute دارد که براساس مقداري که به آن داده مي شود قابل دستکاري است. براي نمونه کد زير باعث مي شود پس زمينه به رنگ آبي تغيير کند:
<body bgcolor="#0000FF">
ارزش ها هميشه درون يک زوج گيومه قرار مي گيرند.
فارسي کردن صفحه
اگر صفحه فارسي طراحی وب سایت مي سازيد حتما بايد به مرورگر اعلام کنيد. اين دستور بايد به مرورگر اعلام شود نه کابر بنابراين در بخش head کدهاي زير را وارد کنيد:
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
- اگر براي کدنويسي از notepad استفاده مي کنيد به هنگام ذخيره يک صفحه فارسي در منوي encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد. مشاهده تصوير
- در برنامه Dreamweaver نيز از منوي modify گزينه page properties را انتخاب کنيد. در کادر ظاهر شده از قسمت encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد. مشاهده تصوير
در يک صفحه فارسي اگر از عبارتهاي لاتين نيز استفاده کنيد همه چيز بهم خواهد ريخت. براي رفع اين مشکل از ويژگي dir به صورت زير استفاده کنيد:
<body dir="rtl">
آنچه تاکنون آموختيد ايجاد يک صفحه فارسي مقدماتي بوده است. در ادامه بايد اصول درج متن، طراحي جدول و نيز کار با رسانه هاي تصويري و صوتي را فرا بگيريد. بعد از اين مرحله به عنوان يک طراح مبتدي بايد مهارت هاي اسکريپ نويسي و کار با فايلهاي CSS را فرا بگيريد تا به يک کطراح متوسط upgrade شويد. در نهايت طراحي وب سايتهاي پويا را آموزش خواهم داد و آنگاه شما به عنوان يک حرفه اي تنها با تمرين زياد مي توانيد مهارت هاي خود را به اوج برسانيد.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : hasan webdesigna13 بازدید : 236
آرشیو مطالب
پيوندهای روزانه
لینک دوستان
- کرم سفید کننده وا
- دانلود آهنگ جدید
- خرید گوشی
- فرش کاشان
- بازار اجتماعی رایج
- خرید لایسنس نود 32
- هاست ایمیل
- دانلود آهنگ جدید
- خرید بانه
- اکانت اسپاتیفای
- ایران جابینو
- خرید بک لینک
- کلاه کاسکت
- موزیک باران
- نمایندگی شیائومی مشهد
- مشاوره حقوقی تلفنی با وکیل
- کرم سفید کننده واژن
- دانلود فیلم
- آرشیو مطالب
- فرش مسجد
- دعا
- رنگ مو
- شارژ
- عینک دودی