Está en la página 1de 5

Qu ofrece Autentia Real Business Solutions S.L?

Somos su empresa de Soporte a Desarrollo Informtico. Ese apoyo que siempre quiso tener...

Avenida de Castilla,1 - Edificio Best Point - Oficina 21B 28830 San Fernando de Henares (Madrid) tel./fax: +34 91 675 33 06 info@autentia.com - www.autentia.com

1. Desarrollo de componentes y proyectos a medida 2. Auditora de cdigo y recomendaciones de mejora 3. Arranque de proyectos basados en nuevas tecnologas
1. Definicin de frameworks corporativos. 2. Transferencia de conocimiento de nuevas arquitecturas. 3. Soporte al arranque de proyectos. 4. Auditora preventiva peridica de calidad. 5. Revisin previa a la certificacin de proyectos. 6. Extensin de capacidad de equipos de calidad. 7. Identificacin de problemas en produccin.
3a

Gran Empresa
Tecnologa Desarrollo Sistemas

RFP

Concurso Consultora 1 Consultora 2 Consultora 3 Equipo propio desarrollo

Verificacin previa

Produccin
Certificacin o Pruebas

Piloto

3b

autentia

4. Cursos de formacin (impartidos por desarrolladores en activo)


Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery Control de autenticacin y acceso (Spring Security) UDDI Web Services Rest Services Social SSO SSO (Cas) JPA-Hibernate, MyBatis Motor de bsqueda empresarial (Solr) ETL (Talend) Direccin de Proyectos Informticos. Metodologas giles Patrones de diseo TDD

Gestor portales (Liferay) Gestor de contenidos (Alfresco) Aplicaciones hbridas Tareas programadas (Quartz) Gestor documental (Alfresco) Inversin de control (Spring)

BPM (jBPM o Bonita) Generacin de informes (JasperReport) ESB (Open ESB)

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Para ms informacin vistenos en: www.autentia.com

11/04/13

Descubriendo Responsive Web Design


EntraenAdictosatravsde

Email Contrasea

Entrar Inicio Quinessomos Formacin Comparadordesalarios Nuestroslibros Ms

Deseoregistrarme Olvidmicontrasea

Estsen:Inicio Tutoriales DescubriendoResponsiveWebDesign

CristinaFernndezAlvario LincenciadaenArquitecturaSuperiorenlaETSAV(EscuelaTcnicaSuperiorde ArquitecturadeValencia)delaUPV. MasterdeDiseoGrficoyWebenESDIP(Madrid). PuedesencontrarmeenAutentia:Ofrecemosserviciosdesoporteadesarrollo, factorayformacin SomosexpertosenJava/JEE Vertodoslostutorialesdelautor

Catlogodeservicios Autentia

Fechadepublicacindeltutorial:20130411

Tutorialvisitado1vecesDescargarenPDF

DescubriendoResponsiveWebDesign
EnestetutorialvamosaconstruirunamaquetacomoejemploprcticoaplicandolosprincipiosdelResponsiveWeb Designquenospermitircomprobarquenuestrawebsevecorrectamenteentodoslosdispositivosmviles,tabletsy navegadores,yaprenderemoscmohacerlo.

ndice
1. 2. 3. 4. 5. QueselRWD(ResponsiveWebDesign)? Elementosqueseutilizan Websinteresantes Ejemploprctico Conclusiones

Sguenosatravsde:

1.QueselRWD(ResponsiveWebDesign)?
Esunenfoquedediseodirigidoalaelaboracindesitiosquenosproporcionaunavisualizacinyexperienciaptimas, tantodenavegacincomoenelcambiodetamao,dependiendodeldispositivodesdedondeaccedamosadichositio, velocidad,desplazamientoyporlotantodeusabilidad.Setratadeadaptarnuestrawebacualquierdispositivodesdeel queaccedaelusuarioofreciendounamaneraptimademostrarlo.Cuantomayorsealapantallamselementos mostraremos,ycuantomspequea,eldiseovariarocultandoloselementosprescindibles. Ahoraveremoscmosehace:)

