FTP

Brackets FTP

Installatie van de extensie

Backets-ftp1.png
  • Druk in Brackets rechts bovenaan op het lego-blokje om het plugin scherm te openen. (of kies FILE > Extension Manager)
  • Type FTP in het zoekveld en klik op install achter Brackets Website  Admin
Backets-ftp2.png

Verbinding maken met de FTP-server

  • Klik op het groene HTML-5 icoon dat nu links op het scherm zit, boven de live preview en plugin-knoppen. 
  • In de settings, op tabblad local: zet de WYSIWYG editor uit, en de markers ook.
  • Stel bij base href de locatie op je computer in waar je je bestanden wil bewaren. Dit wordt een weerspiegeling (mirror) van de online bestanden, vandaar dat ik het hydric_online heb genoemd. Base href moet gelijk zijn aan de map waar je in aan het werken bent.
  • Op het tabblad Remote stel je de gegevens in van de Server.
  • Root kun je op /httpdocs/ laten staan, maar dan moet je onthouden dat jouw bestanden in submappen geplaatst moeten worden, namelijk in aeres1920/jouwnaam.
  • Je kunt ook voor root meteen /httpdocs/aeres1920/jouwnaam invullen. De bestanden uit je werkmap worden dan meteen naar de juiste map gesynchroniseerd en je ziet de andere mappen en bestanden op de server niet.
  • Druk op de knop  test om de verbinding te testen.

Lokaal vs Remote

  • Rechts onder heb je nu toegang tot een context menu. Bekijk wat je ziet in Local view vs Remote server.
    • Merk op: Je hebt toegang tot alle bestanden op de server, dus ook tot die van je mede-studenten en mijn oude bestanden. De oude bestanden van hydric.info staan op het hoogste niveau. De website werkt al een tijd niet meer, maar ik bewaar de bestanden nog even als backup. Het was een zowiezo een sandbox om vanalles uit te proberen. Ik heb hier met Google maps API’s gespeeld en verschillende CMS-en. Negeer al deze bestanden op het hoogste niveau. Stel je Root in als /httpdocs/aeres1920/, dan hoef je die andere bestanden ook niet meer te zien.
Brackets-ftp6.png

Bestanden uploaden

  • Kies nu Local view en maak een map aan met je naam onder aeres1920.
  • Zoek de map op op je computer en plaats je bestanden in deze map (.html-bestanden, .css-bestanden en afbeeldingen)
  • Upload je bestanden in Brackets (rechts-klik op een bestand en kies: upload)
  • Merk op: Onze website is nu nog simpel en dan is het niet erg als alle bestanden in 1 map staan. Bij grotere projecten is het best practice om bestanden uit te splitsen naar soort. De namen van deze mappen kunnen varieren. Img kan bijvoorbeeld ook images zijn. In plaats van JS (voor javascript) kan ook Scripts gebruikt worden, om verschillende scripts te verzamelen. 
Brackets-ftp7.png

Live editing

  • In Remote Server view, rechts-klik op een bestand en kies edit.
  • Je kunt nu je bestand bewerken. Als je opslaat (Ctrl+S) wordt het bestand automatisch geupload naar de server en is de online versie dus up to date.
  • Merk op dat als je nu op Live Preview drukt, je nog steeds naar een lokale kopie van het bestand kijkt. Deze kopie is uiteraard gelijk aan het online bestand. Maar je kunt dus ook in je browser naar de online pagina gaan en steeds op F5 drukken om de veranderingen te zien.

Leave a Reply

Your email address will not be published. Required fields are marked *