درباره سرعت لود شدن سایت و تاثیر آن بر سئو چه می دانیم؟

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

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

بنابراین سرعت سایت یکی از مهمترین کلیدهای سئو میباشد.

 

در این مقاله سعی داریم راهکارهایی برای افزایش سرعت وب سایت  به شما ارائه دهیم:

 

 

1- بررسی سرعت بارگذاری فعلی صفحات وب سایتتان

در اینجا نخستین کاری که باید انجام دهید ،اینست که سرعت کنونی سایتتان را آنالیز نمائید تا بتوانید بعد از

 تغییرات متوجه بهبود سرعت لود سایت خواهید شد.

ابزارهای بسیاری مانند : Pingdom و Page Speed و  Web Page Test  و ....برای چک کردن  مدت زمان

بارگزاری سایت وجود دارند که بوسیله آنها میتوانید گزارشی از بارگزاری بخش های مختلف سایت خود

 مانند فایل ها عکسها و ... بدست آورید همچنین با راهکارهایی جهت حل مشکلات کارایی سایتتان آشناشوید.

 2- بهینه سازی کدنویسی

بهینه سازی کدهای برنامه نویسی مسلما منجر به اجرای سریع تر کد شده و  اشغال حافظه کمتر میشود.هرچه کد سریع تر اجرا شود سرعت بارگذاری صفحات وب سایت نیز بهتر می‌شود.

فایل های HTML ذاتا تعداد زیادی کد تکراری دارند که شما میتوانید با استفاده از این ویژگی و الگوریتم فشرده سازی حجم قابل ملاحظه ای را برای فایل های خود کاهش دهید.  جالب است بدانید که هر چه فایل HTMLشما بزرگتر باشد میزان فشرده سازی نیز بیشتر میشود.

3- از هاست مجازی یا اختصاصی استفاده کنید

هاست وب سایت شما تاثیر بسیار زیادی در سرعت وب سایت شما دارد بنابراین بهتر است هاستی با منابع بالا خریداری کنید. هاست های معمولی بدلیل مشترک بودن منابع سی پی یو و رم سرور بین تعداد زیادی وب سایت سرعت پایینی دارند و باعث میشوند سایت به کندی باز شود.لذا جهت افزایش سرعت لود سایت توصیه میشود از هاستینگ های مجازی و یا اختصاصی    استفاده نمائید.

 

4- عکس ها و تصاویر خود را بهینه سازی کنید

اینکه بدانید چه زمانی باید از چه فرمتی استفاده کنید بسیار حائز اهمیت است.زیراکه تغییر دادن فرم تصاویر بطرز چشمگیری حجم آنها را کم میکند.برای کاهش حجم تصاویر میتوانید براحتی از منوی فایل در برنامه فتوشاپ گزینه  Save For Web را انتخاب نموده و یا دکمه Alt+Ctrl+Shift+S را همزمان فشار دهید و فرمت مورد نظر خود را تست کنید.

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

فرمت - JPEG برای تصاویر با تعداد رنگ های بالا و دارای جزئیات مانند عکس های یادگاری فرمت مناسبی استفرمت - PNG فرمتی مناسب برای زمانی است که نیاز به کیفیت بالا و پس زمینه شفاف دارید .

5- بهینه کردن و فشرده سازی محتوای صفحات

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

6- استفاده از سیستم کش

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

سایت برای مشاهدات بعدی دوباره لود نشود و همان نسخه قبلی را نمایش دهد . بدین طریق باعث صرفه جویی در منابع CPU و Ram Server  شده که بالطبع در طولانی مدت سبب میشود پهنای باند کمتری مصرف گردد و در نتیجه  سرعت سایت ارتقا یابد.

7- استفاده کردن ازشبکه تحویل محتوا در سایت( CDN)

سورس های CDN بدینصورت عمل می کنند که معمولا در کل جهان سرورهایی دارند و هنگامیکه افرادبه وب سایتی مراجعه  کنند این سرویس ها با بررسی فاصله جغرافیایی فرد مورد نظر،  نزدیک ترین سرور را برای ارسال فایل ها انتخاب میکنند و از این طریق به سریعتر لود شدن وب سایت کمک می نمایندو معمولا تا 60% سرعت سایت را افزایش می دهند

 منبع : زئوس

 

 

         

 

7 نکته ضروری برای طراحی سایت فروشگاه اینترنتی که باید در نظر داشته باشید

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

پس وقتی هدف نهایی که به دنبال آن هستید افزایش فروش هست، اهمیت بهینه سازی سایت بیشتر احساس می‌شود و هر چقدر سایتی که طراحی کرده‌اید بازدید کننده بیشتری داشته باشد، فروش سایت هم افزایش پیدا می‌کند.

مطمئن‌ترین روش برای چنین کاری، بهینه سازی یا سئو سایت هست و همه فروشگاه‌های اینترنتی هم به دنبال آن هستند پس چرا فقط  بعضی سایت ها در این زمینه نتایج موفقی می‌گیرند و بقیه نمی‌توانند؟ در این مقاله 7 نکته ضروری برای طراحی سایت فروشگاه اینترنتی را معرفی می‌کنیم که رعایت آن‌ها در طراحی سایت، تاثیر قابل توجهی بر موفقیت سایت فروشگاهی شما خواهد داشت.

هر چند که اصول سئو برای یک سایت‌ معمولی، تفاوتی با آن چه که برای بهینه سازی فروشگاه‌های اینترنتی باید انجام بدهید ندارد اما توجه داشته باشید که ساختار فروشگاه اینترنتی تفاوت‌هایی با سایر وب سایت‌ها دارد که نیاز به یک استراژی بخصوص برای سئو سایت پیدا می‌کند.  

 

1- در نظر گرفتن متن جاگزین یا Alt Text برای تمامی تصاویر

به طور کلی هیچ روشی برای آنالیز تصاویر وجود ندارد و موتور‌های جستجو نمی‌توانند تفاوتی بین محتوای دیداری آن‌‎ها قائل بشوند. اما صبر کنید، یک راهی هست که به کمک آن می‌توانید این مشکل را برطرف کنید: موتور‌های جستجو مثل گوگل، فقط قابلیت تحلیل متن را دارند پس می‌توانید با نسبت دادن یک عبارت مرتبط به عکسی که در سایت قرار داده‌اید، آن را برای موتور جستجو تعریف کنید.

گوگل هم عکس‌ها را بر اساس همین متن‌های جایگزین تحلیل و یا ایندکس می‌کند. علاوه بر‌این یک ویژگی دیگر که استفاده از Alt text را کاربردی‌ کرده این هست که اگر تصویر به هر دلیلی نمایش داده نشود، بیننده می‌تواند متن جایگزین آن را مطالعه کند و متوجه بشود که این عکس درباره چه بوده.