ltimasNoticias
Atencin,APLAZADO Estrenoltimocaptulode Terrakas Vendedor:Soyinseguro, filtraoeligepormi:siquieres quetecompre. Comentandoellibro:El artedepensar,deRolf Dobelli Yaestalaventami segundolibro:Planificatu xito,deaprendiza empresario Yaestadisponibleen eBookmiprimerlibro: InformticaProfesional Histricodenoticias

2.Elementosqueseutilizan
UnsitiodiseadoconRWDutiliza: CSS3mediaqueries :Adaptaeldiseoalentornodevisualizacin.PermiteutilizardistintosestilosCSSbasndose enlascaractersticasdeldispositivo,normalmenteseusaelanchocomoreferencia. Cuadrculafluida :Seutilizarnunidadesrelativascomolosporcentajesoems,ynounidadesabsolutascomo pxelesopuntos. Imgenesflexibles :Tambinlasusaremosenunidadesrelativas(hastael100%),ascomoparaevitarquese muestrenfueradesuelementocontenedor. Algomuyinteresantequeconvienesaberesqueexistenplantillasyapreparadasparaserusadasennuestrawebyde formagratuita,aquosmuetsro3ejemplos: Skeleton Amazium Wiredframed Enestaswebspuedesdescargartelosarchivosqueyavienentotalmentepreparadosparaquelosmodifiquesy completesconlosestilosycontenidodetupropiaweb.Skeletonenconcreto,teproporciona: index.html 404.html carpeta"stylesheets"quecontiene: skeleton.css base.css layout.css Elindex.htmlyel404.htmlvienenconunaestructuradefinidaenskeleton.css quepodrsmodificarportucuentayatu gusto.Dichaestructurasebasaenelanchodecolumnas,esdecir,lasmedidasdecadaelementosemidensegnel nmerodecolumnasquecontiene,siendoelanchodecolumna40px.Estemtodoesmuyeficaz,peroalavezlimitasu diseodadoqueestamoscomponiendonuestrawebconanchosfijosylodeseableesquesealomsflexibleposible

ltimosTutoriales
NuestraPrimeraAppcon Ember.js Primerospasospara conocerEmberjs Websqueofrecenplantillas CSSgratuitas

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=ResponsiveDesign

1/4

11/04/13

Descubriendo Responsive Web Design


Resolverproblema LockTimeoutExceptionen SpringWebFlow WebSocketsconStompy ActiveMQ:chateamos?

dadalacantidaddenuevosmodelosdedispositivosysusdiferentesresolucionesqueestnsaliendoenelmercado.Por loquesermsconvenienteutilizarporcentajes. Laplantillabase.css contienetodoslosestilosqueseaplicarnalaweb,podremoseliminaroaadirlosquequeramos. Yporltimo,laplantillaquenospermiteaplicardistintasclasesCSSsegneldispositivodesdedondeaccedamosesla layout.css ,queutilizalasyamencionadasmediaqueries ,yqueahoraveremoscmofunciona.

3.Websinteresantes
HerecopiladounaseriedewebsmuyinteresantesparaayudarnosaponerenprcticaelRWD: Pararedimensionarelnavegador:Eligeseltamaoenelquedeseasverelnavegadorystetelomuestrade inmediato:resizemybrowser.com. Paraponerlaurldetuwebyvercmoseveendistintasresoluciones :mattkersley.com/responsive. Demodecmocambiaeldiseosegneltamaodelapantalla/dispositivo:finecitizens.com/define/responsive. Imgenesflexibles :Adaptatusimgenesdependiendodeltamaodeldispositivoadaptiveimages.com. PluginjQueryparaadaptareltamaodetuletra :http://fittextjs.com/.

ltimosTutorialesdel Autor
Websqueofrecenplantillas CSSgratuitas Creacinde presentacionesconPowToon Creacindeungifanimado conAdobePhotoshop Maquetacindeunlibro conAdobeInDesign Maquetacindeun documentoconAdobe InDesign

