مقدمه

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

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

در جنبه های هنری هم مومات ایجاد یک سایت با جذابیت های بصری بالا و زیبایی ظاهری مورد بحث قرار میگیرد.

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

ادامه مطلب

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

زکات علم، نشر آن است. هر

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

همچنین

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

بلاگ انجام می دهند افزوده می شود.

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

مرد خردمند هنر پیشه را، عمر دو بایست در این روزگار، تا به یکی تجربه اندوختن، با دگری تجربه بردن به کار!

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

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

صفر تا صد دیجیتال مارکتینگ

مقدمه

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

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

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

ادامه مطلب

راههای افزایش ترافیک سایت

ترافیک سایت چیست؟

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

ادامه مطلب

روش های دیجیتال مارکتینگ

دیجیتال مارکتینگ

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

ادامه مطلب

سایت رسپانسیو چیست ؟

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

ادامه مطلب

PWA چیست ؟

در تعریف PWA چیست میتوان گفت وب اپلیکیشن های پیشرونده PWA که به اختصار (Progressive Web Apps) در آمده، به اپلیکیشن هایی گفته میشود که بر خلاف اپلیکیشن های بومی که منحصر به کد نویسی و سیستم عامل های خاص مانند اندروید و آی او اس میباشد از نسخه وب سایت به صورت یک اپلیکیشن در صفحه گوشی همراه شما استفاده میکند و شما را وادار به نصب یک اپلیکیشن بومی و کم کردن فضای سیستم شما نمیکند. یعنی شما با نصب یک اپلیکیشن بومی در صفحه موبایل یا تبلت خود به یک نسخه بهینه شده وب سایت مورد نظر برای استفاده بر روی دستگاه خود دسترسی پیدا میکنید.

ادامه مطلب

سئو داخلی

سئو داخلی چیست؟

سئو داخلی که از آن با عنوان های On-Site SEO و ON-PAGE SEO نیز یاد میشود، به مجموعه اقداماتی اطلاق می گردد که با استفاده از بهینه سازی عناصر یک سایت، موجب افزایش رتبه و ترافیک سایت از موتورهای جستجو شوید. منظور از سئو داخلی، هم بهینه سازی محتوا و هم کدهای HTML وب سایت است. در نقطه مقابل سئو داخلی، سئو خارجی یا Off-Site SEO وجود دارد که شامل لینک های خارج از سایت شما و همینطور دیگر سیگنال هاییست که از محیط اینترنت به سمت سایت شما ارجاع داده می گردد. که این دو با هم سئو سایت شما را میسازند.

ادامه مطلب

سئو خارجی

 تعریف کلی 

سئو

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

سئو خارجی (Off-page Seo)

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

ادامه مطلب

آموزش svg

مطالبی که در این درس یاد خواهید گرفت عبارتند از :

• SVG در HTML5
• رسم مستطیل در SVG
• رسم دایره در SVG
• رسم بیضی در SVG
• رسم خط در SVG
• رسم چندضلعی در SVG
• رسم چندخطی در SVG
• رسم یا مسیر در SVG
• متن در SVG
• شیوه ی رسم در SVG

SVG در HTML5

با اومدن html5 این امکان که svg و مستقیم به صفحات وب اضافه کنیم هستش.

شما با استفاده از تگ <svg> میتونید در هرجای صفحه که خواستید اشکال مورد نظرتون و رسم کنید.

یک مثال ساده برای آموزش svg  کد زیر هستش :

<!DOCTYPE html>
<html>
<body>

<h1>رسم svg </h1>

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="blue" />
</svg>

</body>
</html>

توضیحات کد بالا :

این کد یک دایره برایمان رسم میکند:

• svg: یک عکس SVG با استفاده از عنصر <svg> آغاز می شود.
• width : مقدار عرض شکل ترسیمی را مشخص میکند .
• height : مقدار طول را مشخص میکند.
• circle : یک دایره برایمان رسم میکند با این ویژگی که درس امروز ماست بیشتر آشنا خواهیدشد.
• cx و cy : خصوصیات cx و cy، به ترتیب مختصات x و y از مرکز دایره را مشخص می کنند. اگر که cx و cy تعریف نشوند، مرکز دایره به مختصات (0,0) تنظیم خواهد شد.
•  r : خصوصیت r، شعاع دایره را مشخص می کند.
• stroke : خصوصیات stroke و stroke-width درواقع خط دور دایره(کادر) را مشخص می کنند. در اینجا رنگ کادر را با استفاده از خصوصیت stroke برابر با green قرار دادیم، و ضخامت این خط را با استفاده از خصوصیت stroke-width برابر با 4px قرار داده ایم.
• fill :  رنگ درون دایره را مشخص می کند. که در اینجا ما آن را برابر با رنگ blue آبی قرار داده ایم.

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

ترسیم خط توسط SVG:

بدین منظور کد زیر را در داکیومنت HTML خود وارد کنید.

<svg>

    <line x1=”0″ y1=”0″ x2=”200″ y2=”0″ style=”stroke:rgb(0,0,0);stroke-width:1″ /></line>

</svg>

روش تعریف تگ SVG بدین صورت است که ابتدا تگ <svg> را تعریف کرده سپس از زبان نشانه گذاری xml برای تعریف شکل دلخواه استفاده می کنیم. در کد فوق پارامترهای زیر را تعریف کرده ایم:

• x1: مختصات شروع خط روی محور افقی x
• y1: مختصات شروع خط روی محور عمودی y
• x2: مختصات پایان خط روی محور افقی x
• y2: مختصات پایان خط روی محور عمودی y

ترسیم خط مورب توسط svg:

Svg فوق یک خط افقی به رنگ مشکی ایجاد می کند. حال اگر بخواهیم یک خط مورب را توسط svg ترسیم کنیم، کافیست مقدار پارامتر y2 را به ۲۰۰ تغییر دهیم. همچنین می توان رنگ این خط را به دو صورت تغییر دهیم، یکی اینکه استایل درون خطی برای آن تعریف کنیم و دیگری اینکه در یک فایل css برای آن استایل موردنظر خود را اعمال کنیم.

کد svg خط مورب بصورت زیر می باشد:

<svg>

    <line x1=”0″ y1=”0″ x2=”200″ y2=”200″ style=”stroke:rgb(0,255,255);stroke-width:10″ /></line>

</svg>

ترسیم دایره توسط SVG:

در آموزش svg برای ترسیم دایره  همانند خط ترسیم شود با انجام تغییراتی در پارامترهای SVG . در این مثال می خواهیم دایره ای با رنگ داخلی نقره ای و حاشیه مشکی طراحی کنیم که BORDER-RADIUS آن ۵۰ پیکسل است:

کد svg برای طراحی دایره بصورت زیر است:

<svg>

    <circle cx=”60″ cy=”60″ r=”50″ stroke=”#ed145b” stroke-width=”5″ fill=”#00746b” />

</svg>

اتریبیوت های CX و CY بیانگر مختصات X و Y وسط دایره می باشند. اگر این پارامترها را تعریف نکنیم، بطور پیش فرض مختصات ۰ برای وسط دایره درنظر گرفته می شود که جالب نمی باشد. پارامتر r نیز مشخص کننده border-radius می باشد.

ایجاد مستطیل با SVG:

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

کد تگ svg برای ترسیم یک مستطیل بصورت زیر می باشد:

<svg>

    <rect

     width=”200″

     height=”100″

     style=”

    fill:#92278f;

     stroke-width:5″ />

  </rect>

</svg>

مانند استایل های css برای تعیین ابعاد مستطیل باید از width و height استفاده کنیم.

مستطیل با گوشه های گرد

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"

style="fill:#9e0039;stroke:black;stroke-width:5;opacity:0.5" />

طراحی بیضی بوسیله svg:

بیضی همانند دایره در  آموزش svg طراحی می شود با این تفاوت که برخلاف دایره که فقط یک border-radius داشتیم، برای طراحی بیضی باید دو border-radius افقی و عمودی تعریف کنیم.

کد ترسیم یک بیضی توسط اشکال svg به شکل زیر است:

<svg>

    <ellipse cx=”60″ cy=”60″ ry=”40″ rx=”20″ stroke=”yellow” stroke-width=”5″ fill=”green” /></ellipse>

</svg>

ایجاد چندضلعی (polygon) با svg:

طراحی چندضلعی با svg نیاز به کمی ترفند و آموزش svg حرفه ای دارد. ابتدا به svg چندضلعی رنگ بک گراند (fill color) سبز و حاشیه زردرنگ ۱۰ پیکسلی می دهیم. سپس اتریبیوت point را برای آن تعریف می کنیم. هر جفت از مختصات نقاط چندضلعی بیانگر مختصات افقی و عمودی گوشه های polygon می باشد. در این مثال ما می خواهیم یک ستاره ایجاد کنیم.

تگ svg برای ایجاد یک چندضلعی به شکل ستاره:

<svg>

        <polygon fill=”green” stroke=”orange” stroke-width=”10″ points=”350, 75  ۳۷۹,۱۶۱ ۴۶۹,۱۶۱ ۳۹۷,۲۱۵ ۴۲۳,۳۰۱ ۳۵۰,۲۵۰ ۲۷۷,۳۰۱ ۳۰۳,۲۱۵ ۲۳۱,۱۶۱ ۳۲۱,۱۶۱″ />

        </polygon>

  </svg>

<svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>

مثال دیگر :

<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>

افزودن متن به svg:

همانطور که در ابتدای مقاله عرض کردیم، برای هر svg می توان متنی تعریف کرد که توسط گوگل ایندکس شود. برخلاف تکنولوژی های سابق وب مانند فلش که متن داخل آنها در گوگل ایندکس نمی شد. بدین صورت می توان تکست موردنظر را به فرمت svg اضافه کرد:

<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>

همانطور که در کد فوق مشاهده می کنید مختصات x و y را بهمراه برخی استایل های css (مانند font-size و colorو…) را تعریف کرده ایم.

ایجاد مسیر (path) توسط svg:

برای طراحی یک مسیر توسط svg باید روی اتریبیوت d تمرکز کنیم. اتریبیوت ‘d’ چگونگی ترسیم مسیر را شرح می دهد. این پارامتر شامل چندین فاکتور مختلف می باشد که عبارتند از:

M: moveto

L: lineto

H: horizontal lineto

V: vertical lineto

C: curveto

S: smooth curveto

Q: quadratic Bezier curve

T: smooth quadratic Bezier curveto

A: elliptical Arc

Z: closepath

به مثال زیر توجه کنید:

    <svg>

        <path id=”path1″ d=”M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428″ style=”fill:none;stroke:2;”></path>

    </svg>

مسیری که توسط svg ترسیم شده است این قابلیت را دارد که با یک متن دلخواه پر شود. بصورت تصویر زیر:

کد درج متن روی مسیر ایجاد شده با SVG:

<svg>

        <defs>

            <path id=”path1″ d=”M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428″></path>

        </defs>

        <text x=”0″ y=”34″ fill=”black” style=”font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; >

            <textPath xlink:href=”#path1″>Mohtava.info</textPath>

        </text>

    </svg>

همانطور که در کد بالا مشاهده می کنید، این svg از دو بخش تشکیل شده است. تگ def و تگ text . مشخصات مسیر (path) را در تگ defs تعریف می کنیم و مشخصات متن موردنظر را در تگ text . به تگ path آیدی path1 داده ایم و سپس مقدار اتریبیوت textPath واقع در تگ text را برابر آیدی path1 قرار داده ایم.

مثال

برای آموزش svg بهتر است چند مثال را بررسی کنیم .مثال زیر یک رسم را مشخص می کند که از نقطه ی (150,0) شروع می شود و سپس یک خط به نقطه ی (75,200) رسم می شود و سپس از آنجا، یک خط به نقطه ی (225,200) رسم می شود و در آخر مسیر بسته می شود و به نقطه ی (150,0) باز می گردیم:

<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>

مثال 2

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

