Chithravishesham
Sankethikam
Kaliyarangu Grahanam Nishchalam
സാങ്കേതികം - ഗ്രാഫിക് ഡിസൈന്‍ ട്യൂട്ടോറിയലുകള്‍, ബ്ലോഗര്‍ വിഡ്ജറ്റുകള്‍...

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Malayalam Blogger Profile. Powered by newnmedia.

Thursday, September 11, 2008

ഫോട്ടോഷോപ്പ് ബ്രഷില്‍ പൂക്കള്‍ വിരിയിക്കാം...

Adobe Photoshop CS3 Tutorial: Defining a Flower Brush in Photoshop.
ഫോട്ടോഷോപ്പിൽ നമുക്കിഷ്ടമുള്ള രീതിയിൽ ബ്രഷുകൾ എങ്ങിനെ ഒരുക്കിയെടുക്കാമെന്ന് ഇവിടെ നാം പരിചയപ്പെട്ടതാണ്. ഈ ഓണത്തിന് കൂട്ടുകാർക്കും, ബന്ധുക്കൾക്കും മറ്റും ആശംസാകാർഡുകൾ ഒരുക്കുമ്പോൾ; ഫോട്ടോഷോപ്പിൽ ലഭ്യമായ ഈ സാധ്യത എങ്ങിനെ പ്രയോജനപ്പെടുത്താം എന്നതാണ് ഇവിടെ പ്രതിപാദിക്കുന്നത്.

Adobe Photoshop CS3 Tutorial: Draw the flower petal.ആദ്യമായി ബ്രഷ് ഉണ്ടാക്കുവാൻ ഉപയോഗപ്പെടുത്തുവാൻ കഴിയുന്ന ഒരു പൂവ് വരച്ചുണ്ടാക്കുകയാണ് വേണ്ടത്. 200 x 200 പിക്സൽ വലുപ്പമുള്ള ഒരു ഗ്രേ-സ്കെയിൽ ചിത്രം തുറക്കുക. ബ്രഷുകൾക്ക് പിന്നീട് നിറം നൽകുമ്പോൾ അവ ശരിയായി ദൃശ്യമാകുവാൻ, നിർമ്മാണവേളയിൽ ഗ്രേസ്കെയിലിലുള്ള ചിത്രങ്ങളാണ് വേണ്ടതെന്നുള്ളത് ഓർമ്മിക്കുക. ഈ ചിത്രത്തിൽ പൂവിന്റെ ഒരു ഇതൾ നിർമ്മിക്കുക. കറുപ്പ്, ഒരു ലൈറ്റ് ഗ്രേ ഷേഡ് എന്നിവ യഥാക്രമം ഫോർ‍ഗ്രൌണ്ട്, ബാക്ക്‌ഗ്രൌണ്ട് നിറങ്ങളായി തിരഞ്ഞെടുത്ത ശേഷം; അതുപയോഗിച്ചു വേണം ഈ ഇതൾ വരച്ചുണ്ടാക്കുവാന്‍. പെൻ‍ടൂൾ, പാത്ത് എന്നിവയും ഇത് വരയ്ക്കുവാൻ പ്രയോജനപ്പെടുത്താവുന്നതാണ്.

