{"id":121,"date":"2009-02-13T18:27:25","date_gmt":"2009-02-13T16:27:25","guid":{"rendered":"http:\/\/www.degraphiks.com\/blog\/?p=121"},"modified":"2009-02-13T18:33:03","modified_gmt":"2009-02-13T16:33:03","slug":"mac-et-developpement-web","status":"publish","type":"post","link":"http:\/\/degraphiks.com\/blog\/mac-et-developpement-web\/","title":{"rendered":"Mac et d\u00e9veloppement Web"},"content":{"rendered":"

Depuis bien\u00adt\u00f4t neuf ans que j\u2019en\u00adseigne le web-design au CNAM, j\u2019ai tous les ans, au moins une per\u00adsonne qui est sur Mac et qui me demande quels sont les outils dont on dis\u00adpose sur Mac pour faire du web. En g\u00e9n\u00e9\u00adral le pro\u00adpos est accom\u00adpa\u00adgn\u00e9 d\u2019une dia\u00adtribe sur le fait que \u00ab sur Mac on n\u2019a rien de bien, alors que sur PC ils ont plein de trucs super et gratis ! \u00bb.<\/p>\n

H\u00e9 bien sachez-le, sur Mac on a cer\u00adtai\u00adne\u00adment le meilleur envi\u00adron\u00adne\u00adment pour faire du web toute pla\u00adte\u00adforme confon\u00addue. Je mod\u00e8re cepen\u00addant ce der\u00adnier pro\u00adpos avec les pla\u00adte\u00adformes Linux qui pos\u00ads\u00e8dent aus\u00adsi de tr\u00e8s bons outils gra\u00adtuits ; mais dont l\u2019in\u00addi\u00adgence de l\u2019in\u00adter\u00adface me laisse un peu froid.<\/p>\n

Pour argu\u00admen\u00adter mon pro\u00adpos, je vais le d\u00e9tailler en 2 phases : le ser\u00adveur et le code.<\/p>\n

Ser\u00adveur et MySQL<\/strong><\/p>\n

Pour ce qui est du ser\u00adveur, MacOS X (et sur\u00adtout depuis la der\u00adni\u00e8re ver\u00adsion 10.5.x \u00e0 l\u2019heure ou j\u2019\u00e9\u00adcris ces lignes) est vrai\u00adment g\u00e9nial, non seule\u00adment, il com\u00adporte un ser\u00adveur Apache (ver\u00adsion 2) d\u2019ins\u00adtal\u00adl\u00e9 (h\u00e9ri\u00adtage Unix oblige) avec une belle flo\u00adp\u00e9e de modules (dont php 5), Ruby, Python ; mais pas MyS\u00adQL par d\u00e9faut (l\u2019ins\u00adtal\u00adla\u00adteur que l\u2019on trouve sur le site de MyS\u00adQL<\/a> est d\u2019une sim\u00adpli\u00adci\u00adt\u00e9 enfan\u00adtine avec m\u00eame un module qui vient se gref\u00adfer dans les pr\u00e9\u00adf\u00e9\u00adrences de MacOS pour acti\u00adver ou d\u00e9sac\u00adti\u00adver le ser\u00adveur de base de donn\u00e9e.<\/p>\n

Il existe aus\u00adsi des solu\u00adtions toutes confi\u00adgu\u00adr\u00e9es tr\u00e8s pra\u00adtiques \u00e0 l\u2019\u00e9\u00adgale de ce que pro\u00adpose Easy\u00adPHP sous Win\u00addow$ ; MAMP<\/a> et XAMPP<\/a> en sont les meilleures repr\u00e9\u00adsen\u00adtants (j\u2019ai un petit faible pour le premier).<\/p>\n

Une fois le ser\u00adveur ins\u00adtal\u00adl\u00e9, il faut pou\u00advoir admi\u00adnis\u00adtrer les bases de don\u00adn\u00e9es. La solu\u00adtion la plus simple est soit d\u2019ins\u00adtal\u00adler php\u00adMyAd\u00admin sur votre ser\u00adveur (si vous avez fait le choix d\u2019u\u00adti\u00adli\u00adser le ser\u00adveur de MacOS) ou d\u2019u\u00adti\u00adli\u00adser la ver\u00adsion de php\u00adMyAd\u00admin qui est four\u00adnie avec les solu\u00adtions toutes pr\u00eates.<\/p>\n

Cepen\u00addant, il existe d\u2019autres outils pour conce\u00advoir et admi\u00adnis\u00adtrer vos tables.<\/p>\n

Pour la concep\u00adtion gra\u00adphique de vos ERD, SQLE\u00addi\u00adtor<\/a> est un outil de choix ; mais cher com\u00adpa\u00adr\u00e9 \u00e0 ce que l\u2019on trouve sur PC, c\u2019est le seul domaine o\u00f9 le PC est mieux \u00e9qui\u00adp\u00e9 que le Mac ; cepen\u00addant, depuis peu le d\u00e9ve\u00adlop\u00adpe\u00adment de MyS\u00adQL\u00adWork\u00adbench<\/a> \u00e0 \u00e9t\u00e9 repris et une nou\u00advelle ver\u00adsion est dis\u00adpo\u00adnible (encore assez instable ; mais elle \u00e0 le m\u00e9rite d\u2019exister.<\/p>\n

\"SQLEditor<\/a>

SQLE\u00addi\u00adtor un bon ERD mais payant<\/p><\/div>\n

\"MySQL<\/a>

MyS\u00adQL Work\u00adbench, un outil gra\u00adtuit mais encore instable<\/p><\/div>\n

Tou\u00adjours pour le d\u00e9ve\u00adlop\u00adpe\u00adment de BDD, un autre pro\u00adduit est tr\u00e8s utile et tr\u00e8s pra\u00adtique \u00e0 l\u2019u\u00adti\u00adli\u00adsa\u00adtion : Sequel Pro (ancien\u00adne\u00adment Cocoa\u00adMyS\u00adQL), qui contrai\u00adre\u00adment \u00e0 ce que pour\u00adrait lais\u00adser entendre son nom est un pro\u00adduit open-source gra\u00adtuit. Il vous pro\u00adpose de conce\u00advoir, navi\u00adguer et effec\u00adtuer des requ\u00eates sur vos tables de mani\u00e8re intui\u00adtive et dans une inter\u00adface r\u00e9ussie.<\/p>\n

\"Sequel<\/a>

Sequel Pro, un bon uti\u00adli\u00adtaire pour g\u00e9rer ses BDD MySQL<\/p><\/div>\n

Le code<\/strong><\/p>\n

Dans ce domaine l\u00e0, on est servit !<\/p>\n

Les choix que je vais expo\u00adser sont tr\u00e8s sub\u00adjec\u00adtifs car en mati\u00e8re de code, cha\u00adcun aura for\u00adc\u00e9\u00adment des pr\u00e9\u00adf\u00e9\u00adrences tr\u00e8s personnelles.<\/p>\n

Coda<\/a><\/p>\n

Coda est un pro\u00adduit tout int\u00e9\u00adgr\u00e9, je veux dire par l\u00e0 que c\u2019est \u00e0 la fois un client ftp per\u00adfor\u00admant, un \u00e9di\u00adteur de code puis\u00adsant pour le HTML, PHP, JavaS\u00adcript et aus\u00adsi un \u00e9di\u00adteur mixte de CSS (code et\/ou avec inter\u00adface gra\u00adphique) et un outil de pr\u00e9\u00advi\u00adsua\u00adli\u00adsa\u00adtion. Mais ce n\u2019est pas tout, puis\u00adqu\u2019il y aus\u00adsi un ter\u00admi\u00adnal pour se connec\u00adter en SSH sur le ser\u00adveur ain\u00adsi qu\u2019un r\u00e9f\u00e9\u00adren\u00adtiel HTML, PHP, CSS et JavaS\u00adcript. Outre les nom\u00adbreuses fonc\u00adtion\u00adna\u00adli\u00adt\u00e9s de Coda, il est sur\u00adtout un des pro\u00adduits toutes pla\u00adte\u00adformes confon\u00addues avec la plus belle inter\u00adface et tr\u00e8s pro\u00adduc\u00adtif \u00e0 l\u2019u\u00adsage. Un peu cher \u00e0 l\u2019a\u00adchat (~99 euros) ; mais c\u2019est un tr\u00e8s beau produit.<\/p>\n

\"Edition<\/a>

Edi\u00adtion du code et pr\u00e9\u00advi\u00adsua\u00adli\u00adsa\u00adtion en temps r\u00e9el<\/p><\/div>\n

\"Edition<\/a>

Edi\u00adtion d\u2019une CSS en mode code et en mode graphique<\/p><\/div>\n

Text\u00adMate<\/a> (~49 euros)<\/p>\n

Text\u00adMate c\u2019est la Rolls des \u00e9di\u00adteurs de code. \u00c0 c\u00f4t\u00e9 de Coda, il fait vrai\u00adment pauvre (gra\u00adphi\u00adque\u00adment) mais sa puis\u00adsance n\u2019est pas dans l\u2019in\u00adter\u00adface mais dans l\u2019\u00e9\u00addi\u00adtion du code (quel\u00adqu\u2019il soit puis que Text\u00adMate est \u00e0 l\u2019aise avec plus de 30 lan\u00adgages, sans comp\u00adter les bundles). Je ne pour\u00adrais pas en faire le tour ; mais rien que pour l\u2019in\u00adden\u00adta\u00adtion du code, il est top. L\u2019autre force de Tex\u00adMate c\u2019est son archi\u00adtec\u00adture modu\u00adlaire : les bundles. Ces der\u00adniers per\u00admettent d\u2019a\u00adjou\u00adter des fonc\u00adtions des tem\u00adplates des por\u00adtions de codes, le tout pro\u00adgram\u00admable dans le lan\u00adgage de votre choix (php, ruby, shell script\u2026) pour faire faire \u00e0 l\u2019\u00e9\u00addi\u00adteur ce que vous vou\u00adlez et si vous n\u2019\u00eates pas pro\u00adgram\u00admeur dans l\u2019\u00e2me la liste des bundles dis\u00adpo\u00adnibles sur le site de l\u2019\u00e9\u00addi\u00adteur est longue, tr\u00e8s longue. Si vous uti\u00adli\u00adsez des fra\u00adme\u00adwork php comme Cake\u00adPHP ou codeI\u00adgni\u00adter, il existe des bundles avec toutes les fonc\u00adtions dis\u00adpo\u00adnibles ce qui aug\u00admente encore la rapi\u00addi\u00adt\u00e9 de d\u00e9ve\u00adlop\u00adpe\u00adment (idem avec les fra\u00adme\u00adwork JavaS\u00adcript). Alors certes, Text\u00adMate n\u00e9ces\u00adsite un peu d\u2019ap\u00adpren\u00adtis\u00adsage mais la puis\u00adsance que l\u2019on en retire est ph\u00e9nom\u00e9nale.<\/p>\n

\"TextMate<\/a>

Text\u00adMate le spar\u00adtiate cachant sa richesse<\/p><\/div>\n

CSSE\u00addit<\/a> (~30 euros)<\/p>\n

Autant, Coda et Text\u00adMate sont des g\u00e9n\u00e9\u00adra\u00adlistes, autant, CSSE\u00addit est un sp\u00e9\u00adcia\u00adliste, il fait (assez) peu de choses mais il les fait tr\u00e8s bien. CSSE\u00addit est un \u00e9di\u00adteur mixte de fichiers CSS, comme Coda, il vous offre le choix d\u2019\u00e9\u00addi\u00adter \/ cr\u00e9er une CSS soit en mode code et\/ou en mode gra\u00adphique. CSSE\u00addit impl\u00e9\u00admente en interne un sys\u00adt\u00e8me de ver\u00adsio\u00adning (comme SVN ou CVS) tr\u00e8s pra\u00adtique lorsque l\u2019on fait de mul\u00adtiples essais dans le desi\u00adgn du site. En gros vous tra\u00advaillez sur un CSS, elle marche bien ; mais vous faites une petite modi\u00adfi\u00adca\u00adtion \u00e0 un endroit et d\u2019un seul coup plus rien ne marche ! En ayant sau\u00adve\u00adgar\u00add\u00e9 un Miles\u00adtone (une borne kilo\u00adm\u00e9\u00adtrique) vous pou\u00advez reve\u00adnir sans sou\u00adcis aux der\u00adniers \u00e9tats sau\u00adve\u00adgar\u00add\u00e9s ou \u00e0 celui de votre choix ; super pra\u00adtique ! Mais ce n\u2019est pas tout, CSSE\u00addit inclut aus\u00adsi un navi\u00adga\u00adteur qui per\u00admet de visua\u00adli\u00adser une page et d\u2019en explo\u00adrer \/ \u00e9di\u00adter les CSS, il per\u00admet aus\u00adsi de visua\u00adli\u00adser en temps r\u00e9el les modi\u00adfi\u00adca\u00adtions de la CSS dans la page, l\u00e0 encore, \u00e7a fait gagn\u00e9 un temps pr\u00e9cieux.<\/p>\n

\"Editions<\/a>

Edi\u00adtions du code avec CSSE\u00addit en mode code et en mode graphique<\/p><\/div>\n

\"Pr\u00e9visualisation<\/a>

Pr\u00e9\u00advi\u00adsua\u00adli\u00adsa\u00adtion d\u2019une page avec CSSE\u00addit et ana\u00adlyse de la CSS et des styles appliqu\u00e9s<\/p><\/div>\n

Ma com\u00adbi\u00adnai\u00adson gagnante : Text\u00adMate + CSSEdit<\/p>\n

Outils annexes au code<\/strong><\/p>\n

Client FTP<\/em><\/p>\n

Deux solu\u00adtions, l\u2019une gra\u00adtuite, l\u2019autre payante.<\/p>\n

Le gra\u00adtuit, c\u2019est Cyber\u00adDuck<\/a> petit mais puis\u00adsant client FTP avec une inter\u00adface claire et simple.<\/p>\n

Le payant, Trans\u00admit<\/a> (du m\u00eame \u00e9di\u00adteur que Coda), puis\u00adsant, capable d\u2019a\u00advoir plu\u00adsieurs ser\u00adveurs d\u2019ou\u00adverts simul\u00adta\u00adn\u00e9\u00adment.   (~30 euros)<\/p>\n

Ana\u00adlyse de CSS<\/em><\/p>\n

L\u00e0 encore un outil unique et pas cher : XyleS\u00adcope<\/a> (~19 euros)<\/p>\n

C\u2019est LE meilleur ana\u00adly\u00adseur de CSS du mar\u00adch\u00e9 toutes pla\u00adte\u00adformes confon\u00addues. Dans une fen\u00eatre vous pou\u00advez visua\u00adli\u00adser un site et en visua\u00adli\u00adser \u00e0 la fois le code et la(les) CSS \u00e0 la fois d\u2019une mani\u00e8re hi\u00e9\u00adrar\u00adchique et visua\u00adli\u00adser le code \u00e9ga\u00adle\u00adment, tout est tr\u00e8s clair et per\u00admet de gros pro\u00adgr\u00e8s rapi\u00adde\u00adment dans la com\u00adpr\u00e9\u00adhen\u00adsion des CSS.<\/p>\n

\"Les<\/a>

Les fonc\u00adtions de XyleScope<\/p><\/div>\n

\"D\u00e9tail<\/a>

D\u00e9tail du code sous XyleScope<\/p><\/div>\n

Sans oublier bien s\u00fbr les deux exten\u00adsions indis\u00adpen\u00adsables de Fire\u00adfox<\/a> \u00e0 savoir la barre web deve\u00adlop\u00adper<\/a> et fire\u00adbug<\/a>.<\/p>\n

Vous l\u2019au\u00adrez com\u00adpris, ormis la par\u00adtie MyS\u00adQL pour le reste l\u2019en\u00advi\u00adron\u00adne\u00adment de tra\u00advail sous MacOS est vraie\u00adment de tr\u00e8s haute tenue pour des prix rai\u00adson\u00adnables et pra\u00adti\u00adque\u00adment sans concu\u00adrents sur le march\u00e9.<\/p>\n","protected":false},"excerpt":{"rendered":"

Depuis bien\u00adt\u00f4t neuf ans que j\u2019en\u00adseigne le web-design au CNAM, j\u2019ai tous les ans, au moins une per\u00adsonne qui est sur Mac et qui me demande quels sont les outils dont on dis\u00adpose sur Mac pour faire du web. En g\u00e9n\u00e9\u00adral le pro\u00adpos est accom\u00adpa\u00adgn\u00e9 d\u2019une dia\u00adtribe sur le fait que \u00ab sur Mac on n\u2019a [\u2026]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[2,7],"tags":[17,42,19,8,114],"class_list":["post-121","post","type-post","status-publish","format-standard","hentry","category-informatique","category-web","tag-design","tag-developpement","tag-mac","tag-macos","tag-web"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2W6XU-1X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":7,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"predecessor-version":[{"id":136,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/posts\/121\/revisions\/136"}],"wp:attachment":[{"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/degraphiks.com\/blog\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}