Anime Wolken Forum

Anime Wolken Forum (https://forum.animewolken.nl/index.php)
-   Design (https://forum.animewolken.nl/forumdisplay.php?f=12)
-   -   Show je Website #7 (https://forum.animewolken.nl/showthread.php?t=72119)

reaper_unique 29 januari 2012 10:25

Het ziet er zeker niet slecht uit, maar toch een aantal opmerkingen:
- Op mijn scherm (1920x1200) komt het laatste news element van News tegen je slideshow. Er is dus geen margin of padding toegepast, terwijl je dit wel hebt gedaan bij je welkom tekst.

- Een betere visuele scheiding creŰren tussen Painted pictures en unusual pictures? Maar ik denk dat vooral het feit dat de titels (h3) niet ge´ndenteerd is zoals de paragrafen dat me stoort.

- De avatar is nog niet zo goed gepositioneerd tegen over de tekst dat er naast staat.
Ik zou voorstellen om de avatar mss iets te vergroten en je naam er dan onder of boven te plaatsen? dan kan je nog zien voor "settings" en "more".

- Ik vind het toch wat vreemd dat je geen <ul></ul> gebruikt voor news, painted pictures en unusual pictures. Het lijkt me toch een lijst van soortgelijke elementen te zijn.

- Je gebruikt daarom ook onnodig veel span tags.

- Misschien nog eens nadenken over de positionering van je slideshow, het lijkt me nog niet helemaal goed te zitten kwa grootte en plaats :/ .

- De rest werkt nog niet :D

Maverick 29 januari 2012 10:52

Quote:

Oorspronkelijk geplaatst door Systrafoss (Bericht 2638852)
Erh, bij mij ziet het er gewoon goed uit op IE? Weinig verschil met Chrome iig.

http://i.imgur.com/w4RcG.png

De datum in de onderste kolommen en het menu is net omgedraaid. IE9 heeft blijkbaar een immense hekel aan right-to-left en float: rights zonder dat er een float: left is gedefined. :<.

Kijk, een comment met kritiek! Altijd goed! : D
Quote:

Oorspronkelijk geplaatst door reaper_unique (Bericht 2638857)
Het ziet er zeker niet slecht uit, maar toch een aantal opmerkingen:
- Op mijn scherm (1920x1200) komt het laatste news element van News tegen je slideshow. Er is dus geen margin of padding toegepast, terwijl je dit wel hebt gedaan bij je welkom tekst.

Kun je een screenshot laten zien? Ikzelf zit op maximaal 1440x900, dus ik kan het niet nadoen xD.
Quote:

- Een betere visuele scheiding creŰren tussen Painted pictures en unusual pictures? Maar ik denk dat vooral het feit dat de titels (h3) niet ge´ndenteerd is zoals de paragrafen dat me stoort.
Dat zal ik nog even wijzigen ja xd.
Quote:

- De avatar is nog niet zo goed gepositioneerd tegen over de tekst dat er naast staat.
Ik zou voorstellen om de avatar mss iets te vergroten en je naam er dan onder of boven te plaatsen? dan kan je nog zien voor "settings" en "more".
Hoe bedoel je precies? Zoals het op de screenshot staat zie jij het niet, of is dat wat je niet mooi vindt?

Quote:

- Ik vind het toch wat vreemd dat je geen <ul></ul> gebruikt voor news, painted pictures en unusual pictures. Het lijkt me toch een lijst van soortgelijke elementen te zijn.

- Je gebruikt daarom ook onnodig veel span tags.
Ja, dat weet ik, ik ben nog niet klaar xD. Ik probeer om die datum rechts te krijgen, maar in IE lukt me dat niet. Zodra ik dat heb ga ik over op lists, ik was nog niet zover xd.

Quote:

- Misschien nog eens nadenken over de positionering van je slideshow, het lijkt me nog niet helemaal goed te zitten kwa grootte en plaats :/
Hij was eerst 300px hoog, toen 200px, en nu 150px. Als ik hem nog korter maak (wat ik mooier vind, zelf), krijg ik er geen fatsoenlijke plaatjes meer in ;<.

Quote:

- De rest werkt nog niet :D
Ja, thanks xD.

reaper_unique 29 januari 2012 11:26

Dit:
http://i110.photobucket.com/albums/n...llery-Home.png

Je hebt:
Code:

<div>
        <h1>News</h1>
                <p class="newsby">
                        <span>January 28, 2012 - by </span><span class="admin">Mave</span>
                </p>
                <p class="news">
                        Overhauled the entire site. Currently processing all old pages to the new format.
                </p>
                <p class="newsby">
                        <span>January 27 , 2012 - by </span><span class="admin">Mave</span>
                </p>
                <p class="news">
                        Cleaned up code, improved loading times.
                </p>
        </div>

Je kan misschien dit doen:

Code:

<div>
        <h2>News</h2>
        </ul>
                <li class="newselement">
                        <time>January 28, 2012</time> by <span class="admin">Mave</span>
                        <p>
                                Overhauled the entire site. Currently processing all old pages to the new format.
                        </p>
                </li>
                <li class="newselement">
                        <time>January 27 , 2012</time> by <span class="admin">Mave</span>
                        <p>
                                Cleaned up code, improved loading times.
                        </p>
                </li>
        </ul>
</div>

Opzich moet het niet zo, maar zo is het logischer opgebouwd en moet je minder class attributen gebruiken.

Wat ik dan ook opmerk is dat je driemaal h1 gebruikt. een h1 tag is de hoofdtitel van je pagina, net zoals de titel van een hoofdstuk in een boek (titel in de header is dan de naam van het boek ;) ). Je hebt er 1 per pagina net zoals je er 1 hebt per hoofdstuk. Ik zou of TFGallery h1 maken of "hey there" als h1 nemen en de rest h2.

je avatar staat daar rechtsboven wel goed maar ik doelde op het feit dat Mave, settings en More er dan zo maar gewoon zijn bij geplaatst.

Ik heb nu ook opgemerkt dat je
Code:

* { }
gebruikt in je CSS. Dat is "bad practice". Je bent beter dat je alles reset gelijk dit:
Code:

/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

Nog beter is om de belangrijkste elementen al een default waarde te geven in het begin.

Maverick 29 januari 2012 11:38

Wellicht dat ik het later verander in een list, maar nu nog even niet xd. Hoe is de padding nu?

reaper_unique 29 januari 2012 11:47

Beter :)

