<![CDATA[باشگاه کاربران روماک - jquery]]> https://forum.romaak.ir/ Sat, 06 Jun 2026 13:18:02 +0000 MyBB <![CDATA[بررسی طراحی سایت های رقیب از مهمترین فاکتورهای طراحی]]> https://forum.romaak.ir/showthread.php?tid=6635 Mon, 29 Jul 2019 14:15:20 +0000 magbot]]> https://forum.romaak.ir/showthread.php?tid=6635  

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

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

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

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

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

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

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

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

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

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

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

•قدم پنجم بررسی میزان حضور و فعالیتشان در شبکه های اجتماعی می باشد شبکه های اجتماعی نقش پررنگی در ورود کاربران دارند که با بررسی سئو طراحی سایت هایشان تصویر مناسبی از عملکردشان را در اختیار شما قرار خواهند داد. شما نیز می توانید با پیدا کردن صفحات اجتماعیشان و وارد شدن به دوستان آن ها کارهایی را که انجام میدهند را مشاهده کنید ایده های مناسبی بگیرید. چگونگی تبلیغات رقبا در طراحی سایت باید متوجه شوید رقیبتان از چه طریقی بیسترین بازدید را داشته این کار می تواند از طریق راه های گوناگون باشد مثل بنرهای تبلیغاتی در طراحی سایت های دیگر که اگر به درد کار شما خورد می توانید از آن ایده بگیرید و در کار خود اعمال کنید با بررسی این موارد می توانید رقیب هایتان را شناسایی کنید و با دنبال کردن کار آن ها و گرفتن ایده ای جدید خودرا به موفقیت روز افزون نزدیک تر کنید و صاحب رتبه یک موتور های جستجو گر شوید. اشتباهات رایج طراحی سایت را نیز مطالعه نمایید.]]> <![CDATA[رویکرد طراحی در مرورگر]]> https://forum.romaak.ir/showthread.php?tid=6572 Sun, 30 Jun 2019 19:54:24 +0000 magbot]]> https://forum.romaak.ir/showthread.php?tid=6572 پذیرش رویکرد طراحی در مرورگر
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


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



به نظر می رسید سخت و شاید حتی غیر ممکن است باشد. آیا می توانم این کار را انجام دهم؟ اما چقدر سخت است؟ من   قبلا اینها را تجربه کرده ام ...



[تصویر: 4.jpg]


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


چرا ما شروع به طراحی وب سایت ها در فتوشاپ کردیم؟


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



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



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








 وب سایت ها شروع به تکامل کردند. بیشتر و بیشتر، ما شروع به استفاده از گرافیک برای بهبود وب سایت و زیبایی آن شدیم. سرعت پهنای باند بالا باعث می شود که این مهم امکان پذیر باشد.  PHP، ASP، SQL، CMS، SEO، JavaScript و انیمیشن های فلش همه بخشی از طراحی وب است که امروز می دانیم. برای طراح وب  زیاد است که تمام دانش لازم برای ساخت یک وب سایت را از ابتدا داشته باشد. بنابراین ما نقش را اینگونه تقسیم کردیم:



[تصویر: 5.jpg]



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


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









[تصویر: 6.jpg]



هرگز نباید طراح وب را جایگزین کرد.ممکن است  طراحان  کپی رایتندرهای دیگر را به تیم طراحی وب اضافه کرد، اما طراح وب را  باید نگه دارید. طراحی در چارچوب مرورگر باید انجام شود.، اگر طراح کد نباشید، شما یک طراح وب نیستید. شما ممکن است یک طراح باشید که می داند چگونه از فتوشاپ برای کشیدن رابط های زیبا  برای وب سایت ها استفاده کنید. اما شما یک طراح وب نیستید. برای تبدیل شدن به طراح وب، یادگیری HTML، CSS و JavaScript پایه الزامی است.





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

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




[تصویر: 7.jpg]


Wireframing


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



