Your SlideShare is downloading. ×
Intro til Joomla 3.0, Bootstrap og Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intro til Joomla 3.0, Bootstrap og Responsive Design

375
views

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.

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
375
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Bootstrap & Responsive Design En kort ”tour” http://www.krogh-hansen.net http://www.wesome.net30. 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 udTeknik• 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 201330. 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 sikkert30. 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 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. 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 osts30. janusar 2013 Susanne Krogh-Hansen, WeSoMe - http://www.krogh-hansen.net