• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fragen zur Websiteumsetzung

b1zarRe

Mitglied
Hey,
ich plane folgenden Entwurf umzusetzen (siehe unten).

Kritik ist natürlich gerne erwünscht, aber ich habe auch paar spezielle Fragen, wie ich paar Sachen in HTML (richtig)
umsetzen kann:

Im Header bzw. im Footer gibt es dieses Kachel/Carbon Muster.
Soll ich 1Pixel abschneiden in Photoshop und in CSS es x-repeaten lassen? Nur wie bekomme
ich dann so einen Verlauf hin?


entwurf01.jpg


Vielen Dank!
 
Werbung:
Ich gebe dir vorab einen Rat: Visuell sieht das Mockup ordentlich aus, aber als Referenz für einen Medieninformatiker sollte die Seite responsive sein, und dazu passt das Layout nicht. Baue das Ganze auf dem Grid von Bootstrap auf, damit ersparst du dir viel Arbeit und Frust, wenn es um die nachträgliche Anpassung geht.
http://getbootstrap.com/css/#grid

Nun zur Frage: Dieser Carbon-Verlauf geht weder mit CSS noch mit der 1px-Geschichte. Du müsstest schon die komplette Grafik übernehmen und diese als Source- oder Background-Image einbinden, was in beiden Fällen aber Probleme aufwirft, wenn die Seite skalierbar sein soll. Ich würde lieber etwas Einfacheres nehmen.

Für den grauen Verlauf im Footer benötigst du übrigens auch kein 1px Repeat-Bild. Lade den grauen Layer einfach hier hoch und lasse dir dafür CSS generieren.
http://www.colorzilla.com/gradient-editor/
 
Danke für die Antwort!

Ist es also quasi unmöglich so ein Carbon Hintergrund zu nehmen?

Über Responsive Design habe ich mir Gedanken gemacht... wenn die Auflösung
in der Breite kleiner wird, verschwindet die Navi und wird aufklappbar.
Die Texte passen sich dann auch an. Einzig allein im Footer müsste ich mir
was sinnvolles überlegen.... Evtl. die 3 Spalten untereinander...?

Kannst Du mir genaueres zu Bootstrap sagen? Irgendwie sagt mir das
bisher garnix. Habe mit einem 12 Grid System als Vorlage gearbeitet.
 
Werbung:
Unmöglich ist es nicht, hatte ich bereits gesagt. Nur mit repeat-x schwer umzusetzen. Eventuell doch, wenn man die Navbar unterteilt, aber das wird dann Frickelwerk. Sauberer, schlanker Code > grafischer Schnickschnack.

Das mag jetzt optisch täuschen, aber der Footer sieht mir nicht nach einem 12'er Grid aus. Wenn links und rechts 2 Spalten frei bleiben, lassen sich die drei Blöcke schwer auf die verbleibenden 8 aufteilen. Es sei denn, man würde die 8 wieder durch 12 teilen. Außerdem ist die Seite mit 1800px viel zu breit.

Zu Bootstrap hatte ich die Doku bereits verlinkt.
 
In welcher Breite sollte ich denn eine Webseite entwerfen? Lese im Internet, dass viele Leute noch 1024 benutzen aber
lese auch Sachen wie 980'er Auflösung oder mittlerweile höher, da der Trend zu höheren Auflösungen geht...
 
Es gibt keine fixe Breite in der du Webseiten heute entwirfst, das solltest du eigentlich auch in deinem Studium lernen bzw. ist es auch logisch da es heutzutage soviele Mobile Devices und Auflösungen gibt. Wie Tronjer schon erwähnt hat, benutze Bootstrap. Damit ersparst du dir viel Arbeit und Frust, was Responsive angeht. Ansonsten hast du dich bestimmt schonmal mit Media Queries auseinander gesetzt? Wenn nicht, dann mach es am besten mal.
 
Werbung:
In welcher Breite sollte ich denn eine Webseite entwerfen? Lese im Internet, dass viele Leute noch 1024 benutzen aber
lese auch Sachen wie 980'er Auflösung oder mittlerweile höher, da der Trend zu höheren Auflösungen geht...

Schau dir meinen Link an. Bootstrap verwendet für große Displays eine maximale Containerbreite von 1170px für das 12'er-Grid. Für einen Studenten der Medieninformatik sollten die Basics an einem Vormittag erlernbar sein. Gibt genügend Tutorials auf Youtube.

Wird denn im Studium nichts über Responsive Design und entsprechende Frameworks gelehrt?
 