4.Ejemploprctico
He"rediseado"yadaptadolahomedenuestrawebadictosaltrabajoparaponerlacomoejemplodeestetutorial. VamosaverpasoapasocmoconstruirunawebsegnelRWD.Aquospodisdescargarlosrecursos(htmlycss)que hecreadocomoejemploparaestetutorial. + Loprimeroquetenemosquetenerclaro,escmoqueremoseldiseoweb,tendremosquepensarendistintos diseos,dependiendodeltamaodeldispositivo,paraelegirquelementossonimportanteseimprescindibles,yqu elementospodrndesaparecerenlosdispositivosdemenortamao,ascomoquharemosconlasimgenesque tenemos,reducirlasoeliminarlas.Ypensarenelredimensionamientodecadaelementoquecomponenuestraweb. +Unavezlotengamosclaro.Nosponemosaconstruirnuestrohtml.

HTML
+Unadelascosasimportantes atenerencuentaesqueparaconseguirlacorrectavisualizacinenlosdispositivoscon tamaosdiferentestendremosqueutilizarlaetiquetametaname="viewport"enlacabeceradenuestrohtml. 1 < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e w i d t h , i n i t i a l s c a l e = 1 , m a x i m u m s c a l e = 1 " >
?

ltimasofertasde empleo
20110908

ComercialVentas MADRID. ComercialVentas VALENCIA. ComercialCompras ALICANTE. OtrasSincatalogar MADRID. OtrasSincatalogar LUGO.

Estaetiquetaconfiguraelreavisibledenuestronavegador.Ytienelassiguientespropiedades: width:Defineelanchodelreavisible.Elvalorserelnmerodepxeles,olaconstantequetomarelanchodel dispositivo:devicewidth. height :Definelaalturadelreavisible.Elvalorserelnmerodepxeles,olaconstantequetomarelanchodel dispositivo:deviceheight . initialscale :Definelaescalainicialdelreavisible.Elvalorserunnmerorealqueirde0.1enadelante. minimumscale:Definelaescalamnimadelreavisible.Elvalorserunnmerorealqueirde0.1enadelante. maximumscale:Definelaescalamximadelreavisible.Elvalorserunnmerorealqueirde0.1en adelante. userscalable:Definelospermisosdesisepuedeonoescalarelreavisible.Elvalorser:yes/no. Tambintenemosquetenerencuentaquehabrelementosqueaparezcanyotrosquedesaparezcandenuestrositio, asquetambintendremosquedefinirlosenelhtml.Enelqueosadjunto,aparecen"MenPeq"y"MenMed",que hacenreferenciaalmenpequeoyalmenmedianoquehedefinidoparacuandolosdispositivostenganunas medidasconcretas.

20110903

20110819

20110712

20110706

CSS
+Unavezconstruidoelhtml,vamosadefinirlosestilosCSSenunaplantilla"base",yolahellamadobase.css .)Aqu definiremostodoslosestilosquetendrnuestrodiseo.EnlaCSSqueosadjuntoestnordenadosporbloques,segn elelementoalquehacenreferencia. LaCSSqueaqucobramsimportanciaporquevaaserlaquenosdefinaquestiloscogersegneltamao,serla quehellamadolayout.css .DichaCSSestformadaporlasantesnombradasMediaQueries Yfuncionandemanera,quealdefinirunrangodeancho(maxymin),elcomportamientodelaCSSserelquehayamos aadidodentrodeeserango.Esdeciraplicarlosestilosdelabase.css perolosmodificarafavordelosqueestn dentrodelrangodefinido.Veamoscmo: 1 2 3 4 5 6 7 / * M a y o r d e 9 6 0 p x ( d i s p o s i t i v o s y n a v e g a d o r e s ) * / @ m e d i a o n l y s c r e e n a n d ( m i n w i d t h : 9 5 9 p x ) { . m e n u P e q { v i s i b i l i t y : h i d d e n d i s p l a y : n o n e } . m e n u M e d { v i s i b i l i t y : h i d d e n d i s p l a y : n o n e } . s e c u n d a r i o { v i s i b i l i t y : h i d d e n d i s p l a y : n o n e } }
?