2- استفاده موثر از وبلاگ

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

برخی مطالب را فقط در وبلاگ به آن‌ها اشاره کنید و مخاطب را ایجاب کنید که همیشه به وبلاگ سر بزند. این کار باعث می‌شود موتور‌های جستجو امتیاز بیشتری برای سایت شما قائل بشوند و علاوه بر این نوعی ارتباط دائمی هم با مشتریان برقرار کرده‌اید.

3- بهره مندی از لینک‌های داخلی در طراحی قروشگاه اینترنتی

شکی در این نیست که اهمیت لینک‌های خارجی که به سایت شما ارجاع داده می‌شوند به مراتب بیشتر از لینک‌های داخلی هست اما از ایجاد این دسته از لینک‌ها هم نباید غافل بشوید. علاوه بر این که لینک سازی داخلی هزینه خاصی ندارد و به راحتی می‌توانید آن‌ها را ایجاد کنید بلکه این کار باعث می‌شود تعداد لینک‌هایی که به وب سایت شما ارجاع داده می‌شوند هم افزایش پیدا کنند. ویژگی قابل توجهی که از دید موتور‌های جستجو امتیاز مهمی محسوب می‌شود.

4- از نظرات مشتریان حداکثر استفاده را ببرید

 

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

5- برای محصولات مختلف از توضیحات متای منحصربفرد استفاده کنید

یکی از مهم‌ترین مواردی که موتور‌های جستجو به آن توجه می‌کنند، توضیحات متای صفحات سایت هست. به طور کلی اگر از متن تکراری در طراحی سایتاستفاده کنید، هیچ امتیازی برای سایت شما محسوب نمی‌شود پس برای هر یک از محصولاتی که در فروشگاه اینترنتی قرار می‌دهید، توضیحات متای جداگانه تهیه کنید.

6- اهمیت تشخیص کلمات کلیدی مناسب

اگر کلمات کلیدی را به درستی انتخاب نکرده باشید حتی استفاده از محتوا متنی و یا تصویری مناسب هم در طراحی و سئو سایت کمک خاصی به شما نمی‌کند. اولین قدم برای تهیه یک محتوای ایده آل، شناسایی عبارات کلیدی هست که متن باید درباره آن‌ها نوشته بشود. پس بیشتر روی این بخش تمرکز کنید و منتظر بهترین بازخورد‌ها باشید.

7- محتوا تکراری هر آنچه که برای سئو سایت رشته کرده‌اید را پنبه می‌کند!

موتور‌های جستجو به کمک مجموعه‌ای از الگوریتم‌ها می‌توانند هر متن تکراری که در سایت قرار می‌دهید را شناسایی کنند. چنین اشتباهی در طراحی سایت نه تنها برای مخاطب کسل کننده است بلکه یک امتیاز منفی هم در سئو سایت به حساب می‌آید.

تا جایی که امکان دارد تلاش کنید و خلاقیت به خرج بدهید تا محتوای بکر و جدید بر روی سایت قرار بدهید. نتیجه کار، ارزش این همه زحمت را دارد!

سخن آخر

امروزه هر کسی که قصد راه اندازی یک کسب و کار اینترنتی دارد به دنبال راه اندازی فروشگاه اینترنتی هست. البته که طراحی یک فروشگاه اینترنتی موفق، کار غیر ممکن و یا دشواری نسیت ولی برای انجام این کار باید مجموعه‌ای از نکات را همزمان در نظر داشته باشید تا نتیجه بهتری بگیرید. علاوه بر این دقت کنید رقبای زیادی در این وجود دارند پس به فکر ایجاد یک تمایز میان کسب و کار خودتان با سایرین باشید تا مشتری شما را از بین همه فروشگاه‌های اینترنتی که یک محصول یا خدمات بخصوص را ارائه می‌کنند انتخاب کند.  

منبع : آرمانیک

آموزش طراحی وب سایت به دانش آموزان جدید دبیرستانی

وب سایت ها به سرعت در حال تغییر و تحول هستند. توسعه و طراحی سایت توسط تغییرات اخیر در تکنیک ها و شگردهای برنامه نویسی تاثیر می گذارد. در سال 2003، یک برنامه نویس وب سایت HTML وCSS ، با کپی و جابه جا کردن JAVASCRIPT آشنا بود و می توانستند وب سایت های بسازند که در دسک تاپ کامپیوتر نمایش داده شود.

اما حالا! یک برنامه نویس وب سایت شایسته و لایق به خوبی HTML وCSS ، JAVAVSCRIPT وJQUERY، پردازشگرهای CSS، تکنیک های جدید مانند طراحی وبسایت تعاملی و موبایل، و دنیای ابزارهایی برای دیدن وب سایت ها را به خوبی می داند و در این زمینه ها مهارت بالایی دارد.

درست زمانی که شغل برنامه نویسی وب سایت تغییر کرد، کلاس های مقدماتی طراحی وب سایت برای تحصیلات و دانستنی های بیشتر شروع شدند. چگونه باید به دانش آموزانی که هیچ چیز درباره HTML و CSS نمی دانند، آموزش دهیم، به طوری که آن ها درباره طراحی و ساخت وب سایت ها در ابزارهای مستقل دیگر فکر کنند و در ابتدا از تکنینک های مدرن مانند طراحی واکنشی استفاده کنند؟

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

افزایش همکاری بین پروفسورهای تمام وقت و مدرسان پاره وقت می تواند در بهبود تجربه های دانش آموزان تاثیرگذار باشد.

 

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

در هر صورت، آن ها اغلب در آموزش روش شناسی وب سایت همراه اینکه در این زمینه یعنی آموزش طراحی سایت چه چیزهایی کارساز و مفید است و چه چیزهایی این گونه نیست، تجربه های زیادی دارند. چون که بسیاری از مدرسان معمولا در ساعات عصر یا آخر هفته آموزش می دهند، در حالی که مدرسان تمام وقت معمولا کلاس های روزانه دارند، تعاملات در این دانشکده ها بسیار کاهش می یابد. برای بهبود تجارب دانش آموزان، کیفیت آموزش و دوره های آموزشی به افزایش ارتباط و تعامل بین پروفسورهای تمام وقت و مدرسان نیمه وقت بستگی دارد. هر دو گروه از مدرسان مهارت های ارزشمند و مکملی را در تحصیلات عالی رتبه طراحی سایت به وجود می آورند.( حقوق کم برای مدرسین بسیار در این بحث مهم می باشد اما متاسفانه خارج ار مبحث این مقاله است و نمی توانیم درباره آن اینجا صحبت کنیم).

