ترفند های طراحی وب سایت – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Sat, 22 Jul 2017 13:57:05 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 ترفند قرار دادن تصاویر SVG در وب سایت ( پشتیبانی همه مرورگرها ) https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-svg-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-svg-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html#respond Sat, 22 Jul 2017 13:55:04 +0000 http://www.xn--mgbguh09aqiwi.com/?p=29572 SVG مخفف کلمات Scalable Vector Graphics میباشد که برای ایجاد گرافیک های برداری در صفحات وب بکار میرود . در این فرمت با زوم روی عکس ها کیفیت آنها پایین نمی آید . SVG یکی از توصیه‌های کنسرسیوم w3 میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت انها در کلیه سایزها حفظ میشود .

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

ترفند قرار دادن تصاویر SVG در وب سایت ( پشتیبانی همه مرورگرها )

و اما آموزش : 

نحوه قرار دادن فایل SVG در وب سایت بسیار ساده و آسان است . کافیست آدرس فایل SVG خود را به جای vms.svg در کد پایین قرار دهید :

<img src="vms.svg" alt="توضیحات مربوط به عکس وارد شود" width="250" height="75">

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

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

ابتدا باید یک پسوند دیگر ( مثلا png یا jpg ) از همان SVG را داشته باشید و برای قرار دادن آن به روش زیر عمل کنید :

<img src="vms.svg" alt="توضیحات مربوط به عکس وارد شود" width="250" height="75" onerror="this.src='vms.png'">

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

نکته 1 : همان طور که مشخص می باشد شما باید بجز یک عکس با فرمت SVG , فرمت PNG یا JPG همان عکس را هم داشته باشید و به جای vms.png در کد بالا قرار دهید .

نکته 2 : حتما width و height عکس را وارد نمایید .

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-svg-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html/feed 0 قرار دادن سه نقطه در انتهای متن های طولانی با css3 https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%b3%d9%87-%d9%86%d9%82%d8%b7%d9%87-%d8%a7%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d9%86-%d9%87%d8%a7%db%8c-%d8%b7%d9%88%d9%84%d8%a7%d9%86%db%8c.html https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%b3%d9%87-%d9%86%d9%82%d8%b7%d9%87-%d8%a7%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d9%86-%d9%87%d8%a7%db%8c-%d8%b7%d9%88%d9%84%d8%a7%d9%86%db%8c.html#comments Sat, 10 Dec 2016 16:13:05 +0000 https://www.xn--mgbguh09aqiwi.com/?p=23856 یکی از امکانات جالبی که در css3 معرفی شده برطرف کردن مشکلی قدیمی و دردسر ساز می باشد …

این مشکل هنگامی به وجود می آید که شما در درون یک کادر , نوشته ی طولانی دارید و طبیعتا این نوشته ها پس از رسیدن به انتهای کادر , شکسته و بقیه آن به سطر بعدی میرود .

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

با ما در ادامه همراه باشید تا این مشکل را برای همیشه از بین ببریم …

قرار دادن سه نقطه در انتهای متن های طولانی با css3

برای این کار کافیست به تگ پدر که اکثرا همان باکس ما می باشد , کلاس vmsNowrap بدهیم :

<div class="vmsNowrap">وحید مجیدی صدر وحید مجیدی صدر وحید مجیدی صدر</div>

حال در css کد های زیر را کپی نمایید :

.vmsNowrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

نکته 1 : تگ پدر هر تگ دیگری میتواند باشد ( از جمله p,h1,pre,section و … )

نکته 2 : تگ پدر حتما باید دارای یک width مشخص باشد . مثلا 200px ( این width برای این است که نوشته های درون آن تگ در صورت بیشتر شدن از مثلا 200px به سه نقطه تبدیل شوند )

نکته 3 : شما میتوانید برای دیزاین باکس پدر , کلاس دیگری را به vmsNowrap اضافه نموده و پراپرتی های دلخواه دیگر از جمله width , height , border , padding , margin و … را به آن بدهید . مثلا :

<div class="box vmsNowrap">وحید مجیدی صدر وحید مجیدی صدر وحید مجیدی صدر</div>

و برای css آن :

.box{
    width:200px;
    height:50px;
    border:1px solid #ccc;
    margin:5px;
    padding:5px 10px;
}

دموی آموزش

دانلود فایل آماده آموزش

گرداوری و آموزش : وحید مجیدی

پخش اختصاصی

]]> https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%b3%d9%87-%d9%86%d9%82%d8%b7%d9%87-%d8%a7%d9%86%d8%aa%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d9%86-%d9%87%d8%a7%db%8c-%d8%b7%d9%88%d9%84%d8%a7%d9%86%db%8c.html/feed 3 روش های کاهش Request ها به سرور و افزیش سرعت وبسایت https://www.xn--mgbguh09aqiwi.com/%d8%b1%d9%88%d8%b4-%d9%87%d8%a7%db%8c-%da%a9%d8%a7%d9%87%d8%b4-request-%d9%87%d8%a7-%d8%a8%d9%87-%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b1%d8%b9%d8%aa-%d9%88%d8%a8.html https://www.xn--mgbguh09aqiwi.com/%d8%b1%d9%88%d8%b4-%d9%87%d8%a7%db%8c-%da%a9%d8%a7%d9%87%d8%b4-request-%d9%87%d8%a7-%d8%a8%d9%87-%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b1%d8%b9%d8%aa-%d9%88%d8%a8.html#respond Sun, 22 Nov 2015 17:53:50 +0000 http://www.xn--mgbguh09aqiwi.com/?p=14027 همان طور که در پست های  قدیمی تر در مباحث مربوط به بهینه سازی وب سایت گفته شد , یکی از مهمترین موارد در افزایش سرعت بارگذاری وبسایت و همچنین بهینه سازی وبسایت, کاهش تعداد درخواست به سمت سرور از طرف کاربران میباشد .

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

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

