Webdesign és webfejlesztés, webes alkalmazások

[webdesign-webfejlesztes]

Ötletes kivitelezés - nem kicsit látványos honlapba csomagolt bólogató kutyus, brekekélő béka, lógó nyelvű maci, kacifántos fakopács, tenger mélyén bugyborékoló halszáj, fán ülő zsiráf, méhecskereppentyűvel körberajzolt űrlap.

A Csurgó Zenekart illetően kiindulási alapként népzenét hallhatunk, repertoárjukban pedig gyerekműsorokat és koncerteket találunk szép számmal.

[webdesign-webfejlesztes]

Instagram: végre webes felület, áttekinthető galéria.

[webdesign-webfejlesztes]

ZOOMION - Zoomion - fotó, film, design - és sok jól eltalált szín, plusz egy szép weboldal / blog / portfólió.

zoomion.ch

[webdesign-webfejlesztes]

Parallax Scroll effect

CSS3, js szkroll játék - transzformációk görgetésre.

Skrollr http://prinzhorn.github.com/skrollr/

[webdesign-webfejlesztes]

Játék a hátterek mozgatásával - ismét egy jó scroll megoldás. Interaktív animáció egy jQuery plugin segítségével.

[webdesign-webfejlesztes]

Scrollozz másként! Scrollorama

Scrollorama, egy másik jQuery plugin unaloműzéshez, játékhoz, ha animációmentes lenne weboldalunk, egy-két helyen feldobhatja az olvasást:

http://johnpolacek.github.com/scrollorama/

[webdesign-webfejlesztes]

Filter-Rich JS Image Effects Library – glfx.js

Képeffekt-könyvtár JavaScript-ben.

http://www.webresourcesdepot.com/filter-rich-javascript-image-effects-library-glfx-js/

[webdesign-webfejlesztes]

Bancha CMS

Újabb nyílt forrású, moduláris, könnyed PHP alapú CMS - MVC architektúra, Wordpress importálás, fejlesztő- és designer-barát kialakítás.

A tartalmi típusok bővíthetők, YAML / XML alapokon definiálhatjuk őket.

http://getbancha.com/home

[webdesign-webfejlesztes]

Freetile.js

Képgalériák, izgalmas layout-ok, portfóliók egyik alapköve lehet a freetile.js - reszponzív, jQuery alapokon. Hasonló megoldás, mint a Pinterest kitűzői, vagy a Wookmark, de a Google+ galériáktól sem áll távol ez a megjelenés.

http://yconst.com/web/freetile/

[webdesign-webfejlesztes]

CSS Pagination Templates Module Level 3

W3C - tovább a kacskaringós, változatos vágányokon.

http://dev.w3.org/csswg/css3-page-template/

[webdesign-webfejlesztes]

Adobe Brackets - újabb verziók folyamatosan

Az Adobe nyílt forrású, web alapú (html/js/css) fejlesztőeszköze.

http://blog.brackets.io/2012/12/21/brackets-sprint-18-build/

[webdesign-webfejlesztes]

HTML5, CSS3, JavaScript kísérletek, példák gyűjteménye:

CSS3 Box Shadows

CSS3 tooltips

Canvas color grid, Canvas + Video, Canvas checkbox, Canvas clock

CSS3 backgrounds

Radius + gradients

Multi-column layout

WebSQL

[webdesign-webfejlesztes]

Tilt-Shift effekt CSS3 és JavaScript használatával

Ma már nem meglepő, ha olyan megoldásokkal találkozunk a weben, amelyeket ezidáig csak asztali alkalmazások segítségével valósíthattunk meg. 

Így van ez a Tilt-Shift effektekkel is - azaz nem kell már feltétlen Photoshop ahhoz, hogy egy kép adott részét élesítsük az egészhez viszonyítva.

A miniatűr / makett hatások eléréséhez is előszeretettel használt effekt több online képszerkesztő és mobilalkalmazás része is már, lásd az Instagram egyik funkcióját vagy speciális, részben e célra is alkalmas kamera programokat pl. Androidon.

Most azonban a webes szabványokat segítségül hívva is elérhető a kívánt hatás - legfeljebb nem minden böngészőben működik: 

CSS3 Tilt-Shift text experiment: http://lab.simurai.com/tilt-shift/

tiltShift.js - jQuery plugin / CSS3: http://www.noeltock.com/tilt-shift-css3-jquery-plugin/ 

[css3watch]

CSS3 Clouds by Montana Flynn

[webdesign-webfejlesztes]

Felhők CSS3-ból.

[webdesign-webfejlesztes]

Aranymetszés kalkulátor - hasznos eszköz designereknek

Az aranymetszés szabályainak megfelelő arányban oszthatjuk fel leendő vagy meglévő weboldalunk sablonját és annak egyes elemeit ezzel a hasznos eszközzel.

Sokszor nem is gondolná az ember, mennyire fontosak a jó arányok egy-egy weboldal esetében, pedig a jó layout talán legfontosabb alapelve ebben rejlik.

Az aranymetszés pedig nem csak a webdesign, hanem pl. a fotózás, az építészet és a virágkötészet esetében is ugyanazt jelenti: a harmóniát.

Golden Ratio Calculator

[80g]

HTML 5 widgets, forms

[webdesign-webfejlesztes]

80g:

*Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Widgets* http://ping.fm/uILo2

[webdesign-webfejlesztes]

Mostanság egyre többet lehet hallani a HTML 5 és a hozzá kapcsolódó multimédiás - elsőősorban videó - formátumokról és a "gigászok harcáról". Apple, Adobe, Mozilla, Google, Microsoft / h264, WebM, Ogg - Theora, Mpeg - szinte mindannyian másképp implementálják a szabványt.