وبلاگ

نسخه جدید آی تی پورت چه ویژگی هایی دارد؟

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

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

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

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

در فاز دوم چینش و دسته بندی مورد نظر را به زبان گرافیک پیاده نمودیم.

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

تقریباً تخت

flat-design-itport - نسخه جدید آی تی پورت

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

لوگوی جدید

logo

لوگوی قدیمی آی تی پورت

itport-logo - نسخه جدید آی تی پورت

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

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

فیدبک (بازخورد)

itport-feedback - نسخه جدید آی تی پورت

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

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

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

آی تی پورت سبز

green-color-itport - نسخه جدید آی تی پورت

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

ایجکس و احترام به وقت کاربر

add-link-to-itport - نسخه جدید آی تی پورت

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

در این قسمتها از ایجکس بهره برده ایم:

–        در باکس ابتدایی صفحه اصلی سربرگ های  محبوب ترین ها  و  انتشارهای آتی

–        صفحه بندی مطالب دسته بندی شده  آموزش ، معرفی و مقالات

–        عضویت در خبرنامه

–        ثبت لینک پیشنهادی کاربر در لیست از سراسر وب

وردپرس یک فریم ورک است

wordpress-logo-stacked-rgb - نسخه جدید آی تی پورت

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

وب فونت

wyekan - نسخه جدید آی تی پورت

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

توسعه آتی

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

باگ

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

گفتگو ها

    بسیار زیبا 🙂

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

    به تیم عزیز آی تی پورت خسته نباشید میگم و امیدوارم همیشه روند رو به رشد داشته باشید

    به به

    خسته نباشید دوستان عزیز

    گل کاشتید حسابی … خیلی زیبا و کاربردی احسنت خیلی خوشحال شدم که می بینم روز به روز دارید پیشرفت می کنید.

    سلام رابط کاربری خوبی تولید کردی و این خوب است اما چند نکته که باید بررسی کنی اینه که سعی کن طراحی که انجام میدی به صورت Technology-Cross-Broswer باشه یعنی در تمام مرورگرهای خوب به صورت یکسان دیده بشه که در این طرح این مشکل وجود دارد.

    منوی Fixed سبز رنگ سعی کن کمی بزرگ تر شه(ارتفاع) تا از این حالت در بیاد، میشه گفت که انگار یک رُبان بالای سایت هست، نمای یک منو رو نداره!

    جایگاه تبلیغات هدر سایت را کمی رنگی تر کن که تو چشم تر باشه 🙂

    ولی در کل طراحی خوبی داشتی اما تجربه کاربری کمی ضعیف است به طور مثال (+نمایش اطلاعات در صفحات داخلی) باید به صورت اولیه نمایش داده بشه و نیاز نداره که کلیک بشه. این نصیحت من به تو کاربر میترسه روی یک چیزی کلیک کنه، برای این که فکر میکنه اون رو کلیک کنه یک صفحه دیگه باز میشه!

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

    خسته نباشید به تیم آی تی پورت 🙂

    برای

    #post .content p

    سایز فونت ۱۴ برای تاهوما زیاد نیست به نظرتون؟ فکر کنم ۱۲ خیلی خوشگلتر میشه. مث .comment-text p که ۱۲p ـه

    یه سری Error و Warning هم تو لود شدن قالب هست

    مثل

    “NetworkError: 404 Not Found – http://www.itport.ir/itport/wp-content/themes/itport-v3.0/images/lightbox/close.png

    “NetworkError: 404 Not Found – http://www.itport.ir/itport/wp-content/themes/itport-v3.0/images/lightbox/loading.gif

    Invalid App Id: Must be a number or numeric string representing the application id.

    TypeError: $.jStorage is undefined

    var followers_count = $.jStorage.get(“followers_count”);

    برای من تو کروم ۴ تا Error نشون میده و ۲۹ تا Warning (یه Warning فکر کنم برای خود کرومه!)

    مورد دیگه ای دیگه حتماً به اطلاعتون میرسونم

    موفق باشید.

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

    سعید

    درود

    قالبتون را توی تبلت هم تست کنید!

    از این مطلب من فقط تونستم نظرات را نصفه ببینم!

    موفق باشید

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

    حامد جان، ممنون بابت پاسخ …

    یه سری بحث ها تو stackoverflow شده در مورد Warning و Error های جاوا اسکریپت فیس بوک

    یه نگاهی بندازید، احتمال زیاد به کارتون بیاد

    مثل

    http://stackoverflow.com/questions/12810018/fb-getloginstatus-called-before-calling-fb-init

    یکی دیگه هم از github میاد

    یه مورد دیگه:

    الان نمیشه نظرات رو جواب داد، برای این مورد هم بتونید یه گزینه اضافه کنید که بشه یه نظر رو جواب داد خوب میشه

    Have a good day

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

      گوشه سمت چپ هر کامنت لینک پاسخ دادن وجود داره.

      با تشکر

    Anonymousz

    رسپانسیو نیست، در اندازه های مختلف صفحه نمایش های دسکتاپهم مشکل داره، ولید هم نیستش خیلی خطا و ارور داره : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.itport.ir&charset=%28detect+automatically%29&doctype=Inline&group=0

    محمد هادی

    به سلامتی

    ایشالله کاملتر و بهتر بشه

    موفق باشید 🙂

    علی حاجی محمدی

    حامد جان خیلی خوبه

    یه خسته نباشید مردونه برای راه اندازی طرح جدید

    میدونم راه اندازی یک نسخه جدید واقعا زمان میبره

    من هم نمیخوام ایراد بگیرم ولی سعی کن قدم به قدم در کنار کار کردن برای محتوای عالی سایتت رو هم کامل کنی

    خداقوت

    حاجی محمدی / همیاروردپرس

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

    سلام

    واقعا زیبا و عالیه . آرزومند موفقیت های بیشتر آی تی پورت

    ارادتمندم

    به به مبارکه خیلی خوشگل شده

    نخسته قشنگ شده فقط این منو خیلی کوچیکه :دی

    براتون آرزوی موفقیت دارم

    علی

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

    طراحی جدید خیلی خوب شده ، احساس راحتی بیشتری میکنم

    ریزبین :D

    یه جا “قالبو” اینجوری نوشتین ! یه جا اینجوری “غالب”…:D

    موفق باشین !

    قالبتون هم زیباست ..

    footer رو هم میتونید زیباتر از این کنید 😉