c# pdf diff : Auto bookmark pdf SDK Library service wpf asp.net .net dnn Ahola_Tom2-part451

21 
 SKAPANDET AV EN BOILERPLATE-SIDA 
3.1  Beskrivning av sidan 
Jag har skapat en modellsida där jag utgått från HTML5 Boilerplate -mallen. Som mål 
hade jag att skapa en enkel responsiv bloggsida. Kravet för bloggsidan var att den skulle 
vara så mobilvänlig som möjligt, dvs. ideal också för visning på apparater med små 
skärmar. I utvecklandet utnyttjade jag några av H5BP:s funktioner och mot slutet tes-
tade jag sidans funktion. Följande kapitel  är en beskrivning på hur jag gick till väga och 
vilka tekniker jag använde.  
3.1.1  Responsiv webbdesign och Mobile First 
Responsiv webbdesign har utvecklats snabbt ända sedan Ethan Marcotte presenterade 
termen tre år sedan. Sedan dess har nya tekniker dykt upp, blivit bästa praxis och blivit 
del av vår ständigt föränderliga metodologi (Moore 2013). Grundpelarna i responsivt 
tänkande finns ändå kvar. En responsiv sida innebär en sida med en layout som anpassar 
sig till skärmen och apparaten den visas på. Exempelvis är texten alltid läsbar, bilderna i 
anpassad storlek och horisontellt rullande är inte nödvändigt. Detta möjliggörs genom 
CSS3:s Media Queries men flera faktorer bör tas i beaktande i designandet av ramen, 
bilderna och  utseendet. Den  viktigaste poängen är att  i  stället  för  absoluta  pixlar 
använda relativa enheter som procenter och em. (Marcotte 2011)
Mobile First är en utvecklingsfilosofi och ett tillvägagångssätt där man designar först 
för mobilen. Mobile First innefattar också det som anses vara bästa praxis för mobil an-
vändarvänlighet. Luke Wroblewski har skrivit en hyllad strategisk guide om detta ämne 
(Wroblewski 2011). I guiden framkommer det bl.a. hurudant mobilanvändarens beteen-
demönster är, hur allt viktigt innehåll ska visas klart på sidan och hur stora länkar borde 
vara för att kunna väljas med ett finger. Mobile First och Responsiv webbdesign går 
mycket hand i hand och kompletterar varandra. Det är inte till exempel ovanligt att man 
bygger upp en responsiv design så att man först gör en design för mobil. På så sätt säk-
Auto bookmark pdf - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
how to create bookmarks in pdf file; export pdf bookmarks
Auto bookmark pdf - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
adding bookmarks to pdf document; create pdf bookmarks online
22 
rar man att man får med allt det nödvändiga och att slutresultatet blir bra för mobil. I 
mitt modellprojekt har jag utnyttjat bägge ovannämnda tekniker. 
3.2  Förberedelser och Initializr-bottnen 
Boilerplate går att använda med vilket kodredigeringsprogram som helst. I detta mo-
dellprojekt använde jag Adobe Dreamweaver CS6. Som utgångspunkt till modellsidan 
använde jag den responsiva botten av Boilerplate som finns tillgänglig på Initializr.com 
(Figur 8). På Initializr kryssade jag i  de delar av H5BP jag valde att ha med (se Figur 
9). Eftersom det var frågan om en modellsida utan något slutanvändningssyfte, be-
stämde jag mig för att inte inkludera Google Analytics -kodsnutten eller Adobe Cross 
Domain -filen. .htaccess-filen tog jag med för att den har bra grundinställningar. Några 
ytterligare konfigureringar i serverkonfigureringsfilen valde jag att inte göra pga. tids-
brist och projektets storlek. 
Figur 8. Steg 1, Vi väljer en responsiv botten på Initializr.com. (skärmbild) 
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data
to PDF. Image: Remove Image from PDF Page. Image Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Data: Read, Extract Field Data. Data: Auto Fill-in
export pdf bookmarks to excel; create bookmarks in pdf
C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#
|. Home ›› XDoc.PDF ›› C# PDF: Auto Fill-in Field Data. C#.NET Demo Code: Auto Fill-in Field Data to PDF in C#.NET. Add necessary references:
create bookmarks pdf file; how to bookmark a pdf document
23 
Figur 9. Steg 2, där jag ytterligare väljer vilka delar jag vill ha med i bottnen. (skärmbild från Initializr.com) 
Efter att zip-paketet laddats ner, hämtar man ut filerna. Strukturen och innehåller i pake-
tet känner vi till från kapitel 2 men till skillnad från en vanlig H5BP-mall, kommer 
denna med en färdig Mobile First- och responsiv-botten. Med andra ord finns det en del 
färdigt märkspråk i index.html och tillhörande CSS-kod i main.css. Det att bottnen är 
Mobile First, innebär att designen i förstahand är gjord med tanke på mobilenheter och 
små skärmstorlekar. Därefter har man stegvis designat responsivt mot större skärmstor-
lekar. En responsiv design använder en flexibel grid med procent- och em-enheter i stäl-
let för absoluta och oanpassbara pixlar. Denna flexibla grid anpassar sig i sin tur till 
skärmstorleken den visas på och styrs med hjälp av Media Queries i CSS-koden. Figur 
10 demonstrerar hur index.html ser ut i en webbläsare utan några gjorda ändringar. När 
vi stegvis minskar och förstorar webbläsarfönstret, ser vi hur sidan anpassar sig och pre-
senteras i olika layout. Till vänster har vi en tydlig och enkel mobilversion i smal vy, 
där en meny är placerad som knappar under varandra. Till höger har vi en litet större 
version som lämpar sig för en smartphone i landskapsläge eller en pekplatta i porträtt-
läge. Märk hur menyn har flutit ut till höger. Sist längst ner har vi den fullbreda vers-
ionen som visas exempelvis på en bred datorskärm. Där har den orangea spalten flutit 
till höger om huvudinnehållet. 
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
to PDF. Image: Remove Image from PDF Page. Image Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Data: Read, Extract Field Data. Data: Auto Fill-in
how to bookmark a pdf in reader; creating bookmarks pdf
C# PDF Library SDK to view, edit, convert, process PDF file for C#
RasterEdge PDF SDK for .NET package offers robust APIs for editing PDF document hyperlink (url) and quick navigation link in PDF bookmark.
how to create bookmark in pdf automatically; add bookmark to pdf reader
24 
Figur 10. Responsiv design på bottnen från Initializr.com (skärmbilder från webbläsaren). 
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Split PDF document by PDF bookmark and outlines in VB.NET. Independent component for splitting PDF document in preview without using external PDF control.
pdf export bookmarks; bookmarks pdf files
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
key. Quick to remove watermark and save PDF text, image, table, hyperlink and bookmark to Word without losing format. Powerful components
create pdf with bookmarks from word; how to add a bookmark in pdf
25 
3.2.1  Egen design 
Trots att bottnen fungerar bra till mitt bloggändamål som sådan, ville jag absolut göra 
sidan personligare. Som grund, innan jag börjar skriva kod, gjorde jag upp en egen de-
sign. Jag gjorde designen i Adobe Fireworks CS6 för alla de tre layouter vi såg i kapitel 
3.2 (Figur 11). 
Figur 11. Egen design på modellsidan gjord i Adobe Fireworks. 
I min design har jag skisserat upp ett personligare utseende på bloggsidan. I mobilvyn 
finns till skillnad från den ursprungliga layouten, en utfällbar navigation dold bakom 
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Able to get word count in PDF pages. Change Word hyperlink to PDF hyperlink and bookmark. Free online Word to PDF converter without email.
bookmarks in pdf from word; bookmark pdf documents
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
pdf bookmarks; acrobat split pdf bookmark
26 
ikonen bredvid sidrubriken. Den gula spalten har jag populerat med en Twitter-kontroll 
samt ett kontaktformulär i den mellanstora- och stora layouten. Navigationen tänkte jag 
skulle presenteras i form av flikar där den aktiva sidan är vitmarkerad och de inaktiva 
gråa. I själva blogginlägget har jag placerat en bild som ska, beroende på layout, flyta 
till en lämplig position och visas i en lämplig storlek. 
3.3  Placering av innehåll och kodskrivande 
Med en klar design kunde jag gå tillbaka till mallen och börja arbeta. Jag  började med 
index.html-filen. I sidans head-del fyllde jag i titeln för sidan, likaså meta-beskrivningen 
(Figur 12). Meta-datan innan titel-taggen, som gällde Google Chrome Frame kunde jag 
plocka bort, eftersom den skulle laddas från .htaccess. Efter detta fyllde jag i övrig in-
formation på sidan som länktexter till navigationen, rubriker och footer-information.   
Figur 12. Titel och meta-beskrivning ifylld (skärmbild från Dreamweaver). 
Jag studerade den färdiga CSS-koden i main.css och gjorde därefter strukturella och 
färgmässiga ändringar enligt min design. Det var viktigt att inse att den normala CSS-
koden var den avsedd för mobil, eftersom bottnen var Mobile First. Medan jag kodade 
var jag tvungen att ha ett webbläsarfönster öppet i ett smalt läge och sedan stegvis ex-
pandera fönstret, för att se hur ändringarna påverkade resultatet i de bredare vyerna. De 
bredare vyerna styrdes av Media Queries med only screen- och min-width-definitioner 
enligt Figur 13: 
Figur 13. En Media Query som riktar sig på skärmar bredare än 480px. 
27 
I min design hade jag föreställt mig en annorlunda navigation för mobil än den presente-
rad i ursprungliga designen. Jag ville ha en knapp som dolde navigationen, något som 
man numera ofta ser hos responsiva sidor. För detta hittade jag en intressant lösning 
som heter Responsive Nav som jag placerad i plugin.js. Det är en lätt plugin som funge-
rar med endast JavaScript och har fallback också för webbläsare utan JavaScript. Fall-
back-funktionen fungerar då med hjälp av Modernizr som tillhör H5BP-mallen. (Re-
sponsive Nav 2013) 
Till slut lade jag in en Twitter-kontroll och skrev HTML-koden för ett kontaktformulär i 
den frihängande sidospalten. Med Media Queries ställde jag in deras beteende i olika 
vyer enligt min design. Dessa tillsammans med bilden och innehållet följer samma re-
sponsiva princip, dvs. de visas stundvis som enskilda block och stundvis flytande bred-
vid varanda. 
3.4  Övriga inställningar 
I H5BP:s rotkatalog fanns färdigt alla ikoner jag behövde för sidan i rätt storlekar. För 
att skapa de enkla ikonerna använde jag Adobe Photoshop CS6. Jag ersatte favicon.ico  
och alla apple-touch-icon-*.png-filer med mina egna ikoner utan att ändra namnen på 
dem (Figur 14).  
För detta projekt återstod ännu att fylla i humans.txt, d.v.s. berätta vem som gjort sidan 
och vilka tekniker som använts (Figur 15).
Figur 14. En enkel ikon för min modellsida.
28 
Figur 15. humans.txt ifylld med information om vem som skapat sidan och vilka tekniker som använts. 
3.5  Resultat och tester 
Den slutgiltiga modellsidan jag producerade finns att beskåda på aholatom.com/modell 
eller  i  Figur  16.  Byggandet  av  sidan  tillsammans  med  designarbetet  tog  ca  tre 
arbetsdagar och en dag för testande och buggrättning. Jag blev tvungen att göra en del 
kompromisser och ändringar i designen efter att jag satte igång med kodarbetet. Till 
exempel hade jag ursprungligen planerat en CSS3–gradient som bakgrund, men på 
grund av webbläsarnas ojämna och otillräckliga stöd för funktionen, bestämde jag mig 
för att slopa idén. Sidan har testats i olika webbläsare och resultatet är åtminstone för 
skribenten, målsättningen och till kraven tillfredsställande. I sidan har bl.a. H5BP
-
hjälpklassen  clearfix  använts  som  till  synes  fungerade  bra.  Dock  när  JavaScript
-
kopplades bort i testerna märkte man att layouten inte höll. Det är alltså en fråga som 
webbutvecklaren  bör  ta  ställning  till,  om  man  kan  förutsätta  JavaScript
-
stöd  av 
slutanvändaren eller ej? En oroväckande detalj förblev, att sidan fungerade dåligt IE
-
webbläsare äldre än version 9. Skribenten har inte lokaliserat problemet i skrivande 
stund, men anser att det bör röra sig om någon liten detalj, eftersom både Initializr
-
bottnen  och  JavaScript
-
navigationen  i  enskilda  tester  fungerade  bra.  Modellsidans 
funktion i moderna webbläsare och mobila apparater kan ändå anses positiv, vilket var 
kravet. Som testapparur har också en Android
-
baserad HTC Sensation smartphone och 
en Iphone 4 använts (Figur 17, Figur 18). Också utskriftsvyn har testats med god 
framgång.
29 
Figur 16. Slutgiltiga modellsidan i webbläsare (skärmbild). 
Figur 17. Slutgiltiga modellsidan testad med HTC Sensation -mobil (skärmbild). 
30 
Figur 18. Slutgiltiga modellsidan testad med Iphone 4 (skärmbild). 
 DISKUSSION 
