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

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

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

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

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

طبقه بندی موضوعی
آخرین مطالب

۱۵ مطلب در اسفند ۱۳۹۸ ثبت شده است

طراحی سایت چیست

مقدمه

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

  • علیرضا نهری

آموزش svg

۲۵
اسفند

آموزش 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

 

 

<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 چه کاربردی دارد؟

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

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

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

 

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

  • علیرضا نهری

فرق LESS با SASS

۲۵
اسفند

فرق 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 چیست؟

۲۵
اسفند

css

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

  • علیرضا نهری

HTML چیست ؟

۲۵
اسفند

HTML (اچ تی ام ال)

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

  • علیرضا نهری

 

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

مقدمه 

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

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

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

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

  • علیرضا نهری

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

مقدمه

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

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

  • علیرضا نهری