Presentación
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
okay everybody welcome thank you for your patience sorry for the delays at a bitter pill it's appear to be working so right bandwidth optimization in responsive web design my name is connect i felt i'm a Joomla web developer since nineteen since 2004
oh it's going too fast I work for DSD business automation and my own company two days per week I'm specialized in responsive web design one content based web applications complex hours form forms and Joomla web server setups and you can reach me on
twitter skype and facebook my life outside you know because i do a little bit more than just joomla I love running I play drums and I do training with Mila and that's a Bracco Italiano it's an Italian hunting dog this is her tomorrow I won't be
here and I have my first hunting exam so it'll be exciting before we go on I have to say a little bit the disclaimer the solution is presented here they work for me they might not work for you try experiment with it use my suggestions and before you anything
back up back up and back up again because you never know what happens okay responsive templates who in the audience here builds responsive templates cool a lot of people good based on what CSS framework do you build your templates bootstrap foundation custom
cool do you built yourself or do you buy a template and customized for your client so for yourselves both okay well I'm I personally built all my templates from scratch using a blank template really really good tool it's got booed step inside its got
foundation if you want or you can choose whether what C is a framework you want to use the most frameworks of 22 well-known frameworks at the moment is it the bootstrap and foundation they're very widely used both have their pros and cons but there are
much more CSS frameworks out there in a wild there's HTML boilerplate responsive grid system Titan groundwork base if you google on CSS and responsive frameworks you get a whole list of framework so there's much available that you can use for your
project media queries I used a lot in css3 nowadays it just applies CSS rules based on the viewport resolutions I've got some example code first line says if your resolution is no wider than 600 pixels then apply this background color to the class the
second example says if your screen is at least 600 pixels wide then apply another background color and the third example just shows if your screen resolution is between 600 and 900 pixels you can apply this background color so it's it's based on the
resolution of the viewport often there are special CSS classes to hide content at a certain resolution and Twitter boots abusers responses you responsive utility classes like hidden phone or hidden desktop and foundations abuses other classes to identify the
width of the screen or the viewport there's an advantage on it you can easily hide content on certain devices based on the resolutions there's a use it for example in the template code or as a module class you can add space hidden dash phone and it
will hide that element on the resolution for a smartphone there's a disadvantage on it the content is only visually hidden all content is still downloaded to the device and that's unnecessary use of bandwidth I can demonstrate it in a little example
I have here a an example website it's built with Twitter bootstrap and as you see there's a slider here with a lot of nice images and if I reduce the screen resolution you see the slider automatically is reduced it's still on the screen and if
I would want to hide this slider on my smartphone and I can simply add a small addition to the code here is the the index PHP of this template and if I look for the slider that's here section class is slider and it loads a module with the module position
called carousel this is a joomla template and if I simply add here hidden dash phone and save it and go back to the template and refresh the screen what you'll see then is if I narrow the screen at the smartphone resolution the slider is gone but the content
is still there because if i look with Firebug inside the code and i can see here my section class is slider and you see it's grayed out now so it's it's hidden for the view but the content in it is still very much there I see all the the image
is there so it means it's it's really not hidden the content is still used I can also show that when I measure the amount of space used or the audio bandwidth used if i look at the document size you will see that the size of this page is eleven hundred
[ ... ]
Nota: se han omitido las otras 2.183 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.