HTML5 Boilerplate är ett kraftfullt och bra verktyg för webbutvecklare. Jag märkte 
ändå att även om mallen är lätt att ta i bruk, så är dess omfattning och innehåll absolut 
ingen självklarhet. Dokumentationerna bör studeras noga för att man ska förstå Boiler-
plate och vad den gör. Endast på det sättet får man största möjliga nytta av mallen. Se-
dan hur djupt man väljer att studera, hur man kommit till de olika lösningarna och var-
för de representerar bästa praxis, är upp till en själv. HTML5 Boilerplate är ett startpa-
ket för att skapa snabba och robusta sidor. HTML5 Boilerplate är god webbutveckling-
praxis, men det är ingen genväg. Erfarenheten jag tar med mig i och med detta arbete är 
enormt värdefull. Jag har inte bara lärt mig nya saker om webbutveckling jag har också 
lärt mig hurudan skribent jag är, och hur jag bäst arbetar. 
Mitt arbete tar inte slut här. Jag har fått nya nycklar till nya dörrar och jag visste inte ens 
hur stor konstruktion jag gav mig in på. Det finns mycket att utforska ännu i HTML5 
Boilerplate och det finns mycket att utforska ännu när det gäller god webbutvecklings-
praxis. Till exempel skulle jag gärna vilja se hur Boilerplate fungerar på en större, even-
Documents you may be interested
Documents you may be interested