نسخه اولیه
[i]
[/i]
گام بعدی، که از دیدگاه UX مهم است، ایجاد یک نمونه اولیه است. و از آنجایی که تصمیم گرفتم برای اولین بار به تلفن همراه بروم، یک نمونه اولیه برای آیفون ساختم. من از wireframes با کیفیت بالا استفاده کردم که در فتوشاپ ساخته شده و آنها را به  Marvel یک ابزار عالی است که به شما امکان می دهد تا به سرعت نمونه های اولیه را از تصاویر یا فایل های PSD ایجاد کنید.)
[i][/url][/i]

[i]
[/i]
[تصویر: 8.jpg]
[i]دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
[/i]

[i][url=https://marvelapp.com/]
[/i]
پس از آزمایش نمونه اولیه، تصمیم گرفتم چند تغییر ایجاد کنم. همانطور که پیش بینی کردم، وب سایت به آسانی تغییر نکرد. (به همین دلیل شما یک نمونه اولیه را در اوایل فرایند ایجاد می کنید.) همچنین می توانم نمونه اولیه را به طور مستقیم در مرورگر ایجاد کنم، اما من فکر می کنم برنامه مارول آن را در این مورد بسیار سریع تر ساخته است.




در طرح من برای طراحی مجدد وب سایت، ابتدا یک وظیفه به نام "Visual Design" داشتم. بعد از ایجاد نمونه اولیه، برنامه ریزی شد. ایده این بود که هر صفحه را در فتوشاپ بکشیم. اما نظرم تغییر کرد من این کار را لغو کردم و به برنامه نویسی رفتم.

Coding
[i]
[/i]
من با یک سند HTML خالی شروع کردم. من تصمیم گرفتم در ابتدا با تایپوگرافی با محتوای واقعی تمرکز کنم. بنابراین یک مقاله نوشتم و آن را در HTML قرار دادم. سعی کردم از ترکیبات مختلف از نوع و اندازه ستفاده کنم. آرم، گرافیکی و عنصر ناوبری وجود نداشت.  




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

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


 CMS یکپارچه سازی


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





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


مهارت های کد نویسی را بهبود بخشم


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


[i][تصویر: 9.gif] 
[/i]
قبلا فقط اصول اسکریپت و jQuery را می دانستم. حالا من می توانم اسکریپت های خودم را بنویسم. این چیزی است که من همیشه می خواستم یاد بگیرم، 

چه ابزارهایی می توانیم  استفاده کنیم؟


ایجاد تغییر در کد و  وب سایت در مرورگر می تواند کند و آزار دهنده باشد. برخی از ابزارهایی که می توانند بهینه سازی روند را برای شما داشته باشند. من از Brackets   استفاده کردم زیرا هر بار که یک تغییر در کد ایجاد می شود، وبسایت را به طور خودکار بازخوانی می کند.




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




من فکر نمیکنم فرایند طراحی وب شامل طراحی رابط کاربر، طراحی تجربه کاربر و طراحی گرافیک می باشد. رابط کاربری پیچیده تر در فتوشاپ ساده تر می شود. عناصر گرافیکی نیز می توانند در فتوشاپ کشیده شوند. صادقانه بگویم، من هنوز هم بیشتر رابط های مورد نیاز خود را در Wondermags  ، ایجاد می کنم. [تصویر: 10.gif]
]]> پذیرش رویکرد طراحی در مرورگر
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


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



به نظر می رسید سخت و شاید حتی غیر ممکن است باشد. آیا می توانم این کار را انجام دهم؟ اما چقدر سخت است؟ من   قبلا اینها را تجربه کرده ام ...



[تصویر: 4.jpg]


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


چرا ما شروع به طراحی وب سایت ها در فتوشاپ کردیم؟


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



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



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








 وب سایت ها شروع به تکامل کردند. بیشتر و بیشتر، ما شروع به استفاده از گرافیک برای بهبود وب سایت و زیبایی آن شدیم. سرعت پهنای باند بالا باعث می شود که این مهم امکان پذیر باشد.  PHP، ASP، SQL، CMS، SEO، JavaScript و انیمیشن های فلش همه بخشی از طراحی وب است که امروز می دانیم. برای طراح وب  زیاد است که تمام دانش لازم برای ساخت یک وب سایت را از ابتدا داشته باشد. بنابراین ما نقش را اینگونه تقسیم کردیم:



[تصویر: 5.jpg]



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


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









[تصویر: 6.jpg]



هرگز نباید طراح وب را جایگزین کرد.ممکن است  طراحان  کپی رایتندرهای دیگر را به تیم طراحی وب اضافه کرد، اما طراح وب را  باید نگه دارید. طراحی در چارچوب مرورگر باید انجام شود.، اگر طراح کد نباشید، شما یک طراح وب نیستید. شما ممکن است یک طراح باشید که می داند چگونه از فتوشاپ برای کشیدن رابط های زیبا  برای وب سایت ها استفاده کنید. اما شما یک طراح وب نیستید. برای تبدیل شدن به طراح وب، یادگیری HTML، CSS و JavaScript پایه الزامی است.





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

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




[تصویر: 7.jpg]


Wireframing


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



نسخه اولیه
[i]
[/i]
گام بعدی، که از دیدگاه UX مهم است، ایجاد یک نمونه اولیه است. و از آنجایی که تصمیم گرفتم برای اولین بار به تلفن همراه بروم، یک نمونه اولیه برای آیفون ساختم. من از wireframes با کیفیت بالا استفاده کردم که در فتوشاپ ساخته شده و آنها را به  Marvel یک ابزار عالی است که به شما امکان می دهد تا به سرعت نمونه های اولیه را از تصاویر یا فایل های PSD ایجاد کنید.)
[i][/url][/i]

[i]
[/i]
[تصویر: 8.jpg]
[i]دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
[/i]

[i][url=https://marvelapp.com/]
[/i]
پس از آزمایش نمونه اولیه، تصمیم گرفتم چند تغییر ایجاد کنم. همانطور که پیش بینی کردم، وب سایت به آسانی تغییر نکرد. (به همین دلیل شما یک نمونه اولیه را در اوایل فرایند ایجاد می کنید.) همچنین می توانم نمونه اولیه را به طور مستقیم در مرورگر ایجاد کنم، اما من فکر می کنم برنامه مارول آن را در این مورد بسیار سریع تر ساخته است.




در طرح من برای طراحی مجدد وب سایت، ابتدا یک وظیفه به نام "Visual Design" داشتم. بعد از ایجاد نمونه اولیه، برنامه ریزی شد. ایده این بود که هر صفحه را در فتوشاپ بکشیم. اما نظرم تغییر کرد من این کار را لغو کردم و به برنامه نویسی رفتم.

Coding
[i]
[/i]
من با یک سند HTML خالی شروع کردم. من تصمیم گرفتم در ابتدا با تایپوگرافی با محتوای واقعی تمرکز کنم. بنابراین یک مقاله نوشتم و آن را در HTML قرار دادم. سعی کردم از ترکیبات مختلف از نوع و اندازه ستفاده کنم. آرم، گرافیکی و عنصر ناوبری وجود نداشت.  




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

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


 CMS یکپارچه سازی


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





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


مهارت های کد نویسی را بهبود بخشم


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


[i][تصویر: 9.gif] 
[/i]
قبلا فقط اصول اسکریپت و jQuery را می دانستم. حالا من می توانم اسکریپت های خودم را بنویسم. این چیزی است که من همیشه می خواستم یاد بگیرم، 

چه ابزارهایی می توانیم  استفاده کنیم؟


ایجاد تغییر در کد و  وب سایت در مرورگر می تواند کند و آزار دهنده باشد. برخی از ابزارهایی که می توانند بهینه سازی روند را برای شما داشته باشند. من از Brackets   استفاده کردم زیرا هر بار که یک تغییر در کد ایجاد می شود، وبسایت را به طور خودکار بازخوانی می کند.




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




من فکر نمیکنم فرایند طراحی وب شامل طراحی رابط کاربر، طراحی تجربه کاربر و طراحی گرافیک می باشد. رابط کاربری پیچیده تر در فتوشاپ ساده تر می شود. عناصر گرافیکی نیز می توانند در فتوشاپ کشیده شوند. صادقانه بگویم، من هنوز هم بیشتر رابط های مورد نیاز خود را در Wondermags  ، ایجاد می کنم. [تصویر: 10.gif]
]]> <![CDATA[کد لود تصاویر با جی کوئری]]> https://forum.romaak.ir/showthread.php?tid=4974 Tue, 03 Apr 2018 22:08:25 +0000 saberi]]> https://forum.romaak.ir/showthread.php?tid=4974 شاید برای شما هم این مشکل پیش اومده باشه که به عنوان مثال برای یک تگ a یک تصویر پس زمینه میذارید و میخواید هنگامی که موس میره روی این تگ تصویر عوض شه.

