Oplæg ved Joomla User Group møde i København. En Tour rundt i Joomla 3.0 og kort gennemgang af integration af Bootstrap og Responsive Design.

1. Bootstrap & Responsive Design
En kort ”tour”
http://www.krogh-hansen.net
http://www.wesome.net
30. janusar 2013

2. Lidt om mig...
Jeg hedder Susanne Krogh-Hansen
• Web og IT projektleder
• Har arbejdet med Joomla siden 1.5 blev lanceret
• Bevæger mig i krydsfeltet mellem design og udvikling
• Laver templates der dækker kundens specifikke beho
• Brænder for at få sat Joomla på landkortet i Københa
Arbejder på at etablere WeSoMe som web-virksomhed.
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

3. Hvad skal vi nå i aften?
• Lidt om Joomla og versioner
• Hvorfor opdatere?
Joomla 3.0
• Installation
• Hvordan ser motorrummet ud
Teknik
• Bootstrap
• Responsive Design
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

4. Revideret udgivelsescyklus
• I 2012 blev det vedtaget at systematisere udgivelsen af
nye versioner.
• Vi gik i hurtig rækkefølge fra 1.5, til 1.6 og 1.7 og videre
til 2.5, der er den gældende stabile version af Joomla
idag.
• Joomla 3.0 er udkommet som en udviklingsversion. Den
bliver opdateret ca.
1 gang om måneden.
• Version 3.5 forventes klar i september 2013.
• janusar 2013
30. Det sikrer at Joomla er tidssvarende, og får ny
Susanne Krogh-Hansen, WeSoMe -
http://www.krogh-hansen.net

5. Vælg hvilke opdateringer du vil
have
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

6. Hvad er nyt i Joomla 3.0
• Lettere/enklere at installere
• Responsiv ”back-end” gør det muligt at opdatere fra
tablet eller sågar fra mobil
• Integration af ”Bootstrap” gør det lettere at lave
mobilvenlige sites, og er et forsøg på at få dem der
udvikler udvidelser til Joomla til at skabe et ensartet
design, der giver større brugervenlighed.
• Mere brugervenlig opdatering af indhold, fx. kan man
gemme en tom artikel
• Ny brugergruppe ”gæst”
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
• Drag’n’drop i ”back-end http://www.krogh-hansen.net

7. Skal jeg opdatere min side nu?
• Har du opdateret til 2.5?
Hvis ikke, kan jeg kun anbefale at du gør det med det
samme.
• Du kan sagtens installere 3.0
Hvis du gerne vil være på forkant, og ikke har noget
imod opdateringer.
• Men du behøver ikke at opdatere før 3.5 kommer på
gaden.
Husk!
Hvis du vælger at opdatere til 3.0WeSoMe -er det ikke sikkert
30. janusar 2013
Susanne Krogh-Hansen,
http://www.krogh-hansen.net -
nu

8. Installation – også selv om man
ikke er en nørd!
• Enklere, og mere rent layout
• Table prefix (automatisk genereret) = større sikkerhed
• Man kan vælge i mellem flere forskellige sæt ”eksempel
data”
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

9. Hvem har flyttet min ......?
• Kontrolpanelet har markant ændret udseende fra 2.5 til
3.0, men alle de kendte funktioner er der stadig, og de
har ikke ændret sig så meget.
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

10. Global configuration
De vigtigste ændringer:
- Den store grønne knap
- Tabs
- Adgang til komponenterne
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

11. Medie biblioteket
• Upload af flere filer af gangen
• Desværre ikke noget drag’n’drop af billeder
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

12. Kategorier, Artikler og Menuer
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

13. Artikler
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

14. Templates
• Protostar er
den nye
resposive
template.
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

15. Sprog
• Nu behøver man ikke 3. parts produkter for at lave en
hjemmeside med flere sprog.
• Man kan installere sprogpakkerne direkte i Joomlas
Language Manager
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

16. ACL (Access Control Levels)
eller bare Brugeradgang
• Har ikke ændret sig fra 2.5 – guest level (giver mulighed
for at lave links der forsvinder hvis man logger ind)
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

17. Bootstrap – nej det er ikke en
støvlerem...
• Hvor mange kender bootstrap?
• Hvor mange har arbejdet med det?
• Få mere at vide her: http://twitter.github.com/bootstrap/
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

18. Hvorfor bruger Joomla –
Bootstrap?
• En veludviklet værktøjskasse med masser af let
tilgængelige grafiske muligheder, der sparer mange linjer
kode.
• Standardisering af Joomlas brugeroplevelse, så når man
installerer 3. parts produkter, så ligner det stadig Joomla.
• Gør det let at arbejde med mobile hjemmesider
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

19. Hvorfor lige Bootstrap?
Hvorfor ikke et af alle de andre ”frameworks”?
Fordi:
• det er et populært, og meget udbredt ”framework”
• det giver let adgang til et responsivt ”grid”
• det ser godt ud i alle browsere, også IE (tro det hvem der
vil)
• det virker på snart sagt alle mobile enheder
• det giver adgang til templates uden for de forskellige
joomla markedspladser.
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

20. Hvad betyder det så at bootstrap er
integreret?
Det betyder at man ved at bruge bootstraps klasser let kan lave nogle lækre featur
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

21. Her kan man sætte klasser ind
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

22. Responsive Design
• Er der nogen der ikke ved hvad Responsive
Design er?
• Er der nogen der allerede har lavet
hjemmesider i ”Responsive Design”?
Kort fortalt er Responsive Design:
En måde at designe indhold og template på,
så hjemmesiden ser godt ud og giver relevant
indhold uanset hvilken enhed du bruger.
Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
http://www.krogh-hansen.net

23. • Sådan ser Joomla 3.0 ud ”out-of-the-box” med den nye
standard responsive template ”Protostar”
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

24. Teknikken er kun en lille del af
”Responsive Design”
• Responsive Design består af 20% teknik
og 80% indhold.
• Teknikken består af:
Fleksible grids,
Skalerbare billeder
Procenter frem for pixels
• MEN – for der er altid et men......
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

25. Det giver ikke mening at have et site der
tilpasser sig til mobilen hvis man ikke kan
bruge indholdet til noget når
man er på farten.
Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
hansen.net

26. Indhold, indhold, indhold......
Tænk på....
• hvordan du vil dele sidens indhold op, hvis man
sidder bag en stor skærm?
• og om sidens indhold skal opdeles anderledes for
en der bruger smartphone alt efter om telefonen
bliver holdt vertikalt eller horisontalt?
• skal alt indhold vises til ALLE eller er det ok at
klippe noget ud?
• Må billeder centreres ved en opløsning men
venstrestilles ved enKrogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
Susanne anden?
hansen.net

27. Her kan I få fat i mig!
• http://www.krogh-hansen.net
Er begge lavet i Joomla 3.0
• http://www.wesome.dk
• LinkedIn:
https://www.linkedin.com/in/susannekroghhansen/da
• Twitter: @bysukro
• Instagram: http://instagram.com/bysukro/
• http://pinterest.com/sukro/
• Google+:
https://plus.google.com/u/0/108357430200890901218/p
osts
30. janusar 2013
Susanne Krogh-Hansen, WeSoMe -
http://www.krogh-hansen.net