+- Bronies.de (https://www.bronies.de)
+-- Forum: Bronytum (https://www.bronies.de/forumdisplay.php?fid=23)
+--- Forum: Pony-Software & Brony-Web (https://www.bronies.de/forumdisplay.php?fid=29)
+--- Thema: FaceTV (/showthread.php?tid=14583)
FaceTV - mikro - 30.08.2013, 01:43
Tja... ich weis nicht, ob das nun als 'Service' zu werten ist - ich hoffe mal, dass mein armer, kleiner vServer darunter nicht leiden wird
...Jedenfalls wollte ich mich schon länger mit aktuellem HTML5 und jQuery beschäftigen und hatte eine Idee für eine simple Webseite zur Zeitverschwendung.
Die MyLittleFaceWhen Seite ist ja jedem hier bekannt und wenn man dort auf 'Random' geht, hat man lange was zu tun.. allerdings muss man noch selbst scrollen - wie rückständig
Mir kam dann die Idee, sowas wie GifTV auf die Seite zu übertragen und so wurde FaceTV geboren.
Eine kleine Seite, die mit jQuery und etwas HTML Akrobatik die API von MyLittleFaceWhen verwendet, um einem ein Non-Stop 'Fernsehprogram' von Pony-Reaction Faces zu bringen...
Wer will, kann da gern mal reinschauen - mir fehlt noch eine gute Fernseher-Grafik im FiM-Stil - mal schauen, ob ich mich dazu aufraffe :-D
FaceTV
Das Rauschen über den Bildern ist künstlich - weil halt Fernseher und so...
Ich habs bisher nur mit Chrome und FireFox getestet - läuft in beiden gut. Alte Internet Explorer werden nicht unterstützt.
Ein Wort der Warnung - es können Bilder vorkommen, die evtl. NSFW sind. Noch ist kein Filter eingebaut.
Kommentare und Verbesserungsvorschläge nehme ich gern an - den Code darf sich natürlich auch jeder klauen
Der Hauptgrund, warum dies poste ist eigentlich, damit andere evtl. dadurch eigene Ideen kriegen.
RE: FaceTV - Basket Case - 30.08.2013, 14:54
Sehr tolles Gimmick
Das einzige was mir auffällt ist, dass es sich leicht aufhängt wenn man zuschnell zappt.
Achja, und es wär gut wenn man die Geschwindigkeit vom Autozap selber einstellen könnte
RE: FaceTV - mikro - 30.08.2013, 21:35
Danke fürs Feedback
Ich konnte das mit dem Hängen zwar nicht reproduzieren, aber ich habe eine mögliche Fehlerquelle gefunden und was eingebaut, dass es vielleicht behebt...
Gibt halt immer N+1 Bugs...
Das mit der ZapGeschwindigkeit ist ein guter Punkt - werd ich noch einbauen - gutes Training
RE: FaceTV - rdmlp - 01.09.2013, 19:29
Naja, als Service würde ich es weniger bezeichnen. Allerdings durchaus als kleinen Zeitvertreib für Bronies. Vielleicht könnte man noch eine Auswahl mehrerer Fernseher einbauen, für Bronies die nicht so auf diese alten Dinger stehen. Da könnte man dann auch das Rauschen weglassen.
Was dem HTML angeht, nunja mal paar Tipps, weil da musst du wohl noch ordentlich was lernen
Jedes HTML verlangt einen Doctype, wenn man das Dokument Valide schreiben möchte.
HTML5 hat folgenden Doctype: <!doctype html>
Diesen musst ganz an den Anfang des HTML Dokuments setzen.
Du hast im head nicht angegeben, in welcher Codierung deine Webseite geschrieben ist. Um mehr Möglichkeiten zu haben, empfehle ich dir UTF-8. Wichtig ist aber, dass du dann einen Editor benutzt, der das Dokument in UTF-8 schreibt. Beispiel Notepad++ für Windows. Und immer schön drauf achten, dass UTF-8 eingestellt ist. Ansonsten zeigen die Webbrowser nur dähmliche Fragezeichen bei Sonderzeichen. Dies kann übrings auch passieren, wenn du dieses garnicht da ist! Nähmlich dann, wenn ein Webbrowser aufgrund des fehlenden Meta-tags im head davon ausgeht, dass deine Seite in UTF-8 geschrieben ist. Mit folgendem Code musst du im headbereich reinsetzen:
Code:
<meta http-equiv="content-type" content="text/html;charset=utf-8">Wenn du statts UTF-8 doch lieber eine andere Codierung benutzen möchtest, du zudem etwas einfacher ist, nimm: windows-1252 .
Code:
<meta http-equiv="content-type" content="text/html;charset=windows-1252">Nimm aus allen <img src="" /> das / raus. dies ist in HTML5 nicht nötig und wird vom W3C Validator glaube ich sogar als Warnung oder Fehler angezeigt. Was in <img> Tags bei HTML5 jedoch rein muss ist das Atribute: alt=""
Dort schreibst du einen beliebigen Text rein. Sollte das Bild warum auch immer mal nicht angezeigt werde können, wird anstelle des Bildes der Text angezeigt, welcher im alt="" drin steht.
Code:
<img src="" alt="">Ein Atribute welches zudem nicht mehr verwendet wird ist: border="0" .
Dies kann inzwischen mit CSS bestimmt werden. Um für die komplette Seite
unter allen <img> Tags einen Border zu verhindern (wobei dies anfürsich nur bei Verlinkungen auftritt) kannst du in CSS folgenden Code einsetzen.
Code:
img {
border: 0;
}Ein komplettes Tag, welches nicht mehr verwendet wird ist das <center>-Tag.
Auch das kann heutzutage über CSS gemacht werden. Da deine komplette Webseite Mittig zentriert ist, dürfte das nicht als zu schwer werden.
Verwende folgenden Code:
Code:
body {
width:[Seitenbreite]px;
margin:0 auto;
}In das width schreibst du deine Seitenbreite rein.
margin: 0 auto; zentriert die Seite dann automatisch
in die Mitte. Ein guter Wert für width ist width: 980px;
Damit hast du einen guten Mittelwert von dem was heutige
Bildschirme so haben.
Um alles was auf deiner Webseite zu sehen ist, dann ebenfalls mittig
zu zentrieren (bisauf deine Überschrift, da diese nicht im <div id="container"> befindet), musst du folgenden Code benutzen:
Code:
#container {
text-align:center;
}Um die Überschrift ebenfalls zu zentrieren musst du entweder <div id="container"> über diese setzen, oder die Überschrift in eine eigene
<div id=""> setzen. Diese müsstest du dann mit CSS dann natürlich
ebenfalls den Befehl: text-align:center; geben.
Du hast zudem im <body>-Tag den Atribute: style="{background-color=#000000}" hineingesetzt. Dieser ist jedoch unnötig, da dies bereits auch in der Stylesheets-datei steht.
So, was für ein langer Beitrag
Also wie gesagt, du musst die wirklich noch viel mit HTML und CSS auseinander setzen. Alles was du in dieser Seite gemacht hast, fumktioniert zwar, da die meisten Webbrowser auch die alten Tags und Atribute noch verstehen, aber ich beziehe mich mal auch die meisten und noch .Ja, Webseiten sind eine Kunst für sich
RE: FaceTV - mikro - 01.09.2013, 23:09
Erstmal - Danke fürs Feedback zum FaceTV - Rauschen mach ich vielleicht noch optional - aber irgendwie ist dann der Sinn dahin. Dann kommt noch einer an und will die Bilder in Originalgröße...
Zu deiner HTML Orgie:
Ich hatte nicht direkt um Feedback zum internen Aufbau der Seite gebeten - aber natürlich auch nichts dagegen gesagt. Die ganze Sache hab ich mal eben schnell zusammengeschustert um das Konzept zu testen.
Im Prinzip find ich es natürlich schön, dass du dir Zeit genommen hast, mich auf einige technische Feinheiten hinzuweisen, aber ich möchte dir nun auch ein wenig Feedback geben, zur Art, wie du Feedback gibts...
Zuallererst einmal - ich habe durchaus Ahnung von HTML und dem ganzen Wahnsinn drumherum - hier ging es speziell um ein paar Dinge, die mir etwas neuer sind, wie der canvas und jQuery. Als ich das letzte mal wirklich viel mit HTML gemacht habe, musste man sich noch mit Browsern rumschlagen, die teilweise keine Transparenz in PNGs konnten...
Eine Sache zu deinem Einstieg: In Textmedien ist es schwer, Emotionen aus dem Text zu erkennen. Beim ersten Lesen dachte ich spontan: 'Mann, was fürn Großkotz'. Aber mitlerweile glaube ich, dass du einfach nur helfen willst, und dein gesammeltes Wissen darstellen willst. Es klingt halt bei dir nur so, also wenn du mir komplettes Unwissen unterstellst - "Ansonsten zeigen die Webbrowser nur dähmliche Fragezeichen bei Sonderzeichen" - you don't say?!
Und dann noch wegen Grammatik: klar - hier ist nur ein Forum, aber trotzdem sollte man wenigstens einmal drüber lesen, was man postet:
- "Dies kann übrings auch passieren, wenn du dieses garnicht da ist!" - ah.. ja.. alles klar ;-D
Dein Schlussfazit ist auch etwas unglücklich. Wenn du schon jemanden sagst, dass er noch viel lernen muss (warum nicht: 'kann' oder 'sollte' ?). Dann schick ihn doch auch in die richtige Richtung. W3Schools oder sowas wäre doch ein netter Schlusslink gewesen - oder sogar sowas wie SelfHTML :-)
Nun aber mal Punkt 1:
Du bist keine Autorität in Sachen HTML - aka 'Warum sollte ich dir glauben ?'. Wenn du also jemanden korrigieren willst, gib an, auf welche Quelle du dich beziehst. In diesem Falle das W3C - aber das weist du ja. Was du aber - anscheinend - nicht weist, oder einfach nur nicht angesprochen hast, ist, dass es zwei Arten gibt, mit HTML5 umzugehen. HTML und XHTML. Ich komme von Beruf wegen aus der XML Ecke und neige dazu, eher XHTML zu machen, als HTML, und es dann trotzdem 'html' zu nennen.
Jedenfalls unterscheidet sich hier schon mal , ob man überhaupt einen DOCTYPE (was man übrigens aus historischen Gründen eher groß schreibt) braucht, oder nicht. Dementsprechend ist natürlich auch die content Angabe unterschiedlich.
Du hättest übrigens auch noch zum Validator auf w3.org verlinken können, um der Sache noch mehr Nachdruck zu verleihen.
Encoding:
UTF-8 ist bei mir schon seit über 10 Jahren Standard, daher hab ich nicht drüber nachgedacht. Gehört natürlich ins meta. Warum du allerdings 'windows-1252' als Alternative empfiehlst, ist mir nicht ganz einleuchtend. Mag daran liegen, dass ich kein 'Windows-Fanboy' bin, aber ansonsten hätte ich eher auf 'iso-8859-1' gesetzt (aka 'latin-1'). Wenns dich interessiert, ich schreibe in VIM.
Die void-Element Syntax mit <element/> ist sowohl in HTML als auch in XHTML gültig. Ich finde es lesbarer und sehe nirgendwo, dass es ungültig werden wird (laut W3C Referenz).
Die Alt-Texte machen hier wenig Sinn. Du hast aber Recht, dass sie in HTML5 zwingend notwendig sind, aber die Empfehlung für dekorative Bilder ist, den Text leer zu lassen.
Zu center - nicht mehr verwendet ist untertrieben, es ist sogar verboten in HTML5 (bis HTML4.01 war es transitional). D.h. man kann es nicht mit CSS machen, sondern man muss. Werde ich dann noch fixen...
Das mit dem width style für body ist interessant. Allerdings sind Mittelwerte niemals gut, denn sie sind halt Mittelwerte und damit für jeden falsch
. Sollte nicht width:100% das Gleiche bewirken, wenn eh zentriert wird ?Deine Erklärungen zu Zentrierung des Rests ergeben wenig Sinn - aber keine Angst. Ich hab schon lange mit CSS gearbeitet und krieg schon raus, wie ich ein einfaches <center> durch mehrere Zeilen CSS ersetzen kann...
(Auch hier: ein link zu ner vollen Beschreibung wäre einfacher)
Mein momentanes Problem ist eher, dass Chrome im Zoom Modus manchmal falsche vertikale Alignments macht und es in FF funktioniert.
Ums nochmal zusammenzufassen: Ich nehme mir deine Kommentare für die finale Version zu Herzen, möchte dich aber bitten, bei Feedback an die Leser zu denken
p.s.
Und ich hoffe, mein Text kam jetzt nicht unfreundlich rüber...
RE: FaceTV - rdmlp - 07.09.2013, 12:34
Oh, nein nein nein. Natürlich wollte ich nur helfen! Sorry, falls dies etwas anders rüberkam. Ich dachte halt aufgrund dessen, dass meine HTML-Dokumente darmals auch so unsauber aussahen, dass du noch Anfänger seist. Wäre vielleicht besser gewesen, wenn du im Starpost noch hinzugeschrieben hättest, dass du dir beswusst bist, dass die Seite nicht ganz Sauber geschrieben ist. Ich schreibe Seiten auch gerne mal so, wenn es nichts wichtiges ist, oder ich ein bisschen Langeweile habe, also daher ist dies auch übernicht schlimm. Rechtschreibung, naja Ok, ich habs nochmal selbst durchgelessen, einige Textstellen sind wirklich etwas schlimm
. Zu den Erklärungen: Die Erklärungen, die ich gegeben habe, bassieren aus eigenen Erfahrungen, die bei mir wunderbar funktionieren. Jenachdem wie du deine Seite aber aufbauen und strukturieren willst, kann es sein, dass meine Lösungen nicht funktionieren bzw. angepasst werden müssen. Das liegt nunmal daran, dass jeder Webseitenautor seine Seiten anders schreibt und jeder auf andere persöhnliche Standarts setzt. HTML, CSS und Co. bieten nunmal viele Möglichkeiten, etwas zu erschaffen, was am Ende mit dem selben Resultat endet. Aber danke, für die Kritik. Mal sehen, was ich daraus für doe Zukunft mitnehmen kann .