• اطلاعیه ها

    • Saeed Fard

      حمایت وردپرس پارسی از همایش آینده وب و موبایل   19/04/74

        چهارم و پنجم اسفند ماه 1395، همایش آیندهٔ وب و موبایل ایران با حمایت سازمان فناوری اطلاعات در مرکز همایش‌های شهید قندی برگزار خواهد شد. این همایش یک رویداد ۲ روزه است که در آن پیشتازان صنعت وب و موبایل از تکنولوژی‌های روز دنیا در این حوزه‌ها سخن می‌گویند به طوری که این همایش پنجره‌ای به چشم‌انداز آینده‌ٔ وب و موبایل در جهان، و همچنین راهنمایی برای تصمیم‌گیران، تصمیم‌سازان و متخصصان ایرانی است.   فرصت‌هایی که FOWM#  برای شما خلق خواهد کرد: آشنایی با تکنولوژی‌های آینده‌ساز وب و موبایل شرکت در مباحث چالشی درباره وب و موبایل ارتباط و شبکه‌سازی با “قله‌های وب و موبایل” موقعیت‌های کاری، هم‌تیمی‌های جدید دریافت گواهی شرکت در همایش دو روز به‌یادماندنی سرشار از شگفتی   شرکت‌کنندگان در این همایش ضمن آشنایی با فناوری‌های آینده‌ساز وب و موبایل، شرکت در مباحث چالشی و ارتباط با بزرگان وب و موبایل ایران، می‌توانند موقعیت‌های کاری و هم‌تیمی‌های جدید برای کسب‌وکار خود بیابند. این همایش برای طراحان و توسعه‌دهندگان وب‌سایت و موبایل، مدیران ارشد سازمان‌ها، صاحبان کسب‌وکارهای کوچک و متوسط، دانشجویان و علاقه‌مندان دارای نکات آموزشی و جذاب خواهد بود.   مجید علوی‌زاده، دبیر همایش آیندهٔ وب و موبایل که سابقه اجرای چند همایش و سمینار مرتبط را دارد، اعلام کرد: جمعی از بهترین‌ها و پیشروان این دو حوزه در ایران با ارائه‌های تخصصی خود، چشم‌انداز آینده این صنعت‌ها را به شرکت‌کنندگان عرضه خواهند کرد.   در هر یک از روزهای برگزاری همایش، یک پنل تخصصی در مورد یکی از موضوع‌های مهم این حوزه نیز برگزار خواهد شد و دست‌اندرکاران به بحث و تبادل نظر خواهند پرداخت و در پایان، به شرکت‌کنندگان گواهی حضور در همایش اعطا خواهد شد.   ثبت نام در مهمترین رویداد صنعت وب و موبایل ایران تا پایان بهمن ماه ۹۵ امکان پذیر خواهد بود، برای ثبت نام و یا کسب اطلاعات بیشتر در خصوص این رویداد و آشنایی با موضوعات و سخنرانان به آدرس http://conf.wsschool.org/fowm مراجعه نمایید.   کاربران وردپرس پارسی می‌توانند با استفاده از کد wp-parsi از مبلغ ۴۰ هزار تومان تخفیف در ثبت نام برخوردار شوند.
سعید شعبانی

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

11 پست در این موضوع قرار دارد

سلام دوستان.

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

ممنون میشم کامل توضیح بدید

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

توضیحات جالبی داده اینجا

http://wp.smashingmagazine.com/2012/06/28/create-responsive-mobile-first-wordpress-theme/

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

برای این کار شما باید از متاها و ریداریکت ها استفاده کنید و یک شیوه نامه هم برای هر کدوم از دستگاه ها ایجاد کنید . کاربرانی که با موبایل وارد میشن مسلماً دوست دارن عرض صفحه کمتر باشه . گرافیک کمتر باشه تا سریعتر لود شه و . . .

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

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

برای این کار شما باید از متاها و ریداریکت ها استفاده کنید و یک شیوه نامه هم برای هر کدوم از دستگاه ها ایجاد کنید . کاربرانی که با موبایل وارد میشن مسلماً دوست دارن عرض صفحه کمتر باشه . گرافیک کمتر باشه تا سریعتر لود شه و . . .

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

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


@media screen and (max-width: 980px) { }

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

ویرایش شده در توسط سعید شعبانی

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