Enesteejemplo,hemoselegidounanchomnimode959px,estoquieredecir,quesielnavegadoresmayorquedicha cifra,vaaaplicarlosestilosdefinidosenlabase.css yademslosquecontienedentro,porloqueelmenpequeo,el medianoyelsecundariodesaparecern. Veamosotroejemplo: 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 / * T a m a o p a r a t a b l e t y m v i l , v e r t i c a l y h o r i z o n t a l ( d i s p o s i t i v o s y n a v e g a d o r e s ) * / @ m e d i a o n l y s c r e e n a n d ( m a x w i d t h : 7 6 7 p x ) { # t o d o { p a d d i n g : 3 p x 1 0 p x } # m e n u { v i s i b i l i t y : h i d d e n d i s p l a y : n o n e } # m e n u u l l i { p a d d i n g : 7 p x 1 0 p x } . m e n u P e q { v i s i b i l i t y : h i d d e n d i s p l a y : n o n e } . m e n u M e d { v i s i b i l i t y : v i s i b l e d i s p l a y : i n l i n e } . c o l u m n r i g h t { v i s i b i l i t y : h i d d e n d i s p l a y : n o n e } . c o l u m n r i g h t i m g { w i d t h : 1 0 0 % } . c o l u m n l e f t { w i d t h : 1 0 0 % } . s e c u n d a r i o { v i s i b i l i t y : v i s i b l e d i s p l a y : i n l i n e }


?

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=ResponsiveDesign

2/4

11/04/13
1 3 1 4 1 5 1 6 . s u b m e n u u l { m a r g i n : 1 6 p x 0 0 0 } . t e x t o h 2 { f o n t s i z e : 1 . 1 e m } i m g . i m a g e n t u t o { w i d t h : 1 2 % } }

Descubriendo Responsive Web Design

Aqueltamaomximoesde767px,loquequieredecir,quetodaslasclasesquetienedentrolasaplicarsiemprey cuandoeltamaodelnavegadorseainferiora767px.Comoanteriormentehemosexplicado,primerocogerlosestilos delaplantillabase.css ydespusaplicaromodificarlosqueseencuentrendentrodesurango.

Ejemplo
Unavezhemosconstruidonuestraweb,podemosirprobndolaenlawebquemencionantes,dondepodris comprobarcmovaquedando,simplementeintroduciendolaurldevuestraweb:mattkersley.com/responsive

Ysiquerisverelejemploquehediseadoparaestetutorial,podisencontrarloaquypodisirviendocmocambiael diseosegneltamaodelnavegador.Tambinpodisaccederatravsdelmvilycomprobarelcambioeneldiseo segneldispositivoquetengis)

5.Conclusiones
Estssernlasventajasdeldiseowebadaptativo: Mejoralaexperienciadeusuario:lawebsevedelamaneramsptimaencadadispositivoparatodoslos usuarios. Costesmsbajos: sereducenloscostespuestoqueyanonecesitamoshacerundiseoparacadaversinmvil. Actualizacionesmseficientes :cualquiermodificacinoactualizacinseverreflejadaeneldiseodemanera automtica,loquereduceeltiempoyaumentalaeficacia. Bsquedas :sloesnecesariounaurl,loqueevitarerroresoredirecciones. MejoraenelposicionamientoSEO :Googledescubreasmejortucontenido. Accesibilidad:seincluyeatodaslaspersonasconvisinreducida. TambintenemosqueasegurarnosdequenuestraCSSynuestroHTMLsonvlidosynocontienenerrores,estolo haremosconelvalidatorCSSyelvalidatorhtml5: CSSvalidationService ValidatorHTML5 Esperoqueoshayaservidoestetutorial,ysitenisalgunaduda,slotenisqueescribirme:)

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=ResponsiveDesign

3/4

11/04/13

Descubriendo Responsive Web Design

Acontinuacinpuedesevaluarlo:
Regstrateparaevaluarlo

Porfavor,vota+1ocomprtelositepareciinteresante
Share | Share Share Share
0

AnmateycomntanosloquepiensessobreesteTUTORIAL:

Registrateyaccedeaestayotrasventajas

EstaobraestlicenciadabajolicenciaCreativeCommonsdeReconocimientoNocomercialSinobrasderivadas2.5

IMPULSA

Impulsores

Comunidad

Ayuda?

sinclicks

0personashantradoclicksaestapgina

poweredbykarmacracy

Copyright20032013AllRightsReserved|Textolegalycondicionesdeuso|Banners|PoweredbyAutentia|Contacto

www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=ResponsiveDesign

4/4