Quelltext betrachten

_notoc__

{| align=center style="background:lightyellow; border: 3px dotted black; font-size: 100%; width: 100%;"
|<br style=clear:both />
<div style="float:right;"><div class="parseHTML"><nowiki>
Wie Bilder hochgeladen werden, zeigt dir dieses Video genau:<br>
<object width="445" height="364"><param name="movie" value="http://www.youtube.com/v/JG6yDpiOw6Q&hl=de_DE&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JG6yDpiOw6Q&hl=de_DE&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed></object><br>
</nowiki></div>
<small>Dieses Video wurde erstellt von [[Benutzer:Sky]]</small>
</div>
== Bilder ==
Bilder können direkt auf den Stupidedia-Server geladen werden, wenn ihre Lizenzen das erlauben und sie mit korrekten und vollständigen Quellenangaben versehen werden.<br>
'''Bilder ohne korrekte Lizenz und/oder ohne korrekte bzw. unvollständige Quellenangabe werden innerhalb von 24 Stunden wieder gelöscht.''' Beachtet hierzu die [[Stupidedia:Bilderlizenzen|Lizenzbestimmungen]].<br>Um ein Bild hochzuladen, benutzt einfach den Link "Hochladen" unter der Suchleiste oder [[Spezial:Upload|'''klickt hier drauf''']].

<center>'''<font color="red">Extern eingebundene Bilder sind nicht erlaubt und werden bei Sichtung entfernt!</font>'''</center>
<div style=font-size:90%><br>'''Weshalb?'''<br>
Bis zum Sommer 2007 hatten alle User der Stupidedia noch die Möglichkeit, externe Bilder in die Artikel einzubinden. Technisch geht dies auch immer noch. Anfangs nutzten viele Schreiber externe Bilder für ihre Artikel. Nur ist es so, dass stupidedia.org gibt inzwischen schon länger als zwei Jahre existiert und so kam es vermehrt zu fehlenden Bildern. Wenn ein Bild bei uns "extern eingebunden" ist, haben wir keine Kontrolle darüber, ob es das Bild nach einiger Zeit überhaupt noch unter der angegebenen/verwendeten URL gibt! So fanden sich plötzlich viele viele Artikel, die nur noch den Quelltexte zu externen Bildern hatten, die es dort aber gar nicht mehr gab. Da solche Artikel niemandem nützen und der Humor vieler Artikel ja u.a. auf der Bebilderung beruht oder durch sie verstärkt wird, trennten wir uns von extern eingebundenen Bildern. Verständlich, oder?!</div> 

=== Standardbefehle um Bilder einzubinden ===
Bilder kann man entweder normal, mit Rahmen oder als Thumbnail darstellen, dazu muss folgendes angegeben werden:
{| border="2" cellpadding="3" style="border-collapse: collapse" align="center" width="75%"
! Form
! Ergebnis
|-
|
<nowiki>[[Datei:Beispiel.JPG]]</nowiki>
|
Bild in Originalgröße ohne Ramen
|-
|
<nowiki>[[Datei:Beispiel.JPG|Text]]</nowiki>
|
Kleiner Infotext hinzu
|-
|
<nowiki>[[Datei:Beispiel.JPG|framed]]</nowiki>
|
Das Bild behält seine Größe immer noch, wird aber in einen Rahmen gesetzt und landet rechts.
|-
|
<nowiki>[[Datei:Beispiel.JPG|framed|left|Text]]</nowiki>
|
Das Bild im Rahmen steht links neben dem fortlaufendem Artikel mit einem kleinen Zusatzt darunter.
|-
|
<nowiki>[[Datei:Beispiel.JPG|thumb]]</nowiki>
|
Das Bild bekommt einen Rahmen un wird auf 100px skaliert
|-
|
<nowiki>[[Datei:Beispiel.JPG|thumb|left|123px|Text]]</nowiki>
|
Der Text erscheint unter dem Rahmen und die Größe wird in Pixel angegeben. Diese Größe ist natürlich beliebig verstellbar. Das Bild wandert auf die linke Seite.
|}
==== Normal ====
'''<code><nowiki>[[Datei:Dateiname]]</nowiki></code>''' - Bindet das Bild in voller Größe an der Stelle ein, wo es im Text steht. Steht dieser Code ganz links, so ist auch das Bild links ausgerichtet.
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png]]</nowiki></code>''' wird zu:<br>
[[Datei:Football-small.png]]
==== Rahmen ====
'''<code><nowiki>[[Datei:Dateiname|framed]]</nowiki></code>''' - Bindet das Bild in voller Größe ein. Das Bild wird hiermit standardmäßig nach '''rechts''' ausgerichtet und hat einen Rahmen.
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|framed]]</nowiki></code>''' wird zu:<br>
[[Datei:Football-small.png|framed]]<br style=clear:both />
==== Thumbnail ====
'''<code><nowiki>[[Datei:Dateiname|thumb]]</nowiki></code>''' - Bindet das Bild in verminderter Größe ein. Das Bild wird hiermit standardmäßig nach '''rechts''' ausgerichtet und hat einen Rahmen. Die Thumbnailgröße könnt ihr in euren [[Spezial:Einstellungen|Einstellungen]] einstellen. Standard ist 180 Pixel Bildbreite. Das Symbol http://www.stupidedia.org/skins/common/images/magnify-clip.png kennzeichnet das Bild als Thumbnail. Um das Bild in voller Größe anzuzeigen, muss man es einfach anklicken. '''Hinweis:''' Im nachfolgenden Beispiel wird das Bild natürlich in voller Größe angezeigt, weil unser Beispielbild kleiner als 180 Pixel breit ist. Größere Bilder werden jedoch mit diesem Befehl kleiner angezeigt.
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|thumb]]</nowiki></code>''' wird zu:<br>
[[Datei:Football-small.png|thumb]]<br style=clear:both />
=== Größe einstellen ===
Bei hochgeladenen Bildern kann man die gewünschte Größe einstellen. Ihr müsst also ein Bild nicht so groß oder so klein hochladen, wie ihr es gerne einbinden würdet. Die Bildgröße lässt sich beim normalen Befehl und beim Thumbnail einstellen, <u>nicht aber beim Rahmenbefehl (framed)</u>. Die Bildgröße wird in Pixel angegeben. Dieser Wert stellt die Breite des Bildes ein (nur die Breite kann eingestellt werden, die Höhe passt sich danach an). Bilder können - unabhängig von ihrer Größe - entweder vergrößert oder verkleinert dargestellt werden. Beides ist möglich. <u>Bei Thumbnails kann man das Bild nur kleiner machen wie es ist, nicht größer!</u> '''Größer funktioniert nur mit dem normalen Befehl!''' Dies geschieht folgendermaßen:

Kleiner: '''<code><nowiki>[[Datei:Dateiname|40px]]</nowiki></code>'''<br>
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|40px]]</nowiki></code>''' Wird zu: [[Datei:Football-small.png|40px]]<br>
Größer: '''<code><nowiki>[[Datei:Dateiname|100px]]</nowiki></code>'''<br>
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|100px]]</nowiki></code>'''Wird zu: [[Datei:Football-small.png|100px]]<br>
Die Werte lassen sich beliebig frei Schnauze einstellen. Bei Thumbnails schreibt man einfach hinter den jeweiligen Befehl dann die Bildgröße nach einem weiteren senkrechten Strich | dahinter, zum Beispiel so: '''<code><nowiki>[[Datei:Football-small.png|thumb|30px]]</nowiki></code>''', was dann zu folgendem wird:
[[Datei:Football-small.png|thumb|30px]]<br style=clear:both />
=== Ausrichtung ===
Bilder können in 3 verschiedene Richtungen ausgerichtet werden. Dies funktioniert mit allen 3 Befehlen (Normal, Rahmen und Thumbnail). Dazu trennt man den Befehl mit einem weiteren senkrechten Strich | und fügt dann entweder '''left''', '''center''' oder '''right''' ein. Bei Rahmen und Thumbnails ist das '''right''' nicht nötig, weil diese Bilder immer nach rechts ausgerichtet werden. Den '''right''' Befehl braucht man also nur für die normale Variante zu nehmen. Hier einige Beispiele:
*Beispiel 1: '''<code><nowiki>[[Datei:Football-small.png|right]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|right]]<br style=clear:both />
*Beispiel 2: '''<code><nowiki>[[Datei:Football-small.png|framed|center]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|framed|center]]<br style=clear:both />
*Beispiel 3: '''<code><nowiki>[[Datei:Football-small.png|thumb|left]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|thumb|left]]<br style=clear:both />
=== Beschreibung ===
Zu jedem Bild sollte man auch eine Beschreibung schreiben. Dazu wird ein weiterer senkrechter Trennstrich gemacht, wo ihr dann schreibt was dort rein soll.
*Beispiel: '''<code><nowiki>[[Datei:Football-small.png|thumb|Test]]</nowiki></code>''' wird zu:<br>[[Datei:Football-small.png|thumb|Test]]<br style=clear:both />
=== Zusammenfassung ===
Ihr seht also, daß sich die ganzen Befehle in vielen Möglichenkeiten variieren lassen. Wenn ihr nun zum Beispiel ein Bild als thumbnail darstellen wollt, das verkleinert wird, nach links ausgerichtet ist und beschriftet ist, gebt ihr in dem Fall folgendes ein:<br>
'''<code><nowiki>[[Datei:Football-small.png|thumb|40px|left|Test]]</nowiki></code>''' Daraus wird dann:[[Datei:Football-small.png|thumb|40px|left|Test]]<br style=clear:both />
'''Hinweis:''' Ihr braucht nur die Befehle anzugeben, die ihr auch verwenden wollt. Wenn ihr z.B. das Bild einfach ganz normal als Thumbnail (standardmäßig nach rechts ausgerichtet) ohne Größenveränderung, aber mit Beschreibung platzieren wollt, so lasst einfach die Befehle für Ausrichtung und Bildgröße weg!<br>
'''Übrigens:''' Bilder positioniert man am besten direkt an den Anfang eines Artikels, und bei Zwischenüberschriften direkt darunter. Damit man den nächsten Absatz nicht zerdrückt, sollte man VOR dem nächsten Absatz den Code '''<nowiki><br style=clear:both /></nowiki>''' platzieren. Also bei einer Zwischenüberschrift kommt zuerst darunter das Bild, dann der Text und DANACH dieser Code.