در این مقاله، من روی دو بخش تمرکز زیادی خواهم کرد: دوره آموزشی مقدماتی طراحی گرافیکی وب سایت و دوره آموزشی مقدماتی HTML و CSS. مفاهیمی مانند برنامه ریزی و استراتژی وب سایت، اطلاعات ساختاری، کاربردی بودن وب سایت، طراحی متمرکز بر کاربران  وب سایت، JAVAVSCRIPT وJQUERY، محتوای سیستم های مدیریتی و غیره همگی ارزشمند هستند و باید در این دوره ها پوشش داده شود. در هر صورت، این موضوعات معمولا در دوره های مجزایی در اکثر دانشکده ها تدریس می شود، از این رو، در اینجا به این مسئله پرداخته نشده است.

 

ایجاد و ساخت طراحی های وب سایت

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

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

خیلی مهم است که به دانش آموزان امکان دهیم تا قبل از اینکه درگیر برنامه نویسی وب سایت شوند، ایده ای از وب سایت را در ذهن خود تشکیل دهند.

 

در این بخش، دانش آموزان مکررا با درک اینکه چه اتفاقی در طراحی می افتد، مشکل دارند. اگر پهنای یک طراحی 960 پیکسل باشد، زمانی که مانیتور دسک تاپ 1200 پیکسل باشد، چه اتفاقی می افتد؟ معمولا این موضوع از رنگ پس زمینه و گرافیک های متعدد ناشی می شود. دانش آموزان به ندرت این سوال را می پرسند که چه می شود اگر مانیتور دسک تاپ کمتر از 960 پیکسل باشد.

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

در اینجا دلیلی وجود دارد که دانش آموزان نباید ضرورتا به خوبی HTML و CSS را یاد بگیرند. با حذف برنامه نویسی در روند آموزش، دانش آموزان روی مبانی و اصول طراحی سایت تمرکز می کنند، که شامل طراحی گرافیکی و تجربه کاربر از وب سایت می باشد. زمانی که آن ها در این پروسه آموزشی HTML و CSS را یاد گرفتند، آن ها قطعا می دانند که چگونه با PHOTOSHOP و FIREWORK کار کنند، و آن ها آموزش دیده اند که نقاط منفی و مثبت محیط کامپیوتری چیست_ تمامی این ها تجربه های ارزشمندی می باشد.

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

·         طراحی با اندازه یکسان.

بهترین زمان برای توضیح دادن شبکه ها و چگونگی کار کردن آن ها می باشد. به دانش آموزان بگویید که طراحی را بر اساس شبکه هایی بسازند تا اثبات کنند که این موضوع را فهمیده اند و درک کردند.

·         نسخه های طراحی را نشان دهید

اگر یک نوع طراحی دارای 960 پیکسل بود، چگونه در مانیتور 1200 پیکسلی نشان داده می شود؟ 320؟ 767؟ از دانش آموزان بخواهید این مفهوم را در طراحی شان به کار ببندند و این محیط ها و فضای مختلف صفحه نمایش را دوباره بازسازی کنند. مطمئن باشید که از آن ها چگونگی این تغییرات را می پرسید_ زمانی که طراحی از 767 به 320 پیکسل تغییر می یابد، چه اتفاقی می افتد؟

·         درباره عکس ها سوال بپرسید

چگونه تصویر بزرگ بنر به خوبی در بالای صفحه ی 960 پیکسلی به خوبی 767 پیکسلی بسط داده می شود؟ چه اتفاقی بین این تغییرات از 960 تا 767 پیکسل اتفاق می افتد؟

·         دانش آموزان را تشویق به استفاده از ویژگی لمسی کنید

این موضوع در ابعاد کوچک تر صفحه بسیار اهمیت دارد، و دسک تاپ ها و لپ تاپ ها به سمت استفاده از ویژگی لمسی می روند. به طور مثال، دانش آموزان را تشویق کنید تا با انگشتان شان جهت یابی مناسبی را بسازند.

·         تاکید نکردن بر اسلایدها

به جای اینکه بیشتر کامپیوتر را به عنوان منبعی برای تصور و تجسم وب سایت ها ملاحضه کنید، به شکل اولیه این وب سایت ها توجه داشته باشید. شاید اسلایدها کلا نیاز نباشد، زیرا تصاویر ممکن است در سایزهای مختلف در ابعاد صفحات گوناگون ساخته شود. با تاکید نکردن روی اسلایدها، شما به موضوع اساسی و مهمی از طراحی سایت ها اشاره می کنید. با وجود طراحی های وب سایت تعاملی، کامپیوترها یک هدف و مسیر را برای خود مشخص می کنند، اما افزایش سرعت برای مطابقت یافتن این فاصله میان 320، 767 و 960 پیکسل و حتی بیشتر، نیاز است.

 

آموزش  HTML و CSS

در دوره های آموزشی معمولی HTML و CSS، دانش آموزان تفاوت میان نشانه گذاری و ارائه مطالب را یاد می گیرند. در طول این دوره های آموزشی، دانش آموزان یاد می گیرند تا یک صفحه از وب سایت را توسط پیش نویس هایی که دارند، ایجاد و طراحی کنند و HTML و CSS و فایل تصاویر را اداره کنند. هنر جویان دوره های آموزش طراحی سایت از این دوره آموزشی چگونگی موقعیت قرارگیری عوامل را یاد می گیرند. سازگاری با مرورگر در طول این دوره ها به یک امر عادی مبدل می شود.

" از اینترنت نترسید" یک منبع آموزشی فوق العاده است که قواعد و اصول مفیدی از HTML و CSS یاد می دهد.

اساسا، هیچ چیز اشتباهی در این کلاس ها وجود ندارد. دانش آموزان چگونگی برنامه نویسی استاندارد منطبق با HTML و CSS یاد خواهند گرفت. در هر صورت، این موضوع نیاز به یک تغییرات کمی دارد تا برای تکنیک های طراحی مدرن قابل استفاده باشد:

·         استاندارد و همگون کردن در یک مرورگر.

من کار کردن با FIREFOX یا CHROME را به عنوان مرورگرهای استاندارد در کلاس های آموزشی پیشنهاد می کنم، زیرا با  MAC و PC به خوبی سازگاری دارد و بسیار استاندارد و معقول هستند. به دانش آموزان بگویید که این ها تنها مرورگرانی هستند که برای هدف این کلاس مناسب می باشند. زمانی که دانش آموز به طور کامل فهمید که چگونه در مروگرها HTML و CSS کار می کند، سپس پرداختن به مسائل مربوط به این مرورگرها باید به آینده موکول شود. زمانی که مشکلات این مرورگرها خیلی زود به دانش آموزان معرفی شود، هنرجویان دوره آموزشی طراحی سایت گیج می شوند، و نمی توانند به طور روشن درک کنند که این مشکل مشخص به مرورگرها بستگی دارد یا فقط به صورت نامناسبی برنامه ریزی شده اند.