Schau dir meinen Link an. Bootstrap verwendet für große Displays eine maximale Containerbreite von 1170px für das 12'er-Grid. Für einen Studenten der Medieninformatik sollten die Basics an einem Vormittag erlernbar sein. Gibt genügend Tutorials auf Youtube.

Wobei Bootstrap, wie ich finde, auch eine sehr gute Dokumentation mitbringt.
 
Wird denn im Studium nichts über Responsive Design und entsprechende Frameworks gelehrt?

Ich denke nicht. Vielen "Designer" mit denen ich zu tun hatte musste ich erst stundenlang erklären dass nicht jeder Bildschirm gleich groß wie ihrer ist…
Auflösung und Seitenverhältnis ist den meisten ein Fremdwort.
Und dass es auch nicht funktioniert jedes Wort an der gleichen Stelle wie im Mockup zu trennen (Silbentrennung) war auch ein langer Kampf bis das alle verstanden haben.

Oft frage ich mich ob Leute die sich "Webdesigner" schimpfen, überhaupt wissen was HTML ist.
Ich habe längst jeglichen Respekt vor dieser Berufsgruppe verloren.

Über ein Design wie oben wäre ich sogar froh...
 
Werbung:
Ich kenne das Problem. Nahezu jedes Mal, wenn ich mit einem neuen Projekt konfrontiert werde, muss ich dem Product Owner oder Designer den Unterschied zwischen dem, was geht, was nicht geht und was theoretisch möglich wäre, aber aufgrund des Aufwands unwirtschaftlich ist oder Probleme an anderer Stelle aufwirft, erklären.

Wobei der TE ja Medieninformatik studiert. Da sollte man ein grundsätzliches Verständnis der Materie voraussetzen.
 
Also meine "Breitenfrage" war bezogen auf ein Photoshop Entwurf. (Mehr ist es bis hierhin ja auch noch nicht) UND mit welcher Größe ich am besten
fahre (als "Basis") => Es gibt ja sehr wohl Statistiken darüber, wie viele User welche Auflösungen haben.

Zum Theme Responsive Design (& Media Queries) habe ich auch schon einige Dinge gemacht und kenne mich damit mehr oder weniger
mit aus und weiß, dass man für verschiedene Endgeräte (mit untersch. Auflösungen) in CSS einstellen kann, ab welcher Auflösung
sich ein Design ändert etc.

Zum Thema Studium:
Ich weiß nicht, wer von Euch studiert hat oder sich alles selbst beigebebracht hat (wobei Studium fast nichts anderes ist) oder eine Ausbildung gemacht hat...
Jedenfalls wissen die Leute die studieren, dass nicht auf jedes Thema explizit eingegangen werden kann und der Studiengang schon
mehr als breit gefächert ist (Programmieren, Spieleenwticklung, Websprachen, Design, Filmproduktion und naturwissenschaftliche Fächer wie Mathe, Physik
sowie weitere Informatikfächer wie Datenbanken, Theoretischer Informatik, Softwaretechnik etc.).
Das Problem hierbei ist, dass man nicht 2-3 Jahre, wie in einer Ausbildung, alles über "ein" Gebiet lernt sondern über teilweise sehr unterschiedliche
Bereiche.
(Kleine Anekdote hierzu: Ein Kommilitone war auf einer Wirtschaftsschule und hat danach eine Ausbildung im wirtschaftlichen Bereich gemacht. Er kam zu uns, und hatte 1 Fach (von insgesamt 30) "BWL" und meinte, dass in den ersten 2-3 Monaten da schon alles diskutiert wurde, was er bisher gelernt hatte... => Also es geht auch sehr in die Tiefe.. Nur um alles wirklich zu verstehen und das es ins Blut über geht, muss man halt auch nach dem Studium sich damit regelmässig beschäftigen)

Wie gesagt, so Dinge wie Responsive Design oÄ wurde thematisiert, aber man darf auch nicht die Vorstellung haben, dass ein Student alles weiß, sondern
das ein Student aus verschiedenen Bereichen sich einen auswählt und spezialisieren möchte. In meinem Fall ist es der Bereich der Webentwicklung/
Oberflächengestaltung (GUIs) und ich lerne nebenbei gerne weitere spezifischere Themen und werde mir das mal mit den Bootstrap durchlesen, danke dafür :)
Man lernt halt nie aus :) - Und falls ich doch merke, dass ich für die Webentwicklung garnicht geeignet bin, dann habe ich halt die Möglichkeit, mich für andere Bereiche zu bewerben in denen ich ein gewisses Grundwissen erworben habe.
 