=== Galerie ===
Mehrere Bilder kann man in einer Galerie darstellen. Dazu kann man auch Beschreibungen einfügen. Die Bilder werden hierbei nicht in die eckigen Klammern [[]] geschrieben!<br>
Nachfolgendes Beispiel sollte selbsterklärend sein ;-)
<pre><gallery>
Datei:Gold.png
Datei:Silber.png|Test
Datei:Bronze.png|Test 2
</gallery></pre>
Daraus wird dann:
<gallery>
Datei:Gold.png
Datei:Silber.png|Test
Datei:Bronze.png|Test 2
</gallery>

=== Bild in Bild ===
Wenn ihr ein Bild in ein anderes hineinsetzen wollt geht das zum Beispiel so :

<nowiki>[[Datei:Name des Hauptbildes|Größe in px]]
<div style="position:relative; top (bottom):-Position von oben (oder unten) in px; left (oder right):Position von links (oder rechts) in px ;">[[Datei:Name des einzufügenden Bildes|Grösse in px]]</div></nowiki> 

Lange Rede, kurzer Sinn, ein Beispiel: <br>
<nowiki>[[Datei:Weltraum.jpg|80px]]
<div style="position:relative; top:-65px; left:25px;">[[Datei:Feuerschale2.gif]]</div></nowiki>