Adobe Photoshop CS3 Tutorial: Final Flower.പൂവിന്റെ നടുവിലുള്ള ഭാഗം വൃത്താകൃതിയിൽ വരച്ചുചേർക്കുക. നേരത്തേ വരച്ചുണ്ടാക്കിയ ഇതൾ ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്ത് ചുറ്റം അടുക്കുക. നടുവിലെ ഭാഗത്തിന് കൂടുതൽ സ്വാഭാവികത തോന്നിപ്പിക്കുവാൻ അനുയോജ്യമായ രീതി ഉപയോഗിക്കാവുന്നതാണ്. ഇതളുകളുടെ ചുവട്ടിൽ കാണാറുള്ള കലകളും മറ്റും വരച്ചു ചേർക്കുക, ഇതളുകളുടെ വലുപ്പത്തിലും, ആകൃതിയിലും ചില മാറ്റങ്ങൾ വരുത്തുക എന്നിവയും ചെയ്യാവുന്നതാണ്. ചിത്രത്തിൽ കാണുന്ന രീതിയിലൊരു പൂവിന്റെ രൂപമാണ് ഒടുവിൽ ലഭിക്കേണ്ടത്. വെളുപ്പ് ബാക്ക്ഗ്രൌണ്ട് ലെയർ ഒഴിവാക്കി, മറ്റുള്ള ലെയറുകളെല്ലാം ഒരുമിപ്പിച്ച് ചിത്രം സേവ് ചെയ്യുക. ചുറ്റും ധാരാളം സ്ഥലം ഒഴിവായി കിടപ്പുണ്ടെങ്കിൽ, Ctrl അമർത്തി ലഭ്യമായ ലെയ‍റിൽ മൌസമർത്തുക. ഇപ്പോൾ പൂവിന്റെ ചിത്രം പൂർണ്ണമായി സെലക്ട് ചെയ്തിട്ടുണ്ടാവും. പ്രധാനമെനുവിൽ Image > Crop അമർത്തുക. ഇപ്പോൾ പൂവ് ക്യാൻ‍വാസ് പൂർണ്ണമായും ഉപയോഗപ്പെടുത്തുന്ന രീതിയിലാവും കാണപ്പെടുക.

ഇപ്പോൾ വരച്ചുണ്ടാക്കിയ പൂവിന്റെ ചിത്രത്തെ ഒരു ബ്രഷ് ആയി മാറ്റുകയാണ് അടുത്ത ഘട്ടം. അതിനായി പ്രധാനമെനുവിൽ Edit > Define Brush Preset... എന്ന ഓപ്ഷൻ സെലക്ട് ചെയ്യുക. തുറന്നുവരുന്ന ഡയലോഗ് ബോക്സിൽ ആവശ്യമുള്ള പേര് എന്റർ ചെയ്ത് OK ബട്ടണിൽ മൌസമർത്തുക. ഈ പേരിൽ ഒരു ബ്രഷ് ഇപ്പോൾ ബ്രഷസ് പാലെറ്റിലേക്ക് ചേർക്കപ്പെട്ടിട്ടുണ്ടാവും.
Adobe Photoshop CS3 Tutorial: Enter a Brush Name.

Adobe Photoshop CS3 Tutorial: Greeting Card - Initial Stage.ഇപ്പോൾ നിർമ്മിച്ചെടുത്ത ഈ ബ്രഷ് ഒരു ആശംസാകാർഡിൽ എങ്ങിനെ ഉപയോഗപ്പെടുത്താം എന്നു നോക്കാം. 5in x 7in വലുപ്പത്തിൽ ഒരു പുതിയ ഡോക്യുമെന്റ് തുറക്കുക. കാർഡിൽ ഉപയോഗിക്കുവാൻ ആഗ്രഹിക്കുന്ന ചിത്രം അതിലേക്ക് ചേർക്കുക. ആവശ്യമുള്ള സന്ദേശവും ടൈപ്പ് ചെയ്തിനു ശേഷം; ചിത്രത്തിനു മുകളിലായി, എന്നാൽ ടൈപ്പ് ലെയ‍റിനു താഴെയായി മറ്റൊരു പുതിയ ലെയർ കൂട്ടിച്ചേർക്കുക. നമുക്കിതിനെ Strokes എന്നു വിളിക്കാം. ഇവിടെയാണ് നാം പുതുതായി ഉണ്ടാക്കിയ ബ്രഷ് പ്രയോഗിക്കുവാൻ പോവുന്നത്. ഇത്രയും ചെയ്തു കഴിയുമ്പോൾ നമുക്ക് ലഭിക്കുന്ന ചിത്രത്തില്‍ കാണുന്ന രീതിയിലൊരു ക്യാന്‍‌വാസ് ലഭ്യമാവും.