·         HTML5 را آموزش دهید.

دانش آموزان باید از همان ابتدا یاد بگیرند که چگونه اسناد را توسط بخش ها، کلمات مشخص، جستجوها، تیترها و پاورقی ها را نشانه گذاری کنند.

·         CSS3 و تمام انواع گزینشگرها را آموزش دهید.

اطمینان حاصل کنید که دانش آموزان نمایش دادن رسانه را یاد گرفته اند. انواع سیستم گزینشگر را معرفی کنید. دوباره می گویم، کم تر نگران پشتیبانی مرورگرها باشید، زیرا این دانش آموزان سال های زیادی را برای فارغ التحصیل شدن پیش رو دارند.

·         استفاده از شبکه.

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

·         به محض اینکه دانش آموزان نحوه ی تثبیت موقعیت عوامل طراحی وب سایت را فهمیدند، به آن ها آموزش دهید که چگونه یک صفحه را برنامه نویسی کنند.

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

·         طراحی واکنشی حالا یک مبحث کوتاه است.

هنرجویان آموزش طراحی سایت حالا باید قادر باشند طرح های مبتنی بر شبکه و استفاده از رسانه ها را با هم ترکیب کنند. آن ها در طول این کار با مسئله تغییر اندازه تصاویر هم رو به رو می شوند، ولی اگر این چنین نبود، وقت آن است که در این باره با آن ها به بحث و گفت و گو بپردازید.

·         حالا زمان این است که درباره سازگاری با مرورگرها صحبت کنید.

حالا که دانش آموزان کمی در برنامه نویسی تعاملی، استاندارد، منطبق و معتبر تسلط یافتند، زمان این است که درباره سازگاری با مرورگرها صحبت شود. یک راه معرفی این مسئله این طور می باشد که با تگ هایی که با HTML5 ضعیف پشتیبانی می شود یا با عواملی مانند CSS3 کار کنید.

·         پیش پردازش یک موضوع مبرم و حیاتی CSS.

تمرکز بر متغیرهای CSS بهترین ایده می باشد و به عنوان موضوع اصلی در فراگیری مهارت CSS می باشد که توسط هنرجویان طراحی سایت در یک یا دو سال آینده به طور کامل کسب می شود. متغیرها و استدلال های متمرکز در دوره های آموزش JAVAVSCRIPT وJQUERY یک تغییر محسوس را به وجود آورده است که بسیار اهمیت دارد.

·         پوشش چارچوب طراحی واکنشی، ایده بدی نیست.

اگر در کلاس وقت اضافه ای دارید، این بهترین موضوع برای ارائه به دانش آموزان می باشد. اگر از قبل مبحث LESS را آموزش داده اید، حال موضوع Bootstrap را پیش بکشید، اگر SASS را آموزش داده اید، به سراغ مباحث پایه و اصولی بروید. دانش آموزان یاد خواهند گرفت که چگونه برنامه نویسی وب سایت دیگران را بخوانند( یک مهارت با اهمیت است) و چگونگی خواندن مدارک و اسناد وب سایت را نیز یاد می گیرند؛ سر انجام، آن ها می تواند با هدف خودشان یک وب سایت را شخصا برنامه نویسی کنند.

 

مهارت های فرعی

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

·         فلسفه منابع آزاد

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

·         میزبانی آنلاین وب سایت ها

این موضوع سال ها است که در دوره های آموزشی یکپارچه شده است، اما بیشتر برای استفاده طراحان وب سایت نسبت به برنامه نویسان به وجود آمده است. با میزبانی وب، مخاطبان وب سایت می توانند بیشتر از طراحی و منطقی که در پس این طراحی وجود دارد ،به ظواهر طراحی تمرکز کنند. مطمئن شوید که دانش آموزان برای ارسال برنامه شان برای مرور شدن به خوبی وفق یافته اند.

از دانش آموزان بخواهید که مشکلاتی که در تلاش حل کردن آن می باشند و چگونگی استفاده از روش هایی برای حل این موضوعات را توضیح دهند. وبلاگ نویسی و وبلاگ خوانی باید به دانش آموزان تدریس شود، از این رو دانش آموزان می توانند مقاله های جذابی را نیز بخوانند، شگردهایی برای حل مشکل را بیابند، یک بخش حیرت انگیزی را برنامه نویسی کنند و غیره. دانش آموزان را تشویق کنید تا یک رسانه اجتماعی حرفه ای را توسعه دهند و روی برنامه نویسی و کارشان تمرکز کنند.

·         درک و اصلاح برنامه نویسی دیگران

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

·         دانش چگونگی یادگیری تکنولوژی

دانش آموزان همیشه نمی توانند از یک معلم انتظار داشته باشند تا همه مواردی را که برای شروع مرحله بعد لازم دارند را به آن ها یاد دهد. آن ها باید یاد بگیرند که بدون دوره های آموزشی طراحی سایت و کتاب، باید برای به روز ماندن چه کارهایی بکنند. به دانش آموزان کمک کنید تا وبلاگ های حیرت انگیز و منابع رسانه های اجتماعی را تصحیح کنند تا توصیه و تکنیک هایی را بیابند.

 

دستورالعمل هایی برای آموزش دانش آموزان دوره های طراحی سایت جدید

اکثر طراحان وب سایت با استعداد و برنامه نویسان وب، آموزش دادن به تازه واردان به عرصه طراحی سایت و برنامه نویسی وب سایت را سخت و طاقت فرسا می دانند. بخشی از مشکل این است که برنامه نویسان وب سایت رتبه بدون اینکه متوجه شوند، اطلاعات زیادی را می دانند. آخرین باری که یک فرد متخصص و حرفه ای به syntax، مدیریت فایل، ترتیب روش ها، نشانه گذاری های صحیح برای یک صفحه وب سایت وغیره فکر کرد و تمرکز کرد، چه زمانی بود؟ حرفه ای ها و متخصصین با این مسائل بارها در طول روز مواجه می شوند، اما همه این موارد برای دانش آموزان تازه وارد جدید و نا آشنا می باشند.

·         ارائه یک نمای کلی

