Intro til Joomla 3.0

Bootstrap & Responsive Design

En kort ”tour”

http://www.krogh-hansen.net

http://www.wesome.net

30. janusar 2013

http://www.krogh-hansen.net/



http://www.wesome.net/

Lidt om mig...

30. janusar 2013Susanne Krogh-Hansen, WeSoMe - http://www.krogh-

hansen.net

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 behov

• Brænder for at få sat Joomla på landkortet i Københavnsområdet

Arbejder på at etablere WeSoMe som web-virksomhed.

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

30. janusar 2013Susanne Krogh-Hansen, WeSoMe -


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.

• Det sikrer at Joomla er tidssvarende, og får ny funktionalitet efterhånden som den bliver udviklet.



Vælg hvilke opdateringer du vil

have



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”

• Drag’n’drop i ”back-end30. janusar 2013

Susanne Krogh-Hansen, WeSoMe -


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.0 nu - er det ikke sikkert

at alle 3. parts udvidelserne er klar. Men der arbejdes



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”



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.



Global configuration

De vigtigste ændringer:

- Den store grønne knap- Tabs- Adgang til komponenterne


hansen.net

Medie biblioteket

• Upload af flere filer af gangen

• Desværre ikke noget drag’n’drop af billeder



Kategorier, Artikler og Menuer



Artikler



Templates• Protostar er

den nye

resposive

template.


hansen.net

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



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)



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/



http://twitter.github.com/bootstrap/

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


hansen.net

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.



Hvad betyder det så at bootstrap er

integreret?



Det betyder at man ved at bruge bootstraps klasser let kan lave nogle lækre features på sin side.

Her kan man sætte klasser ind



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.30. janusar 2013

Susanne Krogh-Hansen, WeSoMe -


• Sådan ser Joomla 3.0 ud ”out-of-the-box” med den nye

standard responsive template ”Protostar”


hansen.net

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......30. janusar 2013

Susanne Krogh-Hansen, WeSoMe - http://www.krogh-

hansen.net

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.


hansen.net

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 en anden?30. janusar 2013

Susanne Krogh-Hansen, WeSoMe - http://www.krogh-

hansen.net

Her kan I få fat i mig!

• http://www.krogh-hansen.net

• 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

• Quora: http://www.quora.com/Susanne-Krogh-Hansen



Er begge lavet i Joomla 3.0




http://www.wesome.dk/

https://www.linkedin.com/in/susannekroghhansen/da

http://instagram.com/bysukro/

http://pinterest.com/sukro/

https://plus.google.com/u/0/108357430200890901218/posts






http://www.quora.com/Susanne-Krogh-Hansen





Self Improvement

Intro til Joomla 3.0