ബ്രഷ് ടൂൾ(B) സെലക്ട് ചെയ്തതിനു ശേഷം, പ്രധാനമെനുവിൽ Window > Brushes തുറക്കുക. നമ്മൾ പുതുതായി ചേർത്ത ബ്രഷ് Brush Presets എന്ന ടാബിൽ നിന്നും സെലക്ട് ചെയ്യുക. ഏറ്റവും ഒടുവിലായാവും ഈ ബ്രഷ് ചേർക്കപ്പെട്ടിരിക്കുക. അടുത്തതായി Brush Tip Shape എന്ന ടാബിലെത്തുക. ഇവിടെ ഒടുവിലായി കാണുന്ന Spacing എന്ന ഓപ്ഷൻ ടിക്ക് ചെയ്ത ശേഷം പൂക്കൾ പരസ്പരം കൂട്ടിമുട്ടാത്ത രീതിയിൽ ക്രമീകരിക്കുക. രണ്ട് പൂക്കൾ തമ്മിലുള്ള അകലം സ്പേസിംഗ് സ്ലൈഡർ ഉപയോഗിച്ച് വ്യത്യാസപ്പെടുത്താവുന്നതാണ്. ചിത്രം ശ്രദ്ധിക്കുക.
Adobe Photoshop CS3 Tutorial: Adjust Brush Spacing.

മറ്റ് ഓപ്ഷനുകൾ താഴെ പറയുന്ന രീതികളിൽ ക്രമീകരിക്കുക.
Shape Dynamics
> Size Jitter: 60%
> Angle Jitter: 50%

Scattering
> Scatter: Both Axes: true, 400%
> Count: 3
> Count Jitter: 100%

Color Dynamics
> Foreground/Background Jitter: 100%
> Hue/Saturation/Brightness Jitter: 40%

Other Dynamics
> Opacity Jitter: 50%

ഇത്രയും സെറ്റ് ചെയ്തതിനു ശേഷം ബ്രഷ് ചിത്രത്തിൽ അപ്ലേ ചെയ്തു നോക്കുക. ഫോർഗ്രൌണ്ട്, ബാക്ക്‌ഗ്രൌണ്ട് നിറങ്ങളായി; മഞ്ഞയും, ചുവപ്പും യഥാക്രമം തിരഞ്ഞെടുക്കുക. വിവിധ വലുപ്പത്തിൽ, വ്യത്യസ്ത നിറങ്ങളിൽ, പല ഒപ്പാസിറ്റി വിലകളിൽ പൂക്കൾ ചിത്രത്തിൽ നിറയുന്നതു കാണാം. മുകളിലെ സെറ്റിംഗുകളിൽ മാറ്റം വരുത്തി ബ്രഷ് മറ്റു രീതികളിലും പ്രയോഗിക്കാവുന്നതാണ്. ഫോർഗ്രൌണ്ട്, ബാക്ക്‌ഗ്രൌണ്ട് നിറങ്ങൾ വ്യത്യാസപ്പെടുത്തുന്നതു വഴിയും ബ്രഷിന്റെ സ്വഭാവം മാറുന്നതാണ്. ബ്രൈറ്റ്നെസ്/കോൺ‍ട്രാസ്റ്റ് (Image > Adjustments > Brightness/Contrast) ഉപയോഗിച്ച്, ബ്രഷ് ഉപയോഗിച്ചു വരച്ച പൂക്കൾക്ക് കൂടുതൽ തെളിച്ചം നൽകുവാനും കഴിയും. ഈ രീതിയിൽ മുകളിൽ കാണുന്ന ആശംസാകാർഡിൽ വ്യത്യാസം വരുത്തിയതു നോക്കൂ.

Adobe Photoshop CS3 Tutorial: Greeting Card - Final Stage.
ഇതേ ബ്രഷ് ഈ സെറ്റിംഗുകളോടെ മറ്റ് ചിത്രങ്ങളിൽ ഉപയോഗിക്കുവാൻ, ബ്രഷസ് പാലെറ്റിന്റെ ഓപ്ഷൻസ് മെനുവിൽ നിന്നും New Brush Preset... തിരഞ്ഞെടുക്കുക. പേരു നൽകുവാൻ ഒരു ഡയലോഗ് ബോക്സ് തുറന്നുവരും. ഇവിടെ ആവശ്യമുള്ള പേരു നൽകി ബ്രഷ് സേവ് ചെയ്യുക. മറ്റ് രീതിയിലുള്ള പൂക്കളും ഈ രീതിയിൽ വരച്ചുണ്ടാക്കി നോക്കുക. ഏവർക്കും എന്റെ ഹൃദയം നിറഞ്ഞ ഓണാശംസകൾ.

(2008 സെപ്റ്റംബര്‍ ലക്കം ഇന്‍ഫോകൈരളി കമ്പ്യൂട്ടര്‍ മാഗസീനില്‍ പ്രസിദ്ധീകരിച്ചത്.)