در مثال زیر، یک منحنی درجه 2(سهمی) را ایجاد می کنیم به طوری که نقاط A و C به ترتیب نقاط شروع و پایان هستند و نقطه ی B، یک نقطه ی کنترل است:

<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>

استایل دهی به تگ svg توسط css:

در آموزش svg برای استایل دهی به svg شما همچنین می توانید تگ svg را توسط استایل های css شخصی سازی کنید و موقعیت آن را مشخص کنید. علاوه بر این شما می توانید تگ svg را در تگ لینک (anchor tag) قرار دهید تا شکل یا مسیر طراحی شده با svg بصورت لینک درآید. و یا حتی می توان اشکال svg را توسط جی کوئری دستکاری کرد.

نتیجه گیری :

استفاده از فرمت svg این امکان را برای طراحان وب فراهم می کند که اشکال scalable ایجاد کنند که در تمام اسکرین ها و دستگاه های موجود در بازار بخوبی نمایش می یابند و از کیفیت آنها کاسته نخواهد شد. بویژه در این روزها که اسکرین های رتینا (retina screen) در حال گسترش می باشند، استفاده از طراحی svg بسیار کاربردی خواهد بود.

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

نحوه استفاده از svg

استفاده از svg  امروزه که حتی یک بایت هم در سرعت سایت موثر است یکی از مومات در طراحی سایت است.

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

ادامه مطلب

svg چیست ؟

svg چه کاربردی دارد؟

svg در html  و نحوه استفاده و آموزش آن و .

اینها مواردی هستند که در این مقاله از آرن به بررسی آن میپردازیم و صفرتا صد svg چیست را مورد بررسی قرار میدیم.

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

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

ادامه مطلب

فرق LESS با SASS

مقدمه

CSS  به تنهایی برای طراحی سایت بسیار مناسب است. اما وقتی که شامل بسیاری از وظایف تکراری می شود  و زمانی که برنامه بسیار بزرگ باشد مدیرت استایل صفحات برایش دشوار می شود. برای جلوگیری از این وظایف تکراری و نوشتن CSS به بهترین روش،ما به یک Preprocessor نیاز داریم.

Preprocessor ها  ،گسترش یافته ی CSS هستند.Preprocessorها تمامی ویژگی های CSS به همراه ویژگی های اضافه تر مانند متغیر،expression، mixin و. می باشند.یک Preprocessor از نظر کاربر نهایی کار بزرگی را انجام نمی دهد اما می تواند سریعتر و راحت تر توسعه پیدا کند. ازلحاظ عملکرد  از دید کاربر نهایی ، Preprocessor ها می توانند همه ی Style Sheet ها را به یک فایل واحد تبدیل کنند.

بنابراین همه ی Style ها برای یک برنامه در یک شبکه رفت و برگشت (round-trip)  بارگذاری می شود به جای این که برای هر Style Sheet درخواست های جداگانه شود.

Style ها با استفاده از تعدادی Preprocessor ها ایجاد شده اند که به CSS تبدیل می شوند (Convert)  و فایل کامپایل شده CSS در صفحه HTML می باشد، زیرا مرورگر CSS را میفهمد. در این مقاله به یررسی فرق LESS با SASS میپردازیم. 

ادامه مطلب

 فریم ورک های css چیست ؟

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

ادامه مطلب

css

اگر شما هم طراح وب باشید و به این مقوله علاقه داشته باشید و فعالیت در این زمینه و یادگیری بیشتر یکی از اهداف شما باشد، از جمله بدیهی ترین اطلاعاتی که لازم است به آن تسلط پیدا کنید؛ مفاهیم مرتبط با اچ تی ام ال (HTML) و سی اس اس (CSS) می باشد. به عبارتی دانش بنیادی ای که هر شخص طراح آموخته و در کار خود به کار گرفته است، همین زبان نشانه گذاری متن می باشد که از طریق آن می توانید کدهایی را ایجاد کنید که هر یک منجر به نمایش یک سری از ویژگی ها در صفحات وب خواهند شد. دنیای طراحی سایت دنیایی است شلوغ و پر رقابت ، بنابراین اگر واقعا قصد دارید به جایی برسید؛ باید تلاش کنید و بیشتر بیاموزید و نمونه کارهای بیشتری را طراحی نمایید. امروزه، با توجه به تغییراتی که در سبک بازاریابی و تبلیغات حاصل شده است ؛ طراحی سایت به عنوان یک مهارت جهانی در نظر گرفته می شود. شما در هر کشوری از دنیا که زندگی کنید با تسلط بر web design می تواند درآمد زایی داشته باشید اما کسی موفق است که اصولی و حرفه ای می آموزد و در نهایت حرفه ای نیز کار می کند. Html و css  از مهمترین استانداردهای تصویب شده وب می باشند و برای ورود به این شغل، لازم است تا با مفاهیم مرتبط با آن ها آشنا شوید که در ادامه ی این مطلب به اختصار به معرفی آنها پرداخته شده است.