تقریبا مراحلش فرقی نداره ، هر قالب معمولی ای رو میشه ریسپانسیو کرد

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

چند فریمورک ریسپانسیو :


http://www.webtarget.ir/blog/%D8%B7%D8%B1%D8%A7%D8%AD%D8%A7%D9%86-%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A7%D8%B2-%DA%86%D9%87-%D9%81%D8%B1%DB%8C%D9%85%E2%80%8C%D9%88%D8%B1%DA%A9%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%B3%DB%8C-%D8%A7/


http://webhub.ir/framework-36-%D8%A8%D8%B1%D8%A7%DB%8C-css-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive


http://webhub.ir/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%88-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%DB%8C%D9%85-%D9%88%D8%B1%DA%A9-960grid


http://mihanlearn.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8/7-%D8%A7%D8%A8%D9%80%D8%B2%D8%A7%D8%B1-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7/


http://responsify.it/

و مقالاتی دررابطه با ریسپانسیو دیزاین :


http://www.webtarget.ir/blog/%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-responsive-web-design/


http://webhub.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-responsive-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-css3

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

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

منظورتون این هست که مثلا اگر با گوشی htc one x سایت رو باز کنی یک استایل نشون می ده و اگر با گوشی ای Lumia 920 که همان رزولوشن one x رو داره سایت رو باز کنیم یه استایل دیگه رو نشون می ده؟ یا منظورتون این هست که بستگی به رزولیشن دستگاه ها داره؟

تقریبا مراحلش فرقی نداره ، هر قالب معمولی ای رو میشه ریسپانسیو کرد

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

شما می گید که هر قالبی رو میشه واکنش گرا کرد خوب آیا باید در کدهای html قالب هم تغییری ایجاد کرد؟

این فریمورک ها چجوری باید ازشون استفاده کرد آیا استایل و html خام رو در اختیار می گذارند و درون آنها باید کد های وردپرس رو بگونجونیم؟

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

  1. طراحی رسپانسیو با طاهر اصلی سایت اما با سایز های متفاوت و همچنین ویرایش عکس و المانهای وب در سطح ساده در سطح حرفه ای غیر فعال کردن برخی کدهای جاوا و فریمورک ها و افزودن کدهای جاوای متناسب برای سیستم مورد نظر به طور خلاصه برای رسیدن به هدف اول استفاده از مدیا کوئری ها و هدف دوم جاوا و جی کوئری ...
  2. طراحی اختصاصی برای سیستم ها جدا از ظاهر اصلی سایت و استفاده از فریم ورک های چون جی کوئری موبایل و تکنیک کار استفاده از توابع javascript browser detect
  3. طراحی وب اپ مخصوص سیستم های ios و آندروید . در مقایسه با ( Native app )

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

برای دیدن نحوه کار وب اپ لازمه برای ios بروی سفری رفته و بروی گزینه add to home sreen کنید تا با نحوه کارش آشنا بشین .

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

  1. طراحی رسپانسیو با طاهر اصلی سایت اما با سایز های متفاوت و همچنین ویرایش عکس و المانهای وب در سطح ساده در سطح حرفه ای غیر فعال کردن برخی کدهای جاوا و فریمورک ها و افزودن کدهای جاوای متناسب برای سیستم مورد نظر به طور خلاصه برای رسیدن به هدف اول استفاده از مدیا کوئری ها و هدف دوم جاوا و جی کوئری ...
  2. طراحی اختصاصی برای سیستم ها جدا از ظاهر اصلی سایت و استفاده از فریم ورک های چون جی کوئری موبایل و تکنیک کار استفاده از توابع javascript browser detect
  3. طراحی وب اپ مخصوص سیستم های ios و آندروید . در مقایسه با ( Native app )

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

برای دیدن نحوه کار وب اپ لازمه برای ios بروی سفری رفته و بروی گزینه add to home sreen کنید تا با نحوه کارش آشنا بشین .

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

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

قبل از اینکه برای طراحی این نوع پوسته ها آماده بشید باید سطح html-css خودتون رو بالا ببرید.

حتما کمی php و مخصوصا جی کوئری هم کار کنید.

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

