webdesign and cms for prd event

82
Open Source Education And Development Association September 21,2010 - The Government Public Relations Department Web Design + Usability Tuesday, September 21, 2010

Upload: akarawuth-tamrareang

Post on 02-Nov-2014

1.244 views

Category:

Technology


1 download

DESCRIPTION

สไลด์บรรยาย ที่ กรมประชาสัมพันธ์

TRANSCRIPT

Page 1: WebDesign and CMS for PRD event

Open Source Education And Development Association

September 21,2010 - The Government Public Relations Department

ÍอÑั¤คÃรÇวØุ²ฒÔิ µตÓำÃรÒาàเÃรÕีÂย§ง

Web Design + Usability

Tuesday, September 21, 2010

Page 2: WebDesign and CMS for PRD event

2

About Me

ÍอÑั¤คÃรÇวØุ²ฒÔิ µตÓำÃรÒาàเÃรÕีÂย§งAkarawuth Tamrareang (JoomlaCorner)- Board of Director - OpenSourceMatters.org

- Joomla! Bug Squad : joomla.org

- Founder JoomlaCorner.com - Founder Marvelic Engine Co.,Ltd. : www.marvelic.co.th

¹นÒาÂย¡กÊสÁมÒา¤คÁมÈศÖึ¡กÉษÒาáแÅลÐะ¾พÑั²ฒ¹นÒาâโÍอàเ¾พ�‹¹น«ซÍอÃร�Êส www.oseda.or.th

: http://twitter.com/joomlacorner

email : [email protected] [email protected]

Tuesday, September 21, 2010

Page 3: WebDesign and CMS for PRD event

ÍอÂยÒา¡ก¨จÐะÁมÕีàเÇวç็ºบäไ«ซµต� ?

3

ÁมÕีàเÇวç็ºบàเ¾พ×ืè่ÍอÍอÐะäไÃร?¨จÐะãใËห�ŒºบÃรÔิ¡กÒาÃรÍอÐะäไÃร?

Tuesday, September 21, 2010

Page 4: WebDesign and CMS for PRD event

àเÇวç็ºบ¤ค×ืÍอÍอÐะäไÃร? ¡กÒาÃรÊส×ืè่ÍอÊสÒาÃร¢ข�ŒÍอÁมÙูÅล·ท∙Òา§งàเ´ดÕีÂยÇว? ãใ¹นÊสÔิè่§ง·ท∙Õีè่Íอ§ง¤ค�¡กÃรµต�ŒÍอ§ง¡กÒาÃร¹นÓำàเÊส¹นÍอ? ÃรÇวÁมÅลÔิ§ง¡ก�?

Do you want a website?

àเÇวç็ºบ =

4

¤คÅลÑั§งàเÍอ¡กÊสÒาÃร ? âโºบÃรªชÑัÇวÃร� ?

ÊสÒาÃร¨จÒา¡ก¼ผÙู�ŒºบÃรÔิËหÒาÃร ? ÊสÁมØุ´ดËห¹น�ŒÒาàเËหÅล×ืÍอ§ง ?

Tuesday, September 21, 2010

Page 5: WebDesign and CMS for PRD event

¡กÒาÃรàเ»ปÅลÕีè่Âย¹นáแ»ปÅล§ง¢ขÍอ§งàเÇวç็ºบ

5

¾พÒา´ดËหÑัÇวËห¹นÑั§งÊส×ืÍอ¾พÔิÁม¾พ�ÁมÕี·ท∙Øุ¡กÍอÂย�‹Òา§งãใ¹น·ท∙Øุ¡กËห¹น�ŒÒา¹นÓำàเÊส¹นÍอãใ¹นÁมØุÁมÁมÍอ§งÍอ§ง¤ค�¡กÃร¤คÒา´ดËหÇวÑั§งãใËห�ŒàเÃรÔิè่Áมàเ¢ข�ŒÒาËห¹น�ŒÒาáแÃร¡ก¤คÒา´ดËหÇวÑั§งãใËห�Œ¤ค¹นÍอ�‹Òา¹น·ท∙Øุ¡ก·ท∙Õีè่¨จÑั´ดâโ¤คÃร§งÊสÃร�ŒÒา§ง/ËหÁมÇว´ดËหÁมÙู�‹¢ข�ŒÍอÁมÙูÅลäไÁม�‹´ดÕี »ปÃรÑัºบ»ปÃรØุ§งªช�ŒÒา