Description: Creating a Custom Photoshop Brush; How to create a brush in Adobe Photoshop?; Custom Flower Brush in Adobe Photoshop; Saving a Brush Present; Defining Brush Styles; Tutorial by Hareesh N. Nampoothiri aka Haree|ഹരീ; Published in InfoKairali, September iIssue, 2008.
--



Saturday, September 6, 2008

ഫ്ളാഷിലൊരു ഫീഡ്ബാക്ക് ഫോം - ഭാഗം രണ്ട്

How to make a Feedback Form in Adobe Flash? Using Flash Movie(SWF) file as front-end and ASP, PHP, CGI scripts as back-end to create an interactive feedback form in Adobe Flash.
ഫ്ളാഷിൽ ഒരു ഫീഡ്ബാക്ക് ഫോം തയ്യാറാക്കുന്നതിന്റെ ആദ്യ പടിയായി, ഒരു ഇന്റർഫേസ് എങ്ങിനെ ഡിസൈൻ ചെയ്യാം എന്ന് ആദ്യഭാഗത്തിൽ നാം കണ്ടുവല്ലോ. ബാക്ക്-എൻഡ് സ്ക്രിപ്റ്റുകൾ കൂടി ചേർത്ത്, ഫീഡ്ബാക്ക് ഫോം എങ്ങിനെ പ്രവർത്തനക്ഷമമാക്കാം എന്ന് ഇവിടെ വിശദമാക്കിയിരിക്കുന്നു. ആദ്യപടിയായി ടൈം‍ലൈനിൽ, actions എന്ന പേരിൽ പുതിയ ഒരു ലെയർ കൂട്ടിച്ചേർത്ത്, അതിലെ ആദ്യ ഫ്രയിമിൽ താഴെക്കാണുന്ന ആക്ഷൻ‍സ്ക്രിപ്റ്റ് എന്റർ ചെയ്യുക.

