<![CDATA[باشگاه کاربران روماک - HTML]]> https://forum.romaak.ir/ Thu, 04 Jun 2026 15:06:37 +0000 MyBB <![CDATA[کد تاثیر گذار در عرض محتوا در وردپرس]]> https://forum.romaak.ir/showthread.php?tid=10562 Mon, 11 Dec 2023 23:02:45 +0000 nspropeaccess]]> https://forum.romaak.ir/showthread.php?tid=10562 من تو دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
 میخوام نوشته هام از چپ و راست بیشتر کشیده بشن توحالت موبایل. چه کدی باید بزنم؟]]> من تو دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
 میخوام نوشته هام از چپ و راست بیشتر کشیده بشن توحالت موبایل. چه کدی باید بزنم؟]]> <![CDATA[بهترین میزبانی وردپرس برای حرفه ای ها چیست؟]]> https://forum.romaak.ir/showthread.php?tid=6633 Mon, 29 Jul 2019 14:04:58 +0000 magbot]]> https://forum.romaak.ir/showthread.php?tid=6633 بهترین میزبانی وردپرس برای حرفه ای ها چیست؟
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

 

 

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


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


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


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

سوال به نظر می رسد آسان برای پاسخ دادن، اما انتخاب شما را تا حد زیادی بر وب سایت شما تاثیر می گذارد. بنابراین، آن را بازی کودکان که در آن شما بازی "سنگ، قیچی، و اوراق بهادار" و یا "Eenie کوتاه MINY مو" و سپس به صورت تصادفی انتخاب ارائه دهنده میزبانی وب سایت است. 
تگهای


در اغلب موارد، سوالات بعدی که دنبال می کنند عبارتند از:


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

میزبانی وب سایت سرعت وب سایت وردپرس شما را تحت تاثیر قرار می دهد. میزبان وب سایت شما چقدر سریع است؟ 


چگونه؟ 


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


این به معنای شما و وب سایت شما چیست؟ 


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


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


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


پس چه کاری انجام می دهید؟ WP Engine به طور کامل میزبانی وردپرس را مدیریت می کند 
در اینجا در 1stWebDesigner، توصیه می کنیم وب سایت بسیار شگفت انگیز و وردپرس میزبانی وب به نام موتور و WP است که شما می توانید در اینجا دسترسی داشته باشید. یکی از بهترین چیزها در مورد این ابزار این است در هنگام ثبت نام و یا ایجاد حساب کاربری، آنها به شما اجازه سرور را انتخاب کنید که می خواهید وب سایت خود را به بر استوار است. 
تگهای


این بدان معنی است که شما می توانید یک سرور در هر بخش از جهان مانند انگلستان، ژاپن یا هر سرور اضافی ایالات متحده استفاده کنید. این ابزار دارای سه مرکز داده بین المللی است که می توانید انتخاب کنید که از نظر مخاطبان شما مناسب است. 
گزینه دیگری که موتور WP به شما می دهد از لحاظ سرعت این است که "هیچ افزونه Caching از سیستم BIG-IP و سرورهای محتوا" گزینه ای است که عملکرد صاف وب سایت شما را تضمین می کند، به خصوص هنگامی که آن بزرگتر می شود. 


[تصویر: div%3E%20%20%20%20%20%20%20%20%20%20%20%...v%20class=]مقالات مرتبط
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


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

[/size]
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]> بهترین میزبانی وردپرس برای حرفه ای ها چیست؟
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

 

 

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


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


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


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

سوال به نظر می رسد آسان برای پاسخ دادن، اما انتخاب شما را تا حد زیادی بر وب سایت شما تاثیر می گذارد. بنابراین، آن را بازی کودکان که در آن شما بازی "سنگ، قیچی، و اوراق بهادار" و یا "Eenie کوتاه MINY مو" و سپس به صورت تصادفی انتخاب ارائه دهنده میزبانی وب سایت است. 
تگهای


در اغلب موارد، سوالات بعدی که دنبال می کنند عبارتند از:


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