ادامه مطلب

HTML (اچ تی ام ال)

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

ادامه مطلب

زبان های برنامه نویسی وب

مقدمه 

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

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

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

• زبان های سمت کاربر
• زبان های سمت سرور 

ادامه مطلب

نکات مهم طراحی سایت

مقدمه

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

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

ادامه مطلب

مقدمه

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

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

ایده اصلی این کتابخانه ، اضافه کردن امکاناتی جدید به Html می باشد تا آن را از یک زبان نشانه گذاری ساده خارج کند.

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

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

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

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

ادامه مطلب

مقدمه

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

ادامه مطلب

مقدمه

دراین مقاله فصد داریم به نحوه پیاده سازی pwa در انگولار بپردازیم.

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

• pwa چیست ؟

• فناوری های pwa

• آموزش pwa

لازم به ذکر است که برای pwa در انگولار نیازی به برنامه نویسی نیست و تنها با اجرای چند دستور میتوانید به راحتی pwa را در پروژه خود راه اندازی کنید.

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

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

انگولار را مشاهده نمایید. 

ادامه مطلب

مقدمه

در این مقاله به بررسی Nodejs چیست مپردازیم.

node.js در واقع یک پلتفرم است که محوریت اصلی آن بر روی زبان جاوااسکریپت است.

 Node.js  امروزه توانسته با استفاده از تکنولوژی رویداد محوری که درون خود پایه گذاری کرده است، بسیاری از برنامه‌نویسان را جذب خود کند.

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

در حال حاضر  JavaScript قدرت انجام کارهایی را دارد که دیگر زبان‌های اسکریپت‌نویسی مانند  Python  ندارند.

هم JavaScript  مرورگر شما و هم Node.js بر روی موتور runtime  جاوااسکریپت V۸ اجرا می‌شوند. این موتور کد JavaScript  شما را می‌گیرد و آن را به یک کد ماشین (Machine Code) سریع‌تر تبدیل می‌کند. کد ماشین، یک کد سطح پایین است که کامپیوتر می‌تواند بدون نیاز به تفسیر آن، اجرایش کند.

ادامه مطلب

ویژگی های nodejs

مقدمه

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

 یعنی به کمک جاوا اسکریپت بتوانند ظاهر و منطق سرویس تحت وب خود را در کنار هم ایجاد کنند و دیگر برای برنامه نویسی سمت سرور سراغ زبان هایی مثل PHP یا ASP نروند.

 یکی از محیط‌های هایی که به برنامه نویسان اجازه می‌دهد کدهای جاوا اسکریپت خود را سمت سرور اجرا کنند، Node.js می‌باشد.

نود جی اس  یک محیط سمت سرور رایگان برای زبان برنامه نویسی جاوا اسکریپت میباشد (در واقع برای اجرا از موتور V8 Engine جاوا اسکریپت گوگل کروم استفاده می کند).

این پلتفرم با زبان های C ، C++ و جاوا اسکریپت نوشته شده است و در تمامی سیستم عامل ها مانند انواع لینوکس ، ویندوز، مکینتاش ، سولاریس و … قابل اجرا و بهره برداری است.

ما در مقاله نود جی اس چیست به طور مفصل به بررسی این پلت فرم پرداختیم.

ادامه مطلب

ادامه مطلب