¾พÒา´ดËหÑัÇวËห¹น�ŒÒาáแÃร¡กäไÁม�‹ÁมÒา¡ก1 Ëห¹น�ŒÒา 1 àเÃร×ืè่Íอ§งàเ´ด�‹¹น¹นÓำàเÊส¹นÍอãใ¹นÁมØุÁมÁมÍอ§ง¼ผÙู�ŒªชÁม¤ค¹น Search ÁมÒาàเ¨จÍอ¤ค¹นÍอ�‹Òา¹นÊสÔิè่§ง·ท∙Õีè่ÍอÂยÒา¡กÍอ�‹Òา¹น¨จÑั´ดâโ¤คÃร§งÊสÃร�ŒÒา§ง/ËหÁมÇว´ดËหÁมÙู�‹¢ข�ŒÍอÁมÙูÅล´ดÕี»ปÃรÑัºบ»ปÃรØุ§งàเÃรç็Çว ¢ข�ŒÍอÁมÙูÅล·ท∙Ñั¹นÊสÁมÑัÂย

àเÇวç็ºบàเ»ป�š¹นÊส×ืè่ÍอãใËหÁม�‹ ÂยÑั§งÁมÕี¡กÒาÃร»ปÃรÑัºบàเ»ปÅลÕีè่Âย¹นäไ»ปàเÃร×ืè่ÍอÂยæๆ µตÒาÁมÅลÑั¡กÉษ³ณÐะ¹นÔิÊสÑัÂย¢ขÍอ§ง¼ผÙู�Œãใªช�Œ§งÒา¹นàเÇวç็ºบTuesday, September 21, 2010

Page 6: WebDesign and CMS for PRD event

10 Principles of Effective Web Design

6

http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

Tuesday, September 21, 2010

Page 7: WebDesign and CMS for PRD event

Principles of Effective Web Design

Principles of Effective Web Design

·ท∙Óำ¤คÇวÒาÁมàเ¢ข�ŒÒาãใ¨จÇว�‹Òา Users ãใªช�Œ§งÒา¹นàเÇวç็ºบäไ«ซµต�¡กÑั¹นÍอÂย�‹Òา§งäไÃร áแÅลÐะàเ¢ข�ŒÒาãใ¨จÇว�‹Òา Users ¤คÔิ´ดÍอÐะäไÃร

7Tuesday, September 21, 2010

Page 8: WebDesign and CMS for PRD event

Users ¤คÔิ´ดÍอÂย�‹Òา§งäไÃร

áแÅล�ŒÇว Users ¤คÔิ´ด¡กÑั¹นÍอÂย�‹Òา§งäไÃร?

âโ´ดÂย·ท∙Ñัè่Çวäไ»ป¾พÄฤµตÔิ¡กÃรÃรÁม¢ขÍอ§ง¼ผÙู�Œãใªช�Œºบ¹นàเÇวç็ºบäไÁม�‹äไ´ด�Œ·ท∙Õีè่áแµต¡กµต�‹Òา§ง¨จÒา¡ก¾พÄฤµตÔิ¡กÃรÃรÁม¢ขÍอ§งÅลÙู¡ก¤ค�ŒÒาãใ¹นÃร�ŒÒา¹น¤ค�ŒÒา ¼ผÙู�Œàเ¢ข�ŒÒาªชÁม¨จÐะÁมÍอ§งÀภÒา¾พÃรÇวÁม·ท∙Õีè่Ëห¹น�ŒÒาãใËหÁม�‹áแÅล�ŒÇว¡กç็Êสáแ¡ก¹นºบÒา§ง¢ข�ŒÍอ¤คÇวÒาÁมáแÅลÐะ¤คÅลÔิ¡กÅลÔิ§ง¤ค�áแÃร¡ก·ท∙Õีè่´ดÖึ§ง´ดÙู´ด¤คÇวÒาÁมÊส¹นãใ¨จËหÃร×ืÍอ¤คÅล�ŒÒาÂยÊสÔิè่§ง·ท∙Õีè่¾พÇว¡กàเ¢ขÒา¡กÓำÅลÑั§งÁมÍอ§งËหÒา ¤คÇวÒาÁม¨จÃรÔิ§งÁมÕีÊส�‹Çว¹นãใËห­Þญ�‹ äไÁม�‹äไ´ด�ŒÊส¹นãใ¨จ·ท∙Ñัé้§งËหÁม´ดºบ¹นËห¹น�ŒÒาàเÇวç็ºบäไ«ซµต�·ท∙Õีè่ÁมÕี

