ik kan met vertrouwen zeggen dat ik mijn fantasy football league run als een legitiem bedrijf. Ik heb uren besteed aan het maken van spreadsheets, documenten en databases om dit merk te bouwen. Toegegeven, het klantenbestand is klein en bestaat meestal uit een dozijn suffe mannetjes en vrouwtjes. Maar de kampioen is maar zo goed als het bedrijf. Dat betekent dat het bedrijf legaal moet zijn.De Real Fantasy Football League werd opgericht in 2005. in opdracht van mij en Justin Benline. We organiseren verschillende competities per jaar en spelen voor een behoorlijke hoeveelheid ‘jellybeans’. Om nieuwe eigenaren te werven en ons hun ‘jellybeans’ te geven, moesten we een weerlegbare branding maken. Ik vond het ook leuk om mijn statistieken van jaar tot jaar weten (dit is een nerdy-nummers spel by-the-way).
de taak: we hebben een Database
nodig hoewel ik in de vroege jaren ‘ 10 niet veel websites maakte, maakte ik wel een paar uitzonderingen. Toen mijn vriend Dave me introduceerde bij WordPress, begon ik te ploeteren in PHP. De beste aanpak om iets nieuws te leren is om een huisdier project te vinden en beginnen te spelen. De RFFL leek een goede keuze.
in 2011 maakte ik een basis HTML-website en introduceerde wat PHP. Ik maakte een dynamische koptekst, voettekst, en zelfs een aantal roterende banner advertenties op een zijbalk. De site was niet erg complex, maar bevatte wel een lijst van Eigenaren en wat basisinformatie. Het jaar na jaar updaten van de site was een hele klus. Handmatig doen van de wiskunde om de win/verlies records te berekenen en het hebben van hard-code elk beeld was een pijn. Mijn favoriete deel van de site was de records en statistieken, maar het veroorzaakte ook de meeste frustratie.
-
de homepage. Niet veel aan, maar speelde wel met een aantal PHP banners. -
naast die foto van Rob Brandon, was dit een vrij saaie pagina. -
de beelden zijn verloren in de tijd, maar de Wayback Machine toont de handmatige arbeid die ik in het tonen van records. -
deze records zijn oud. Ik heb iets beters nodig dan dit. -
steeds dichter bij mijn verlangen om statistieken te krijgen, maar nog steeds veel te veel codering.
ik wist toen niet dat er een betere manier was. Ik speelde in WordPress voor mijn blog, maar niet echt beseffen de kracht van een database. Op de universiteit, Ik nam een zeer basic Access Cursus en leerde hoe databases werken, maar nooit gedacht dat ze het draaien van het internet. Ik denk dat ik gewoon aangenomen dat alle van de grote websites werden behandeld door honderden mensen handmatig toevoegen van records.
SQL: de taal van Databases
de RFFL-website was mijn tweede officiële pet-project en mijn tweede diepe duik in databases. Na te zijn toegewezen als een stay-at-home-vader, maakte ik gebruik van mijn vrije tijd om iets nieuws te leren. Mijn eerste project was veel vallen en opstaan. Mijn fantasy football site tilde mijn vaardigheden naar een nieuw niveau.
hoewel mijn eerste pet-project een beetje een puinhoop was, leerde ik de principes achter moderne webontwikkeling.
droog-herhaal uzelf niet. Je moet nooit code dupliceren. Schrijf het een keer en erachter te komen hoe het te brengen in uw pagina. Databases maken dit mogelijk. Ik moest leren hoe ik databases moest gebruiken.
met de hulp van Team Treehouse en Lynda.com, ik vond en leerde de taal van SQL. Op dit punt, Ik was ook vrij geavanceerd met PHP. Met behulp van PHP om de website te ontwikkelen en SQL om gegevens op te halen uit een database, heb je jezelf een vrij slimme website. In plaats van handmatig mijn teamnaam en statistieken in te typen, kan ik ze gewoon uit meerdere tabellen in een database halen.
Dank u Bootstrap
ik heb veel geleerd tijdens mijn vrije jaren. Niet alleen heb ik proppen in ton van video ‘ s en tutorials op SQL, MySQL, PHP, HTML5, CSS, en algemene web fundamentals – ik leerde alles over frameworks. Ik begon met een framework genaamd Foundation en ging verder met Bootstrap. Hoe dom het ook klinkt, ik denk dat ik de voorkeur aan Bootstrap omdat het is gemaakt door de mensen die eigenaar zijn van Twitter.
Wat is een kader?
opnieuw was ik vrij naïef. Op de universiteit hebben ze nooit frameworks genoemd. Ik dacht dat alles handgemaakt was en elke keer opnieuw gemaakt. Dat is niet het geval.
onze vriend Wikipedia legt Bootstrap uit als:
Bootstrap is een gratis en open-source CSS-framework gericht op responsieve, mobile-first front-end webontwikkeling. Het bevat CSS-en JavaScript-gebaseerde ontwerpsjablonen voor typografie, formulieren, knoppen, navigatie en andere interface-componenten.
Wikipedia
in plaats van al uw stijlen en rasters vanaf nul aan te maken, heeft Bootstrap alles aangemaakt en u wijzigt gewoon hun stijlen. Over tijdbesparing gesproken.
Grids, lettertypen en Scripts – Oh My!
Bootstrap geeft u ALLE soorten shortcodes om enkele van de meer gecompliceerde items te maken. Ik ben geen wizard bij Javascript, maar met behulp van Bootstrap kon ik gemakkelijk carrousels, accordeons, en andere vrij veel voorkomende website functies te maken.
we kunnen gemakkelijk fonts van Google Fonts aanroepen, zodat ik veel creatiever met de typografie kan worden dan mijn vorige sites. We kunnen zelfs lettertypepictogrammen gebruiken en tijd besparen bij het maken van afbeeldingen.
het beste van alles, Bootstrap had al een raster gemaakt, zodat we onze ontwerpen kunnen aanpassen om te interageren en aan te passen aan verschillende schermformaten. Dit maakte de site automatisch mobiel-vriendelijk en zou krijgen een mooie hobbel in Google voor het reageren.
omdat Bootstrap wordt geleverd met een aantal basis styling en zelfs een aantal handige PSD wireframe bestanden, was het tijd om te beginnen met ontwerpen.
bijwerken van het merk
het merk RFFL werd per ongeluk midden in de jaren’00 gecreëerd. ik vond een lettertype, typte ‘RFFL’, voegde wat lijnen en buitengloed toe en noemde het een dag. Het was tijd voor een verfrissing.
Gebruikerskenmerken
in veel situaties doe ik een diepe duik online en doe ik serieus onderzoek naar het potentiële publiek. In dit geval – ik ken de kerngroep van dit publiek voor het grootste deel van mijn leven.
hoewel ik de favoriete bands, voetbalteams en politieke opvattingen van mijn vriend Ken, had ik geen idee hoe ze het web gebruikten. Met de hulp van een paar tools, ik was in staat om een karakter persona op te bouwen en in staat om een strategie over de functies en het ontwerp van de website om hun gebruikerservaring te helpen.
vlak ontwerp
een gemeenschappelijke trend voor web-en grafisch ontwerp aan het begin van dit project werd vlak ontwerp genoemd.
laten we het opnieuw aan Wikipedia vragen – Wat is plat ontwerp?
vlak ontwerp is een stijl van interfaceontwerp die de nadruk legt op minimaal gebruik van stilistische elementen die de illusie geven van drie dimensies (zoals het gebruik van slagschaduwen, gradiënten of texturen) en is gericht op een minimalistisch gebruik van eenvoudige elementen, typografie en platte kleuren.
Wikipedia
vlak ontwerp is precies wat ik wilde en speelde ook heel goed voor de vooraf gebouwde items in Bootstrap. Ik zou beginnen met het logo en verwijder al die slagen en gloeitjes.
typografie en lettertype
hoewel ik me voornamelijk zou richten op een website, doe ik ook mijn deel van het drukwerk. Het was belangrijk dat ik vond een lettertype dat ik kon gebruiken op het web en hebben het consequent weer te geven op alle computers. Google Fonts maakte dit gemakkelijk en flexibel. Na het doen van een aantal trial and error, besloot ik op de lettertypecombinatie van Oswald en Josefin Sans. Beide lettertypen werkten met verschillende gewichten, cases en groottes.
kleur
de RFFL werkte altijd met zwart en grijs. De nieuwe stijl zou hetzelfde blijven, maar gooien in verschillende nieuwe tinten. Ik zou veel zwart vervangen door witruimte.
hoewel niet super gangbaar op de hoofdwebsite, gebruiken we Blauw, groen en rood om onze individuele competities aan te duiden. Deze komen in het spel met veel van de statische advertenties en afdrukken onderpand.
wat er op de Website staat
met de algemene uitstraling van het merk was ik klaar om te beginnen met ontwerpen. De meesten zouden denken dat dit begint met het krijgen van een pen/papier of digitale kunst programma. Nope. Het begint met de inhoud.
Inhoud Eerst
Vroeg ik besloten dat deze website zou het volgende doen:
- een makkelijke link naar ons MyFantasyLeague.com websites
- Voorzien Eigenaar en Team Geschiedenis
- het huis van de regels, voorschriften, en scoren voor de competities
- Bereken en een lijst van alle winst/verlies en de score records
- TOON HEAD-TO-HEAD RECORDS
Daarnaast willen niet nog meer tijd verspillen op de oude site, de belangrijkste reden dat ik was opgewonden om te bouwen van een nieuwe website weer te geven eigenaar head-to-head resultaten. Er is niets beter dan trash-praten je tegenstander op gameday en het gebruik van werkelijke gegevens maakt het zo veel beter.
het overzicht van de Website
het is een goede gewoonte om een lijst te maken van elke pagina die u wilt op uw website. U kunt de structuur van de website en welke pagina ’s moeten worden genest en welke pagina’ s zijn standalone. Meestal trek ik gewoon een Word-document en begin met een lijst met een ongeordende lijst.
zodra ik alle vermelde pagina ‘ s had, was ik klaar om te beginnen met schrijven. Met een beetje planning, dacht ik dat de meeste pagina ‘ s niet super gedetailleerd zouden zijn. Voor eigenaarspagina ‘ s, een beetje bio zou volstaan. Ik zou de regels kopiëren en plakken en een beetje formatteren. Het grootste deel van de inhoud voor de pagina ‘ s zou eigenlijk statistieken en getrokken dynamisch.
was ik klaar om te coderen of ontwerpen?
het ontwerpen van de Website
ik wist dat het zware werk in de toekomst gedaan zou worden (het beheersen van de SQL en PHP code). Met alle van de basisinformatie vermeld, ik kon trekken wat papier en gewoon tekenen dozen en doe een aantal handgetekende versies van de site. Niets complex, maar dit zou nodig zijn voor de volgende stap.
Wireframe
ik voelde me comfortabel om Photoshop en de Wireframe PSD-bestanden uit Bootstrap te halen. Vroeger had je maar één master wireframe-bestand en je zou ontwerpen voor het bureaublad. Met een responsieve ontwerp, ik was het formatteren en het ontwerpen van vier versies voor elke pagina.
met Bootstrap heb je vier belangrijke breekpunten.
- XS-Extra Small
- S-Small
- M-Medium
- L-Large
deze correleren allemaal direct met de schermgrootte. XS behandelt mobiele telefoons en L behandelen grote desktops. Het was belangrijk dat elke pagina in overeenstemming met het scherm en was gemakkelijk te gebruiken op telefoons en grote schermen.
Universal Styles Cheatsheet
ik zou verschillende elementen op de website hebben die steeds weer gebruikt zouden worden. Knoppen zouden hetzelfde in de hele site. Specifieke klassen voor koppen en links zouden op een bepaalde manier worden vormgegeven. Ik ging verder en maakte een apart Photoshop-document voor deze stijlen. Op deze manier kon ik gewoon slepen en neerzetten van de map/laag op de Wireframe en alles zou consistent zijn.
Mobile-First Design
Bootstrap is gebouwd zodat u begint met de mobiele versie van uw site en ontwerp. Zodra u klaar bent met het ontwerp op het mobiele scherm, u naar de volgende grootte omhoog, enzovoort.
dit was niet altijd het makkelijkst om te doen. In grafisch ontwerp, we weten dat het proberen om een grafische ‘groter’ vaak creëert rasterisatie en vervaagdheid. Dit heeft geen invloed op SVG of vectorafbeeldingen, maar soms is het makkelijker om te ontwerpen voor de grote desktop en je een weg naar beneden te verplaatsen. In deze situatie, Ik had zowel de XS en de l versie op mijn scherm en deed een beetje van beide op hetzelfde moment.
ontwerpen in de Browser
er zijn een paar kleine stappen tussenin, de volgende grote stap is het nemen van de mock-ups en wireframes naar het web. Pagina voor pagina begon ik de HTML te bouwen om de pagina ‘ s te vullen. Ik zou de inhoud van mijn Word-document te kopiëren en maak een placeholder Pagina voor elke ‘categorie’. Ik keek naar verschillende unieke pagina structuren:
- Homepage – volledig uniek vergeleken met andere pagina ‘s
- Owners List – pulled in by database
- Owners Single – pulled in by database
- Seasons/League List – pulled in by database
- Seasons Single – pulled in by database
- Records – pulled in by database
- Rules – static
het skelet van deze pagina’ s was zeer vergelijkbaar. Ik begon met een en styled alle stukken. Met behulp van klassen en ID ‘ s, heb ik ervoor gezorgd dat deze stijlen gemakkelijk toegankelijk zou zijn voor toekomstig gebruik. Vele uren later had ik het kader gestyled en klaar om te gaan. Alles wat we nu nodig hadden was een database maken en de informatie erbij halen. Makkelijker gezegd dan gedaan.
Database Deep Dive
Ik was een beginner toen ik dit project startte en werd een verdomd expert tegen het einde. Ik was vastbesloten dat ik niet zou bezuinigen of elimineren van een van de functies die ik wilde. Dit betekende uren, uren, en uren van het werk uitzoeken hoe te trekken in de exacte informatie die ik nodig had.
de basisregels van Databases
bij mijn eerste grote databaseproject leerde ik op de harde manier dat je geen informatie van tafel tot tafel zou moeten herhalen. Deze records kunnen worden gekoppeld en geavanceerde code moet worden gebruikt om te bellen in de informatie die u nodig hebt. Met een beetje meer training en veel meer tijd testen, leerde ik een aantal best practices over planning.
ik gebruikte indexkaarten, post-it notes en maakte uiteindelijk een spreadsheet – ik maakte een gedetailleerd overzicht van mijn database en alle velden die in elke tabel zouden gaan. Hierdoor kon ik gemakkelijk begrijpen het huwelijk van sommige records en hoe ze zouden interageren.
database spiekbriefje in Excel
Ja, u kunt alles typen in SQL of in een subliem tekstbestand, maar dat kan behoorlijk ontmoedigend zijn. Door middel van een paar projecten, heb ik een Excel-blad dat is geformatteerd, zodat ik kan kopiëren en plakken het hele blad recht in MySQL. Ik kan de gegevens van een spreadsheet lezen en het er recht in duwen. Dit is een absolute tijdsbesparing.
de Database laten werken
dit was een uitdaging. Ik belde niet alleen een paar regels code. Ik probeerde om individuele fantasy football game data te nemen en uit te bouwen van een website met individuele eigenaren wint, verliezen, scores, winst, games, enz… Het was een hoop wiskunde en nog meer codering.
ik ben hier bijna een maand of langer mee bezig geweest; ik vrees dat meer typen hier ernstige flashbacks zal veroorzaken.
Illustrator en grafieken
ik heb ervaring met Adobe Illustrator. Op de universiteit en de middelbare school, maakte ik tal van projecten en leerde alle tools. Aangezien ik niet ga rond reclame voor mijn grafische vaardigheden( veel), Ik krijg roestig. Dit was een geweldige kans om terug in de mix en maak een aantal aangepaste graphics.
na een opfriscursus Lynda.com ik besloot dat mijn sidebars wat graphics nodig hadden. Ik leerde een ding of twee over SVG en hoe ze kunnen profiteren websites. Voeg een andere vaardigheid en wat kennis toe aan mijn CV.
testen en starten
testen voor uzelf is iets eenvoudiger dan testen voor een client. Als je een probleem ziet, log je het en je lost het op. Ook het ontwikkelen van uw eigen site en het maken van uw eigen thema laat weinig te testen wanneer u zijn het testen als je gaat.
de lancering was vergelijkbaar. Gezien de oude rffl-site ontving zeer weinig verkeer en het was buiten het seizoen, hoefde ik me niet te veel zorgen te maken over down-time. Met een simpele schakelaar van een knop, hadden we een gloednieuwe site op het Internet.
Final Thoughts – database Hard-Coded Website
ik weet niet zeker of ik door de uren code zou zijn gegaan om dit te laten gebeuren als ik niet zo gepassioneerd was over het eindresultaat. Na verloop van tijd realiseerde ik me dat veel van dit kan worden gedaan met WordPress of backend CMS. Hoewel er voordelen zijn aan het hebben van een handgecodeerde website (check out de snelheid score), zijn er ook negatieven-zoals het doorbrengen van maanden op het project. Er zijn waarschijnlijk (er zijn) oplossingen die er trekken deze game records in WordPress, ik denk dat het leren van de backend maakte me veel beter in Databases en SQL.