خب این کار خیلی ساده است :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و استایل CSS :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و برای hover :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اما مشکلی که این کد داره اینه که هنگامی که برای بار اول روی این لینک میریم عکس ۲٫png که قراره نمایش داده بشه با تاخیر نمایش داده میشه.این به این خاطره که هنوز این عکس لود نشده. داشتن چنین مشکلی توی سایت جالب نیست و سایت رو از حالت حرفه ای در میاره.
برای حل این مشکل میتونیم از jQuery کمک بگیریم . به اینصورت که هنگامی که صفحه داره لود میشه عکس دوم رو هم لود کنیم اما نمایشش ندیم.
برای اینکار میتونید از تابع زیر استفاده کنید :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

میتونیم تابع بالا رو به صورت یک پلاگین جی کوئری بنویسیم ، به صورت زیر :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و به صورت زیر ازش استفاده کنیم :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *


موفق باشید.]]> شاید برای شما هم این مشکل پیش اومده باشه که به عنوان مثال برای یک تگ a یک تصویر پس زمینه میذارید و میخواید هنگامی که موس میره روی این تگ تصویر عوض شه.

خب این کار خیلی ساده است :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و استایل CSS :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و برای hover :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

اما مشکلی که این کد داره اینه که هنگامی که برای بار اول روی این لینک میریم عکس ۲٫png که قراره نمایش داده بشه با تاخیر نمایش داده میشه.این به این خاطره که هنوز این عکس لود نشده. داشتن چنین مشکلی توی سایت جالب نیست و سایت رو از حالت حرفه ای در میاره.
برای حل این مشکل میتونیم از jQuery کمک بگیریم . به اینصورت که هنگامی که صفحه داره لود میشه عکس دوم رو هم لود کنیم اما نمایشش ندیم.
برای اینکار میتونید از تابع زیر استفاده کنید :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

میتونیم تابع بالا رو به صورت یک پلاگین جی کوئری بنویسیم ، به صورت زیر :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و به صورت زیر ازش استفاده کنیم :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *


موفق باشید.]]> <![CDATA[jquery در طراحی سایت]]> https://forum.romaak.ir/showthread.php?tid=3977 Fri, 17 Nov 2017 09:42:34 +0000 sitecup1]]> https://forum.romaak.ir/showthread.php?tid=3977 در این مقاله از سری مقالات آموزشیدیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
طراحی سایت یه بررسی jquery  در طراحی سایت می پردازیم .
بی شک یکی از مهم ترین ابزار ها برای طراحی سایت jquery است .جی کوئری یکی از کتابخانه های قوی و پرکاربرد javascript است . برای استفاده از این کتابخانه دو راه وجود دارد یا باید از سایت jquery.com فایل jquery را دانلود کنید و به پروژه اضافه کنید یا این که از CDN آن استفاده کنید .

شعار این کتابخانه این است که کمتر بنویس بیشتر کار کن !!!
این شعار به این معنی است که وقتی بخواهیم در JS یک تابع بنویسیم که یک رویداد را مشخص می کند دارای مثلا ۱۵ خط برنامه نویسی است همین کار را با jquery می توان با ۴ خط برنامه نویسی انجام داد .
در طراحی سایت هر چه قدر تعداد خط های برنامه نویسی کمتر باشد هم برای سایت بهتر است هم برای طراح آن . در ادامه این مقاله به بررسی کاربرد های jquery در طراحی وب سایت می پردازیم .

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

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

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