Feedback Form in Adobe Flash: ActionScript.
  1. ഒരു LoadVars വേരിയബിള്‍ നിര്‍മ്മിക്കുവാന്‍ പോവുന്നു എന്ന സൂചകം.
  2. feedback എന്ന പെരില്‍ ഒരു LoadVars വേരിയബിള്‍ നിര്‍വ്വചിച്ചിരിക്കുന്നു.
  3. ....
  4. സ്റ്റേജില്‍ നല്‍കിയിരിക്കുന്ന Send ബട്ടണ്‍ ആക്ഷനുകളുടെ തുടക്കമെന്ന സൂചകം.
  5. btn_send എന്ന ഇന്‍സ്റ്റന്‍സ് നെയിമോടു കൂടിയ ബട്ടണില്‍ മൌസ് ക്ലിക്ക് ചെയ്തതിനു ശേഷം റിലീസ് ചെയ്യുമ്പോള്‍ ഫംഗ്‌ഷനുള്ളിലെ ആക്ഷനുകള്‍ പ്രവര്‍ത്തിക്കുക.
  6. box_user_name എന്ന ടെക്സ്റ്റ് ബോക്സില്‍ ആ സമയം ലഭ്യമായ text, feedback എന്ന LoadVars ഓബ്ജക്ടിനുള്ളിലെ user_name എന്ന വേരിയബിളിലേക്ക് സേവ് ചെയ്യുക.
  7. box_user_email -ന്റെ text feedback.user_email എന്നതിലേക്ക് സേവ് ചെയ്യുക.
  8. box_user_subject -ന്റെ text feedback.user_ subject എന്നതിലേക്ക് സേവ് ചെയ്യുക.
  9. box_user_message-ന്റെ text feedback.user_ message എന്നതിലേക്ക് സേവ് ചെയ്യുക.
  10. box_status എന്ന ഇന്‍സ്റ്റന്‍സ് നാമത്തോടു കൂടിയ ഡൈനമിക് ടെക്സ്റ്റ് ഫീല്‍ഡിന്റെ ടെക്സ്റ്റായി "Sending..." എന്ന സ്ട്രിംഗ് സേവ് ചെയ്യുക.
  11. feedback എന്നതില്‍ അടങ്ങിയിരിക്കുന്ന വേരിയബിളുകള്‍ sendmail.php എന്നതിലേക്ക് അയയ്ക്കുകയും; sendmail.php-യില്‍ നിന്നും ലഭിക്കുന്ന വേരിയബിള്‍ വിലകള്‍ ലോഡ് ചെയ്യുകയും ചെയ്യുക.
  12. ബട്ടണ്‍ ആക്ഷനുകള്‍ അവസാനിക്കുന്നു.
  13. ....
  14. മെയില്‍ കൃത്യമായി അയയ്ക്കുവാന്‍ സാധിച്ചെങ്കില്‍, PHP-യില്‍ നിന്നും mail_send = true എന്ന ഒരു വേരിയബിള്‍ തിരിച്ച് അയയ്ക്കുന്നതാണ്. ആ മെസേജിന് അനുസൃതമായാണ് സ്റ്റാറ്റ്സ് മെസേജ് കാണിക്കേണ്ടത്. അതിനുള്ള സ്ക്രിപ്റ്റ് താഴെ നല്‍കുന്നു എന്ന സൂചകം.
  15. feedback എന്ന LoadVars വേരിയബിള്‍ ലോഡാവുമ്പോള്‍, തുടര്‍ന്നുള്ള ഫംഗ്‌ഷന്‍ റണ്‍ ചെയ്യുക.
  16. പൂര്‍ണ്ണമായും ലോഡ് ആയെങ്കില്‍, success എന്ന വേരിയബിളിന്റെ വില true ആയിരിക്കും. അങ്ങിനെയെങ്കില്‍
  17. feedback.mail_send എന്ന വേരിയബിളിന്റെ വില true ആണെങ്കില്‍
  18. box_status എന്ന ഡൈനമിക് ടെക്സ്റ്റ് ഫീല്‍ഡിന്റെ ടെക്സ്റ്റ് വിലയായി Success! എന്ന സ്ട്രിംഗ് സേവ് ചെയ്യുക.
  19. 17-ല്‍ തുടങ്ങിയ if-statement അവസാനിച്ചിരിക്കുന്നു.
  20. 16-ല്‍ തുടങ്ങിയ if-statement-ന്റെ else ഭാഗം തുടങ്ങുന്നു.
  21. പൂര്‍ണ്ണമായും വേരിയബിളുകള്‍ ലോഡായില്ലെങ്കിലോ, mail_send എന്ന വേരിയബിളിന്റെ വില false ആവുകയോ ചെയ്താല്‍, box_status എന്ന ഡൈനമിക് ടെക്സ്റ്റ് ഫീല്‍ഡിന്റെ ടെക്സ്റ്റ് വിലയായി Sending Failed!!! എന്ന സ്ട്രിംഗ് സേവ് ചെയ്യുക.
  22. 16-ല്‍ തുടങ്ങിയ if-statement അവസാനിച്ചിരിക്കുന്നു.
  23. 15-ല്‍ തുടങ്ങിയ ഫംഗ്ഷന്‍ അവസാനിച്ചിരിക്കുന്നു.
ഇത്രയും ചെയ്ത ശേഷം ഡോക്യുമെന്റ് പബ്ലിഷ് ചെയ്യുക. രണ്ടു ഫയലുകള്‍ form.html, form.swf എന്നീ പേരുകളില്‍ ഇപ്പോള്‍ ഫ്ലാഷ് ഫയല്‍ സേവ് ചെയ്ത ഫോള്‍ഡറില്‍ കാണുവാന്‍ സാധിക്കും. ഇവയെക്കൂടാതെ, AC_RunActiveContent.js എന്ന പേരില്‍ ഒരു ജാവ‌‌‌‌‌‌‌‌‌‌‌സ്ക്രിപ്റ്റ് ഫയല്‍ ഫ്ലാഷ് സ്വയം നിര്‍മ്മിച്ചിട്ടുണ്ടാവും. ഈ ജാവസ്ക്രിപ്റ്റ് ഫയലിന്റെ സഹായത്തോടെയാണ് ഫ്ലാഷ് മൂവി ഫയല്‍ HTML ഫയലിലേക്ക് ചേര്‍ത്തിരിക്കുന്നത്. നോട്ട്പാഡ് തുറന്ന് (Start > Programs > Accessories > Notepad) പ്രധാനമെനുവില്‍ File > Save As തിരഞ്ഞെടുത്ത്, ഇതേ ഫോള്‍ഡറില്‍ sendmail.php എന്ന പേരില്‍ സേവ് ചെയ്യുക. ഇപ്പോള്‍ താഴെ കാണുന്ന രീതിയിൽ, ഇത്രയും ഫയലുകളായിരിക്കും ഫോള്‍ഡറില്‍ ലഭ്യമായിരിക്കുക.
Feedback Form in Adobe Flash: Files Required.