Kann ich nachvollziehen. Von dem, was ich vor Jahren mal am Webmasters College Nürnberg gelernt habe, sind nur noch die Basics in Netzwerk-/Servertechnologien und Linux hilfreich. Alles andere hat mit der heutigen Realität nichts mehr zu tun.
 
Werbung:
Also meine "Breitenfrage" war bezogen auf ein Photoshop Entwurf. (Mehr ist es bis hierhin ja auch noch nicht) UND mit welcher Größe ich am besten
fahre (als "Basis") => Es gibt ja sehr wohl Statistiken darüber, wie viele User welche Auflösungen haben.

Zum Theme Responsive Design (& Media Queries) habe ich auch schon einige Dinge gemacht und kenne mich damit mehr oder weniger
mit aus und weiß, dass man für verschiedene Endgeräte (mit untersch. Auflösungen) in CSS einstellen kann, ab welcher Auflösung
sich ein Design ändert etc.

Zum Thema Studium:
Ich weiß nicht, wer von Euch studiert hat oder sich alles selbst beigebebracht hat (wobei Studium fast nichts anderes ist) oder eine Ausbildung gemacht hat...
Jedenfalls wissen die Leute die studieren, dass nicht auf jedes Thema explizit eingegangen werden kann und der Studiengang schon
mehr als breit gefächert ist (Programmieren, Spieleenwticklung, Websprachen, Design, Filmproduktion und naturwissenschaftliche Fächer wie Mathe, Physik
sowie weitere Informatikfächer wie Datenbanken, Theoretischer Informatik, Softwaretechnik etc.).
Das Problem hierbei ist, dass man nicht 2-3 Jahre, wie in einer Ausbildung, alles über "ein" Gebiet lernt sondern über teilweise sehr unterschiedliche
Bereiche.
(Kleine Anekdote hierzu: Ein Kommilitone war auf einer Wirtschaftsschule und hat danach eine Ausbildung im wirtschaftlichen Bereich gemacht. Er kam zu uns, und hatte 1 Fach (von insgesamt 30) "BWL" und meinte, dass in den ersten 2-3 Monaten da schon alles diskutiert wurde, was er bisher gelernt hatte... => Also es geht auch sehr in die Tiefe.. Nur um alles wirklich zu verstehen und das es ins Blut über geht, muss man halt auch nach dem Studium sich damit regelmässig beschäftigen)

Wie gesagt, so Dinge wie Responsive Design oÄ wurde thematisiert, aber man darf auch nicht die Vorstellung haben, dass ein Student alles weiß, sondern
das ein Student aus verschiedenen Bereichen sich einen auswählt und spezialisieren möchte. In meinem Fall ist es der Bereich der Webentwicklung/
Oberflächengestaltung (GUIs) und ich lerne nebenbei gerne weitere spezifischere Themen und werde mir das mal mit den Bootstrap durchlesen, danke dafür :)
Man lernt halt nie aus :) - Und falls ich doch merke, dass ich für die Webentwicklung garnicht geeignet bin, dann habe ich halt die Möglichkeit, mich für andere Bereiche zu bewerben in denen ich ein gewisses Grundwissen erworben habe.

Ja das stimmt - bei allen Studiengängen die mit Medien-... beginnen.
Von allem etwas aber nichts richtig.

Leider sind diese Studiengänge (in meiner Region) sehr gefragt und von 100 Absolventen ist nur einer als Azubi zu gebrauchen. Der Rest ist arbeitslos oder studiert etwas anderes.
Ich selbst wäre fast auf die Medien-Masche reingefallen, zum Glück hat man mir davor einen Job angeboten.

Ich hatte gemeint du studierst Mediendesign, das wäre natürlich brutal wenn man da kein Responsive Design anschneidet - so ist die Realität aber.
Bei Medieninformatik kann man meiner Meinung nach noch ein Auge zudrücken, wenn das Design nicht einwandfrei ist. Das da aber Filmproduktionen zu finden sind, schockt mich wiederum :)
 
zu der Breite:
Zuersteinmal ist Auflösung != Viewport. Will sagen, die Auflösung eines User sagt dir noch lange nicht, wie groß sein Browserfenster tatsächlich ist.
Wenn du unbedingt Zahlen brauchst, dann orientiere dich an den Breakpoints, die Bootstrap von Haus aus mitbringt. Und hab immer das Verhalten der anderen Größen im Auge, egal ob du jetzt mobile- oder desktop-first arbeitest.
Und um Himmels Willen beachte die Zwischenschritte... Wie oft habe ich Designs gesehen, die zwar am Breakpoint super aussehen, 1px darüber aber fürchterlich... Weil man immer nur für die maximale Breakpointbreite designed hat...