روش های کاهش Request ها به سرور و افزیش سرعت وبسایت

  • Combine کردن فایل های css و js : به عنوان مثال شما دارای چند فایل css میباشید . سعی کنید تمامی این فایل ها رو با هم ادغام و تبدیل به یک فایل نمایید .
  • استفاده از Font Icon ها به جای تصاویر کلی وب سایت : برای آشنایی بیشتر به این لینک مراجعه فرمایید .
  • بارگذاری فایل های CSS و JS از سرویس های CDN : گرچه این روش تاثیر کوچکی روی سرعت بارگذاری وبسایت دارد اما میتواند کمک زیادی در این رابطه انجام دهد .
  • فعال سازی Gzip سرور :‌ این کار باعث میشود تا فایل ها به صورت فشرده و با تعداد درخواست کم منتقل شوند . برای آگاهی بیشتر این لینک رو کلیک کنید .
  • استفاده از Ajax برای تبادلات آنلاین بین کاربر و سرور 
  • استفاده از تعداد عکس کمتر در صفحات
  • فعال سازی قابلیت کشینگ در وب سایت : این کار باعث میشود کاربر برای مرور صفحات دیگر سایت ( بجز دفعه اول بارگذاری ) , تعداد درخواست های کمتری به سمت سرور ارسال کند . . برای آگاهی بیشتر این لینک رو کلیک کنید .

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%b1%d9%88%d8%b4-%d9%87%d8%a7%db%8c-%da%a9%d8%a7%d9%87%d8%b4-request-%d9%87%d8%a7-%d8%a8%d9%87-%d8%b3%d8%b1%d9%88%d8%b1-%d8%a7%d9%81%d8%b2%d8%a7%db%8c%d8%b4-%d8%b3%d8%b1%d8%b9%d8%aa-%d9%88%d8%a8.html/feed 0 مقاله معرفی نرم افزارهای مفید در طراحی وب سایت https://www.xn--mgbguh09aqiwi.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa.html https://www.xn--mgbguh09aqiwi.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa.html#comments Sun, 03 May 2015 20:32:14 +0000 http://xn--mgbguh09aqiwi.com/?p=6937 شما با جستجو در اینترنت میتوانید امکانات زیاد و جالبی را به وبسایت خود اضافه کنید.به طور مثال عبارت فارسی ((ابزارهای رایگان وب)) و یا ((کدهای رایگان وب))را در گوگل جستجو کنید.این وبسایت کدهای مورد نیاز را برای شما تولید می کنند.شما باید این کد را در بخش مناسبی در صفحه وب خود قرار دهید.کدهای نظیر نمایش Loading برای وبسایت یکی از امکانات این وبسایت ها به شمار می رود.همچنین کدهای مورد نیاز برای فرم تماس با ما، سیستم تبادل بنر، ایجاد لینک باکس سفارشی، کدهای آمار و اطلاعات ، ساعت فلش و… در این گونه وبسایت های فارسی زبان نیز وجود دارد.

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

مقاله معرفی نرم افزارهای مفید در طراحی وب سایت

دانلود مقاله معرفی نرم افزارهای مفید در طراحی وب سایت

پخش اختصاصی

گرداوری : نیلوفر معماریان محمدی

]]> https://www.xn--mgbguh09aqiwi.com/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1%d9%87%d8%a7%db%8c-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa.html/feed 1 8 عملکرد اشتباه در وب سایت که باعث کاهش بازدید میشود https://www.xn--mgbguh09aqiwi.com/8-%d8%b9%d9%85%d9%84%da%a9%d8%b1%d8%af-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%b1-%da%a9%d8%a7%d9%87%d8%b4-%d8%a8%d8%a7%d8%b2%d8%af%db%8c%d8%af.html https://www.xn--mgbguh09aqiwi.com/8-%d8%b9%d9%85%d9%84%da%a9%d8%b1%d8%af-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%b1-%da%a9%d8%a7%d9%87%d8%b4-%d8%a8%d8%a7%d8%b2%d8%af%db%8c%d8%af.html#comments Sat, 28 Mar 2015 09:49:56 +0000 http://xn--mgbguh09aqiwi.com/?p=5886 این پست از سایت اسکریپت دات کام رو به یک مطلب در مورد متدولوژی ساخت یک وب سایت موفق اختصاص داده ام .

یکی از دغدغه های وب مستران این است که چرا با این همه تلاش ما , بازدید وب سایتمان کم است ؟

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

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

8-عملکرد-اشتباه-وبسایت-در-کاهش-بازدید

 

8-عملکرد-اشتباه-وبسایت-در-کاهش-بازدید

پخش اختصاصی

گرداوری : وحید مجیدی

با تشکر از تحریریه

 

]]> https://www.xn--mgbguh09aqiwi.com/8-%d8%b9%d9%85%d9%84%da%a9%d8%b1%d8%af-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa-%d8%af%d8%b1-%da%a9%d8%a7%d9%87%d8%b4-%d8%a8%d8%a7%d8%b2%d8%af%db%8c%d8%af.html/feed 4