áแÅลÐะ¼ผÙู�Œãใªช�ŒÊส�‹Çว¹นãใËห­Þญ�‹¨จÐะãใªช�ŒÇวÔิ¸ธÕี¤ค�Œ¹นËหÒาºบÒา§งÍอÂย�‹Òา§ง·ท∙Õีè่¹น�‹ÒาÊส¹นãใ¨จ (ËหÃร×ืÍอÁมÕี»ปÃรÐะâโÂยªช¹น�) áแÅลÐะ¤คÅลÔิ¡กäไ´ด�Œ ·ท∙Ñั¹น·ท∙Õี·ท∙Õีè่ÁมÕี áแ¹นÇวâโ¹น�ŒÁมàเ»ป�š¹น¼ผÙู�Œ¾พºบ¼ผÙู�Œãใªช�Œ¤คÅลÔิ¡ก ¶ถ�ŒÒาËห¹น�ŒÒาãใËหÁม�‹äไÁม�‹µตÍอºบÊส¹นÍอ§ง¤คÇวÒาÁมµต�ŒÍอ§ง¡กÒาÃร¢ขÍอ§ง¼ผÙู�Œãใªช�Œ àเ¢ขÒา¡กç็¨จÐะ¤คÅลÔิ¡ก·ท∙Õีè่»ปØุ�†Áม Back áแÅลÐะ·ท∙Óำ¡กÒาÃร¤ค�Œ¹นËหÒาãใËหÁม�‹

8Tuesday, September 21, 2010

Page 9: WebDesign and CMS for PRD event

Users ¤คÔิ´ดÍอÂย�‹Òา§งäไÃร

- ¤คØุ³ณÀภÒา¾พ¢ขÍอ§งàเ¹น×ืé้ÍอËหÒาáแÅลÐะ¤คÇวÒาÁม¹น�‹Òาàเªช×ืè่Íอ¶ถ×ืÍอ

- Users äไÁม�‹Íอ�‹Òา¹น áแµต�‹àเ¢ขÒา¨จÐะÊสáแ¡ก¹น´ดÙู

9Tuesday, September 21, 2010

Page 10: WebDesign and CMS for PRD event

Users ¤คÔิ´ดÍอÂย�‹Òา§งäไÃร

- Users ÁมÑั¡กãใ¨จÃร�ŒÍอ¹นáแÅลÐะäไÁม�‹µต�ŒÍอ§ง¡กÒาÃรàเÊสÕีÂยàเÇวÅลÒา¹นÒา¹น

ËหÅลÑั¡ก¡กÒาÃร§ง�‹ÒาÂยæๆ ¤ค×ืÍอ ¶ถ�ŒÒาËหÒา¡กàเÇวç็ºบäไ«ซµต�¹นÑัé้¹นäไÁม�‹µตÍอºบÊส¹นÍอ§ง¤คÇวÒาÁม¤คÒา´ดËหÇวÑั§ง¢ขÍอ§ง Users ¡กÒาÃรÍอÍอ¡กáแºบºบ¡กç็¶ถ×ืÍอÇว�‹ÒาÅล�ŒÁมàเËหÅลÇว Íอ§ง¤ค�¡กÃรÊสÙู­ÞญàเÊสÕีÂย§งºบ»ปÃรÐะÁมÒา³ณ Users ¡กç็àเ»ปÅลÕีè่Âย¹นäไ»ปËหÒา¢ข�ŒÍอÁมÙูÅล·ท∙Õีè่Íอ×ืè่¹น·ท∙Õีè่´ดÕี¡กÇว�‹Òาáแ·ท∙¹น

10Tuesday, September 21, 2010

Page 11: WebDesign and CMS for PRD event

Users ¤คÔิ´ดÍอÂย�‹Òา§งäไÃร?

- Users äไÁม�‹àเÅล×ืÍอ¡กãใªช�ŒµตÑัÇวàเÅล×ืÍอ¡ก·ท∙Õีè่´ดÕี·ท∙Õีè่ÊสØุ´ดàเÊสÁมÍอäไ»ป àเªช�‹¹นãใªช�Œ¡กÒาÃร¤ค�Œ¹นËหÒา«ซÖึè่§ง¨จÐะ·ท∙ÓำãใËห�Œàเ¢ขÒา¾พºบÊสÔิè่§ง·ท∙Õีè่àเ¢ขÒาËหÒาàเÃรç็Çว·ท∙Õีè่ÊสØุ´ด

11Tuesday, September 21, 2010

Page 12: WebDesign and CMS for PRD event

Users ¤คÔิ´ดÍอÂย�‹Òา§งäไÃร

