The Front Trends Conference in Warsaw 2017 focused on front end development.
- Front Trends, Warsaw 2017
- Speakers
- Videos on YouTube. (We’re waiting for the 2017 videos …)
Categories
Galleries
Categories
Gallery: WordPress Themes
The WordPress themes from 2010 – 2017. Copies of the screenshot.png file in the theme folder.
Categories
Canvas Animation
With a canvas you can animate your page. You can use images or draw geometric figures on the canvas. Here are some tutorials for canvas animation.
- Basic Canvas drawing.
- Canvas animation – see the video below.
- JavaScript and SVG (Peter Collinridge).
Parallax Effect ( Multilayer animation )
The following presentation is not strictly JavaScript but a sum up of a bunch of animation methods for the web:
Categories
Png Sprite Sheet (Image Magick)
Jeg skal til at udvikle spil som apps i Corona. Her får jeg brug for animationer. I Corona animeres via såkaldte spritesheets; men hvordan laver man dem?
Der findes en række programmer, som automatisk kan fremstille spritesheets. I Adobe Flash kan animationer fx eksporteres som sprite sheets.
Jeg har en teori om at man kan gøre det samme via Image Magicks kommando montage. Det viste sig at være rigtigt – og meget enkelt.
- Lav nogen tegninger, der hver er en tegning i en animation. Tegningerne i denne demo er tegnet på en Bamboo i Photoshop. Illustrator eller Inkscape havde været et bedre valg, eftersom det er lettere at flytte vektorer.
- Gem dem som fx monster1.png, monster2.png etc. – filerne skal have samme størrelse fx 140 x 140px – eller hvad der nu er passende.
Brug montage ca. sådan:
# montage monster{1,2,3,4}.png -background transparent monsterDance2.png
Categories
Wireframe brainstorm
Sådanne designs kan vises i bredformat; men der er intet til hinder for at de forskellige tilstande blot bises som en lodret søjle i “block” display.
Herunder samme div-tags vist i et lodret design (Itten har ikke levet helt forgæves…):
Categories
Mellem drøm og vågen
I tilstanden mellem drøm og vågen så jeg, at div-tags ville være bedre end tabeller, når man skal gestalte et design af firkanter til PC og mindre mobile skærme. Det handler om float og display block på små skærme.
En lille skærm kan vise en kanban lodret – der scrolles op og ned. Måske også til højre og venstre når man skal gå fra story til sprint (i et scrum-inspireret design). Drømmen konkluderer tilsyneladende at div er bedre end table.
Farverne styres via CSS klasser, der igen genereres af PHP. Koderne kunne være:
- Grøn = “done”
- Gul = “todo”
- Rød = “pending”
I drømmen lavede jeg en papirsprototypetest og bad brugerne om at klikke på firkanterne. De skulle sige, hvad der ideelt ville ske, når man klikker på en firkant. Forudsætningen var, at brugeren introduceres for kanban først.
Der var også noget om wireframe for placering af knappper på firkanterne; men den del af drømmen husker jeg ikke tydeligt. Vistnok noget med at man klikkede på firkanten for at komme ind til en editeringsmenu.
Categories
Hoya PL-CIR filter
Test af et ny filter til Sony A290. Kontraster er markant forbedrede; men billedet bliver mørkere. Normalt bruges filteret til at dæmpe en lidt for lys himmel med hvide skyer eller til at fjerne reflekser på metal eller vandoverflader.