Maverick 29 januari 2012 18:51

En de rest aangepast. IE is nog steeds een bitch, hoewel het nu wel iets beter lijkt.

reaper_unique 29 januari 2012 19:35

Pas wel op dat je niet te veel kleuren gaat gebruiken. Tenzij je natuurlijk een portfolio, ofzo hebt of iets waar veel kleur juist wel nodig is. Maar hier denk ik niet.

Maverick 29 januari 2012 19:37

Ja, daar betrapte ik mezelf ook al op xD. Maar het zijn alle 3 kleuren (die 3 headers dus, painted unusual tagged) die ook in de slider zitten, en de rode wordt ook gebruikt voor mijn naam. Blauw komt voor als je online bent (avatar border verandert met je Steam status - grijs voor offline, blauw voor online, groen voor in-game, rood voor banned), dus ik zal die gele even wijzigen (ook uit de slider halen) en groen erin stoppen. xd

Maverick 03 februari 2012 22:45

http://tf2g.com/tf2gnew/

Dat is hem nu. Heeft iemand enig idee wat de beste indeling, of beste manier, is om de gallery te showen zeg maar? Op dit moment is het zoiets:
http://tf2g.com/gallery.php

Het werkt, maar echt mooi is het niet. Hoe zou ik dat nu eens fatsoenlijk kunnen maken zodat het ibj de nieuwe site past? IdeeŰn? :<

reaper_unique 04 februari 2012 00:52

Daar kan ik nog niet meteen iets op verzinnen, maar ik heb toch nog een opmerking op je homepagina.
Waarom is die onderste oranje lijn korter dan je header? Maak die mss even lang. Is mooier imo.