- Users ãใªช�ŒÊสÑั­ÞญªชÒาµตÔิ­ÞญÒา³ณ¢ขÍอ§งàเ¢ขÒาàเÍอ§งUsers äไÁม�‹äไ´ด�ŒÊส¹นãใ¨จÇว�‹ÒาàเÇวç็ºบ¨จÐะ¶ถÙู¡กÍอÍอ¡กáแºบºบÁมÒาÍอÂย�‹Òา§งäไÃร áแ¤ค�‹àเ¢ขÒา¾พºบÊสÔิè่§ง·ท∙Õีè่àเ¢ขÒาµต�ŒÍอ§ง¡กÒาÃร àเ¢ขÒา¡กç็¨จÐะàเÅล×ืÍอ¡กãใªช�ŒÁมÑั¹น

- Users µต�ŒÍอ§ง¡กÒาÃร·ท∙Õีè่¨จÐะ¤คÇวºบ¤คØุÁม¡กÒาÃรãใªช�Œ§งÒา¹นàเºบÃรÒาàเ«ซÍอÃร�àเÍอ§ง ¼ผÙู�Œãใªช�ŒÊส�‹Çว¹นãใËห­Þญ�‹äไÁม�‹µต�ŒÍอ§ง¡กÒาÃร ¡กÒาÃรàเ»ป�´ดËห¹น�ŒÒาµต�‹Òา§งãใËหÁม�‹

12Tuesday, September 21, 2010

Page 13: WebDesign and CMS for PRD event

10 Principles

1. Dont’s make users think

13Tuesday, September 21, 2010

Page 14: WebDesign and CMS for PRD event

10 Principles

2. Dont’s squander users’ patience

14Tuesday, September 21, 2010

Page 15: WebDesign and CMS for PRD event

10 Principles

3. Manage to focus users’ attention

15

humanized.com

Tuesday, September 21, 2010

Page 16: WebDesign and CMS for PRD event

10 Principles

4. Strive for feature exposure

16

Dibusoft.com

Tuesday, September 21, 2010

Page 17: WebDesign and CMS for PRD event

10 Principles

5. Make use of effective writing àเÇวç็ºบµต�‹Òา§ง¨จÒา¡กÊสÔิè่§ง¾พÔิÁม¾พ�

17

Eleven2.com

Tuesday, September 21, 2010

Page 18: WebDesign and CMS for PRD event

10 Principles

6. Strive for Simplicity

18

getfinch.com

Tuesday, September 21, 2010

Page 19: WebDesign and CMS for PRD event

10 Principles

7. Don’t be afraid of the white space

19

Cameron.io

Tuesday, September 21, 2010

Page 20: WebDesign and CMS for PRD event

10 Principles

8. Communicate effectively with “visible language”• Organize: âโ¤คÃร§งÊสÃร�ŒÒา§งªชÑั´ดàเ¨จ¹น äไ»ปãใ¹น·ท∙ÔิÈศ·ท∙Òา§งàเ´ดÕีÂยÇว¡กÑั¹น·ท∙Ñัé้§งàเÇวç็ºบäไ«ซµต�• Economize : àเÃรÕีÂยºบ§ง�‹ÒาÂย, ªชÑั´ดàเ¨จ¹น, ¨จØุ´ดàเ´ด�‹¹น, áแÅลÐะµตÍอ¡กÂย�ŒÓำ¨จØุ´ดÊสÓำ¤คÑั­Þญ • Communicate: ÃรÑั¡กÉษÒา¤คÇวÒาÁมÊสÁม´ดØุÅลÂย�ÃรÐะËหÇว�‹Òา§ง legibility, readability, typography,

symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

20Tuesday, September 21, 2010

Page 21: WebDesign and CMS for PRD event

10 Principles

9. Conventions are our friends

ÃรÑัºบ¿ฟ�˜§ง users Çว�‹Òาµต�ŒÍอ§ง¡กÒาÃรÍอÐะäไÃร

10. Test early, Test often

·ท∙´ดÊสÍอºบáแµต�‹àเ¹นÔิè่¹นæๆ áแÅลÐะ ºบ�‹ÍอÂยæๆ

21Tuesday, September 21, 2010

Page 22: WebDesign and CMS for PRD event

43 Website Mistakes you should Avoid

22

http://www.vestadigital.com/173/section.aspx/57/post/43-web-site-mistakes-you-should-avoid

Tuesday, September 21, 2010

Page 23: WebDesign and CMS for PRD event

Web Design: +30 Mistakes to Aboid

23

http://serradinho.com/Blog/avoid-33-mistakes-of-web-design.htm