موضوع مورد علاقه دانش آموزان را در دنیای گسترده وب، توضیح دهید. برای مثال، HTML چیست؟ آیا برای ساخت یک صفحه وب سایت HTML کافی است؟ خیلی وقت را صرف این مباحث نکنید. ایده اصلی این موضوع این می باشد که دانش آموزان دوره های آموزش طراحی سایت را راهنمایی کنیم و تصور کلی برای آن ها ایجاد کنیم. زمانی که در این مباحث مهارت یافتند، باقی جزئیات و مسائل ریز و جزئی را خودشان خواهند فهمید. مثل همیشه، دانش آموزان را به این مباحث تشویق کنید. اطمینان حاصل کنید که آن ها قبل از اینکه شروع به برنامه نویسی کنند، این نمای کلی را درک کرده اند.

·         همراه با کلاس، برنامه نویسی کنید.

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

·         سپس با گذر زمان شروع به برنامه نویسی کنید و مثال ها را پیچیده تر بسازید.

در وهله اول موارد زیادی را معرفی نکنید. برای مثال، زمانی که CSS را معرفی می کنید، شروع به نوشتن سبک هایی برای تگ های HTML نکنید. نشان دهید که چگونه طراحی کردن تگ  های اصلی می تواند تمام صفحه وب سایت را کنترل کند، مانند رنگ پس زمینه، فونت، اندازه و غیره. در هر زمان یکی از ویژگی های طراحی وب سایت را نمایان کنید و تغییرات را ذخیره کرده و در مرورگر مدام نشان دهید، طوری که دانش آموزان دقیقا ببینند که کدام یک از CSS ها کدام یک از عوامل صفحه وب سایت را کنترل می کند.

·         در طول آموزش سوالاتی بپرسید.

از دانش آموزان سوالاتی بپرسید تا با راه حل ها و چالش هایی که در طول ساخت یک صفحه از وب سایت با آن مواجه می شوند، سازگاری و مطابقت یابند. اگر آن ها بتوانند به طور مفهومی توضیحی درستی را ارائه دهند، سپس برنامه نویسی آسان می شود. به طور مثال، اگر شما بدنه اصلی صفحه وب سایت را با متن آبی طراحی کرده اید، بپرسید که چگونه می شود تیتر اصلی را قرمز رنگ کرد. اگر دانش آموز دوره های آموزشی طراحی سایت توضیح داده که شما با ایجاد تغییراتی در تگ H1 می توانید آن را قرمز رنگ کنید، شما درمی یابید که بسیار مهارت یافته اند. سپس شما تنها به سادگی می توانید چگونگی برنامه نویسی را یادشان بدهید.

·         خیلی سخت است که مسائل و موارد این مبحث را ساده سازیم و مانع گیج شدن شان بشویم.

