quarta-feira, 19 de dezembro de 2012

Ferramentas para criar um WebSite ágil adequado a desktops e dispositivos móveis

Blog Post: Ferramentas para criar um WebSite gil

O design dos WebSites está novamente a ter uma clara evolução desde a Web2.0, com o aumento dos acessos a sites web sendo feito através de smartphones e tablets (dispositivos móveis), os designer têm que redesenhar os layouts dos sites web para que estes se possam adequar aos pequenos e verticais dispositivos móveis.

Os programadores e designers apostam na criação de ferramentas que possibilitem ao comum dono de um sítio web poder ter uma página que ofereça ao seu utilizador uma melhor experiência ao navegar pelo seu domínio.

Apresento uma lista das melhores ferramentas que actualmente se podem encontrar na Web, para que possa criar um sítio web com características ideais para que o seu sítio web de possa adequar automaticamente quando visto num desktop (computador de mesa) ou num dispositivo móvel, sempre com o maior conforto para o utilizador.

Grelha e Quadros (Grid & Frameworks)
Columnal http://www.columnal.com/
Skeleton http://www.getskeleton.com/
LessFramework 4 http://lessframework.com/
Semantic Grid System http://semantic.gs/
Golden Grid System http://goldengridsystem.com/
320 and Up http://stuffandnonsense.co.uk/projects/320andup/
Inuit.Css http://csswizardry.com/inuitcss/
Gridless http://thatcoolguy.github.com/gridless-boilerplate/
1140 CSS Grid http://cssgrid.net/
1KB CSS Grid http://www.1kbgrid.com/
Bootstrap http://twitter.github.com/bootstrap/index.html
Fluid Grid Calculator http://csswizardry.com/fluid-grids/
Fluid Grids http://fluidgrids.com/
Flurid http://kflorence.github.com/flurid/
Grid Set http://gridsetapp.com/
Gridpak http://gridpak.com/
SimpleGrid http://simplegrid.info/
Susy http://susy.oddbird.net/
Tiny Fluid Grid http://www.tinyfluidgrid.com/
Variable Grid System http://grids.heroku.com/

Páginas de esboço e Wireframes (Sketch Sheets & Wireframes)
Responsive Web Design SketchSheets http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Responsive Wireframes http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
StyleTiles http://styletil.es/

JavaScript e JQuery Plugins
Adapt.js http://adapt.960.gs/
Isotope http://isotope.metafizzy.co/index.html
Masonry http://masonry.desandro.com/
Respond.js https://github.com/scottjehl/Respond
TinyNav.js http://tinynav.viljamis.com/
Wookmark JQuery Plugin http://www.wookmark.com/jquery-plugin

Testes e visualização
ProtoFluid http://protofluid.com/
Responsive.Is http://responsive.is/
Responsivepx.Com http://responsivepx.com/
Responsive Web Design Testing Tool http://mattkersley.com/responsive/
ReView.js http://responsiveviewport.com/
Screenfly http://quirktools.com/screenfly/
Screenqueri.Es http://screenqueri.es/
The Responsinator http://www.responsinator.com/

Deslizar (Sliders)
Blueberry http://marktyrrell.com/labs/blueberry/
Elastislide http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
Responsive CSS3 slider http://responsive-slides.viljamis.com/
ResponsiveSlides.Js http://responsive-slides.viljamis.com/

Outros 
Adaptive Images http://adaptive-images.com/
FitText.js http://fittextjs.com/
FitVid.Js http://fitvidsjs.com/
Retina Images http://retina-images.complexcompulsions.com/
Seamless Responsive Photo Grid http://css-tricks.com/seamless-responsive-photo-grid/
SlabText http://www.frequency-decoder.com/demo/slabText/
Zurb – Responsive Tablets http://www.zurb.com/playground/responsive-tables
Categorizr http://www.brettjankord.com/2012/01/16/categorizr-a-modern-device-detection-script/
The Responsive Calculator http://rwdcalc.com/

Sem comentários:

Enviar um comentário