നോട്ട്‌പാഡില്‍ PHP ഫയല്‍ വീണ്ടും തുറന്ന ശേഷം, മുകളില്‍ നല്‍കിയിരിക്കുന്ന PHP കോഡ് അതുപോലെ എന്റര്‍ ചെയ്യുക. ഫ്ലാഷില്‍ നിന്നും വേരിയബിളുകള്‍ സ്വീകരിച്ച ശേഷം mail() എന്ന ഫംഗ്‌ഷന്‍ ഉപയോഗിച്ച് admin എന്ന വേരിയബിളില്‍ നല്‍കിയിരിക്കുന്ന ഇ-മെയില്‍ അഡ്രസിലേക്ക് അയയ്ക്കുകയാണ് ഈ PHP സ്ക്രിപ്റ്റ് ചെയ്യുന്നത്. admin എന്ന വേരിയബിളില്‍ സേവ് ചെയ്യുന്ന ഇ-മെയില്‍ വിലാസം നിങ്ങളുടേതാക്കുവാന്‍ ശ്രദ്ധിക്കുക. PHP ശരിയായി പ്രവര്‍ത്തിക്കുവാന്‍, സെര്‍വ്വറില്‍ PHP ശരിയായ രീതിയില്‍ പ്രവര്‍ത്തിക്കുന്ന രീതിയില്‍ സജ്ജീകരിക്കേണ്ടതുണ്ട്. GooglePages പോലെയുള്ള സൌജന്യ ഹോസ്റ്റിംഗ് സൌകര്യമൊരുക്കുന്ന സെര്‍വ്വറുകളില്‍ PHP പലപ്പോഴും ലഭ്യമായിരിക്കുകയില്ല. PHP സജ്ജീകരിച്ചിരിക്കുന്ന സെര്‍വ്വറുകളില്‍ തന്നെ, mail() എന്ന ഫംഗ്‌ഷന്‍ ബ്ലോക്ക് ചെയ്തിട്ടില്ല എന്നും ഉറപ്പുവരുത്തുക. പലപ്പോഴും അതാത് ഡൊമൈന്‍ സെര്‍വ്വറുകളിലേക്ക് മാത്രമേ മെയില്‍ ഫോര്‍വേഡ് ചെയ്യുവാന്‍ സാധിക്കുകയുള്ളൂ. അതായത്, നിങ്ങളുടെ സൈറ്റില്‍ നിന്നും ജി-മെയിലിലേക്ക് ഫീഡ്‌ബാക്ക് ഫോം ഫോര്‍വേഡ് ചെയ്യുവാന്‍ സാധിക്കണമെന്നില്ല. കൂടുതല്‍ വിവരങ്ങള്‍ക്ക് ഹോസ്റ്റിംഗ് സര്‍വ്വീസ് നല്‍കുന്ന സേവനദാതാവുമായി ബന്ധപ്പെടുക.

(2008 ആഗസ്റ്റ് ലക്കം ഇന്‍ഫോകൈരളി കമ്പ്യൂട്ടര്‍ മാഗസീനില്‍ പ്രസിദ്ധീകരിച്ചത്.)

Description: How to make a Feedback Form in Adobe Flash? Using Flash Movie(SWF) file as front-end and ASP, PHP, CGI scripts as back-end to create an interactive feedback form in Adobe Flash. Published in InfoKairali Computer Magazine, August Issue, 2008. Article by Hareesh N. Nampoothiri aka Haree | ഹരീ.
--



 
Sankethikam - Technology Blog. Tutorials on Adobe Photoshop, Adobe Flash, Digital Photography and other general technical articles.
Original theme by Douglas Bowman | Theme customized by newnmedia | Lightbox v2.0 by Lokesh Dhakar | Recent Comments Widget by Blogger Templates
Recommended Browsers: Mozilla Firefox / Google Chrome