طراحی دکمه بازگشت به بالا
بسیاری از سایت ها دارای مطالب زیادی هستند و کاربران پس از اتمام مطلب باید خیلی اسکرول کنند تا به بالای صفحه اصلی برگردند که این کار برای کاربر خوشایند نیست . طراحان سایت با استفاده از jquery می توانند دکمه ای را طراحی کنند که کاربر به راحتی بتواند در پایین صفجه به ابتدای صفحه انتقال یابد . این دکمه برای کاربران خیلی دوست داشتنی است .
]]> در این مقاله از سری مقالات آموزشیدیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
طراحی سایت یه بررسی jquery  در طراحی سایت می پردازیم .
بی شک یکی از مهم ترین ابزار ها برای طراحی سایت jquery است .جی کوئری یکی از کتابخانه های قوی و پرکاربرد javascript است . برای استفاده از این کتابخانه دو راه وجود دارد یا باید از سایت jquery.com فایل jquery را دانلود کنید و به پروژه اضافه کنید یا این که از CDN آن استفاده کنید .

شعار این کتابخانه این است که کمتر بنویس بیشتر کار کن !!!
این شعار به این معنی است که وقتی بخواهیم در JS یک تابع بنویسیم که یک رویداد را مشخص می کند دارای مثلا ۱۵ خط برنامه نویسی است همین کار را با jquery می توان با ۴ خط برنامه نویسی انجام داد .
در طراحی سایت هر چه قدر تعداد خط های برنامه نویسی کمتر باشد هم برای سایت بهتر است هم برای طراح آن . در ادامه این مقاله به بررسی کاربرد های jquery در طراحی وب سایت می پردازیم .

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

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

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

طراحی دکمه بازگشت به بالا
بسیاری از سایت ها دارای مطالب زیادی هستند و کاربران پس از اتمام مطلب باید خیلی اسکرول کنند تا به بالای صفحه اصلی برگردند که این کار برای کاربر خوشایند نیست . طراحان سایت با استفاده از jquery می توانند دکمه ای را طراحی کنند که کاربر به راحتی بتواند در پایین صفجه به ابتدای صفحه انتقال یابد . این دکمه برای کاربران خیلی دوست داشتنی است .
]]> <![CDATA[پیدا کردن موقعیت جغرافیایی کاربر با جی کوئری]]> https://forum.romaak.ir/showthread.php?tid=2997 Thu, 08 Jun 2017 08:51:19 +0000 mesterweb]]> https://forum.romaak.ir/showthread.php?tid=2997 موقعیت جغرافیایی یا همان GeoLocation API یکی از قابلیت های مهم مرورگرهای پشتیبانی کننده از HTML5 است که به ما اجازه می دهد موقعیت جغرافیایی کاربر را با استفاده از JavaScript درخواست کنیم. موقعیت کاربر به وسیله طول و عرض جغرافیایی مشخص می شوند. به دلایل امنیتی بعد از تایید و اجازه کاربر می توان به موقعیت او دسترسی یافت.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

jQuery
حالا می خواهیم رویداد click در جی کوئری را هم به کد اضافه کنیم :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

کد HTML نیز به این شکل خواهد بود:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و کد HTML مورد نیاز به این شکل است :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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




]]> موقعیت جغرافیایی یا همان GeoLocation API یکی از قابلیت های مهم مرورگرهای پشتیبانی کننده از HTML5 است که به ما اجازه می دهد موقعیت جغرافیایی کاربر را با استفاده از JavaScript درخواست کنیم. موقعیت کاربر به وسیله طول و عرض جغرافیایی مشخص می شوند. به دلایل امنیتی بعد از تایید و اجازه کاربر می توان به موقعیت او دسترسی یافت.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

jQuery
حالا می خواهیم رویداد click در جی کوئری را هم به کد اضافه کنیم :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

کد HTML نیز به این شکل خواهد بود:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

و کد HTML مورد نیاز به این شکل است :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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




]]>