منظورتون این هست که مثلا اگر با گوشی htc one x سایت رو باز کنی یک استایل نشون می ده و اگر با گوشی ای Lumia 920 که همان رزولوشن one x رو داره سایت رو باز کنیم یه استایل دیگه رو نشون می ده؟ یا منظورتون این هست که بستگی به رزولیشن دستگاه ها داره؟

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

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط start

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

      ریسپانسیو یا واکنش گرا یعنی چی ؟
      در گذشته ی نه چندان دور صفحات سایت تنها متناسب با سایز بزرگ صفحه های نمایش طراحی و پیاده سازی میشدند و همه چیز با دقتی در حد پیکسل ساخته میشد (Pixel Perfect). اما در دنیای امروز که انواع صفحه های نمایش با اندازه های گوناگون, از مانیتورهای 4K گرفته تا لپتاپ و تبلت و گوشی های هوشمند, مورد استفاده قرار میگیرد دیگر خبری از طراحی Pixel Perfect نیست. سایت شما باید به گونه ای باشد که در تمامی نمایشگرها, فارغ از سایز آن, به بهترین شکل نمایش داده شود و این دقیقا سرویسی است که ما خدمت شما ارائه میکنیم.

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

      اما چطور ریسپانسیو بودن قالب سایتم رو چک کنم ؟
      شما میتونید به وب سایتی که Google اختصاصا برای این مورد ایجاد کرده مراجعه و سایت خودتون رو تست کنید: ( برای انجام تست لازم هست که از V|P|N استفاده کنید )
      https://www.google.com/webmasters/tools/mobile-friendly/
      بعد از وارد کردن لینک سایت خودتون و کلیک بر روی Analyze, گوگل سایت شما رو چک کرده و یکی از نتایج زیر رو مشاهده خواهید کرد:
       

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

      ارتباط از طریق:
      پیغام خصوصی


      موفق باشید,
      و به امید همکاری های بسیار خوب.
       
    • توسط سهراب سپید
      این پوسته رو با توجه به نیازهای خودم درست کردم گفتم اینجا به اشتراک بزارم شاید به کار کسی بیاد
      ویژگی‌ها:
      در ساخت این پوسته هیچ کد جاوا اسکریپت و جی‌کوئری استفده نشده.
      شیوه نامه تنها ۳ کیلوبایت حجم داره.
      واکنش گرا میباشد.

      امتیاز در GTmetrix
      A
      Page Speed Grade:
      (99%)
      A
      YSlow Grade:
      (98%)
      Page load time: 1.41s
      Total page size: 100KB
      Total number of requests: 4
      پیش نمایش
      http://sepid.cloudsite.ir/

      دانلود
      Koochak_minimal.zip
    • توسط mehral



      بنا به درخواست دوستان مبنی بر آموزش طراحی رسپانسیو ( واکنش گر ) تصمیمی مبنی بر برگزاری کارگاه آموزشی گرفته شد تا به این موضوع به طور کامل پرداخته شود و با حمایت وردپرس پارسی و دوستان دیگر این تصمیم به واقعیت تبدیل شد و قرار شد در روز ۸ آذر ۱۳۹۲ کارگاه آموزشی بوت استرپ ۳ برگزار شود
      توضیح مختصر در رابطه با مفاهیم کارگاه :
      بوت استرپ یک فریم ورک فرانت اِند به منظور طراحی قدرتمند , حرفه ای و در عین حال ساده می باشد به کمک این فریم ورک شما به راحتی می توانید وب اّپی حرفه ای و واکنش گرا ( رسپانسیو ) طراحی کنید. در این کارگاه ما قصد داریم تمام بخش ها واجزا و همچنین پلاگین ها قدرتمند این فریم ورک رو معرفی و بررسی کنیم و در پایان آموخته ها و بررسی ها را در قالب عملی به کار گیریم ( طراحی یک سایت شخصی - یک فروشگاه اینترنتی - وپ اپ Todo ) .
      سر فصل های کارگاه :

      معرفی و کاربرد طراحی رسپانسیو
      معرفی بوت استرپ به عنوان یکی از بهترین فریم ورکهای طراحی رسپانسیو
      * نصب و پیکربندی sublime text 2
      نصب و پیکربندی برنامه برای کار با بوت استرپ
      بررسی ساختار سیستم گرید در بوت استرپ
      CSS - کلاس ها
      اجزای بوت استرپ
      جاواسکریپت در بوت استرپ
      پلاگین ها بوت استرپ

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


      http://bootweek.ir/