Tuesday, September 21, 2010

Page 25: WebDesign and CMS for PRD event

Open Source CMS àเ¤คÃร×ืè่Íอ§งÁม×ืÍอ¿ฟÃรÕีæๆ ·ท∙Õีè่ãใªช�Œãใ¹น¡กÒาÃรÊสÃร�ŒÒา§งàเÇวç็ºบäไ«ซµต�

25Tuesday, September 21, 2010

Page 26: WebDesign and CMS for PRD event

Define : Content Management System

26

Simple Definition :“A CMS is a type of web-based software thatplugs in to your site in such a way thatupdating content becomes much easierthan without it.”

Tuesday, September 21, 2010

Page 27: WebDesign and CMS for PRD event

Social Networking Services What do they havein common with CMS?..... and it appeares on your page seconds later.

5

Sample

27Tuesday, September 21, 2010

Page 28: WebDesign and CMS for PRD event

ÃรÐะºบºบ àเ«ซÔิÃร�¿ฟàเÇวÍอÃร� âโ´ดàเÁม¹น

âโÍอàเ¾พ¹น«ซÍอÃร�Êส àเËหÁม×ืÍอ¹นÇวÑัµต¶ถØุ´ดÔิºบãใ¹น¡กÒาÃร¡ก�‹Íอ¹นÊสÃร�ŒÒา§ง·ท∙Õีè่áแ¨จ¡ก¿ฟÃรÕี ÊสÔิè่§ง·ท∙Õีè่àเÃรÒาµต�ŒÍอ§ง·ท∙Óำ¤ค×ืÍอ¹นÓำÁมÒา»ปÃรÐะ¡กÍอºบáแÅลÐะ»ปÃรÑัºบáแµต�‹§ง

28

WordPressÊสÓำËหÃรÑัºบàเÇวç็ºบ¢ข¹นÒา´ด¡กÅลÒา§ง-àเÅลç็¡กäไÁม�‹ÁมÕีÃรÐะºบºบ«ซÑัºบ«ซ�ŒÍอ¹นµตÔิ´ดµตÑัé้§ง§ง�‹ÒาÂย ãใªช�Œ§ง�‹ÒาÂย

JoomlaÊสÓำËหÃรÑัºบàเÇวç็ºบ¢ข¹นÒา´ด¡กÅลÒา§ง-ãใËห­Þญ�‹µต�ŒÍอ§ง¡กÒาÃรÃรÐะºบºบ«ซÑัºบ«ซ�ŒÍอ¹นàเËหÁมÒาÐะ¡กÑัºบ¡กÒาÃร¹นÓำÊส�‹Çว¹น¢ขÂยÒาÂยÁมÒา»ปÃรÐะ¡กÍอºบàเ¾พÔิè่Áม/¾พÑั²ฒ¹นÒาàเ¾พÔิè่Áม

DrupalÊสÓำËหÃรÑัºบàเÇวç็ºบ¢ข¹นÒา´ด¡กÅลÒา§ง-ãใËห­Þญ�‹µต�ŒÍอ§ง¡กÒาÃรÃรÐะºบºบ«ซÑัºบ«ซ�ŒÍอ¹นàเËหÁมÒาÐะ¡กÑัºบ¡กÒาÃร¹นÓำÁมÒาàเ¾พ×ืè่Íอàเ¢ขÕีÂย¹นÃรÐะºบºบµต�‹Íอàเ¾พÔิè่ÁมàเÍอ§ง

ÃรÐะºบºบ/àเÇวç็ºบäไ«ซµต�àเËหÁม×ืÍอ¹นÃรÐะºบºบÍอÒา¤คÒาÃร/ÊสÔิè่§ง»ปÅลÙู¡กÊสÃร�ŒÒา§ง

àเ«ซÔิÃร�¿ฟàเÇวÍอÃร�àเËหÁม×ืÍอ¹น·ท∙Õีè่´ดÔิ¹นáแÅลÐะÊสÒา¸ธÒาÃร³ณÙู»ปâโÀภ¤ค

•Domainname.com•Domainname.org•Domainname.net•Domainname.in.th•...

âโ´ดàเÁม¹นàเËหÁม×ืÍอ¹น»ป�‡ÒาÂยÃร�ŒÒา¹น-àเÅล¢ข·ท∙Õีè่ÍอÒา¤คÒาÃร

Tuesday, September 21, 2010

Page 29: WebDesign and CMS for PRD event

Trends

29

áแ¹นÇวâโ¹น�ŒÁม¡กÒาÃรãใªช�Œ§งÒา¹น

·ท∙Õีè่ÁมÒา : http://www.google.com/trends

Tuesday, September 21, 2010

Page 30: WebDesign and CMS for PRD event

How to Build a Successful Site

• àเ¢ข�ŒÒาãใ¨จàเ»ป�‡ÒาËหÁมÒาÂย¢ขÍอ§งàเÇวç็ºบ·ท∙Õีè่·ท∙Óำ• ¡กÒาÃรÇวÒา§งáแ¼ผ¹น·ท∙Õีè่´ดÕี • Navigation (usability)• Design (ÁมÕี¤คÇวÒาÁม¹น�‹Òาàเªช×ืè่Íอ¶ถ×ืÍอ)• ¡กÒาÃร»ปÃรÐะªชÒาÊสÑัÁม¾พÑั¹น¸ธ�

30Tuesday, September 21, 2010

Page 31: WebDesign and CMS for PRD event

CMS Universe

31Tuesday, September 21, 2010

Page 32: WebDesign and CMS for PRD event

Tuesday, September 21, 2010

Page 33: WebDesign and CMS for PRD event

Joomla is ......

- ãใªช�Œ§ง�‹ÒาÂย- ·ท∙Ãร§ง¾พÅลÑั§ง- àเ»ป�´ดàเ¼ผÂยâโ¤ค�Œ´ด Open Source ( ¤คØุ³ณÊสÒาÁมÒาÃร¶ถáแ¡ก�Œäไ¢ขàเ¾พÔิè่ÁมàเµตÔิÁมäไ´ด�ŒàเÍอ§ง )

- ÃรÍอ§งÃรÑัºบàเÇวç็ºบäไ«ซµต�¢ข¹นÒา´ดãใËห­Þญ�‹- ¿ฟÃรÕี (¶ถ�ŒÒาÅล§งÁม×ืÍอ·ท∙ÓำàเÍอ§ง)- ÅลÔิ¢ขÊสÔิ·ท∙¸ธÔิì์àเ»ป�š¹นáแºบºบ GNU/GPL-Joomla! àเ»ป�š¹น TM ¢ขÍอ§ง Open Source Matters Inc. (OSM)

33Tuesday, September 21, 2010

Page 34: WebDesign and CMS for PRD event

Joomla Commercial from Youtube

34Tuesday, September 21, 2010

Page 35: WebDesign and CMS for PRD event

Project Awards

35

Best Linux / Open Source Project 2005, LinuxWorld London, United Kingdom

Best Linux / Open Source Project 2006, LinuxWorld London, United Kingdom

2006 Best Open Source CMS, Packt Publishing

2007 Best Open Source PHP CMS, Packt Publishing

Tuesday, September 21, 2010

Page 36: WebDesign and CMS for PRD event

¤คÇวÒาÁมàเ»ป�š¹นÁมÒา

36Tuesday, September 21, 2010

Page 37: WebDesign and CMS for PRD event

37

Current Release

Joomla! 1.5.20Released 18 July 2010

Tuesday, September 21, 2010

Page 38: WebDesign and CMS for PRD event

38

What Does Joomla Look Like ?

Joomla! áแÂย¡กÍอÍอ¡กàเ»ป�š¹นÊสÒาÁมÊส�‹Çว¹นËหÅลÑั¡กæๆ ´ด�ŒÇวÂย¡กÑั¹น

• Installer Application ãใªช�ŒÊสÓำËหÃรÑัºบµตÔิ´ดµตÑัé้§ง¨จÙูÁมÅล�‹Òา «ซÖึè่§งãใªช�Œàเ¾พÕีÂย§ง¤คÃรÑัé้§งàเ´ดÕีÂยÇวáแÅลÐะ¡กç็ÊสÒาÁมÒาÃร¶ถÅลºบÍอÍอ¡กäไ´ด�Œ

• Site Application ãใªช�Œ§งÒา¹นâโ´ดÂย users áแÅลÐะàเ»ป�š¹นÊส�‹Çว¹น¢ขÍอ§ง¡กÒาÃรáแÊส´ด§ง¼ผÅล¢ข�ŒÍอÁมÙูÅล¢ขÍอ§งàเÇวç็ºบäไ«ซµต�·ท∙Ñัé้§งËหÁม´ด

• Administrative Application ãใªช�Œâโ´ดÂย¼ผÙู�Œ´ดÙูáแÅลàเÇวç็ºบäไ«ซµต� ÊสÓำËหÃรÑัºบºบÃรÔิËหÒาÃร¨จÑั´ด¡กÒาÃรàเÇวç็ºบäไ«ซµต�·ท∙Ñัé้§งËหÁม´ด