Ik zie dat er toch nog een paar dingen niet zo goed zijn uitgelijnd, althans zo lijkt het voor mij.
- Zoals reeds gezegd, die oranje lijn onderaan, doe, width: 90% i.p.v. 80%.
- Recently added is ook mooi met text-align: left hoor :)
- Door het bovenstaande wordt het duidelijk dat je de tekst boven de imagecarousel hebt ge´ndenteerd maar de tekst eronder niet. Je kan de padding-left verwijderen of je voegt die toe aan de onderste tekst.

Gyard 04 februari 2012 09:36

Wat je ook eens kan proberen.. is wat meer ruimte in de onderkant pompen. Dus dat het allemaal net wat meer van elkaar afstaat. Dat brengt ook wat meer rust. Wat Reaper zegt met Recently added naar links doen kan je ook eens proberen alhoewel ik dit ook wel tof vind staan.

Mhm.. wat nog meer. Ben benieuwd hoe het flash gedeelte staat als de eindpunten laat matchen met de oranje lijnen.

Maverick 04 februari 2012 11:24

Quote:

Oorspronkelijk geplaatst door reaper_unique (Bericht 2640233)
Daar kan ik nog niet meteen iets op verzinnen, maar ik heb toch nog een opmerking op je homepagina.
Waarom is die onderste oranje lijn korter dan je header? Maak die mss even lang. Is mooier imo.

Ik zie dat er toch nog een paar dingen niet zo goed zijn uitgelijnd, althans zo lijkt het voor mij.
- Zoals reeds gezegd, die oranje lijn onderaan, doe, width: 90% i.p.v. 80%.
- Recently added is ook mooi met text-align: left hoor :)
- Door het bovenstaande wordt het duidelijk dat je de tekst boven de imagecarousel hebt ge´ndenteerd maar de tekst eronder niet. Je kan de padding-left verwijderen of je voegt die toe aan de onderste tekst.

90% staat beter ja, text-align: left; is afschuwelijk imo xD. Ik ga nog even kijken hoe ik die padding op ga lossen ;<.

Smoon 04 februari 2012 14:15

Even een vraagje, hoort hier eigenlijk niet thuis denk ik maar om er nou een apart topic voor aan te maken is ook een beetje overdreven..

Kent iemand het programma Processing en kan die er goed mee omgaan? Ik krijg er namelijk les in als instap-programmeertaal om daarna php etc te kunnen leren en moet voor elke maandag iets gedaan hebben maar ik ben er zo verschrikkelijk slecht in dat ik bijna elke keer wanneer ik er mee bezig ga met mijn opleiding wil stoppen.

Tzou wel fijn zijn als er mensen hier zijn die er bekend mee zijn die me wellicht zouden kunnen helpen. o;

Maverick 04 februari 2012 23:26

Nee, totaal geen ervaring, maar als het wordt gebruikt om een sprong te maken naar PHP wil ik wel een poging doen..

Smoon 05 februari 2012 12:41

Okee. Nouja, de opdracht is dat een datavisualisatie te maken met een dataset over operaties in Libie, welke landen er aan meededen etc.

Dit is de demo die we hebben gekregen.
Code:

import java.io.FileReader;
import java.io.IOException;
import java.io.StringWriter;
import java.util.List;

float minPersonel = -1;
float maxPersonel = -1;
float minDiameter = 5;
float maxDiameter = 200;

ArrayList<Country> countries;

void setup() {
 
  size(800, 600);
  background(0);
  smooth();
 
  countries = new ArrayList<Country>();
 
  loadData();
  calculateValues();
  displayData();
}

void displayData() {
  for (int i=0; i<countries.size(); i++) {
    Country c = countries.get(i);
    c.display();
  }
}

void calculateValues() {
  for (int i=0; i<countries.size(); i++) {
    Country c = countries.get(i);
    float pVal = c.numPersonel;
   
    if((minPersonel == -1) || (pVal < minPersonel)) {
      minPersonel = pVal;
    }
   
    if((maxPersonel == -1) || (pVal > maxPersonel)) {
      maxPersonel = pVal;
    }
  }
  println(minPersonel + " : " + maxPersonel);
}