میزبانی وب سایت سرعت وب سایت وردپرس شما را تحت تاثیر قرار می دهد. میزبان وب سایت شما چقدر سریع است؟ 


چگونه؟ 


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


این به معنای شما و وب سایت شما چیست؟ 


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


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


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


پس چه کاری انجام می دهید؟ WP Engine به طور کامل میزبانی وردپرس را مدیریت می کند 
در اینجا در 1stWebDesigner، توصیه می کنیم وب سایت بسیار شگفت انگیز و وردپرس میزبانی وب به نام موتور و WP است که شما می توانید در اینجا دسترسی داشته باشید. یکی از بهترین چیزها در مورد این ابزار این است در هنگام ثبت نام و یا ایجاد حساب کاربری، آنها به شما اجازه سرور را انتخاب کنید که می خواهید وب سایت خود را به بر استوار است. 
تگهای


این بدان معنی است که شما می توانید یک سرور در هر بخش از جهان مانند انگلستان، ژاپن یا هر سرور اضافی ایالات متحده استفاده کنید. این ابزار دارای سه مرکز داده بین المللی است که می توانید انتخاب کنید که از نظر مخاطبان شما مناسب است. 
گزینه دیگری که موتور WP به شما می دهد از لحاظ سرعت این است که "هیچ افزونه Caching از سیستم BIG-IP و سرورهای محتوا" گزینه ای است که عملکرد صاف وب سایت شما را تضمین می کند، به خصوص هنگامی که آن بزرگتر می شود. 


[تصویر: div%3E%20%20%20%20%20%20%20%20%20%20%20%...v%20class=]مقالات مرتبط
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


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

[/size]
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]> <![CDATA[پذیرش رویکرد طراحی در مرورگر]]> https://forum.romaak.ir/showthread.php?tid=6361 Mon, 18 Feb 2019 22:25:24 +0000 magbot]]> https://forum.romaak.ir/showthread.php?tid=6361 دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

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

 

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



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



[تصویر: 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[بازشدن زیر منوی بوت استرپ بصورت hover]]> https://forum.romaak.ir/showthread.php?tid=3656 Mon, 16 Oct 2017 17:10:22 +0000 saberi]]> https://forum.romaak.ir/showthread.php?tid=3656 شاید برای شما هم پیش آمده باشد که طرحی را با بوت استرپ کدنویسی کرده و نیاز داشته باشید منوهای ناوبار به صورت hover یعنی با رفتن موس روی منوی اصلی زیر منوی آن باز شود.
برای انجام اینکار باید کد زیر رو در فایل bootstrap.js در آخرین خط قرار دهید.

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

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

]]> شاید برای شما هم پیش آمده باشد که طرحی را با بوت استرپ کدنویسی کرده و نیاز داشته باشید منوهای ناوبار به صورت hover یعنی با رفتن موس روی منوی اصلی زیر منوی آن باز شود.
برای انجام اینکار باید کد زیر رو در فایل bootstrap.js در آخرین خط قرار دهید.

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

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

]]> <![CDATA[آموزش زبان HTML]]> https://forum.romaak.ir/showthread.php?tid=1144 Sun, 10 Apr 2016 06:04:40 +0000 مینا]]> https://forum.romaak.ir/showthread.php?tid=1144 مقدمه و معرفی زبان HTML

معرفی زبان HTML :
   عبارت HTML مخفف (Hyper Text Markup Language) است . Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.
 HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .
در يک صحفه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند .

مفهوم تگ های HTML :
تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند :

< تگ انتها / >    محتويات    < تگ ابتدا >
مثال : < label > ..... < /label >  
تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .

خواص تگ های HTML :
هر تگ دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد .
راهنمايي : در ادامه هر يک از تگ های HTML معرفی شده و در صفحه مربوط به آنها خواص مربوطه نيز در جدول خواص مهم قرار داده شده اند . در ستون نام خاصيت نام آن و در ستون نوع خاصيت انواع مقادير قابل قبول برای آن خاصيت تعيين شده است .
مثال : برای مثال تگ < table > دارای خاصيتی به نام Border است ، که به دور جدول کادر يا حاشيه ايجاد می کند . نحوه تعريف و مقدار دهی آن به صورت زير است :
توجه : در هنگام تعريف بايد بين خاصيت و مقدار آن علامت = قرار داده و همچنين مقدارها بايد درون علامت " " قرار بگيرند .
< table border = "1" >  محتويات  < /table >
راهنمايی 2 : در بخش آموزش تگ ها سعی شده تا با ارائه مثال های مناسب مطالب توضيحی را در عمل نشان داد . برای اين منظور از جدول Example استفاده شده است ، که اين جدول دارای 2 قسمت است . در قسمت کد ، کد واقعی مورد نياز برای هدف ارائه شده و در قسمت خروجی نيز خروجی کد که به صورت اکتيو توسط مرورگر توليد شده ، نشان داده شده است .
توجه : تمام مثال های قسمت آموزش HTML بر طبق استانداردهای نرم افزار Microsoft Visual Studio 2005 طراحی شده و توسط مرورگرهاي مطرح Internet Explorer و FireFox تست شده است .

نکات مهم :
  1. تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .
  2. می توان يک تگ را در تگ ابتدايي نيز بست . برای اين کار از يک علامت / بعد از نام تگ و خواص مورد نظر تعريف شده استفاده می کنيم . در اين حالت نمی توان متن يا تگ ديگری را به عنوان محتويات برای آن تگ در نظر گرفت .
    توجه کاربرد اين روش در مورد تگ هايي مثل < table > , < td > , < tr > و ... امکان پذير نيست .
    Example :

    < br / >< input type = "text" name ="family" ... / >
  3. هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .
]]> مقدمه و معرفی زبان HTML

معرفی زبان HTML :
   عبارت HTML مخفف (Hyper Text Markup Language) است . Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.
 HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .
در يک صحفه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند .

مفهوم تگ های HTML :
تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند :

< تگ انتها / >    محتويات    < تگ ابتدا >
مثال : < label > ..... < /label >  
تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .

خواص تگ های HTML :
هر تگ دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد .
راهنمايي : در ادامه هر يک از تگ های HTML معرفی شده و در صفحه مربوط به آنها خواص مربوطه نيز در جدول خواص مهم قرار داده شده اند . در ستون نام خاصيت نام آن و در ستون نوع خاصيت انواع مقادير قابل قبول برای آن خاصيت تعيين شده است .
مثال : برای مثال تگ < table > دارای خاصيتی به نام Border است ، که به دور جدول کادر يا حاشيه ايجاد می کند . نحوه تعريف و مقدار دهی آن به صورت زير است :
توجه : در هنگام تعريف بايد بين خاصيت و مقدار آن علامت = قرار داده و همچنين مقدارها بايد درون علامت " " قرار بگيرند .
< table border = "1" >  محتويات  < /table >
راهنمايی 2 : در بخش آموزش تگ ها سعی شده تا با ارائه مثال های مناسب مطالب توضيحی را در عمل نشان داد . برای اين منظور از جدول Example استفاده شده است ، که اين جدول دارای 2 قسمت است . در قسمت کد ، کد واقعی مورد نياز برای هدف ارائه شده و در قسمت خروجی نيز خروجی کد که به صورت اکتيو توسط مرورگر توليد شده ، نشان داده شده است .
توجه : تمام مثال های قسمت آموزش HTML بر طبق استانداردهای نرم افزار Microsoft Visual Studio 2005 طراحی شده و توسط مرورگرهاي مطرح Internet Explorer و FireFox تست شده است .

نکات مهم :
  1. تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .
  2. می توان يک تگ را در تگ ابتدايي نيز بست . برای اين کار از يک علامت / بعد از نام تگ و خواص مورد نظر تعريف شده استفاده می کنيم . در اين حالت نمی توان متن يا تگ ديگری را به عنوان محتويات برای آن تگ در نظر گرفت .
    توجه کاربرد اين روش در مورد تگ هايي مثل < table > , < td > , < tr > و ... امکان پذير نيست .
    Example :

    < br / >< input type = "text" name ="family" ... / >
  3. هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .
]]>