{"id":9847,"date":"2020-06-18T10:04:04","date_gmt":"2020-06-18T08:04:04","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=9847"},"modified":"2022-04-11T13:38:45","modified_gmt":"2022-04-11T11:38:45","slug":"kostenlose-werkzeuge-webworker","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/","title":{"rendered":"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber"},"content":{"rendered":"\n

Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir acht Top-Tools vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web. <\/p>\n\n\n\n\n\n\n\n

1. Datentransport: FileZilla<\/h2>\n\n\n\n

Der Klassiker unter den FTP-Clients hei\u00dft FileZilla. Mit der freien Software lassen sich Dateien verschl\u00fcsselt zwischen Computer und Webspace transportieren. FileZilla<\/a> gibt es f\u00fcr alle g\u00e4ngigen Betriebssysteme. Wie die Verbindung zum Webspace eines STRATO Hosting<\/a> Pakets aufgebaut wird, beschreiben wir hier<\/a>.<\/p>\n\n\n\n

\"\"
FileZilla: Im oberen Bereich ist der Verlauf des Datentransfers zu sehen, darunter links werden die lokalen Dateien und rechts der Webspace angezeigt.<\/figcaption><\/figure>\n\n\n\n

2. Code-Editor: Visual Studio Code<\/h2>\n\n\n\n

Visual Studio Code<\/a> von Microsoft hat alles, was ein guter Editor haben muss: Syntaxhervorhebung f\u00fcr die wichtigsten Sprachen, Autovervollst\u00e4ndigung und Debugging. \u00dcber die sogenannten Extensions kannst Du das Programm um viele Funktionen erweitern. Visual Studio Code ist f\u00fcr Windows, Mac OS und Linux verf\u00fcgbar. <\/p>\n\n\n\n

\"\"
Mit der Syntaxhervorhebung lassen sich Strukturen schnell erkennen. Die Miniaturansicht rechts sorgt f\u00fcr einen besseren \u00dcberblick<\/figcaption><\/figure>\n\n\n\n

3. Bildbearbeitung: Gimp<\/h2>\n\n\n\n

Es gibt viele kostenlose Bildbearbeitungsprogramme, doch kaum eins hat einen solchen Funktionsumfang: Werkzeuge, Filter, Ebenen, Masken, Plugins und vieles mehr. Seit Version 2.10 unterst\u00fctzt die Software auch 32-Bit-Farbtiefe. Das bedeutet mehr Bearbeitungsspielraum und feinere Farbverl\u00e4ufe. Einsteiger haben aber eine steile Lernkurve vor sich. Darum gehen wir in einem anderen Beitrag auf die Grundlagen der Bildbearbeitung mit Gimp<\/a> ein. <\/p>\n\n\n\n

\"\"
Gimp im Einzelfenster-Modus: Werkzeuge (links), Leinwand mit Bild (Mitte), Ebenen (rechts)<\/figcaption><\/figure>\n\n\n\n

4. Gemeinfreie Bilder: Pixabay<\/h2>\n\n\n\n

Apropos Bilder: Eine riesige Auswahl findest Du auf Pixabay. Du darfst die Bilder verwenden und ver\u00e4ndern \u2013 auch zu kommerziellen Zwecken. Selbst ein Bildnachweis ist nicht n\u00f6tig. Du musst Dich nur auf der Website registrieren, um Fotos in h\u00f6herer Aufl\u00f6sung herunterladen zu k\u00f6nnen. Die Nutzung ist kostenlos, Spenden aber m\u00f6glich und erw\u00fcnscht.<\/p>\n\n\n\n

\"\"
Pixabay stellt nach eigenen Angaben \u00fcber 1,7 Millionen Bilder kostenlos zur Verf\u00fcgung.<\/em> <\/figcaption><\/figure>\n\n\n\n

5. Entwickler-Werkzeuge der Browser<\/h2>\n\n\n\n

Mit den Entwickler-Werkzeugen der g\u00e4ngigen Browser kannst Du Websites untersuchen, bearbeiten und debuggen. Um die Funktion in Firefox und Chrome zu aktivieren, dr\u00fccke einfach die F12-Taste w\u00e4hrend Du Dich auf einer Website befindest (bei Safari: Einstellungen<\/em> \u2192 Erweitert <\/em>\u2192 Men\u00fc \u201eEntwickler\u201c in der Men\u00fcleiste anzeigen<\/em>). So lassen sich bequem einzelne Elemente untersuchen und live bearbeiten. <\/p>\n\n\n\n

\"\"
So sehen die Entwickler-Werkzeuge in Chrome aus.<\/figcaption><\/figure>\n\n\n\n

Au\u00dferdem kannst Du mit den Entwickler-Werkzeugen testen, wie Deine Website auf mobilen Ger\u00e4ten aussieht (Firefox: Men\u00fc<\/em> \u2192 Web-Entwickler<\/em> \u2192 Bildschirmgr\u00f6\u00dfen testen<\/em>, Chrome: Men\u00fc<\/em> \u2192 Weitere Tools<\/em> \u2192 Entwicklertools <\/em> \u2192 Toggle device toolbar<\/em>).<\/p>\n\n\n\n

\"\"
Oben gibst Du die Aufl\u00f6sung des simulierten Endger\u00e4ts ein (hier: Firefox).<\/figcaption><\/figure>\n\n\n\n

6. Farbwahl: coolors<\/h2>\n\n\n\n

Beim Webdesign kommt es auf die richtige Farbkombination an. Das Online-Tool coolors<\/a> hilft Dir dabei mit besonders vielen Funktionen. So kannst Du nicht nur Farben, Zusammenstellungen und die entsprechenden Farbcodes anzeigen lassen \u2013 das Tool simuliert sogar die Wahrnehmung durch farbenblinde Personen. Praktisch ist au\u00dferdem die M\u00f6glichkeit, die gew\u00e4hlten Farben in verschiedenen Formaten zu exportieren. <\/p>\n\n\n\n

\"\"
Bei coloors kannst Du ein Bild hochladen und daraus Farben aufnehmen. Mit der Farbpipette von Gimp geht das genauer.<\/figcaption><\/figure>\n\n\n\n

7. Plattform f\u00fcr gemeinsames Entwickeln: GitHub<\/h2>\n\n\n\n

Eine Versionsverwaltung ist vor allem wichtig, wenn mehrere Entwickler an einem Projekt arbeiten. So k\u00f6nnen alle Beteiligten nachvollziehen, wer was wann gemacht hat. F\u00fcr diesen Zweck gibt es GitHub<\/a>: Hier werden s\u00e4mtliche Code-\u00c4nderungen dokumentiert. Als Projektverantwortlicher kannst die Anpassung pr\u00fcfen, ggf. \u00e4ndern und \u00fcbernehmen. Au\u00dferdem kannst Du die Plattform auch nutzen, um eine bestehende Applikation zu optimieren. <\/p>\n\n\n\n

\"\"
Bei GitHub hast Du die M\u00f6glichkeit, Aufgaben zu priorisieren und mit Schlagworten zu versehen.<\/figcaption><\/figure>\n\n\n\n

8. Webdesign-Baukasten: Bootstrap<\/h2>\n\n\n\n

Bootstrap<\/a> ist ein Open-Source-Framework f\u00fcr Webdesigner mit fertigen Buttons, Navigationsleisten, Grid-Systemen, Tabellen und vielem mehr. Als Basis dienen vorformatierte CSS-Komponenten, grafische Elemente und JavaScript. Die ben\u00f6tigten Dateien und Code-Bl\u00f6cke werden auf GitHub ver\u00f6ffentlicht und k\u00f6nnen frei verwendet werden. Das Framework ist komplex, aber weit verbreitet. Deshalb findest Du im Netz viele Anleitungen, die Dir beim Einstieg helfen werden. <\/p>\n\n\n\n

\"\"
Bootstrap kommt auf vielen responsiven Websites zum Einsatz.
<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Hinweis: Dieser Beitrag wurde erstmals am 29.01.2016 ver\u00f6ffentlicht. Wir haben ihn im Juni 2020 auf einen aktuellen Stand gebracht.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir acht Top-Tools vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web. <\/p>\n","protected":false},"author":191,"featured_media":9850,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[485,490],"tags":[225,149],"acf":[],"yoast_head":"\n8 kostenlose Werkzeuge f\u00fcr Website-Betreiber<\/title>\n<meta name=\"description\" content=\"Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir 6 Top Programme vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber\" \/>\n<meta property=\"og:description\" content=\"Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir 6 Top Programme vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-18T08:04:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T11:38:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2016\/01\/werkzeuge-webworker.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vlad_perun\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/\",\"name\":\"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2020-06-18T08:04:04+00:00\",\"dateModified\":\"2022-04-11T11:38:45+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\"},\"description\":\"Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir 6 Top Programme vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"contentUrl\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\",\"https:\/\/twitter.com\/vlad_perun\",\"https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic\"],\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber","description":"Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir 6 Top Programme vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber","og_description":"Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir 6 Top Programme vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2020-06-18T08:04:04+00:00","article_modified_time":"2022-04-11T11:38:45+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2016\/01\/werkzeuge-webworker.jpg","type":"image\/jpeg"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_creator":"@vlad_perun","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"Vladimir Simovi\u0107","Gesch\u00e4tzte Lesezeit":"3 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/","name":"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2020-06-18T08:04:04+00:00","dateModified":"2022-04-11T11:38:45+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388"},"description":"Webdesigner und Website-Betreiber brauchen verl\u00e4ssliche Werkzeuge. Wir stellen Dir 6 Top Programme vor \u2013 f\u00fcr mehr Effizienz und Spa\u00df bei der Arbeit im Web.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/kostenlose-werkzeuge-webworker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"8 kostenlose Werkzeuge f\u00fcr Website-Betreiber"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","contentUrl":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.","sameAs":["https:\/\/www.vladimir-simovic.de","https:\/\/twitter.com\/vlad_perun","https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic"],"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9847"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/191"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=9847"}],"version-history":[{"count":23,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9847\/revisions"}],"predecessor-version":[{"id":96362,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/9847\/revisions\/96362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/9850"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=9847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=9847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=9847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}