void loadData() {
  CSVReader reader = null;
 
  try {
    //File, FileReader Object
    //Delimiter (,) char
    //Encapsulator(") char
    //Start (line to start reading at) int
   
    FileReader fileReader = new FileReader(sketchPath+"/data/libya_operations_details.csv");
    reader = new CSVReader(fileReader, ',', '"', 0);
    println(reader);
  } catch(Exception e) {
    println(e);
  }
 
  if (reader != null) {
   
    String[] nextLine;
    int lineCounter = 0;
   
    try {
      while ((nextLine = reader.readNext()) != null) {
        if ((lineCounter > 1) && (!nextLine[0].equals("ZTOTALS")) && (nextLine.length > 1)) {
          String country = nextLine[0];
          String dateCommitted = nextLine[1];
          int numPersonel = int(nextLine[2]);
          int numAircrafts = int(nextLine[3]);
          String typeAircraft = nextLine[4];
          String navalForces = nextLine[5];
          String other = nextLine[6];
          int sorties1 = int(nextLine[7]);
          int sorties2 = int(nextLine[8]);
          int sorties3 = int(nextLine[9]);
          int missilesFired = int(nextLine[10]);
          int bombsDropped = int(nextLine[11]);
          String baseUsed = nextLine[12];
          String notes = nextLine[13];
          float lat = float(nextLine[14]);
          float lng = float(nextLine[15]);         
          println(lat + " : '" + lng);
       
          Country c = new Country(country, dateCommitted, numPersonel, numAircrafts, typeAircraft, navalForces, other, sorties1, sorties2, sorties3, missilesFired, bombsDropped, baseUsed, notes, lat, lng);
          countries.add(c);
         
        }
      lineCounter++;
      }
     
    } catch (Exception e) {
      println(e);
    }
  }
}

class Country {
    String name;
    String dateCommitted;
    int numPersonel;
    int numAircrafts;
    String typeAircrafts;
    String navalForces;
    String other;
    int sorties1, sorties2, sorties3;
    int missilesFired;
    int bombsDropped;
    String baseUsed;
    String notes;
    float lat;
    float lng;
    float x, y;
    float d;
   
   

  Country(String name, String dateCommitted, int numPersonel, int numAircrafts, String typeAircrafts, String navalForces, String other, int sorties1, int sorties2, int sorties3, int missilesFired, int bombsDropped, String baseUsed, String notes, float lat, float lng) {
    this.name = name;
    this.dateCommitted = dateCommitted;
    this.numPersonel = numPersonel;
    this.numAircrafts = numAircrafts;
    this.typeAircrafts = typeAircrafts;
    this.navalForces = navalForces;
    this.other = other;
    this.sorties1 = sorties1;
    this.sorties2 = sorties2;
    this.sorties3 = sorties3;
    this.missilesFired = missilesFired;
    this.bombsDropped = bombsDropped;
    this.baseUsed = baseUsed;
    this.notes = notes;
    this.lat = lat;
    this.lng = lng;
    this.x = map(this.lng, -180, 180, 0, width);
    this.y = map(this.lat, 90, -90, 0, height);
    this.d = map(numPersonel, minPersonel, maxPersonel, minDiameter, maxDiameter);
  }


void display() {
  this.d = map(numPersonel, minPersonel, maxPersonel, minDiameter, maxDiameter);
  stroke(255);
  noFill();
  ellipse(x, y, d, d);
}
}

en dat ziet er zo uit:
http://i126.photobucket.com/albums/p...05om133816.png

Wat ik moet doen is een aantal variaties daarop maken. Dus ik dacht gewoon een staafgrafiek ervan maken, of een cirkeldiagram of wat dan ook. Gewoon eenvoudig beginnen. Maar zelfs dat lukt me niet. :')


Alle tijden zijn GMT +1. Het is nu 09:12.

Forumsoftware: vBulletin®, versie 3.8.11
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.