wird zu :

[[Datei:Weltraum.jpg|80px]]
<div style="position:relative; top:-65px; left:25px;">[[Bild:Feuerschale2.gif]]</div>
=== Linkbild ===
*3 Möglichkeiten wie ihr ein Bild zu einem Link machen könnt, so daß man beim draufklicken auf einem Artikel landet:
'''1. [[Vorlage Diskussion:Link-Bild|Vorlage:Link-Bild]]''' 

Code:<nowiki>{{Link-Bild|Beispiel.jpg|150|100|Link}}</nowiki>

'''2. html'''

<nowiki><span class="plainlinks">[http://www.''Link der Zielseite'' http://www.''Bildlink (nicht Bild:!'')] </span></nowiki>

'''3. imagemap'''

<nowiki><imagemap> 
Datei:Name des Bildes
default[[Link-Text]] 
desc none 
</imagemap></nowiki>

=== Sonstiges ===
Folgendes soll hier noch angesprochen werden:

#Wie ihr große Bilder oder auch Panoramabilder in ein Scrollfenster einfügen könnt, erfahrt ihr [[Vorlage:Scroll|'''hier''']]
#Lade keine urheberrechtlich geschützten Bilder in der Stupidedia hoch (siehe '''[[Spezial:Hochladen|hier]]''')!
#Ein Bild braucht eine Quelle '''und''' eine Lizenz. Suche am besten "freie Bilder", z.B. '''[[Stupidedia:Bilddatenbanken|HIER]]'''!
#Manche wenige Artikel brauchen gar keine Bilder.
#Achte auf die Platzierung! Der Artikel soll ja am Ende harmonisch wirken und nicht total durcheinander.<br><br>
<center>'''Wenn ihr noch Fragen haben solltet, so stellt diese [[Stupidedia Diskussion:Userportal|hier]]'''</center>
|}