Tuesday, September 21, 2010

Page 39: WebDesign and CMS for PRD event

39

Joomla Applications

Joomla Installer Application

Tuesday, September 21, 2010

Page 40: WebDesign and CMS for PRD event

40

Joomla Applications

Joomla Site Application

Tuesday, September 21, 2010

Page 41: WebDesign and CMS for PRD event

41

Joomla Applications

Joomla Administrative Application

Tuesday, September 21, 2010

Page 42: WebDesign and CMS for PRD event

42

Joomla Applications

Administrative Application ãใªช�ŒÊสÓำËหÃรÑัºบáแ¡ก�Œäไ¢ขºบ·ท∙¤คÇวÒาÁม, µตÔิ´ดµตÑัé้§งÊส�‹Çว¹น¢ขÂยÒาÂย (extensions), ÍอÑั¾พâโËหÅล´ด media, ºบÃรÔิËหÒาÃร¨จÑั´ด¡กÒาÃรàเÁม¹นÙู

Tuesday, September 21, 2010

Page 43: WebDesign and CMS for PRD event

43

Joomla! in Action

Tuesday, September 21, 2010

Page 44: WebDesign and CMS for PRD event

After Installed Joomla!

44Tuesday, September 21, 2010

Page 45: WebDesign and CMS for PRD event

paknamlangsuan.com

45Tuesday, September 21, 2010

Page 46: WebDesign and CMS for PRD event

Before

46Tuesday, September 21, 2010

Page 47: WebDesign and CMS for PRD event

After

47Tuesday, September 21, 2010

Page 48: WebDesign and CMS for PRD event

Hnkeal.com

48Tuesday, September 21, 2010

Page 49: WebDesign and CMS for PRD event

สถาบันส่งเสริมอัจฉริยภาพและนวัตกรรมการเรียนรู้ (สสอน.): www.igil.or.th

49Tuesday, September 21, 2010

Page 50: WebDesign and CMS for PRD event

Chaipat.or.th

50Tuesday, September 21, 2010

Page 51: WebDesign and CMS for PRD event

BonoMarket.com

51Tuesday, September 21, 2010

Page 52: WebDesign and CMS for PRD event

JomSocial

52Tuesday, September 21, 2010

Page 53: WebDesign and CMS for PRD event

thaimedialaw.org

53Tuesday, September 21, 2010

Page 54: WebDesign and CMS for PRD event

redbullspirit.org

54Tuesday, September 21, 2010

Page 55: WebDesign and CMS for PRD event

bangpakokhospital.com

55Tuesday, September 21, 2010

Page 56: WebDesign and CMS for PRD event

salakphet.com

56Tuesday, September 21, 2010

Page 57: WebDesign and CMS for PRD event

intranet S&P

57Tuesday, September 21, 2010

Page 58: WebDesign and CMS for PRD event

thaireform.in.th

58Tuesday, September 21, 2010

Page 59: WebDesign and CMS for PRD event

ossfestival.in.th

59Tuesday, September 21, 2010

Page 60: WebDesign and CMS for PRD event

scisoc.or.th

60Tuesday, September 21, 2010

Page 61: WebDesign and CMS for PRD event

TOSF.org

61Tuesday, September 21, 2010

Page 62: WebDesign and CMS for PRD event

www.marvelic.co.th

62Tuesday, September 21, 2010

Page 63: WebDesign and CMS for PRD event

thaiembassymnl.ph

63Tuesday, September 21, 2010

Page 64: WebDesign and CMS for PRD event

www.region2.m-energy.go.th

64Tuesday, September 21, 2010

Page 65: WebDesign and CMS for PRD event

most.go.th ¡กÃรÐะ·ท∙ÃรÇว§งÇวÔิ·ท∙ÂยÒาÈศÒาÊสµตÃร�áแÅลÐะàเ·ท∙¤คâโ¹นâโÅลÂยÕี

65Tuesday, September 21, 2010

Page 66: WebDesign and CMS for PRD event

www.oseda.or.th

66Tuesday, September 21, 2010

Page 67: WebDesign and CMS for PRD event

maf.gov.la

67Tuesday, September 21, 2010

Page 68: WebDesign and CMS for PRD event

Joomla! äไÁม�‹ãใªช�‹áแ¤ค�‹ àเÇวç็ºบäไ«ซµต�

´ด�ŒÇวÂย Extensions / MashUp

68Tuesday, September 21, 2010

