SlideShare une entreprise Scribd logo
1  sur  27
Bootstrap & Responsive Design
               En kort ”tour”

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

30. janusar 2013
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
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
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
Vælg hvilke opdateringer du vil
               have




                   Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
                      http://www.krogh-hansen.net
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
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
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
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
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
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
Kategorier, Artikler og Menuer




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




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




                   Susanne Krogh-Hansen, WeSoMe - http://www.krogh-
30. janusar 2013
                                     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




                       Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
                          http://www.krogh-hansen.net
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
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
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
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
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
Her kan man sætte klasser ind




                   Susanne Krogh-Hansen, WeSoMe -
30. janusar 2013
                      http://www.krogh-hansen.net
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
• 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
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
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
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
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

Contenu connexe

Intro til Joomla 3.0, 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