Mijn eerste 'echte' site op basis van mijn framework
Ik ga deze week nog beginnen aan een opdracht, daarna ga ik wat blogs en voorbeelden erbij schrijven.
Op de roadmap staat nog een admin interface, documentatie en vrijgave van het framework.
Uiteraard zijn alle op- of aanmerkingen van welkom.
Gewijzigd op 29/08/2012 19:31:08 door John Berg
Dit hoort onder 'sitechecks' misschien kan een Moderator dit even wijzigen?
Normaal ben ik verder niet zo van de site reviews. In dit geval wil ik wel zeggen dat ik het design er prettig strak vind uitzien, alleen de twee knoppen bovenin (home/contact) vallen wat mij betreft een beetje buiten de boot. Qua kleur, design en ze staan net niet gelijk met de kolom eronder wat het verstoort.
In een vorig leven heb ik een Delphi en later C# framework gemaakt. En aangezien PHP met 5.3. redelijk volwassen is geworden kon ik veel van de ideeën uit dat framework omzetten.
Natuurlijk mis ik nog wel wat dingen in PHP :-)
Ja, de zend website is een een `fixed 2 column, right sidebar' website, net als die van mij en 700 miljoen anderen :)
Gewijzigd op 29/08/2012 22:05:28 door Aad B
Aad B op 29/08/2012 22:04:37:
Slechts één puntje: wellicht schiet mijn kennis te kort of is de site alleen voor echte kenners maar ik vind het altijd jammer als ik op een belangrijk woord in een brok informatie ook nog moet googlen: ik wist niet wat MVC betekende.... Waarom niet heel kort even verklaard .
Omdat dat nu net de keuze is die je maakt als webmaster. Je kiest voor een bepaald publiek. Het omgekeerde geldt namelijk ook, iemand die wel wat MCS is, wil dat niet nogmaals lezen. Die lezer wil diepere informatie. Als je dan terug alles vanaf nul uitlegt, dan zal het soort lezer waar je oorspronkelijk op mikte afhaken. Je kan geen site maken die voor iedereen verstaanbaar is.
De broncode bestaat uit slechts 7 bestanden. 1 daarvan is een stylesheet en 2 zijn pure simpele html bestanden. En van de rest is eigenlijk alleen de controller.php wat lastiger, de anderen zijn steeds niet meer dan 10 regels code.
Voor echte beginners zal dat waarschijnlijk een brug te ver zijn, maar iemand die al ooit iets met php / html / css gemaakt heeft zou het toch eigenlijk moeten kunnen nabouwen?
In het framework ben ik wel geïnteresseerd, altijd goed om te leren van broncodes van andere. Ik vind alleen nergens een download button?
Ik ben ook geen fan van groen, maar het is wel weer eens wat anders.
Alleen de 3 voorbeelden zijn nu te downloaden. Er moeten nog wat dingetjes bij, er moet nog documentatie en voorbeelden gemaakt worden. Nog even geduld om het complete framework te downloaden.
Gewijzigd op 30/08/2012 08:50:07 door John Berg
Design
Het lay-out van de website is goed, alles zit op een logische plek. Alleen tja, het design komt er niet echt uit. Het ziet er meer uit als een website uit 2009 dan uit 2012. Waar dat aan ligt? Aan de kleuren en het gebruik van allemaal saaie vierkante blokken.
Allereerst de kleuren, deze zijn gewoon echt te fel. Groen en blauw passen goed bij elkaar, alleen niet op een website. Een website heeft over het algemeen wat doffere, donkere kleuren. De kleur in de sidebar is bijv. al meer een webkleur dan de kleur die gebruikt is in het menu. Alleen het probleem van de kleur in de sidebar is weer dat deze chemisch lijkt en niet echt uit de natuur. Mijn tip: kijk eens op sites als colourlovers of colorschermer. Deze hebben over het algemeen kleurenpallettes die passen voor een website. Zoek er eens een leuke uit en pas het toe op de website, je zult zien dat het beter wordt.
Ook het pattern op de achtergrond draagt mee aan het Web2 gevoel. Kijk eens op sites als subtepatterns of colourlovers onder patterns.
Dan de vierkante dingen. Alles is recht en vierkant, probeer eens wat speling uit. Maak een lijntje een beetje schuin, gebruik een net niet recht hoekje, enz.
Tevens ben ik niet echt fan van die icoontjes, maar ze worden vaak gebruikt dus ze zullen wel goed zijn.
Dan ga ik nog even spreken over wat andere design elementen. Dat menu bijv. die zweeft net boven de baseline van de header ook staat hij daar maar een beetje als twijfelgevalletje: Niet links, niet in het midden, maar ook niet rechts. Ik denk dat je opzoek moet gaan naar een betere plek.
Dan scroll ik naar onder en kom ik bij het blauwe vierkant met 'Recent posts' en 'About' erin. Ik heb er al van alles meegedaan, maar ik kan er niet achter komen waar dat reusachtige blok voor dient.
Code
- Je hebt 5 stylesheets die je inlaad, dat zijn 5 HttpRequests. Dit vertraagd je website aanzienlijk, misschien niet per se op een computer maar op een mobiel merk je dit wel. Probeer ze eens alle 5 in 1 te stoppen, dan hou je maar 1 HttpRequest over.
Het is natuurlijk goed als je stijlen zoveel mogelijk in verschillende bestanden zet. Dat is overzichtelijker. Gebruik dan een CSS precompressor (SASS of Stylus) om dit voor elkaar te krijgen, het zal je ook nog veel andere mooie features geven.
- Ik raad aan de script elementen vlak voor </body> te zetten, dat maakt je webpagina ook sneller. Tevens heb je nu bij de body inline JS gebruikt, waarom plaatst je dat ook niet in je document.ready van jQuery?
- De slogan ('PHP [framework] from scratch') is geen alinea, ik zou hem in een h2 ofzo zetten. Merk ook op dat een H1 een per pagina unieke belangrijkste titel is. Op de homepagina is de sitetitel, maar op andere pagina's is de pagina titel veel belangrijker.
- Probeer 1 bericht te groeperen, je hebt nu telkens 3 afzonderlijke elementen. Als je daar een div omheen zet groepeer je het tot 1 artikel. Dit zal een Google bot helpen je pagina beter te snappen.
Dan kunnen we het inzien en als je wilt kan men helpen verbeteringen toe te voegen.
- m.b.t. het design. De gekozen kleuren en stijl zijn niet mijn eerste voorkeur. Ik hou ook meer van wat ronde hoeken en meer grijs/blauwe combinaties. Echter, ik wilde een onderscheidende blog maken. Ik heb idd ook op sites gezocht naar goede combinaties, en uiteindelijk deze combinatie gevonden. Daar kon ik mee leven en hij was onderscheidend. Nu is kleur en stijl iets subjectiefs, en tamelijk persoonlijk. De een vind het mooi, de ander niet. Kijk naar je eigen voorbeeld op Git. Ik vond het mooi, anderen niet.
- Wel geinig dat ColorSchemer, die je als voorbeeld gaf ongeveer dezelfde kleuren groen en blauw gebruikt als mijn blog :)
- Het menu: tja .. geen gelukkige keuze, en daar moet in de volgende versie van het framework iets anders voor bedacht worden.
- De achtergrond. Vind ik ook niet mooi, maar wel weer onderscheidend. Een van de themes uit jquery ui heeft deze ook. Onderaan de pagina zit een login (had je waarschijnlijk gemist). Als je daarop klikt kom je bij de backend, en daar gebruik ik een 'Vista' achtige background met opacity. Zal ook niet iedereen mooi vinden, ik hou er wel van. En omdat het voor de backend is, kan ik daar mijn persoonlijke smaak laten prevaleren :)
- De blauwe balk onderin is nog niet gevuld, ook iets voor de volgende versie.
- De code en stylesheets. Waarom staat niet alle script bovenaan? Jij denkt waarschijnlijk in 1 html pagina. Ik denk in losse, herbruikbare, modulaire, testbare html stukken. Ik maak dus een stuk (een region heet dat bij mij) dat ik in een afzonderlijke debugger kan testen. Als het werkt voeg ik het toe aan mijn bibliotheek van regions en modules, en i.p.v. de volgende keer het wiel uit te vinden, hergebruik ik een region. Ongeveer het idee van HMVC, maar dan van mezelf en een stuk uit de xaml/C# tijd.
- Het groeperen. Daar zal nog wel wat te halen zijn. Ik ben nu bezig met een opdracht (een zelfde blog, met andere opmaak en stijl) en ik merk nu dat ik toch nog best wel veel dingen moet aanpassen. Naast de localization (deze blog is in het Nederlands) geldt dat ook voor de afzonderlijke elementen, dus daar ga ik nog een slag maken.
- H1/H2: ik koppel dat aan SEO. Daar is nog weinig aan gedaan, behalve clean urls, robots.txt en sitemap.xml. Daar is nog best wel wat te halen, maar ook dat komt in een later stadium.
- css: Ik ga naar een precrompressor kijken, maar waarschijnlijk los ik dat in het framework op. Elke region heeft immers zijn eigen css, en het viewobject weet welke ccs-en hij nodig heeft voordat hij gaat renderen. Daar is best iets slims te maken, met een slimme cache en html5 ofline mogelijkheden.
Gewijzigd op 30/08/2012 13:42:13 door John Berg