En ny hjemmeside med Bootstrap 3
Om hvordan man flytter sin hjemmeside fra Joomla til Sinatra


Offentliggjort fredag d. 11. oktober 2013 af Walther H. Diechmann



Vi har brugt Bootstrap layout biblioteket i lidt mere end 2 år, men det er nok lidt med os, som med skomagerens børn – vi er de sidste, der får nye sko

Denne artikel beskriver hvordan du kommer fra en hjemmeside i ét open-source CMS til et andet – i vort tilfælde fra Joomla til Sinatra.

Forhistorien

Vi har nu i en årrække brugt en række forskellige CMS'er – til vores egen hjemmeside såvel som til vore kunders hjemmesider. De enkelte CMS 'er har hver deres fordele og ulemper; det er sådan med CMS'er som med alt andet: en udfordring løses og 4 nye opstår

Installationen

Opsætningen af Sinatra er ikke raket videnskab men kræver dog et vist håndelag :)

Du tager en *NIX (PC,Mac,rs/6000 eller lignende der enten er født med *NIX eller hvor du har installeret en eller anden version af *NIX på) og så følger du beskrivelsen her

Fik du ikke rigtig noget ud af det? Så ring til os – det kan vi hjælpe dig med!

Layout skabelonen

Fordi vi i et par år har haft vældigt gode erfaringer med Boostrap, var det ikke noget svært valg. Det gjorde heller ikke noget, at Boostrap netop er udkommet i en version 3, der ligger sig helt tæt op af Microsofts nye Flat UI stil, som især er populær på Surface tabletter og notebooks med Windows 8.

Apple kigger iøvrigt også den vej – med deres nye iOS 7 har Apple kysset skeuomorphism farvel og er istedet optaget af at minimere og reducere brugergrænsefladen til et absolut minimum af grafik. Selv skrifttypen er 'tynd'

Du bruger Bootstrap sådan her

Var det uklart? Skulle du bruge det i dit WordPress layout eller din egen hjemmeside? Skriv til os – det kan vi hjælpe dig med!

Organisering

Vi havde voldsomt brug for at forny hjemmesiden og valgte derfor at dele renoveringen op i 3 faser:

  1. FASE 1: en statisk programmeret version
  2. FASE 2: delvis udbygning med dynamiske elementer
  3. FASE 3: en dynamisk hjemmeside hvor alle elementer kan redigeres og billeder upload'es direkte ind i layout
FASE 1

Fra starten har vores ambition ikke været at bygge en mastodont hjemmeside, men blot fokusere på enkelte af vore produkter og så i øvrigt fortælle lidt om os selv.

Derfor har vi valgt at starte med et sitemap der så sådan her ud:

Fra forsiden er der links til de tre sider, og fra hver af siderne er der link til de øvrige. Helt ukompliceret og standard, med en menu i toppen og en footer der går igen på alle sider.

Blog siden er lidt speciel fordi den har links til en (med tiden forhåbentlig stor stak) underside, hvor den enkelte artikel er uddybet.

I Sinatra ser rod kataloget sådan ud:

i rod mappen ligger 'start-filen' (config.ru), 'index-filen' der angiver "ruterne" til de enkelte sider (alco.rb) og specifikationen over afhængigheder (Gemfile), mfl
config
den eneste fil her er deploy.rb, der bestemmer hvordan produktions-web-site't bliver opdateret
public
her er mapper med billeder,javascripts og stylesheets – samt andre statiske filer
templates
her ligger siderne, der danner den færdige hjemmeside - (ac_index.haml, about.haml, services.haml og blog.haml)
Fra Joomla til Sinatra

Joomla er et CMS hvor du skriver og redigerer artikler i din web browser, men i et andet layout end sådan som det kommer til at stå på hjemmesiden. Det er der både fordele og ulemper ved. Er alt hvad du gerne vil, at tilføje en artikel på din blog, eller en nyhed på din forside, føles det ubekvemt og besværligt at skulle indtaste det i det særlige administrative "interface".

Fordi vi starter med en statisk version, var vi nødt til at klippe/klistre de tekster, vi gerne ville have med, ind fra Joomla.

FASE 2

En hjemmeside med bare et minimum af dynamik?! Det må da være at der er en kontaktformular!?

Vi tilføjede en template (/templates/contact.haml) og indsatte 'pony' gem'en i Gemfile filen. Tilbage var blot at tilføje en 'sti' som web-serveren skulle reagere på;

"/contact" lød som den rigtige sti - så den blev indføjet i alco.rb. Både som en 'GET' og en 'POST'. Den sidste skulle vi bruge når/hvis nogen faktisk vil i kontakt med os via hjemmesiden, og udfylder webformularen.

get '/contact' do
  haml :contact, :format => :html5, locals: { current: 'contact'}
end
post '/contact' do 
  require 'pony'
  pm = params
  options = {
    to:      'walt@alco.dk', 
    via:     'smtp',
    from:    "webform@alco.dk",
    subject: pm[:c_name] + " ønsker at kontakte dig",
    body:    "%s <%s> skrev: \n\n %s" % [ pm[:c_name], pm[:c_email], pm[:c_msg]],
    via_options: {
  	  address:        'pbox.dk',
  	  port:           '25',
  	  user_name:      'user_name',
  	  password:       'password',
  	  authentication: :login,        # :plain, :login, :cram_md5, no auth by default
  	  domain:         "alco.dk"      # the HELO domain from the client to the server
  	}
  }
  
  Pony.mail( options )
  redirect redirect_url_with_params "/contact"
end  

[ her kommer mere om fra joomla til sinatra ]

Referencer i teksten:


Søg (i bloggen)

Populære Kategorier

Ansvar

De enkelte artikler i bloggen står helt for skribentens egen regning som privat person, hvor det ikke udtrykkeligt fremgår at, at holdninger/meninger/beskrivelser er ALCO's officielle stillingtagen.


Copyright © ALCO Company 27-03-2017


Åbningstider:

mandag-fredag 08:00 - 16:00

(principielt kan du ringe til os døgnet rundt, men efter kl 16 på hverdage, og i weekenden/helligdage er det dyrere)


ALCO Company
Åbrinken 28
7700 Thisted
+45 9791 1470
+45 9791 1471
sales@alco.dk