12,301
edits
m (→Konvertieren) |
|||
(10 intermediate revisions by 2 users not shown) | |||
Line 47: | Line 47: | ||
Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''. | Da es mit CC (und dem Internet) so einfach geworden ist, "freies" Material zu publizieren, lässt sich davon auch viel finden und im Zweifel erklärt uns CC die Lizenz auch in einfachen Worten. ''(im Hintergrund ist CC auch eine Organisation, die u.a. ein Rudel Anwälte bezahlt, die eine "echte" Gesetzsprech-Version der Lizenz für alle möglichen Länder schreiben, damit die Lizenzen auch rechtlich gültig sind)''. | ||
[[Sources/Images|Quellensammlung]] | Eine Liste von Sammlungen und Suchmaschinen befindet sich hier: [[Sources/Images|Quellensammlung]] | ||
==Web-Bausteine== | |||
All-in-One Starterkit: [http://www.initializr.com/builder?boot-hero&jquerymin&h5bp-iecond&h5bp-chromeframe&h5bp-favicon&modernizrrespond&izr-emptyscript&boot-css&boot-scripts herunterladen] (aktuelle Empfehlung 2013-01) | |||
* [http://html5boilerplate.com html5boilerplate.com] bietet eine kostenlose 'leere' [[HTML]]-Seite, die alles mitbringt, an was man heutzutage denken muss. Gibt es unter [http://www.initializr.com initializr.com] auch in verschiedenen Geschmacksrichtungen inkl. Extras, zum selbst zusammenflicken (oder oben das Starterkit nehmen). | |||
* [http://getbootstrap.com boostrap] ist eine modernere Basis für Webseiten als die Styles, die der Browser schon mitbringt. Vollständig dokumentiert, erhält außer den Defaults für [[HTML]]-Elemente auch "Komponenten", also häufig gebrauchte Dinge, die aus mehreren Elementen bestehen. JavaScript-Plugins gibt es auch, alle lassen sich (auch) ohne JavaScript zu schrieben bedienen (sondern per HTML-Code). [http://holdirbootstrap.de Deutsche Doku] gibt es auch. | |||
* [http://jquery.com jQuery] — JavaScript im Browser geht auch ohne, macht aber nicht halb so viel Spaß | |||
==Hosting== | ==Hosting== | ||
Line 67: | Line 77: | ||
* Domain extra kaufen | * Domain extra kaufen | ||
* [http://pages.github.com kostenlos bei github hosten] | * [http://pages.github.com kostenlos bei github hosten] und [https://help.github.com/articles/setting-up-a-custom-domain-with-pages die Domain einrichten] | ||
==Audio/Video einbinden== | |||
===Einfach=== | |||
Bei einem Dienst hochladen, dort den HTML-Code ('Embed') kopieren und in die eigene Seite einfügen. Am besten immer auch einen normalen, direkten Link zur entsprechenden Seite des Videos unter das eingebettete Video tun, auf manchen Geräten geht das Einbetten nicht zuverlässig oder es gibt eine extra App für den Dienst, …. | |||
Beispieldienste Video: [http://youtube.com youtube], [http://vimeo.com vimeo] | |||
Beispieldienste Audio: [http://soundcloud.com soundcloud], [http://mixcloud.com mixcloud] | |||
'''Vorteil''': Zusätzliche Zuschauer durch eingebaute soziale Netzwerke | |||
'''Nachteil''': Alle deine Besucher laden nicht nur von dir Daten, sondern auch von dem Videodienst, meist also aus den USA. | |||
===DIY=== | |||
====Konvertieren==== | |||
Siehe auch: [[Video tools]] | |||
Es gibt leider nicht 1 Format, das von allen Browsern unterstützt wird. Zur Zeit ist die beste Kombination jeweils: | |||
Audio: '''OGG''', '''''AAC''' (optional)'', '''MP3''' | |||
Video: '''MP4''' und '''WebM''' | |||
* [http://www.mirovideoconverter.com Miro Video Converter (MiroVC) herunterladen] | |||
* MiroVC installieren. ''Windows-User aufgepasst'': schön die Häkchen wegklicken, die eine "tolle" Browser-Toolbar installieren wollen | |||
[[File:miro-video-converter_1-settings.png|500px]] | |||
[[File:miro-video-converter_2-mp4.png|500px]] | |||
[[File:miro-video-converter_3-clear.png|500px]] | |||
[[File:miro-video-converter_4-webm.png|500px]] | |||
====Einbetten (HTML)==== | |||
[https://developer.mozilla.org/docs/Web/HTML/Element/audio <'''audio'''> tag doku] | |||
<source lang="html5"> | |||
<audio controls="controls"> | |||
<source src="audio.ogg" type="audio/ogg"><!-- Picked by Firefox --> | |||
<source src="audio.aac" type="audio/aac"> <!-- Picked by Safari --> | |||
<source src="audio.mp3" type="audio/mpeg"> <!-- Hopefully picked by anything else --> | |||
<!-- Only shown if it can't be played --> | |||
I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>? | |||
</audio></source> | |||
[https://developer.mozilla.org/docs/Web/HTML/Element/video <'''video'''> tag doku] | |||
<source lang="html5"> | |||
<video controls> | |||
<source src="video.ogg" type="video/ogg"> <!-- Picked by Firefox, Chrome --> | |||
<source src="video.mov" type="video/quicktime"> <!-- Picked by Safari --> | |||
<!-- Only shown if it can't be played --> | |||
I'm sorry; your browser doesn't support HTML5 video. Maybe <a href="http://browsehappy.com">get a new one</a>? | |||
</video> | |||
</source> | |||
=="Hardware": Minicomputer, Löten…== | =="Hardware": Minicomputer, Löten…== |