Tillverkningen av: DIY-IT Project guide

Om du arbetar på en DIY projekt egen, denna omfattande guide till teknikprojekt är ett bra ställe att börja.

I början av januari släppte jag en större uppdatering av DIY-IT Project Guide, vår kompendium av alla tillverkare stil projekt jag har gjort här på hemsidan. Det bestod av en curator kompendium med dåvarande 347 artiklar (det finns mer nu), organiserad av kategori. Projekt Guide var själv, ett projekt som involverade kodning, design, produktivitet tricks, och organisationstekniker.

Här är hur jag sätter ihop allt.

Samla råartikellänkar

Min DIY-IT-kolonn, som alla andra bloggar här på hemsidan, är i huvudsak en kategori i vårt content management system. Tyvärr fanns det inget enkelt sätt att helt enkelt exportera namn och adresser på alla artiklar. Och jag bara inte vill klippa och klistra hundratals länkar och titlar.

Istället skrev jag en liten skrapning program i PHP för att passera de 24 sidorna i artikeln listor och fånga relevant information. Dra ut just den information jag ville från sidorna trångt med tvärbindningar, navigeringselement, reklam komponenter och textblock krävs några kreativt tänkande.

Varje sida serveras till en webbläsare presenteras i HTML, som är en form av strukturerat källkod. Eftersom webbsidor är relativt väl utformad, nyckeln var att gräva igenom källkoden och hitta två “väljare” objekt som unikt identifierade vad jag behövde.

Den första väljaren var det element som identifierar själva artikeln. Lyckligtvis har de flesta av de artikeltitlar representerades med H3 taggar, så det var bara fråga om programmering för att dra ut en HREF-kod efter H3 taggar.

Jag behövde två väljare eftersom jag behövde också kunna hitta nästa sida länk så jag kunde korsa hela uppsättningen av sidor som innehåller mina artikel listor.

Till programmerare, är frasen “bara fråga om programmering” förkortning för “hur fan ska jag göra det?” Skrapa data från en webbsida kan vara en utmaning. Lyckligtvis är moderna webbsidor utformats med hjälp av CSS, och CSS använder väljare att fungera. Tanken är att du använder dessa väljare för att ange hur en del av sidan blir utformade. På en typisk webbplats index sida, artikeltitlar formaterad på ett visst sätt, så att de kan väljas.

Jag hittade en stor liten PHP bibliotek för att hjälpa till med detta kallas Simple HTML DOM. DOM står för Document Object Model och används för att beskriva den logiska strukturen i dokumentet – i detta fall en HTML-sida.

Med enkla HTML DOM tillgängliga för att hjälpa mig tolka de hämtade webbsidor, allt jag behövde var koden för att hämta själva sidorna. För att jag använde en annan funktion av Simple HTML DOM den file_get_html funktion. Du ger file_get_html en webbadress och det returnerar innehållet i en variabel.

Moln, moln mjukvarutillverkaren Coupa filer för $ 75.000.000 IPO, moln, Cloud computing växer upp, en API åt gången, Enterprise Software, söt SUSE! HPE hakar sig en Linux-distributioner, Cloud, Twilio rullar ut nya företag planen lovar mer smidighet

Fler stora projektidéer

Med dessa två verktyg, var jag redo att rocka. Koden börjar med att be om en startsida. Det går sedan en loop som hämtar innehållet i en sida, går igenom sidan för att dra ut alla artikelreferenser och kontrollerar sedan att se om det finns fler sidor. Om det finns fler sidor, gör det allt igen.

Koden för det hela är fäst vid slutet av denna artikel. Ja, det finns kod.

När programmet körts, presenterades jag med en stor lista över 347 rader med länkar och artikelrubriker. Som förde mig till nästa steg.

Jag ville inte bara vill presentera läsare med en stor, osorterade lista med artiklar. Jag ville läsare som är intresserade av 3D-utskrift för att kunna hitta dessa artiklar, människor som är intresserade av bredbandsstudioprojekt för att hitta det, och så vidare. Utmaningen är att jag inte skriva om dessa ämnen i ordning. Till exempel har jag skrivit om bredbands studio till och från i mer än fem år.

Organisera artiklar i kategorier

Att aggregera artiklar i ämnen, jag använde två mycket användbara verktyg: Evernote och BBEdit, en Mac-baserad textredigerare.

I Evernote, skapade jag en ny DIY-IT Project Guide anteckningsbok, med en sida (en anteckning i Evernote termer) för varje projekt. Som jag hittade artiklar för varje projekt, raderade jag dem A HREF av huvudblocket produceras av mitt program och klistras dem i rätt motsvarande notering i Evernote.

BBEdit har en funktion som visade sig vara en enorm tidsbesparing. vilket är anledningen till att jag valde detta verktyg. BBEdit är känd för sina mycket kraftfull textprocesskapacitet och som visat sig vara sant med processlinjer som innehåller feature.You välja processlinjer innehållande finns under menyn Text. En dialogruta visas, med två viktiga alternativ: Ta bort Matchade linjer och kopiera till klippbordet.

Hur detta fungerade för mig var enkel. Jag använde det för att samla artiklar som kan matcha det ämne jag letade efter. Till exempel, bearbetade jag rader som innehåller “studio”, som fann många av mina bredbands studio artiklar, bort dem ur huvudlistan, och tappade dem i Urklipp. Jag sedan klistras in det lämpliga Evernote anteckning. Jag gjorde samma sak med “gmail”, “Office 365”, “google röst”, och så vidare.

Skölj. Tvätta. Upprepa.

