Northeast PHP 2013

Crea sitios web que parecen aplicaciones con jQuery Mobile

Anna Filina  · 

Presentación

Vídeo

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

reduce your speaker for this next session jQuery Mobile is a web software expert as vice president at foo lab helps companies by coaching developers and by providing valuable advice to help planning to achieve their business goals the latest project was a

mission-critical applications increase factory production eliminate product defects and reduced volunteer at least she also cork co-worker also organizes confu world-renowned conference for developers and professor conferences all over the world and this is

a the second year at northeast PHP so welcome ok so welcome to the top I'm going to dive right in so the purpose of this presentation is to show you the mobile sites versus mobile apps and try to convince you to design the mobile site for most and i want

to show you how you can do that easily from jQuery Mobile so badly comes in instructions on a developer mentor project manager I specialize in class and class effective delivery I'm writing a book on ten signs of warning signs in ninety projects which

should come out in scope and I also organized a conference called country now there's multiple mobile approaches you can create native apps trade creates more websites mobile sites there's many approaches as well you can use responsive design and there

was talk about it earlier today we have this fluid layout and there's also the progressive enhancement and this is what I will focus on in depth what it means and how you can leverage sorry I'm running with two microphones one for the camera one for

the audience because it's quick and it's inexpensive it's you for first time users so when people first visit your site they will probably enter through the website and then possibly download a mobile application so for example if you go on IMDb

you will be greeted with a message and then you would download an application but most of the time people first enter through through the web through some other website because they saw a link on twitter or somewhere else there is no download for mobile sites

compared to mobile applications so when you download a mobile application you need a lot of time you need to download you need to install it it's going to eat up some valuable icon space it's and also if you only need to use it once to accomplish a

specific task you will have to uninstall it afterwards and also if you're not required to have speed or native features you can get away with a mobile site now native features are more and more supportive through various ap is so that actually is becoming

a non-problem increasingly any as i mentioned others link to your site so if somebody Twitter a tweet about about something that's happening you you will want them to to be able to enter your site because you cannot link to a portion of an application

so the work on this so when I'm talking mobile I'm talking about a wide range of devices that's just a smartphone some of the challenges is that development takes time because you need to create so many different websites you need to create so

many mobile you need to adapt it to so many mobile devices also the UI is not suited for mobile so when you create just a website out of the box you have to make sure that your UI is suitable for a small screen where you have to press as somebody mentioned

earlier you know people have fingers of a certain size and they have to be able to press those links and there's so many variables there's a wide range of devices of browsers and capabilities some of these capabilities are the viewport size is the

most obvious one well then there's the pointing method I mean we're used with touchscreens but there's also click wheels there's also joysticks and stylus all of these are still valid and you have to make sure that you support those you may

or may not have a full keyboard you may or may not have image support and even though image is images are supported on most devices today some people choose to deactivate them because maybe the roaming they don't want to aren't working and your image

is a button in order to perform a search then you're stuck that seen on the previous image there's a black and white for example and percent width is not supported on all devices a wider range of devices then you also have to consider this so the solution

is to deal with jquery mobile it's a JavaScript framework and you only create one code base for all of your mobile needs well rather for all of the devices that you wish to support and then all of the browsers and different capabilities are going to be

taken into consideration by the JavaScript framework your son is going to look pretty much the same everywhere the UI is going to be adapted for the mobile it's going to have large buttons I will show other things that it does and it will work on many

many devices so these are some of the devices it supports so there's a you know iphone ipad Blackberry Android devices tablets you have Windows Phone as well so progressive enhancement what is it it means that your website is going to look great on the

latest browser but it's still going to be presentable on an older one so if you for example you begin with something that's fairly pretty and then as you discover more capabilities in the device you add more to the website to the presentation and then

it really blooms so you start out basic and then with each feature you just keep enhancing the website until it reaches its full potential and you have mobile specific events you have a tap you have two different types you have quick which is basically like

a click or you can hold for two seconds usually and that's also an event that comes out of the box which you can support their swipe you can distinguish between right or left or any so you can tap into those events as well and also orientation change so

one person takes for example a smartphone and flips it horizontally then you can get into those events and perform some actions so enough about the theory let's build something i will show you some code not too in depth and the code is also available on

github so i will give you a link after the presentation first you need to include a few things the first thing you include is the jquery framework itself after you include that you need to include the jquery mobile framework which sits on top which means that

you you can also use all the jquery functions once you start implementing this website and after that you include also the jquery mobile CSS which you can override later on so once you include those three what you do is for example to create a button would

[ ... ]

Nota: se han omitido las otras 3.342 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.