I can confidently say that I run my fantasy football league like a legitimate business. Olen käyttänyt tunteja laskentataulukoiden, dokumenttien ja tietokantojen tekemiseen rakentaakseni tätä brändiä. Asiakaskunta on tosin pieni, ja siihen kuuluu yleensä kymmenkunta dorkaa miestä ja naista. Mestari on kuitenkin vain seuransa veroinen. Se tarkoittaa, että yhtiön on oltava laillinen.
Real Fantasy Football League perustettiin vuonna 2005. minun ja Justin Benlinen toimeksiannosta. Isännöimme useita liigoja vuodessa ja pelaamme kunnon määrän ”jellybeans”. Jotta voisimme rekrytoida ja saada uusia omistajia antamaan meille heidän ”hyytelönsä”, meidän oli tehtävä vastaväitebrändäys. Pidin myös tietää minun tilastot vuodesta toiseen (tämä on nörtti-numerot peli by-the-way).
tehtävä: tarvitsemme tietokannan
vaikka en 10-luvun alussa tehnyt hirveästi nettisivuja, tein muutamia poikkeuksia. Kun ystäväni Dave esitteli minut WordPress, aloin puuhastella PHP. Paras tapa oppia jotain uutta on löytää lemmikkiprojekti ja aloittaa pelaaminen. RFFL vaikutti hyvältä valinnalta.
vuonna 2011 tein HTML: n perussivuston ja esittelin jonkin verran PHP: tä. Tein dynaamisen otsikon, alatunnisteen ja jopa pyöriviä bannerimainoksia sivupalkissa. Sivusto ei ollut kovin monimutkainen, mutta se sisälsi luettelon omistajista ja joitakin perustietoja. Sivuston päivittäminen vuosi vuodelta oli työlästä. Käsin tekeminen matematiikka laskea voitto / tappio kirjaa ja ottaa kova koodi jokaisen kuvan oli tuskaa. Oma suosikki osa sivuston oli kirjaa ja tilastot, mutta se aiheutti myös eniten turhautumista.
-
kotisivut. Ei paljon sitä, mutta ei pelata joitakin PHP bannereita. -
tuon Rob Brandonin kuvan lisäksi tämä oli aika tylsä sivu. -
kuvat ovat ajallisesti hukassa, mutta Wayback Machine näyttää kyllä sen ruumiillisen työn, jonka laitoin tallenteiden näyttämiseen. -
nämä ennätykset ovat ikivanhoja. Tarvitsen jotain parempaa. -
lähenee tahtoani saada tilastoja, mutta silti aivan liikaa koodausta.
en tiennyt silloin olevan parempaa keinoa. Pelasin WordPress blogini, mutta ei oikeastaan ymmärrä valtaa tietokannan. Opiskeluaikoina kävin peruskurssin ja opin, miten tietokannat toimivat, mutta en koskaan ajatellut, että ne pyörittävät Internetiä. Taisin vain olettaa, että kaikki suuret sivustot hoidettiin satoja ihmisiä manuaalisesti lisäämällä tietueita.
SQL: tietokantojen kieli
RFFL-sivusto oli toinen virallinen lempiprojektini ja toinen syväsukellukseni tietokantoihin. Kun minut oli määrätty koti-isäksi, käytin vapaa-aikaani oppiakseni jotain uutta. Ensimmäinen projektini oli yritystä ja erehdystä. Fantasiajalkapallosivustoni nosti taitoni uudelle tasolle.
vaikka ensimmäinen lempiprojektini oli vähän sekaisin, opin modernin web-kehityksen taustalla olevat periaatteet.
kuiva-älä toista itseäsi. Sinun ei pitäisi monistaa koodia. Kirjoita se kerran ja selvittää, miten tuoda se sivulle. Tietokannat tekevät tämän. Opettelin käyttämään tietokantoja.
Team Treehousen ja Lynda.com, löysin ja oppinut kielen SQL. Tässä vaiheessa, olin myös melko kehittynyt PHP. Käyttämällä PHP kehittää verkkosivuilla ja SQL hakea tietoja tietokannasta, sinulla on itse melko fiksu verkkosivuilla. Sen sijaan, että kirjoittaisin joukkueeni nimen ja tilastot käsin, voin vain vetää ne useista taulukoista tietokannasta.
Kiitos Bootstrap
opin välivuosinani paljon. Ei vain minä ahtaa tonnia videoita ja tutorials SQL, MySQL, PHP, HTML5, CSS, ja yleiset web perusteet – opin kaiken kehyksiä. Aloitin kehyksestä nimeltä Foundation ja siirryin Bootstrapiin. Niin hölmöltä kuin se kuulostaakin, taisin suosia Bootstrapia, koska sen tekivät Twitterin omistajat.
mikä on kehys?
taas kerran olin aika naiivi. Collegessa ei puhuttu kehyksistä. Luulin, että kaikki tehdään käsityönä ja tyhjästä joka kerta. Se ei pidä paikkaansa.
ystävämme Wikipedia selittää Bootstrapin seuraavasti:
Bootstrap on ilmainen ja avoimen lähdekoodin CSS-kehys, joka on suunnattu responsiiviseen, mobile-first front-end-web-kehitykseen. Se sisältää CSS-ja JavaScript-pohjaisia suunnittelumalleja typografialle, lomakkeille, painikkeille, navigaatiolle ja muille käyttöliittymäkomponenteille.
Wikipedia
sen sijaan, että sinun pitäisi luoda kaikki tyylisi ja ruudukkosi tyhjästä, Bootstrapissa on kaikki luotu ja sinä vain muokkaat niiden tyylejä. Melkoinen ajansäästäjä!
ruudukot, fontit ja skriptit – Oh My!
Bootstrap antaa sinulle kaikenlaisia lyhytnumeroita luoda joitakin monimutkaisempia kohteita. En ole ohjattu Javascript, mutta käyttämällä Bootstrap sain helposti luoda karuselleja, haitarit, ja muita melko yleisiä sivuston toimintoja.
Google Fontsista pystyi helposti kutsumaan fontteja, joten typografian kanssa oli paljon luovempaa kuin aiemmilla sivustoillani. Voimme jopa käyttää fonttikuvakkeita ja säästää aikaa grafiikan luomisessa.
mikä parasta, Bootstrapille oli jo tehty ruudukko, joten voimme muokata mallejamme vuorovaikutuksessa ja mukautua eri näyttökokoihin. Tämä teki sivustosta automaattisesti mobiiliystävällisen ja saisi mukavan kolauksen Googlessa siitä, että se reagoi.
koska Bootstrapissa on joitain perustyylejä ja jopa näppäriä PSD-johdinkehystiedostoja, oli aika aloittaa suunnittelu.
brändin päivittäminen
rffl-merkki syntyi vahingossa 00-luvun puolivälissä. löysin fontin, johon oli kirjoitettu ”RFFL”, lisäsin siihen muutamia vetoja ja ulompia hehkuja ja kutsuin sitä päiväksi. Oli virkistyksen aika.
Käyttäjän ominaisuudet
teen monissa tilanteissa netissä syväsukelluksen ja vedän varteenotettavaa tutkimusta mahdollisesta yleisöstä. Tässä tapauksessa-olen tuntenut tämän yleisön ydinryhmän suurimman osan elämästäni.
vaikka tunnen ystäväni suosikkibändit, jalkapallojoukkueet ja poliittiset näkemykset – minulla ei ollut aavistustakaan, miten he käyttivät verkkoa. Muutaman työkalun avulla pystyin rakentamaan hahmopersoonan ja pystyin strategisoimaan sivuston ominaisuuksista ja suunnittelusta heidän käyttökokemuksensa avuksi.
tasosuunnittelu
tämän projektin alussa yleinen verkko-ja graafisen suunnittelun suuntaus oli nimeltään flat design.
kysytään Wikipediasta uudestaan-mitä on litteä muotoilu?
Flat design on käyttöliittymäsuunnittelutyyli, jossa korostuvat vähintään sellaiset tyylilliset elementit, jotka antavat illuusion kolmesta ulottuvuudesta (kuten pisaravarjojen, kaltevuuksien tai tekstuurien käyttö), ja jossa keskitytään yksinkertaisten elementtien, typografian ja litteiden värien minimalistiseen käyttöön.
Wikipedia
tasainen muotoilu on juuri sitä, mitä olin hakemassa ja pelasi myös erittäin hyvin Bootstrapissa olevia esirakenteita. Aloittaisin logosta ja poistaisin kaikki nuo viivat ja hehkut.
Typografia ja fontti
vaikka keskittyisin ensisijaisesti verkkosivustoon, teen myös oman osuuteni painatustyöstä. Oli tärkeää, että löysin fontin, jota voisin käyttää verkossa ja saada sen jatkuvasti näkyviin kaikissa tietokoneissa. Google Fonts teki tästä helppoa ja joustavaa. Tehtyäni joukko yrityksen ja erehdyksen, päätin fontti yhdistelmä Oswald ja Josefin Sans. Molemmat fontit toimivat eri painoilla, koteloilla ja kooilla.
väri
RFFL toimi aina mustan ja harmaan kanssa. Uusi tyyli pysyisi samana, mutta heittäisi mukaan useita uusia sävyjä. Vaihtaisin paljon mustaa valkoiseen tilaan.
vaikka pääsivusto ei olekaan supervaltainen, käytämme sinistä, vihreää ja punaista tarkoittamaan yksittäisiä liigojamme. Nämä tulevat peliin monien staattisten mainosten kanssa ja tulostavat vakuuksia.
mitä nettisivuilla tapahtuu
merkin yleisilmeen asetellessa olin valmis aloittamaan suunnittelun. Useimmat ajattelisivat, että tämä alkaa kynän/paperin tai digitaalisen taideohjelman hankkimisesta. Ei. Se alkaa sisällöstä.
Content First
Early on I decided that this website would do the following:
- olla helppo linkki meidän MyFantasyLeague.com verkkosivut
- tarjoavat omistaja-ja Joukkuehistoriaa
- olla liigaseurojen sääntöjen, sääntöjen ja pisteytysten koti
- Laske ja Luettele kaikki voitto-/tappio-ja pisteennätykset
- Näytä HEAD-to-HEAD-ennätykset
sen lisäksi, että en halua tuhlata enää aikaa vanhalla sivustolla, suurin syy siihen, että innostuin rakentamaan uuden sivuston oli tarkoitus näyttää omistajan päästä päähän-tuloksia. Ei ole mitään parempaa kuin roskapuhe vastustaja gameday ja käyttämällä todellista dataa tekee siitä niin paljon parempi.
verkkosivun ääriviivat
on hyvä käytäntö tehdä lista jokaisesta sivusta, jonka haluat verkkosivullesi. Voit luoda rakenteen sivuston ja mitä sivuja pitäisi olla sisäkkäisiä ja mitkä sivut ovat itsenäisiä. Yleensä, minä vain vetää pois Word-asiakirjan ja alkaa listaus Järjestämätön lista.
kun sain kaikki sivut listattua, olin valmis aloittamaan kirjoittamisen. Pienellä suunnittelulla ajattelin, että useimmat sivut eivät olisi superyksityisiä. Omistajasivuille pieni bio riittäisi. Haluaisin kopioida ja liittää sääntöjä yli ja muotoilla hieman. Suurin osa sivujen sisällöstä olisi itse asiassa tilastoja ja vedetty dynaamisesti sisään.
olinko valmis koodaamaan tai suunnittelemaan?
Verkkosivujen suunnittelu
tiesin, että raskas työ tehtäisiin tulevaisuudessa (SQL-ja PHP-koodin hallitseminen). Kun kaikki perustiedot lueteltu, voisin vetää joitakin paperia ja vain piirtää laatikoita ja tehdä joitakin käsin piirrettyjä versioita sivuston. Ei mitään monimutkaista, mutta tätä tarvittaisiin seuraavaa askelta varten.
Wireframe
tunsin oloni mukavaksi, kun vedin Photoshopin ja Wireframen PSD-tiedostot Bootstrapista. Ennen vanhaan, sinulla olisi vain yksi master wireframe tiedosto ja olisit suunnitella työpöydälle. Reagoivalla muotoilulla muotoilin ja suunnittelin jokaiselle sivulle neljä versiota.
Bootstrapilla on neljä keskeisintä raja-arvoa.
- XS-erittäin pieni
- S-pieni
- M-keskikokoinen
- L-suuri
nämä kaikki korreloivat suoraan näytön kokoon. XS käsittelee matkapuhelimia ja L suuria pöytäkoneita. Oli tärkeää, että jokainen sivu mukautui näyttöön ja sitä oli helppo käyttää puhelimissa ja suurissa näytöissä.
Universal Styles Cheatsheet
minulla olisi sivustolla useita elementtejä, joita käytettäisiin yhä uudelleen. Painikkeet olisi sama koko sivuston. Otsikoiden ja linkkien tietyt luokat muotoiltaisiin tietyllä tavalla. Tein näistä tyyleistä erillisen Photoshop-dokumentin. Näin, voisin vain vetää ja pudottaa kansion / kerroksen Wireframe ja kaikki olisi johdonmukaista.
Mobile – first Design
Bootstrap on rakennettu niin, että aloitat sivustosi mobiiliversiosta ja suunnittelusta. Kun olet valmis suunnittelu mobiili näyttö, siirryt seuraavaan kokoon ylös, ja niin edelleen.
tämä ei ollut aina helpoimmasta päästä. Graafisessa suunnittelussa tiedetään, että yrittämällä tehdä graafisesta ’Isommasta’ syntyy usein rasterointia ja fuzziness. Tämä ei vaikuta SVG-tai Vektorikuviin, mutta joskus on helpompi suunnitella suurelle työpöydälle ja siirtyä alaspäin. Tässä tilanteessa minulla oli sekä XS että L-versio näytölläni ja tein vähän molempia samaan aikaan.
Designing in the Browser
myönnettäköön, että välissä on muutama pieni askel, seuraava iso siirto on mallikappaleiden ja rautalankamallien vieminen verkkoon. Sivu sivulta, aloin rakentaa HTML täyttää sivuja. Kopioin sisällön Word-asiakirjastani ja teen yhden paikkamerkin jokaiselle ’luokalle’. Katselin useita ainutlaatuisia sivurakenteita:
- Homepage – täysin uniikki muihin sivuihin verrattuna
- omistajien lista – vedetty tietokantaan
- omistajat yhden vetänyt tietokantaan
- Seasons/League List – vedetty tietokantaan
- Seasons yhden vetänyt tietokantaan
- Records – vedetty tietokantaan
- rules – staattinen
näiden sivujen luuranko oli hyvin samankaltainen. Aloitin yhdellä ja stailasin kaikki kappaleet. Luokkien ja henkilökorttien avulla varmistin, että nämä tyylit olisivat helposti saatavilla tulevaa käyttöä varten. Monta tuntia myöhemmin sain puitteet muotoiltua ja valmiina lähtöön. Tarvitsimme vain tietokannan ja tiedot. Helpommin sanottu kuin tehty.
Database Deep Dive
olin noviisi aloittaessani tämän projektin ja minusta tuli lopussa hemmetin asiantuntija. Olin päättänyt, etten oiko mutkia enkä poista mitään niistä piirteistä, joita halusin. Tämä merkitsi tuntien ja tuntien työtä sen miettimisessä, miten saisin juuri tarvitsemani tiedot.
tietokantojen perussäännöt
ensimmäisen ison tietokantaprojektini myötä opin kantapään kautta, ettei tietoa pidä toistaa pöydästä toiseen. Nämä tietueet voidaan yhdistää ja hienostunut koodi olisi käytettävä soittaa tietoja tarvitset. Vähän enemmän koulutusta ja paljon enemmän aikaa testaus, opin joitakin parhaita käytäntöjä suunnitteluun.
käytin indeksikortteja, post-it – muistiinpanoja ja lopulta laadin taulukkolaskennan-loin yksityiskohtaisen hahmotelman tietokannastani ja kaikista kenttistä, jotka menisivät kuhunkin taulukkoon. Näin pystyin helposti ymmärtämään joidenkin levyjen avioliiton ja niiden vuorovaikutuksen.
tietokanta lunttilappu Excel
Kyllä, voit kirjoittaa kaiken ulos SQL tai ylevä tekstitiedosto, mutta se voi melko pelottava. Läpi muutamia hankkeita, loin Excel-arkki, joka on muotoiltu niin voin kopioida ja liittää koko arkki suoraan MySQL. Voin lukea tiedot laskentataulukosta ja työntää ne suoraan sisään. Tämä säästää aikaa.
tietokannan saaminen toimimaan
tämä oli haaste. En soittanut vain muutaman rivin koodia. Yritin ottaa yksittäisiä fantasia jalkapallo pelin tiedot ja rakentaa verkkosivuilla yksittäisten omistajien voitot, tappiot, tulokset, tulos, pelit, jne… Se oli paljon matematiikkaa ja vielä enemmän koodaus.
käytin tähän lähes kuukauden tai pitempään; pelkään, että kirjoittamalla siitä lisää tähän tulee vakavia takaumia.
kuvittaja ja grafiikka
Minulla on kokemusta Adobe Illustratorista. Yliopistossa ja lukiossa tein paljon projekteja ja opettelin kaikki työkalut. Koska en kiertele mainostamassa graafisia taitojani (paljon), ruostun. Tämä oli loistava tilaisuus päästä takaisin miksaukseen ja tehdä muokattuja grafiikoita.
kertauskurssin jälkeen Lynda.com päätin, että sivupalkit tarvitsevat grafiikkaa. Opin jotain SVG: stä ja siitä, miten he voivat hyötyä verkkosivustoista. Lisää uusi taito ja tietoa ansioluettelooni.
testaus ja lanseeraus
itselle testaaminen on hieman helpompaa kuin asiakkaalle. Kun näet ongelman, kirjaat sen ja korjaat sen. Myös oman sivuston kehittäminen ja oman teeman tekeminen ei jätä juurikaan testattavaa, kun on testannut matkan varrella.
laukaisu oli melko samanlainen. Ottaen huomioon vanha RFFL sivusto sai hyvin vähän liikennettä ja se oli off-season, minun ei tarvitse huolehtia paljon alas-aika. Yksinkertaisella napin painalluksella, meillä oli upouusi sivusto Internetissä.
Final Thoughts-Database Hard-Coded Website
en ole varma, olisinko käynyt tunnit koodin läpi, jos en olisi ollut niin intohimoinen lopputuloksen suhteen. Aikanaan tajusin, että paljon tästä voitaisiin tehdä WordPress tai backend CMS. Vaikka on olemassa etuja ottaa käsin koodattu verkkosivuilla (tarkista nopeus pisteet), on myös negatiivisia – kuten menojen kuukausia projektin. On luultavasti (on) ratkaisuja siellä vetää näitä peli kirjaa WordPress, mielestäni oppiminen backend teki minusta paljon parempi tietokannoissa ja SQL.