Bootstrap & Responsive Design               En kort ”tour”                   http://www.krogh-hansen.net                  ...
Lidt om mig...                    Jeg hedder Susanne Krogh-Hansen                    •     Web og IT projektleder         ...
Hvad skal vi nå i aften?• Lidt om Joomla og versioner• Hvorfor opdatere?Joomla 3.0• Installation• Hvordan ser motorrummet ...
Revideret udgivelsescyklus• I 2012 blev det vedtaget at systematisere udgivelsen af  nye versioner.• Vi gik i hurtig række...
Vælg hvilke opdateringer du vil               have                   Susanne Krogh-Hansen, WeSoMe -30. janusar 2013       ...
Hvad er nyt i Joomla 3.0• Lettere/enklere at installere• Responsiv ”back-end” gør det muligt at opdatere fra  tablet eller...
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.• ...
Installation – også selv om man               ikke er en nørd!• Enklere, og mere rent layout• Table prefix (automatisk gen...
Hvem har flyttet min ......?• Kontrolpanelet har markant ændret udseende fra 2.5 til  3.0, men alle de kendte funktioner e...
Global configurationDe vigtigste ændringer:    - Den store grønne knap    - Tabs    - Adgang til komponenterne            ...
Medie biblioteket•   Upload af flere filer af gangen•   Desværre ikke noget drag’n’drop af billeder                       ...
Kategorier, Artikler og Menuer                   Susanne Krogh-Hansen, WeSoMe -30. janusar 2013                      http:...
Artikler                   Susanne Krogh-Hansen, WeSoMe -30. janusar 2013                      http://www.krogh-hansen.net
Templates                                                            • Protostar er                                       ...
Sprog• Nu behøver man ikke 3. parts produkter for at lave en  hjemmeside med flere sprog.• Man kan installere sprogpakkern...
ACL (Access Control Levels)            eller bare Brugeradgang• Har ikke ændret sig fra 2.5 – guest level (giver mulighed ...
Bootstrap – nej det er ikke en             støvlerem...• Hvor mange kender bootstrap?• Hvor mange har arbejdet med det?• F...
Hvorfor bruger Joomla –                    Bootstrap?• En veludviklet værktøjskasse med masser af let  tilgængelige grafis...
Hvorfor lige Bootstrap?Hvorfor ikke et af alle de andre ”frameworks”?Fordi:• det er et populært, og meget udbredt ”framewo...
Hvad betyder det så at bootstrap er           integreret?   Det betyder at man ved at bruge bootstraps klasser let kan lav...
Her kan man sætte klasser ind                   Susanne Krogh-Hansen, WeSoMe -30. janusar 2013                      http:/...
Responsive Design• Er der nogen der ikke ved hvad Responsive  Design er?• Er der nogen der allerede har lavet  hjemmesider...
• Sådan ser Joomla 3.0 ud ”out-of-the-box” med den nye  standard responsive template ”Protostar”                   Susanne...
Teknikken er kun en lille del af             ”Responsive Design”• Responsive Design består af 20% teknik  og 80% indhold.•...
Det giver ikke mening at have et site der    tilpasser sig til mobilen hvis man ikke kan    bruge indholdet til noget når ...
Indhold, indhold, indhold......Tænk på....• hvordan du vil dele sidens indhold op, hvis man  sidder bag en stor skærm?• og...
Her kan I få fat i mig!• http://www.krogh-hansen.net                            Er begge lavet i Joomla 3.0• http://www.we...
Upcoming SlideShare
Loading in...5
×

Intro til Joomla 3.0, Bootstrap og Responsive Design

402

Published on

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.

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
402
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro til Joomla 3.0, Bootstrap og Responsive Design

  1. 1. Bootstrap & Responsive Design En kort ”tour” http://www.krogh-hansen.net http://www.wesome.net30. janusar 2013
  2. 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. 3. Hvad skal vi nå i aften?• Lidt om Joomla og versioner• Hvorfor opdatere?Joomla 3.0• Installation• Hvordan ser motorrummet udTeknik• Bootstrap• Responsive Design Susanne Krogh-Hansen, WeSoMe -30. janusar 2013 http://www.krogh-hansen.net
  4. 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 201330. Det sikrer at Joomla er tidssvarende, og får ny Susanne Krogh-Hansen, WeSoMe - http://www.krogh-hansen.net
  5. 5. Vælg hvilke opdateringer du vil have Susanne Krogh-Hansen, WeSoMe -30. janusar 2013 http://www.krogh-hansen.net
  6. 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. 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 sikkert30. janusar 2013 Susanne Krogh-Hansen, http://www.krogh-hansen.net - nu
  8. 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. 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. 10. Global configurationDe vigtigste ændringer: - Den store grønne knap - Tabs - Adgang til komponenterne Susanne Krogh-Hansen, WeSoMe - http://www.krogh-30. janusar 2013 hansen.net
  11. 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. 12. Kategorier, Artikler og Menuer Susanne Krogh-Hansen, WeSoMe -30. janusar 2013 http://www.krogh-hansen.net
  13. 13. Artikler Susanne Krogh-Hansen, WeSoMe -30. janusar 2013 http://www.krogh-hansen.net
  14. 14. Templates • Protostar er den nye resposive template. Susanne Krogh-Hansen, WeSoMe - http://www.krogh-30. janusar 2013 hansen.net
  15. 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. 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. 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. 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. 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. 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. 21. Her kan man sætte klasser ind Susanne Krogh-Hansen, WeSoMe -30. janusar 2013 http://www.krogh-hansen.net
  22. 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. 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. 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. 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. 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. 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 osts30. janusar 2013 Susanne Krogh-Hansen, WeSoMe - http://www.krogh-hansen.net

×