Page 69: WebDesign and CMS for PRD event

eCommerce

eCommerce and Catalog Management

69

www.virtuemart.net

Freeway integration

osCommerce BridgeMageBridge

Tuesday, September 21, 2010

Page 70: WebDesign and CMS for PRD event

Add Web 2.0 Functionality

CommunityBuilder

70

JomSocial

Anahita Social Engine

•AddThis Social Bookmarking•MyBlog•Plugin GoogleMaps•Tweetme

Tuesday, September 21, 2010

Page 71: WebDesign and CMS for PRD event

Adding a Forum

Kunena

71

ccBoard

Tuesday, September 21, 2010

Page 72: WebDesign and CMS for PRD event

Adding Gallery Functionality

•Expose •Frontpage Slideshare •Phoca Photo Gallery•RokSlideShow•RSGallary2

72Tuesday, September 21, 2010

Page 73: WebDesign and CMS for PRD event

CRM

CRM Bridge

•Joomla! + SugarCRM

•Joomla! + vTigerCRM

•Joomla! + Saleforge

•Joomla! + CivilCRM

73Tuesday, September 21, 2010

Page 74: WebDesign and CMS for PRD event

ÃรÐะºบºบ¨จÑั´ด¡กÒาÃร¨จÍอ§งËห�ŒÍอ§ง»ปÃรÐะªชØุÁม

74

Êส�‹Çว¹น¡กÒาÃร·ท∙Óำ§งÒา¹น¢ขÍอ§ง¼ผÙู�Œ´ดÙูáแÅลËห�ŒÍอ§ง»ปÃรÐะªชØุÁม

Tuesday, September 21, 2010

Page 75: WebDesign and CMS for PRD event

ÃรÐะºบºบ¨จÑั´ด¡กÒาÃร¨จÍอ§งËห�ŒÍอ§ง»ปÃรÐะªชØุÁม

75

Êส�‹Çว¹น¡กÒาÃร·ท∙Óำ§งÒา¹น´ด�ŒÒา¹นËห¹น�ŒÒา

Tuesday, September 21, 2010

Page 76: WebDesign and CMS for PRD event

ÃรÐะºบºบ¨จÑั´ด¡กÒาÃรÊสÔิ¹น·ท∙ÃรÑั¾พÂย�

76Tuesday, September 21, 2010

Page 77: WebDesign and CMS for PRD event

ÃรÒาÂย§งÒา¹น¡กÒาÃรàเºบÔิ¡ก¨จ�‹ÒาÂย§งºบ»ปÃรÐะÁมÒา³ณ

77Tuesday, September 21, 2010

Page 78: WebDesign and CMS for PRD event

extensions.joomla.org

78Tuesday, September 21, 2010

Page 79: WebDesign and CMS for PRD event

FLEXIContent CCK for Joomla

79

Create Content Type

Tuesday, September 21, 2010

Page 80: WebDesign and CMS for PRD event

Joomla! Technical Requirements

80

* Ëห�ŒÒาÁมãใªช�Œ PHP 4.3.9, 4.4.2 ËหÃร×ืÍอ 5.0.4. «ซÖึè่§งàเ»ป�š¹น releases ·ท∙Õีè่ÁมÕีºบÑัê๊¡ก«ซÖึè่§ง¨จÐะÁมÕี»ป�˜­ÞญËหÒาãใ¹น¡กÒาÃรµตÔิ´ดµตÑัé้§ง áแÅลÐะ Zend Optimizer 2.5.10 ÊสÓำËหÃรÑัºบ PHP 4.4.x ¡กç็ÂยÑั§งÁมÕีºบÑัê๊¡ก·ท∙Õีè่Ãร�ŒÒาÂยáแÃร§งãใËห�Œãใªช�ŒàเÇวÍอÃร�ªชÑัè่¹น·ท∙Õีè่ãใËหÁม�‹¡กÇว�‹Òา

´ดÙู¢ข�ŒÍอÁมÙูÅลàเ¾พÔิè่ÁมàเµตÔิÁมäไ´ด�Œ·ท∙Õีè่ : http://www.joomla.org/about-joomla/technical-requirements.html

Tuesday, September 21, 2010

Page 81: WebDesign and CMS for PRD event

Questions?

81Tuesday, September 21, 2010

Page 82: WebDesign and CMS for PRD event

82

Thanks you

... because open source matters

http://twitter.com/joomlacorner

www.oseda.or.th

http://slideshare.net/akarawuthBlog : http://akarawuth.com

Tuesday, September 21, 2010