دانش آموزان سوالات پیچیده ای می کنند. برای مثال، آن ها متوجه می شوند که رنگ قرمز می تواند به این دو صورت نوشته شود،" #ff0000 یاrgb (225,0,0 )" و از شما تفاوت ما بین این دو را می پرسند. یک راه برای برنامه نویس رنگ ها ارائه دهید( من#ff0000را پیشنهاد می کنم)، و تا زمانی که در این مسئله تسلط نیافتند، هیچ گاه این موضوع را دوباره بازبینی نکنید. شاید برای شما توضیح تفاوت ها آسان و سریع باشد، اما در ابتدا یادگیری دانش آموزان، ارائه این چنین اطلاعاتی بسیار زیاد و گیج کننده می باشد.

·         Syntax یک چالش می باشد.

دانش آموزان تازه وارد تگ ها، سمی کالن ها، نشانه گذاری تگ ها را فراموش می کنند و خیلی از اشتباهات دیگر را مرتکب می شوند. یافتن این چنین اشتباهات بعضی مواقع ساده و برخی مواقع هم چالش برانگیز می باشد. من می خواهم موضوع اشکال زدایی توسط خود دانش آموزان را معرفی کنم تا بتوانند اشتباهات شان را بیابند. در ابتدا، شما باید به برخی از این اشتباهات و syntax های بی ربط و اضافه اشاره کنید، اما آموزش تکنیک های اشکال زدایی و اشتباه یابی قدرتمند از همان ابتدا، به طور چشمگیری به آن ها کمک خواهد کرد.

·         مدیریت فایل ها چالش بر انگیز می باشد.

برای اکثر دانش آموزان در مرحله مقدماتی HTML و CSS، مدیریت فایل هل یک مشکل ثابتی است. برخی ممکن است با تشخیص دادن ذخیره اطلاعات در هارد دیسک در برابر ذخیره در درایو THUMB مشکل داشته باشند و برخی هم ممکن است که تفاوت بیت فایل و یک فولدر را ندانند. شما نیاز دارید که قبل از آموزش چگونگی مدیریت فایل ها در یک وب سایت، موارد پایه و اصولی را آموزش دهید. من سعی می کنم که تمام فایل های یک پروژه را در یک فولدر در دسک تاپ نگه دارم، زیرا دانش آموزان عموما می توانند دسک تاپ را به راحتی بیابند و دسک تاپ آن ها را گیج نمی سازد. تمام HTML، تصاویر و CSS سپس در یک فولدر ذخیره می شوند. در ابتدا این امر باعث می شود که مدیریت بر فایل ها آسان شود، زیرا دانش آموزان در طراحی سایت های اولیه به موارد و فایل های اندکی از این فولدر نیاز دارند. با گذشت زمان دانش آموزان می فهمند که فولدر مکان به هم ریخته ای را برای شان فراهم می کند و به یک مورد بهتر احتیاج دارند. آن ها در این مورد تسلط می یابند که چگونه دو فایل را به هم متصل کنند، عکس هایی را اضافه کنند و غیره. آن ها می فهمند که چگونه یک وب سایت را برای فوق العاده دیده شدن و کاربردی بودن برنامه نویسی کنند.

·         به یاد داشته باشید که شما برای یک مشتری، وب سایت طراحی نمی کنید.

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

·         شما مبانی پایه ای را برای شغل دانش آموزان تان یاد می دهید

طراحی گرافیکی،HTML  و CSS مهارت های حیاتی هستند که طراحان متخصص و حرفه ای هر روزه با آن ها کار می کنند. برنامه نویسی موثر و واضح، درک چگونگی اشکال زادیی، تحقیق کردن درباره راه های بهتر برای مشکلات موجود، حل و فصل مسائل موجود در مرورگرها- تمامی این موارد مفاهیم پایه از زندگی یک برنامه نویس وب سایت می باشد. من دانش آموزان زیادی را دیدم که از نحوه آموزش مقدماتی شان رنج می برد. شغل شما به طرز باورنکردنی مهم و با ارزش است؛ از این رو، موارد جدید را تدریجا آموزش دهید و اطمینان حاصل کنید که قبل از اینکه دانش آموزان به مرحله بعدی راه بیابند، درک عمیقی از مرحله قبل کسب کرده اند.

 

پیش بروید

اگر شما یک متخصصی هستید که همیشه برنامه نویسی و طراحی سایت را در مراحل پیشرفته تدریس میکنید یا اگر مدرس تمام وقتی هستید، چگونه این دوره های آموزشی ابتدایی را اداره می کنید؟ چه پیشنهاداتی دارید تا دانشگاه ها و دانشکده ها، برنامه ریزی درسی شان را بهبود ببخشند؟

 

منبع : اطلس وب

هزینه طراحی سایت چقدر است؟

هزینه طراحی سایت چگونه محاسبه می شود؟

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

هزینه طراحی سایت چقدر است؟

فرض کنید شما صاحب یک کسب و کار هستید و میخواهید کسب و کار خود را وارد فضای آنلاین کنید ممکن است اولین سوالی که برای شما پیش می آید این باشد که هزینه طراحی سایت چقدر است؟ و شاید اولین کاری که انجام می دهید این باشد که دنبال شخصی یا شرکتی باشید که برآورد هزینه طراحی سایت را برای شما انجام دهد. و یا در موتور جستجوی گوگل دنبال وب سایت شرکت هایی می گردید که یک لیست قیمت طراحی سایت به شما ارائه دهند و ممکن است با تناقض های بسیاری روبرو شوید مثلا وب سایتی را باز کنید که بنر بزرگی در آن وجود دارد و این چنین تبلیغ کرده است راه اندازی وب سایت حرفه ای فقط ۳۰۰ هزار تومان و یا حتی کمتر قیمت گذاری کرده باشد و شما با این دید به شرکت طراحی سایتی که میشناسید مراجعه کنید و بگویید یک وب سایت حرفه ای می خواهید و آنها قیمت یبسیار بالاتر از چیزی که در ذهنیت شما است برای هزینه طراحی سایت از شما طلب کنند مجددا برای روشن شدن قضیه به شرکت‌های دیگر مراجعه می‌کنید و بعضی از آن شرکت‌ها قیمت های ......

ادامه مطلب هزینه طراحی سایت را از این لینک بخوانید.

تصاویر در html

تصاویر در html :

در این جلسه از دوره آموزش html در همراه آی سی تی تصاویر در html را با هم مورد بررسی قرار می دهیم. با ما همراه باشید.

یکی از مواردی که می تواند ظاهر و طراحی صفحات وب را بهبود بخشد تصاویر هستند.

تصاویر در صفحات وب بسیار کاربرد دارندو دست یک طراح سایت را برای ساختن یک وب سایت جذاب تر باز می گذارند.

تصاویر ویژگی هایی را به خود می گیرند که در ادامه در موردآنها صحبت خواهیم کرد.

نحوه قرار دادن تصویر درhtml :

تگ <img> به صورت پیش فرض برای تصاویر تعریف شده است.

تگ <img> یک تگ تنها است و تگ انتها ندارد.(single tag)

برای مشخص کردن آدرس یک تصویر در html از ویژگی src استفاده می شود.

منظور از آدرس تصویر آدرسی است که تصویر از آن فراخوانی می شود.

<img src="url">

خصوصیت alt :

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

اگر مرورگر نتواند تصویر را نمایش دهد مقدار ویژگی alt را به کاربر نمایش می دهد.

با استفاده از ویژگی alt می توان متنی در جهت توضیح تصویر به کاربر ارائه داد.

این ویژگی از دید موتورهای جستجو بسیار مهم است و روی سئوی یک وب سایت بسیار تاثیر گذار می باشد.

یک صفحه وب بدون ویژگی alt اعتبار نداردو نمره خوبی از دید موتورهای جستجو نمی گیرد.

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>

 

 

تغییر اندازه تصاویر در html با تگ style :

با استقاده از تگ style در html این امکان وجود دارد که عرض و ارتفاع یک تصویر را تغییر دهید.

از تگ استایل به صورت درون خطی درون تگ <img> استفاده می شود تا ویژگی های عرض و ارتفاع را مقدار دهی کرد.

به مثال زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>
</html>

 

تغییر اندازه تصاویر در html با استفاده از ویژگی عرض و ازتفاع :

در html این امکان وجود دارد که تنها با استفاده از ویژگی عرض و ارتقاع سایز تصاویر را تغییر داد. به مثال زیر دقت نمایید.

این ویژگی ها در html به صورت پیش فرض بر حسب پیکسل هستند.

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>In this example, we specify the width and height of an image with the width and height attributes:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>
</html>

 

 

نکته : همیشه برای تصاویر در صفحات وب عرض و ارتفاع مشخص کنید تا ساختار آن دچار به هم ریختگی نشود.

از کدام روش استفاده کنید بهتر است؟

هر دو ویژگی در html معتبر هستند ولی با این حال پیشنهاد می شود که از تگ استایل برای دادن عرض و ارتفاع به تصویر استفاده کنید.

این روش مانع از تغییر اندازه تصاویر در صفحات مختلف وب می شود.به مثال زیردقت کنید.

<!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

اندازه تصویر ۱۰۰ درصد صفحه وب می باشد و با تغییر صفحه اندازه تصویر هم تغییر خواهد کرد.

وارد کردن آدرس تصاویر از پوشه :

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

معمولا اگر پوشه ای برای تصاویر مشخص نشده باشد مرورگر انتظار دارد در همان پوشه تصاویر را فراخوانی کنددرغیر این صورت

برای فراخوانی تصویر از پوشه به شکل زیر عمل می شود.

<!DOCTYPE html>
<html>
<body>

<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

فراخوانی تصویر از یک وب سرور دیگر :

برخی از سایت ها هستند که تصاویر وب سایت را در یک سرور جداگانه ذخیره می کنند.

بیشتر این وب سایت ها یا به دلیل مسائل امنیتی این کار را انجام می دهند یا برای لود بهتر وب سایت از این تاکتیک کمک می گیرند.

درهر صورت شما می توانید به تصاویر از هر آدرسی در دنیا دسترسی داشته باشید.به مثال زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

</body>
</html

تصاویر متحرک :

در html می توان گیف های متحرک ایجاد کرد. به مثال زیر دقت کنید.

استاندار Gif اجازه می دهد تصاویر متحرک باشند.بنابراین برای ایجاد تصاویر متحرک از استاندارد Gif استفاده کنید.

<!DOCTYPE html>
<html>
<body>

<strong>Animated Images</strong>
<p>The GIF standard allows moving images.</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>

 

Animated Images

The GIF standard allows moving images.

استفاده از تصویر به عنوان یک لینک :

در html این امکان وجود دارد که از یک تصویر به عنوان یک لینک استفاده کنید .

این لینک می تواند کاربر شما را به یک آدرس دلخواه هدایت کند.

برای استفاده از یک تصویر به عنوان یک لینک، تگ <img> را در داخل برچسب <a> قرار دهید:

<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
 <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>

Image as a Link

The image is a link. You can click on it.

Add “border:0;” to prevent IE9 (and earlier) from displaying a border around the image.

 :تصویر شناور

در مثال زیر یک تصویر را می بینید که در کنار یک پاراگراف شناور شده است.

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

<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. 
</p>
</body>
</html>

 

 

نقشه های تصویر :

شاید دیده باشید که در برخی از وب سایت ها تصاویری هستند که با کلیک روی قسمتی از آن تصاویر به بخش خاصی لینک داده می شوید.

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

در html برچسب <map> یک نقشه تصویر را تعریف می کند.

مراحل ایجاد نقشه تصویر به صورت زیر می باشد:

به مثال زیر دقت کنید.

1. ویژگی usemap به تگ تصویر اضافه شده است.
2. یک نام خاص برای تگ map تعریف شده است.  “name=”workmap
3. مقدار usemap برابر نام خاصی که برای تگ map تعریف شده قرار داده شده است.بااین کار ارتباط بین تصویر و نقشه را ایجاد شده است.
4. با تگ <area> و ویژگی هایی که برای آن تعریف شده است مناطق قابل کلیک  مشخص شده است.

درویدیوی آموزشی این جلسه این مبحث را به صورت عملی و کامل پیاده سازی خواهیم کرد.

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
 <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
 <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
 <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

 

 

تصویر پس زمینه :

در html می توان یک تصویر را به عنوان پس زمینه برای یک  عنصر صفحه انتخاب کرد.

برای اضافه کردن تصویر پس زمینه ازتگ style که یک تگ css است می توانید استفاده کنید.

در مثال زیر پس زمینه بدنه اصلیصفحه وب را با تعریف تگ استایل درون body و مقدار دهی آن تغییر داده ایم.

 

<!DOCTYPE html>
<html>
<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</html>

در مثال زیر پس زمینه پاراگراف صفحه وب را با تعریف تگ استایل درون تگ p و مقدار دهی آن تغییر داده ایم.

 

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p style="background-image:url('clouds.jpg')">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for this paragraph.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behave.
</p>

</body>
</html>

عنصر <picture> :

در html 5 این عنصر تعریف شده است تا انعطاف پذیری را هنگام افزودن منابع تصویر بالا ببرد.

عنصر <picture> حاوی تعدادی از عناصر <source> است که هر کدام به منابع تصویری اشاره دارند.

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

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

مرورگر از اولین عنصر source متناسب استفاده می کند و سایر آنها را نادیده می گیرد.

<picture> 

  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">   

<source media="(min-width: 465px)" srcset="img_white_flower.jpg">  

 <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 

</picture>

 

 

نکته : مرورگرهایی هستند که از تگ picture پشتیبانی نمی کنند.یا هیچ کدام از تگ های source مطابقت ندارند

بنابراین همیشه سعی کنیدکه در آخر ازتگ img استفاده کنید.

نرم افزارهای خواننده صفحه html :

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

این نرم افزارها برای افرادی که نابینا هستند و یا دارای معلولیت و آسیب دیدگی هستند کاربرد دارد.

خلاصه این جلسه :

1. برای تعریف تصویر در Html از تگ <img> استفاده کنید.
2. از خصوصیت  src برای تعریف URL تصویر استفاده کنید.
3. از خصوصیت alt برای نوشتن متن توضیح برای یک تصویر استفاده کنید.
4. برای تعیین اندازه تصویر از خصوصیت width و height در html استفاده کنید.
5. برای تعیین اندازه تصویر از تگ style که یک تگ css است می توانید استفاده کنید.
6. برای شناور کردن تصاویر از ویژگی float که یک ویژگی css است استفاده کنید.
7. از تگ <map> برای تعریف نقشه تصویر استفاده کنید.
8. از تگ <area> برای مشخص کردن مناطق قابل کلیک در نقشه تصویر استفاده کنید.
9. از تگ usemap عنصر <img> برای اشاره به یک نقشه تصویر استفاده کنید.
10. برای نمایش تصاویر مختلف برای دستگاه های مختلف از تگ  <picture> استفاده کنید.

توجه: بارگیری تصاویر طول می کشد. تصاویر بزرگ می تواند زمان لود صفحه شما رابالا ببرد. به این نکته دقت کنید.

منبع : همراه آی سی تی

 

معرفی عناوین و خصوصیات HTML

اگر قصد داشته باشید با HTML کار کنید، سر و کار داشتن با attributes یا همان خصوصیت در HTML برای شما اجتناب ناپذیر خواهد بود. همچنین مبحث عنوان یا تیتر در HTML هم مقوله‌ای است که می‌تواند هم روی ظاهر سایت شما تاثیرگذار باشد، هم به صورت مستقیم روی سئو سایت تاثیر بگذارد. در قسمت سوم آموزش HTML مقدماتی، با لیداوب همراه باشید تا بیشتر با این عامل مهم طراحی سایت آشنا شوید.

خصوصیات یا attributes در HTML

Attribute یا خصوصیات HTML در واقع اطلاعات بیشتری در مورد عناصر HTML ارائه می‌دهند. تمام عناصر HTML می‌توانند دارای خصوصیت باشند. خصوصیات HTML همیشه در تگ آغازین مشخص شده و در جفت‌های نام/ مقدار (name=”value”) می‌آیند.

خصوصیت href

همان‌طور که در درسنامه قبل گفتیم لینک‌های HTML با تگ تعریف می‌شوند. آدرس لینک مورد نظر در خصوصیت href مشخص می‌شود که در زیر یک نمونه از آن را می‌توانید ببینید:

<a href="https://www.lydaweb.com">This is a link</a>

خصوصیت src

تصاویر HTML با تگ <img> مشخص می‌شوند. نام فایل منبع تصویر در خصوصیت src مشخص می‌شود:

<img src="img_girl.jpg">

خصوصیات عرض و طول

تصاویر در HTML دارای مجموعه‌ای از خصوصیات اندازه هستند که عرض و ارتفاع تصویر را مشخص می‌کند:

<img src="img_girl.jpg" width="500" height="600">

اندازه تصویر به صورت پیکسل مشخص می‌شود مثلا width= “500” یعنی عرض تصویر ۵۰۰ پیکسل باشد. 

خصوصیت alt

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

<img src="img_girl.jpg" alt="Girl with a jacket">

خصوصیت alt در زمانی که تصویری وجود نداشته باشد هم مفید است. در زیر مثالی را خواهید دید که در آن تلاش بر نمایش تصویری می‌شود که وجود ندارد:

<img src="img_typo.jpg" alt="Girl with a jacket">

خصوصیت style

خصوصیت style برای مشخص کردن آرایش و استایل یک عنصر مثل رنگ، فونت، اندازه و سایر موارد به کار می‌رود در زیر یک نمونه از این خصوصیت خواهید دید:

<p style="color:red">I am a paragraph</p>

خصوصیت lang

زبان سند را می‌توان در تگ <html> و با خصوصیت lang مشخص کرد. مشخص کردن زبان برای دسترسی‌پذیری اپلیکیشن‌ها (صفحه‌خوان) و موتورهای جستجو ضروری است:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

دو حرف اول (en) زبان را مشخص می‌کند. اگر گویش خاصی مد نظر باشد با دو حرف دیگر (US) مشخص خواهد شد.

خصوصیت title

در اینجا خصوصیت title به عنصر <p> اضافه می‌شود. وقتی اشاره‌گر ماوس را روی پاراگراف قرار دهید، مقدار خصوصیت title به صورت یک تولتیپ (tooltip) نمایش داده خواهد شد:

<p title="I'm a tooltip">
This is a paragraph.
</p>

از خصوصیات با حروف کوچک استفاده کنید

در استاندارد HTML5 نیازی به نوشتن نام خصوصیات با حروف کوچک نیست. خصوصیت عنوان را می‌توان با حروف کوچک (title) یا حروف بزرگ (TITLE) نوشت اما کنسرسیوم وب جهانی توصیه به استفاده از حروف کوچک در HTML می‌کند.

مقادیر خصوصیات را در علامت نقل قول قرار دهید

استاندارد HTML شما را مقید به قرار دادن مقادیر خصوصیات در داخل علامت نقل قول نمی‌کند اما بهتر است این کار را انجام دهید. خصوصیت href که در بالا آمد را می‌توان به صورت زیر نوشت:

<a href=https://www.lydaweb.com>

کنسرسیوم وب جهانی توصیه می‌کند در HTML از علامت نقل قول استفاده شود. گاهی لازم است از علامت نقل قول استفاده شود. مثال زیر خصوصیت title را به درستی نشان نمی‌دهد چون بین دو کلمه یک اسپیس خورده است. حذف علامت نقل قول می‌تواند منجر به بروز خطا شود:

<p title=About lydaweb>

نقل قول جفت یا تکی

استفاده از نقل قول جفتی پیرامون مقادیر خصوصیات HTML رایج‌ترین روش در این زبان است اما می‌توان از نقل قول تکی هم استفاده کرد. در بعضی از موقعیت‌ها وقتی مقدار یک خصوصیت خود حاوی نقل قول جفتی باشد لازم است که از نقل قول تکی استفاده کرد:

<p title='John "ShotGun" Nelson'>

یا بالعکس: 

<p title="John 'ShotGun' Nelson">

 عنوان در HTML

عنوان یا Heading در HTML با تگ‌های <h1> تا <h6> تعریف می‌شوند. تگ <h1> مهم‌ترین عنوان و <h6> کم‌ اهمیت‌ترین عنوان را مشخص می‌کنند. در نمونه زیر این ترتیب رعایت شده است:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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

عنوان ها مهم هستند

موتورهای جستجو از عنوان‌ها برای ایندکس کردن ساختار و محتوای صفحات وب سایت شما استفاده می‌کنند. کاربران از طریق عنوان‌هایی که برای صفحات خود انتخاب کرده‌اید به محتوای آن‌ها پی می‌برند. بنابراین باید از عناوینی استفاده کنید که ساختار سند شما را نشان دهند. عنوان‌های <h1> باید برای عناوین اصلی استفاده شده و به دنبال آن عنوان <h2> قرار گرفته و پس از آن به ترتیب عنوان‌های کم اهمیت‌تر <h3> و بقیه قرار خواهند گرفت. یادتان باشد که از عنوان‌های HTML برای بزرگ یا برجسته کردن متن استفاده نکنید.

عنوان های بزرگ تر

هر عنوان HTML دارای یک اندازه پیش‌فرض است. البته شما می‌توانید اندازه هر یک از عنوان‌ها را با خصوصیت style مشخص کنید که در زیر یک نمونه از آن را می‌بینید:

<h1 style="font-size:60px;">Heading 1</h1>

ترسیم خط افقی در HTML

تگ <hr> یک شکست در متن موجود در صفحه HTML ایجاد می‌کند و اغلب به شکل یک خط افقی نمایش داده می‌شود. عنصر <hr> برای تفکیک محتوا (یا تعریف یک تغییر) در یک صفحه HTML به کار می‌رود. در زیر یک نمونه استفاده از این تگ را مشاهده خواهید کرد:

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

عنصر <head> در HTML

عنصر <head> در HTML هیچ ارتباطی با عناوین HTML ندارد. این عنصر دربردارنده‌ی متا دیتا یا ابر داده است. ابرداده در واقع داده‌هایی در مورد آن سند HTML است که در صفحه وب سایت نمایش داده نمی‌شود. عنصر <head> بین تگ <html> و تگ <body> قرار می گیرد:

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.

معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات سند را تعریف می‌کند.

چطور منبع HTML را مشاهده کنیم؟

تا به حال شده است یک صفحه از وب سایتی را مشاهده کرده و از خود بپرسید سازندگان آن چطور همه ‌آن کارها را کرده‌اند؟ کافی است روی صفحه مورد نظر کلیک راست کرده و گزینه «View Page Source» در مرورگر کروم یا «View Source» در اینترنت اکسپلورر و گزینه‌های مشابه در دیگر مرورگرها را انتخاب کنید. با این کار پنجره‌ای باز می‌شود که حاوی کد منبع HTML آن صفحه است. روی یک عنصر یا در یک ناحیه خالی کلیک راست کرده و گزینه «inspect» یا «inspect element» را انتخاب کنید تا ببینید عناصر از چه کدهایی (HTML و CSS) ساخته شده‌اند. همچنین می‌توانید به عنوان تمرین کدهای صفحه را برای خود تغییر داده و نتیجه را مشاهده کنید (این کدها در وب‌ سایت اصلی ذخیره نخواهند شد).