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





اگر فرم ثبت نام برای شما نمایش داده نمیشود، اینجا را کلیک کنید.









اگر فرم بازیابی کلمه عبور برای شما نمایش داده نمیشود، اینجا را کلیک کنید.





نمایش نتایج: از 1 به 4 از 4
  1. #1
    academyIT
    كاربر عادي
    تاریخ عضویت
    2015 Nov
    نوشته ها
    122
    0
    4

    مهمترین اصول طراح وب سایت واکنشگرا

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

    این آموزش در دو قسمت در اختیار شما عزیزان قرار میگیرد.

    قسمت اول :

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


    طراحی وبسایت Responsive یا واکنشگرا یک راهکار بسیار کارآمد برای بهینه سازی وب سایت در سخت افزار های مختلف مثل موبایل و تبلت :

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

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


    · واحدهای نسبی (Relative units)
    به جای استفاده از واحد های ثابت مثل پیکسل و ... بهتره از واحد های نسبی مثل درصد استفاده کنیم تا وب سایت رو نسبت به تغییرات عرض سازگارتر کنه . مثلا وقتی میگیم 100% منظورمون کل عرض مرورگر توی هر سخت افزاریه حالا چه عرض اون سخت افزار 400px باشه جه 1900px فرقی نمیکنه ولی وقتی میگیم 800px دیگه توی سخت افزار هایی که صفحه نمایش اونها از 800px کمتر هست قطعا به مشکل بر میخوریم و اسکرول افقی خواهیم داشت . به طراحی با مقیاس های ثابت مثل px , point و... Static Unit میگن و به طراحی با واحد های نسبی مثل درصد Relative Units میگن.

    · مقادیر بیشینه (Max) و کمینه (Min)
    بعضی وقت ها خیلی خوبه که محتوا همه*ی عرض صفحه را بگیره یعنی Full Width باشه ، مثلا روی یک دستگاه همراه. اما اینکه همان محتوا کل عرض صفحه نمایش تلویزیونتان را بگیرد معمولا کار معقولی نیست. اینجاست که مقادیر min و max به کمک می*آد. مثلاً پهنای ٪۱۰۰و عرض بیشینه*ی ۱۰۰۰ پیکسل به این معناست که محتوا کاملا صفحه را پر می*کند، اما نباید بیشتر از ۱۰۰۰ پیکسل بشه .


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

    [برای نمایش لینک باید عضو شوید. ]


    [برای نمایش لینک باید عضو شوید. ]
  2. #2
    academyIT
    كاربر عادي
    تاریخ عضویت
    2015 Nov
    نوشته ها
    122
    0
    4

    قسمت دوم اصول طراحی وب سایت واکنشگرا

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

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


    · عناصر تودرتو (Nested objects)
    کنترل تعداد زیادی عنصر وابسته به هم کار سختیه مخصوصا توی طرایح ی نسبی ، بنابراین دسته*بندی این المان ها در یک مجموعه که دارای یک والد هستن کار رو به مراتب ساده تر و منظم تر میکنه . اینجاست که واحدهای ثابت مثل پیکسل*ها می*توانند به کمک بیایند. این واحدها برای محتویاتی که نمی*خواهید نسبی باشن و میخواید ثابت باشن مثل لوگو و دکمه*ها کارآمد هستن .


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


    · مقایسه*ی فونت*های وبی (Webfonts) با فونت*های سیستم (System fonts)
    خوب این واضحه که شما اگر از فونت های وبی مثل yekan یا dinar استفاده کنید وب سایت زیباتری دارید تا از فونت های استاندارد سیستمی مثل Tahoma و ... استفاده کنید و این هم بدیهیه که استفاده از فونت های وبی باعث میشه صفحه وب سایت شما دیر تر لود بشه و حجمش بره بالاتر .اگه میخوای با فونت ها وبی بیشتر آشنا بشی و همه اونها رو یکجا ببینی و استفاده کنی به این آدرس سر بزن : [برای نمایش لینک باید عضو شوید. ]


    · تصاویر Bitmap در برابر Vector
    اگر در طراحی از روش flat استفاده میکنی و نمیخوای خیلی افکت و سایه و ... به آیکون ها و .. سایتت بدی قطعا وکتور گزینه بهتریه مثل فونت آیکون ها که به جای تصاویر jpg و png و ... استفاده میشن . گذشته از این مورد بسیار مهم مسئله ای هست که هیچ وقت نباید فراموش کنی اون خم بخینه سازی تمام تصاویر bitmap در سایتت هست . همه تصاویر رو با روش های مختلفی که بلد هستی بهینه کن .


    اگر این موارد و سایر موارد آموزشی آکادمی آی تی برای شما دوست عزیز سودمند بوده لطفا وب سایت ما رو به سایر دوستانتون هم معرفی کنید . academy-it.ir


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

    [برای نمایش لینک باید عضو شوید. ]


    [برای نمایش لینک باید عضو شوید. ]
  3. #3
    academyIT
    كاربر عادي
    تاریخ عضویت
    2015 Nov
    نوشته ها
    122
    0
    4
    دانلود رایگان برای مدت محدود

    ضمن عرض سلام و احترام ، جلسه 10 از دوره آموزش CSS در آکادمی آی تی با عنوان آموزش ساخت منو آبشاری Drop-Down و هم چنین آموزش سلکتور های ترکیبی در CSS و یا Compound سلکتور ها به صورت رایگان تا مدت محدود در اختیار شما دوستان عزیز می باشد برای دانلود این آموزش از لینک زیر استفاده نمایید :





    [برای نمایش لینک باید عضو شوید. ]
    [برای نمایش لینک باید عضو شوید. ]
    آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...

    [برای نمایش لینک باید عضو شوید. ]


    [برای نمایش لینک باید عضو شوید. ]
  4. #4
    academyIT
    كاربر عادي
    تاریخ عضویت
    2015 Nov
    نوشته ها
    122
    0
    4

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

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

    یکی از نرم افزار های بسیار پر کاربرد و کاملا ساده برای طراحی و برنامه نویسی سایت که به تازگی توسط غول نرم افزاری جهان ، شرکت ادوبی (خالق Dreamweaver و Photoshop) برای طراحان و برنامه نویسان وب سایت تولید شده است نرم افزار Adobe Brakets است .
    در این آموزش قصد داریم تا شما را به صورت مقدماتی تا پیشرفته با این ابزار سودمند آشنا کنیم چرا که یادگیری این نرم افزار که به حداقل منابع سیستم احتیاج دارد به شما کمک میکند تا سرعت طراحی وب سایت های خود را بالا ببرید .
    ما برای پیاده سازی صفحات وب از نرم افزار های مختلفی میتونیم استفاده کنیم ، از ساده ترین اونها مثل notepad بگیرید تا نرم افزار هایی که WYSIWYG هستند مثل Dreamweaver و Adobe Muse و .. که همیشه بهترین این نرم افزار توسط شرکت Adobe ایجاد و پیاده سازی شده مثل Brackets ، این برنامه با تکنولوژی جدید وب و با زبان های html,css,javascript نوشته شده و opensource و رایگان هست.
    این نرم افزار حجم بسیار پایینی داره .
    سرعت کار با این نرم افزار بسیار بالاست .
    امکانات جدید و منحصر به فردی در این نرم افزار دیده شده که می تواند سرعت کار شما را افزایش دهد.
    پلاگین های بسیار زیادی در این نرم افزار وجود داره که میتونید ازش استفاده کنید و کارتون رو ساده تر میکنه .
    میتونید از خصوصیت های بسیار پیشرفته مثل Live Previewاستفاده کنید .
    قابلیت Quick Edit که فوق العاده به ویرایش سریع کد های شما کمک میکنه .
    نرم افزار Brackets دارای code hint بسیار قوی هست که توی کد نویسی ها به شما کمک میکنه .
    چرا باید این ویدئو رو تهیه کنم ؟

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


    سر فصل های آموزشی دوره ، توی این دوره چی یاد میگیرم ؟

    آشنایی با نرم افزار ادوبی براکتز
    آشنایی با خصوصیت های Live Preview و Quick Edit در براکتز
    آشنایی با پلاگین ها و نحوه نصب و استفاده از آنها
    آموزش پلاگین Emmet
    آموزش نحوه نوشتن کد های HTML با استفاده از Emmet در Brackets
    آموزش نحوه نوشتن کد های CSS با استفاده از Emmet در Brackets
    پیاده سازی یک صفحه سایت در کمتر از 10 دقیقه

    لینک دوره آموزشی : [برای نمایش لینک باید عضو شوید. ]
    [برای نمایش لینک باید عضو شوید. ]
    آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...

    [برای نمایش لینک باید عضو شوید. ]


    [برای نمایش لینک باید عضو شوید. ]
نمایش نتایج: از 1 به 4 از 4

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Content Relevant URLs by vBSEO 3.6.0 RC 2