c# pdf diff: Auto bookmark pdf SDK Library service wpf asp.net .net dnn Ahola

3 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

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

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

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

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

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.

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.

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.

Figur 16. Slutgiltiga modellsidan i webbläsare (skärmbild).

Figur 17. Slutgiltiga modellsidan testad med HTC Sensation -mobil (skärmbild).

Figur 18. Slutgiltiga modellsidan testad med Iphone 4 (skärmbild).

4 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

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