====== Videos von Blip.TV ======

Videos von [[http://kantel.blip.tv/|Blip.TV]] kann man auf verschiedene Arten in die eigene Webseite einbinden:

===== Einbinden via JavaScript =====

<html>
<script type="text/javascript" src="http://blip.tv/scripts/pokkariPlayer.js?ver=2007111701"></script><script type="text/javascript" src="http://blip.tv/syndication/write_player?skin=js&posts_id=497288&source=3&autoplay=true&file_type=flv&player_width=400&player_height=300"></script><div id="blip_movie_content_497288"><a rel="enclosure" href="http://blip.tv/file/get/Kantel-1LaufDesWinterturniers20072008InSaalow873.flv" onclick="play_blip_movie_497288(); return false;"><img title="Click to play" alt="Video thumbnail. Click to play" width="400" height="300" src="http://blip.tv/file/get/Kantel-1LaufDesWinterturniers20072008InSaalow873.flv.jpg" border="0" title="Click To Play" /></a></div></html>

\\





===== Einbinden via Object-Tag =====

Das ist eigentlich die Form, die mir am Besten gefällt. Mit ihr kann man es dem Leser erlauben, das Video sofort in die eigene Webseite einzubinden. Außerdem gibt es einen Vollbild-Modus und die Möglichkeit, den //Channel// in [[http://www.getmiro.com/|Miro]] oder iTunes zu abonnieren. Sollte ein [[installierte_plugins|PlugIn]] dafür schreiben.

<html>
<object type="application/x-shockwave-flash" data="http://blip.tv/scripts/flash/showplayer.swf?enablejs=true&file=http%3A//blip.tv/rss/flash/497288&feedurl=http%3A//kantel.blip.tv/rss/&autostart=false&brandname=Der%20Schockwellenreiter&brandlink=http%3A//kantel.blip.tv/" width="400" height="330" allowfullscreen="true" id="showplayer"><param name="movie" value="http://blip.tv/scripts/flash/showplayer.swf?enablejs=true&file=http%3A//blip.tv/rss/flash/497288&feedurl=http%3A//kantel.blip.tv/rss/&autostart=false&brandname=Der%20Schockwellenreiter&brandlink=http%3A//kantel.blip.tv/" /><param name="quality" value="best" /></object></html>

Nicht vergessen, 30 Pixel für die Steuerleiste hinzuzuaddieren...





===== Pop Up Player =====

<html>
<a rel="enclosure" href="http://blip.tv/file/get/Kantel-1LaufDesWinterturniers20072008InSaalow873.flv" onclick="window.popup_player_497288 = window.open('http://blip.tv/file/491910/?skin=popup&file_type=flv','post_497288','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"><img src="http://blip.tv/file/get/Kantel-1LaufDesWinterturniers20072008InSaalow873.flv.jpg" /></a>
<p>
<a rel="enclosure" href="http://blip.tv/file/get/Kantel-1LaufDesWinterturniers20072008InSaalow873.flv" onclick="window.popup_player_497288 = window.open('http://blip.tv/file/491910/?skin=popup&file_type=flv','post_497288','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;">Klick öffnet Video im neuen Fenster</a></p></html>