När jag var klar, innehållande processlinjer hade hjälpt mig bulk Sök och katalog förmodligen 90 procent av artiklarna. Jag sedan gick in i vad som fanns kvar av huvudlistan och flyttade resten av artiklarna i sina respektive kategorier. Jag utgår också ett tiotal artiklar som bara inte projektrelaterade på något sätt. De gjorde inte det i projekt Guide.

Jag har också använt Evernote notera struktur för att skriva korta introduktioner till varje kategori och korrekt finjustera namnen på varje kategori, så det skulle vara lättare för dig att hitta de artiklar du letar efter.

Utforma inom CMS begränsningar

Få alltid att falla på plats

Slutresultatet

Nästa kom designutmaning. Jag var inte bara att utforma en webbsida här, där jag kan använda oavsett stil eller ser jag ville. Jag behövde för att se projektet Guide arbetade som en artikel i våran CMS. Det innebar att jag var tvungen att arbeta inom stora begränsningar.

Jag ursprungligen skapades varje varukategori som en del av en lista. Man skulle kunna komma in i projektet Guide och se en lång lista med 22 kategorinamn. Men när jag sätta det tillsammans och tittade på det, blev det uppenbart nästan omedelbart att allt började att sudda ihop snabbt. Jag behövde en grafisk stil som skulle göra det lätt för läsarna blick snabbt igenom listan för att hitta vad de letar efter.

Jag bestämde ett rutnät av grafik skulle göra för att skapa innehållsförteckningen. Dessa blev en serie av 22 320×40 bilder. Varje ämne själv skulle ledas av en bild, som skulle vara 640×80. På så sätt kunde jag använda samma grafiska för både indexpost och ämne header – bara storlek på olika sätt.

Koden

Jag skapade en Photoshop mall med lager för titel, undertitel, och bilden. Sedan, med hjälp av GraphicStock (en stor, billig bildtjänst) och PixaBay (en gratis bildtjänst), i kombination med några av mina egna bilder från olika artiklar, samlade jag ihop representativa bilder. För att se till att texten var synlig klart, tappade jag en svart rektangel över varje bild som jag satt till 50 procent opacitet. Som producerade en något dämpad bild med levande text.

Om man tittar på koden i slutet av den här artikeln kommer du att märka att jag hade programmet automatiskt linda varje länk i en LI-tagg som ger kulor för varje artikel.

Konstruera hela projekt Guide bestod av att bygga upp intro text, lägga serien indexbilder, och sedan, för varje ämne, en banner bild, intro, och uppsättningen av LI och A HREF-taggar.

Här var där CMS slogs tillbaka. Content management system är konstruerade för att normalisera redaktionella innehållet för att passa i en standard för den totala platsen. Som ett resultat kommer de flesta bra content management system städa upp text som angetts av skribenter och redaktörer. vilket gör ett brett spektrum av substitutioner att bringa den slutliga texten i överensstämmelse.

Ibland innebär detta även konvertera fotgängare HTML i anpassade block av HTML som representerar den interna arkitekturen i CMS. Jag sprang i bråk med denna förmåga i vårt CMS, när man ville flytta punkterna runt, eliminera en del av mina DIV, och slog tillbaka mäkta mot min rutnät av bilder.

Till slut fick jag det till mestadels funktion. Jag var tvungen att ge upp några styling eftersom jag inte har tillgång till webbplatsens CSS. Kan du avbildning av alla CBS News ,, och webbplatsens författare bara slumpmässigt beslutat att styla sina egna grejer? Ja, det är därför det finns ett CMS. I vilket fall som helst, lyckades jag tvinga systemet till att få nära till vad jag ville, och jag var klar.

Jag är ganska nöjd med resultatet, med vissa undantag. Eftersom CMS har sitt eget sätt att göra saker, när jag lägger till nya artiklar, måste jag gå in HTML-koden och redigera det. Det är ganska skör, så jag har alltid betala extra uppmärksamhet i fall något går sönder. Som lägger tid att hålla guiden uppdateras, men det är värt det.

Min största besvikelse har att göra med hur ankartaggar (ni vet, # du sätter i en webbadress för att ta dig till en specifik plats på en sida). Jag såg till att sätta in ankare för varje projekt i projekt Guide kod. Tanken var att jag då skulle kunna ge länkar till specifika projekt, och läsarna kan helt enkelt klicka på länken och föras till den del av guiden.

Det visar sig att det är ett totalt misslyckande. Ankarwebbadresser inte fungerar bra på komplexa sidor. Vägen ankare arbete är att de kommer att få läsaren att den del av sidan som har ankaret – och sedan ladda resten av sidan. Vad det betyder är när användaren kommer ursprungligen mark för en sekund på rätt plats, vid den tidpunkt alla tillhörande banderoller, tillägger grafik och JavaScript gör sina grejer, bär den slutliga landningspunkt inga likheter med den avsedda destinationen.

Jag gjorde det här projektet under mycket lugn vecka mellan jul och nyårsdagen. Liksom de flesta av mina projekt, var det massor av kul, spetsad med tillräckligt frustration för att göra det intressant. Ännu viktigare är dock att nu har du en resurs där du kan gå att följa alla mina projekt.

Här är relevanta sida skanning utdrag från koden jag använde för att sätta detta projekt tillsammans. Kom ihåg att detta byggdes som engångsanvändning engångs kod, så din körsträcka kan variera.

Förresten, jag göra fler uppdateringar på Twitter och Facebook än någonsin tidigare. Var noga med att följa mig på Twitter på @DavidGewirtz och på Facebook på Facebook.com/DavidGewirtz.

Cloud mjukvarutillverkaren Coupa filer för $ 75.000.000 IPO

Cloud computing växer upp, en API på en gång

Söt SUSE! HPE hakar sig en Linux-distributioner

Twilio rullar ut nya företag planen lovar mer smidighet