@scbawik Filminhalte bei Medieninformatik ist nun nichts besonderes. Aus meinem Studiengang (nicht direkt MI, aber ähnlich) sind tatsächlich auch einige in der Videoproduktion gelandet. Aber auch grundsätzlich ist ein Verständnis von Bewegtbild / Codierung / Kompression etc. auch in der Webentwicklung von Vorteil.
Außerdem geht es ja nicht nur darum, wie man eine Kamera bedient, sondern auch darum Inhalte zu konzipieren etc.
 
Danke erstmal für die Antworten.

Zu allgemeinen Medienthematik und zu "von allem etwas, aber nichts richtig":
Ich sehe es, zumindest in meinem Studiengang, anders. Ich kann (durch Vergleiche mit anderen Hochschulen) behaupten,
dass bei uns nur die Leute durch Programmieren oder Mathe kommen, die die Sachen wirklich verstanden haben und
praktisch umsetzen können und es wirklich ins Blut übergangen ist. Andere Fächer werden überwiegend, und wie
ich finde logischerweise, mehr durch Entwürfe als durch theoretisches Wissen "abgefragt". Wir hatten zwar
auch eine Klausur in einem Mediendesign Fach, jedoch zählte diese nur 20 % für die Gesamtnote.
Klar ist mir aber auch, dass jemand der 3 Jahre oder länger sich fast ausschließlich mit Webdesign beschäftigt hat,
mehr "drauf" hat als ich. Aber ich denke schon, dass ich die Grundlage habe mich in dem Bereich weiter zu spezialisieren.

Alles in allem kann ich also diese Aussage á la "Irgendwas mit Medien" und "Von allem etwas aber nicht richtig" nicht bestätigen.
Meiner Meinung nach hat es sehr wohl Vorteile, wenn man einen breiten Überblick hat und nicht nur (übertrieben dargestellt)
HTML u. CSS kann, sondern auch andere Bereiche der Informatik miteinfließen lassen kann. Wovon ich wenig halte ist beispielsweise
ein Studiengang wie Medienwissenschaften... in welchem, soviel ich weiß, man nur Theorie bespricht und vielleicht mal eine
Art "Workshop" (Fotografie, Photoshop etc.) macht, aber das wäre mir alles zu theoretisch und zu wenig Praxis. Denke aber auch,
dass diese Leute dann auch in andere berufliche Bereiche gehen.

Zur Filmproduktion:
Kann die Aussage von Banana Jones nur bestätigen. Wir hatten das Glück, dass wir bei uns ein richtiges Filmstudio hatten und
auch mit der Kamera/Mikros/Studio umzugehen gelernt haben, aber wie gesagt, in 6 Monaten lernt man da die "Grundlagen"
(und mit Grundlagen meine ich nicht salopp paar Regeln und fertig, sondern fundierte, gründliche u. wichtige Basics), aber
um wirklich in dem Bereich zu arbeiten muss man noch sehr viel Lernen. Ich habe mich dagegen entschieden, weil
es für mich zu wenig mit Informatik zu tun hat und mir diese Grundlagen aber helfen, kleinere Videos zu bearbeiten.
Übrigens war dieses Fach ein Wahlpflichtfach. Medieninformatik ist zu 60-70% Informatik. Der restliche Anteil sind
dann halt spezifische Fächer wie Mediendesign, Webdesign, Internetsprachen, Filmproduktion, Spieleentwicklung
oder Computeranimation.

PS.: Nein, ich werbe gerade nicht für meine Hochschule ;) Bin aber sehr zufrieden, weil ich anfangs nicht wusste,
was ich studieren will und mich verschiedene Medienbereiche interessieren. Für jeden der das liest, kann
sich aber natürlich selbst schlau machen auf unserer Hochschulseite. Jedoch muss ich bemängeln, dass
bei uns die Durchfallquoute sehr hoch ist und die Regelstudienzeit kaum jemand schafft (und dabei meine
ich wirklich nur 2-3%). Die Klausuren sind in einigen Fächern nicht ohne und es wird einem nichts geschenkt,
aber wenn man wirklich sich reinhängt, hat man denke ich, eine gute Ausbildung genossen.
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben