سیاره‌ی آی‌تی

با IT-Planet دنیای آی‌تی را بهتر بشناسید

CSS

چگونه در ایلوستریتور چند Artboard را با فرمت‌های مختلف PNG‌ و SVG و PDF و JPG رزولوشن بالا ذخیره کنیم؟

نرم‌افزار Adobe Illustrator به صورت پیش‌فرض فایل‌ها را با فرمت AI ذخیره می‌کند. این فرمت برای ویرایش فایل در ایلوستریتور مناسب است اما برای استفاده از فایل در دیگر نرم‌افزارها و به اشتراک گذاری طراحی‌ها، بهتر است از فرمت‌های دیگر مثل PNG و JPG یا SVG و PDF استفاده شود.

در ادامه به فرمت‌های خروجی که در نرم‌افزار ادوبی ایلوستریتور قابل استفاده است می‌پردازیم.

استفاده از Artboard در ذخیره کردن فایل‌های illustrator

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

آیا استفاده از H1‌ روی سئو موثر است؟ بررسی ارتباط موضوع و عنوان صفحه با تگ H1

یکی از فاکتورهای موثر در SEO این است که در صفحات سایت و به خصوص صفحات مطالب از تگ H1 برای بیان موضوع و عنوان مطلب استفاده کنیم. استفاده نکردن از تگ H1‌ یا چند مرتبه استفاده از تگ H1 و حتی استفاده از تگ H2 به عنوان بالاترین سطح و درشت‌ترین متن در صفحه، ایده‌آل نیست و بهترین روش این است که عنوان صفحه را در تگ H1 نیز استفاده کنیم.

در ادامه به بحث در مورد تفاوت عنوان صفحه و هدینگ ۱ یا تگ H1 در HTML می‌پردازیم و اصول طراحی بهینه‌ی صفحه از نظر عنوان و H1‌ را بررسی می‌کنیم.

تفاوت بین عنوان صفحه و H1 چیست؟

هدینگ یا تیتر سطح ۱ یا به اختصار H1، یکی از تگ‌های HTML است که قبل از دوران پیدایش CSS برای نوشتن درشت‌ترین متن در صفحات وب استفاده می‌شد. پس از ابداع CSS و مقوله‌ای به اسم کلاس، طراح وب می‌تواند برای هر یک از هدینگ‌های سطح ۱ در صفحه، کلاسی در نظر بگیرد و در تعریف کلاس، اندازه‌ی متن یا font-size را کوچک یا بسیار بزرگ فرض کند و حتی می‌تواند متنی با کلاس خاص را از دید بازدیدکننده مخفی کند!

طراحی جعبه جستجو یا Search Box‌ سایت‌ها با ۸ طرح جالب و پویا

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

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

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

آموزش برنامه‌نویسی بازی مار و نقطه فقط با HTML و JavaScript و CSS

یکی از ویژگی‌های جالب طراحی وب به کمک JavaScript و HTML این است که می‌توانید بازی‌های ساده بنویسید! برنامه‌نویسی یک بازی ساده مثل بازی مار که نقاطی را می‌خورد و طولانی‌تر می‌شود، به زبان جاوااسکریپت چندان پیچیده نیست و می‌توان بازی‌های به مراتب پیچیده‌تر هم تهیه کرد و در صفحات وب‌سایت قرار داد.

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

با Notepad++ کدنویسی کنید

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

طراحی دکمه منوی سه‌خطی متحرک در صفحات وب با CSS و JavaScript

نقش انیمیشن‌ها در طراحی وب صرفاً زیباتر کردن صفحات نیست بلکه موجب جلب توجه بازدیدکنندگان می‌شود و محتوای صفحات را مرتب‌تر و قابل‌فهم‌تر و سرگرم‌کننده‌تر می‌کند. برای متحرک کردن المان‌ها در صفحات وب، می‌توانید از Transition و همین‌طور تعریف کردن Keyframe استفاده کنید و حتی بدون جاوااسکریپت، عناصری را در صفحه متحرک کنید.

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

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

بهترین مقالات اخیر

دانش‌نامه

گوگل و اندروید

اپل، macOS و iOS

ویندوز

دنیای فناوری

دانش‌نامه

آخرین مطالب سلامت زیستی