jeg kan trygt sige, at jeg kører min fantasy football league som en legitim forretning. Jeg har brugt timer på at lave regneark, dokumenter og databaser, der bygger dette mærke. Indrømmet, kundegrundlaget er lille og består normalt af et dusin dorky mænd og kvinder. Men mesteren er kun så god som virksomheden. Det betyder, at virksomheden skal være legitim.
Real Fantasy Football League blev oprettet i 2005. bestilt af mig selv og Justin Benline. Vi er vært for flere ligaer om året og spiller for en anstændig mængde ‘jellybeans’. For at rekruttere og få nye ejere til at give os deres ‘jellybeans’, vi havde brug for at gøre en tilbagevisning branding. Jeg kunne også godt lide at kende min statistik fra år til år (dette er et nerdy-numbers spil forresten).
opgaven: Vi har brug for en Database
selvom jeg ikke lavede en enorm mængde hjemmesider i begyndelsen af 10 ‘erne, lavede jeg nogle få undtagelser. Når min ven Dave introducerede mig til ordtryk, begyndte jeg at dabble i PHP. Den bedste tilgang til at lære noget nyt er at finde et kæledyrsprojekt og begynde at spille. Rffl virkede som et godt valg.
i 2011 lavede jeg en grundlæggende HTML hjemmeside og introducerede nogle PHP. Jeg lavede en dynamisk overskrift, sidefod og endda nogle roterende bannerannoncer på en sidebjælke. Sitet var ikke meget kompleks, men indeholdt en liste over ejere og nogle grundlæggende oplysninger. Opdatering af siden år-over-år var en opgave. Manuelt at lave matematikken for at beregne sejr/tabsposter og skulle hårdt kode hvert billede var en smerte. Min favorit del af sitet var de optegnelser og statistik, men det forårsagede også den mest frustration.
hjemmesiden. Ikke meget til det, men spillede med nogle PHP bannere.
udover at billedet af Rob Brandon, dette var en temmelig kedelig side.
billederne går tabt i tiden, men Tilbagekoblingsmaskinen viser det manuelle arbejde, jeg lægger i at vise optegnelser.
disse poster er gamle. Jeg har brug for noget bedre end dette.
kom tættere på mit ønske om at få statistik, men stadig alt for meget kodning.
jeg vidste ikke, at der var en bedre måde på det tidspunkt. Jeg spillede i min blog, men forstod ikke rigtig kraften i en database. På college tog jeg et meget grundlæggende Adgangskursus og lærte, hvordan databaser fungerer, men troede aldrig, at de kørte internettet. Jeg antager, at jeg bare antog, at alle de store hjemmesider blev håndteret af hundredvis af mennesker, der manuelt tilføjede poster.
kvm: databasernes sprog
rffl-hjemmesiden var mit andet officielle kæledyrsprojekt og mit andet dybdyk i databaser. Efter at være blevet tildelt som hjemme-far, udnyttede jeg min fritid til at lære noget nyt. Mit første projekt var en masse forsøg og fejl. Min fantasy fodbold site var at tage mine færdigheder til et nyt niveau.
selvom mit første pet-projekt var lidt af et rod, lærte jeg principperne bag moderne internetudvikling.
tør – gentag ikke dig selv. Du bør aldrig duplikere kode. Skriv det en gang og find ud af, hvordan du bringer det ind på din side. Databaser gør dette ske. At lære at bruge databaser var noget, jeg havde brug for at mestre.
med hjælp fra Team Treehouse og Lynda.com, jeg fandt og lærte sproget i CCL. På dette tidspunkt var jeg også ret avanceret med PHP. Ved at bruge PHP til at udvikle hjemmesiden og til at hente data fra en database, har du selv en ret smart hjemmeside. I stedet for manuelt at indtaste mit teamnavn og statistik, kan jeg bare trække dem fra flere tabeller i en database.
Tak Bootstrap
jeg lærte meget i mine år. Ikke alene har jeg proppet i tonsvis af videoer og tutorials på , PHP, HTML5, CSS, og generelle internet fundamentals – jeg lærte alt om rammer. Jeg startede med en ramme kaldet Foundation og gik videre til Bootstrap. Så dumt som det lyder, tror jeg, jeg foretrak Bootstrap, fordi det blev lavet af de mennesker, der ejer kvidre.
Hvad er en ramme?
endnu en gang var jeg temmelig naiv. På college nævnte de aldrig rammer. Jeg troede, at alt var håndlavet og lavet fra bunden hver gang. Det er ikke tilfældet.
vores ven forklarer Bootstrap som:
Bootstrap er en gratis og open source CSS ramme rettet mod lydhør, mobil-første front-End hjemmeside udvikling. Den indeholder CSS-og JavaScript-baserede design skabeloner til typografi, formularer, knapper, navigation og andre interface komponenter.I stedet for at skulle oprette alle dine stilarter og gitre fra bunden, har Bootstrap alt oprettet, og du ændrer bare deres stilarter. Tal om en tidsbesparelse!
Grids, skrifttyper og Scripts-Åh min!
Bootstrap giver dig alle typer af kortkoder til at skabe nogle af de mere komplicerede elementer. Jeg er ingen guide på Javascript, men ved hjælp af Bootstrap tillod mig nemt at oprette karruseller, harmonikaer og andre ret almindelige hjemmesidefunktioner.
vi kunne nemt kalde skrifttyper fra Google Fonts, så jeg kunne blive mere kreativ med typografien end mine tidligere sider. Vi kan endda bruge font ikoner og spare tid på at skabe grafik.
bedst af alt, Bootstrap havde allerede lavet et gitter, så vi kan tilpasse vores design til at interagere og tilpasse sig forskellige skærmstørrelser. Dette gjorde stedet automatisk mobilvenligt og ville få en god bump i Google for at være lydhør.
da Bootstrap kommer med nogle grundlæggende styling og endda nogle handy PSD trådramme filer, var det tid til at begynde at designe.
opdatering af mærket
rffl-mærket blev oprettet ved et uheld i midten af 00’erne. Jeg fandt en skrifttype, skrevet ‘RFFL’, tilføjede nogle streger og ydre glød og kaldte det en dag. Det var tid til en forfriskning.
Brugeregenskaber
i mange situationer gør jeg et dybt dyk online og trækker nogle seriøse undersøgelser om det potentielle publikum. I dette tilfælde-jeg har kendt kernegruppen i dette publikum i størstedelen af mit liv.
jeg tog de oplysninger, jeg vidste om ligaen og mine venner og forsøgte at udvikle en nem, brugervenlig hjemmeside. STORE OVERSKRIFTER!
selvom jeg kender min vens yndlingsbands, fodboldhold og politiske synspunkter – havde jeg ingen anelse om, hvordan de brugte internettet. Med hjælp fra et par værktøjer, jeg var i stand til at opbygge en karakter persona og i stand til at strategisere om de funktioner og design af hjemmesiden til at hjælpe deres brugeroplevelse.
fladt Design
en fælles net-og grafisk designtrend i starten af dette projekt blev kaldt fladt design.
lad os spørge igen-Hvad er fladt design?
fladt design er en stil med interface-design, der understreger minimal brug af stilistiske elementer, der giver illusionen af tre dimensioner (såsom brugen af dropskygger, gradienter eller teksturer) og er fokuseret på en minimalistisk brug af enkle elementer, typografi og flade farver.
Flat design er præcis, hvad jeg gik efter og spillede også meget godt til de forudbyggede elementer i Bootstrap. Jeg ville starte med logoet og fjerne alle disse streger og gløder.
typografi og skrifttype
selvom jeg primært ville fokusere på en hjemmeside, udfører jeg også min rimelige andel af udskrivningsarbejde. Det var vigtigt, at jeg fandt en skrifttype, som jeg kunne bruge på nettet og få den konsekvent vist på alle computere. Google Fonts gjorde det nemt og fleksibelt. Efter at have lavet en masse forsøg og fejl besluttede jeg mig for skrifttypekombinationen Osvald og Josefin Sans. Begge skrifttyper arbejdede med forskellige vægte, sager og størrelser.
farve
RFFL arbejdede altid med sort og grå. Den nye stil ville forblive den samme, men smide i flere nye nuancer. Jeg ville erstatte en masse sort med hvidt rum.
selvom det ikke er super udbredt på den vigtigste hjemmeside, bruger vi blå, grøn og rød til at betegne vores individuelle ligaer. Disse kommer i spil med mange af de statiske annoncer og udskrive sikkerhedsstillelse.
hvad der foregår på hjemmesiden
med det generelle udseende af mærket lagt ud, var jeg klar til at begynde at designe. De fleste ville tro, at dette starter med at komme ud en pen/papir eller digital kunst program. Niks. Det starter med indholdet.
indhold først
tidligt besluttede jeg, at denne hjemmeside ville gøre følgende:
Vær et nemt link til vores MyFantasyLeague.com hjemmesider
Giv ejer-og Holdhistorik
vær hjemsted for reglerne, forskrifterne og scoringen for ligaerne
Beregn og liste alle vinder/tab og scoringsrekorder
Vis head-to-HEAD poster
udover ikke at ville spilde mere tid på det gamle sted, var den største grund til, at jeg var begejstret for at opbygge et nyt hjemmesiden skulle vise ejer head-to-head resultater. Der er ikke noget bedre end papirkurven-at tale din modstander på gameday og bruge faktiske data gør det så meget bedre.
Hjemmesideoversigten
det er god praksis at lave en liste over hver side, du ønsker på din hjemmeside. Du kan oprette strukturen på hjemmesiden, og hvilke sider der skal indlejres, og hvilke sider der er uafhængige. Normalt trækker jeg bare et orddokument ud og begynder at liste med en uordnet liste.
masser af sider, der udvikles og skitseres her. Heldigvis, jeg skulle have en database til at trække det meste af indholdet ind.
når jeg havde alle de nævnte sider, var jeg klar til at begynde at skrive. Med lidt planlægning regnede jeg med, at de fleste sider ikke ville være super detaljerede. For ejer sider, en lille bio ville gøre. Jeg ville kopiere og indsætte reglerne igen og formatere lidt. Det meste af indholdet til siderne ville faktisk være statistik og trækkes dynamisk ind.
var jeg klar til at kode eller designe?
design af hjemmesiden
jeg vidste, at den tunge løft ville ske i fremtiden (mastering af KVM og PHP-koden). Med alle de grundlæggende oplysninger, der er anført, jeg kunne trække noget papir ud og bare tegne kasser og lave nogle håndtegnede versioner af siden. Intet kompliceret, men det ville være nødvendigt for det næste trin.
trådramme
jeg følte mig godt tilpas med at trække Photoshop og trådrammen PSD-filer fra Bootstrap. I gamle dage ville du bare have en master-rammefil, og du ville designe til skrivebordet. Med et responsivt design formaterede og designede jeg fire versioner til hver side.
med Bootstrap har du fire store breakpoints.
HS – ekstra lille
S – lille
M – Medium
L – stor
tre forskellige versioner af hjemmesiden – endnu en side. Responsivt design er vejen at gå, børn. John Edgar og Aaron Rodgers?
disse korrelerer alle direkte med skærmstørrelse. Vi beskæftiger os med mobiltelefoner, og vi håndterer store desktops. Det var vigtigt, at hver side var i overensstemmelse med skærmen og var nem at bruge på telefoner og store skærme.
Universal Styles Cheatsheet
jeg ville have flere elementer på hjemmesiden, der ville blive brugt igen og igen. Knapper ville det samme på hele siden. Specifikke klasser for overskrifter og links ville blive stylet på en bestemt måde. Jeg gik videre og lavede et separat Photoshop-dokument til disse stilarter. På denne måde kunne jeg bare trække og slippe mappen/laget på rammen, og alt ville være konsistent.
Mobile-første Design
Bootstrap er bygget, så du starter med den mobile version af din hjemmeside og design. Når du er færdig med designet på mobilskærmen, flytter du til den næste størrelse og så videre.
dette var ikke altid det nemmeste at gøre. I grafisk design ved vi, at forsøg på at gøre en grafisk ‘større’ ofte skaber rasterisering og uklarhed. Dette påvirker ikke SVG-eller vektorbilleder, men nogle gange er det lettere at designe til det store skrivebord og bevæge dig ned. I denne situation havde jeg både HS og L-versionen op på min skærm og gjorde en lille smule af begge på samme tid.
design i Bro.ser
indrømmet der er et par små skridt imellem, det næste store træk tager mock-ups og trådrammer til internettet. Side for side begyndte jeg at bygge HTML for at udfylde siderne. Jeg ville kopiere indholdet fra mit orddokument og lave en pladsholderside for hver ‘kategori’. Jeg kiggede på flere unikke sidestrukturer:
hjemmeside – helt unik sammenlignet med andre sider
Ejerliste – trukket ind af database
ejere Single – trukket ind af database
sæsoner/Ligaliste – trukket ind af database
sæsoner Single – trukket ind af database
Records – trukket ind af database
regler – statisk
skeletet på disse sider var meget ens. Jeg startede med en og stylede alle stykkerne. Ved hjælp af klasser og ID ‘ er sørgede jeg for, at disse stilarter ville være let tilgængelige til fremtidig brug. Mange timer senere, jeg havde rammen stylet og klar til at gå. Alt, hvad vi havde brug for nu, var at oprette en database og hente oplysningerne. Nemmere sagt end gjort.
Database Deep Dive
jeg var en novice, da jeg startede dette projekt og blev en forbandet ekspert i slutningen. Jeg var fast besluttet på, at jeg ikke ville skære hjørner eller fjerne nogen af de funktioner, jeg ønskede. Dette betød timer, og timer, og timers arbejde med at finde ud af, hvordan man trækker de nøjagtige oplysninger, jeg havde brug for.
de grundlæggende regler for databaser
med mit første store databaseprojekt lærte jeg på den hårde måde, at du ikke skulle gentage oplysninger fra tabel til tabel. Disse poster kan knyttes sammen, og sofistikeret kode skal bruges til at ringe til de oplysninger, du har brug for. Med lidt mere træning og meget mere tidstest lærte jeg nogle bedste praksis om planlægning.
databaser kan være tricky. Planlægning er nøglen til ikke at trække alt dit hår ud.
jeg brugte indekskort, post-it – noter og til sidst oprettede et regneark-jeg oprettede en detaljeret oversigt over min database og alle de felter, der ville gå ind i hver tabel. Dette gjorde det muligt for mig let at forstå ægteskabet med nogle poster, og hvordan de ville interagere.
database snydeark
ja, du kan skrive alt ud i en sublim tekstfil, men det kan ret skræmmende. Gennem et par projekter oprettede jeg et ark, der er formateret, så jeg kan kopiere og indsætte hele arket lige ind i Myskl. Jeg kan læse dataene fra et regneark og skubbe det lige ind. Dette er en absolut timesaver.
at få databasen til at fungere
dette var en udfordring. Jeg ringede ikke bare et par linjer kode. Jeg forsøgte at tage individuelle fantasy fodboldkamp data og opbygge en hjemmeside med individuelle ejere vinder, tab, scoringer, indtjening, spil, osv… Det var en masse matematik og endnu mere kodning.
jeg brugte næsten en måned eller længere på dette; Jeg frygter at skrive mere om det her vil forårsage alvorlige flashbacks.
Illustrator og grafik
jeg har erfaring med Adobe Illustrator. På college og gymnasium lavede jeg masser af projekter og lærte alle værktøjerne. Da jeg ikke går rundt og reklamerer for mine grafiske færdigheder (meget), bliver jeg rusten. Dette var en stor chance for at komme tilbage i blandingen og lave nogle brugerdefinerede grafik.
Alle grafik på sitet blev skabt fra bunden – af mig. De er måske ikke kunstværker, men de er originale.
efter et genopfriskningskursus på Lynda.com, jeg besluttede, at mine sidebjælker havde brug for noget grafik. Jeg lærte en ting eller to om SVG og hvordan de kan gavne hjemmesider. Tilføj en anden færdighed og en vis viden til mit CV.
test og lancering
test for dig selv er lidt lettere end test for en klient. Når du ser et problem, logger du det, og du løser det. Også udvikle din egen hjemmeside og gøre dit eget tema efterlader lidt at teste, når du har testet som du går.
lanceringen var temmelig ens. I betragtning af det gamle rffl-sted modtog meget lidt trafik, og det var uden for sæsonen, jeg behøvede ikke at bekymre mig for meget om nedetid. Med en simpel knapskift havde vi et helt nyt sted på internettet.
Endelige tanker – database Hard-kodet hjemmeside
fra tegning til kodning, dette var en udfordrende endnu sejrende projekt. Ubesejret sæson.
jeg er ikke sikker på, om jeg ville have gennemgået timerne med kode for at få dette til at ske, hvis jeg ikke var så lidenskabelig over slutresultatet. Med tiden indså jeg, at meget af dette kunne gøres med backend CMS. Selvom der er fordele ved at have en håndkodet hjemmeside (tjek speed score), er der også negativer – som at bruge måneder på projektet. Der er sandsynligvis (der er) løsninger derude, der trækker disse spiloptegnelser i ordtryk, jeg tror at lære backend gjorde mig langt bedre i databaser og kvm.
