Flux är en WYSIWYG-webbplatsredaktör för Mac-datorer. Nu, innan du förbannar hur mycket du hatar WYSIWYGs, borde du veta att Flux är annorlunda och är både kraftfull och flexibel nog att användas av professionella webbutvecklare.
Idag introducerar jag dig till Flux genom att skapa en super enkel webbsida från början (inga irriterande styva mallar). Längs vägen ser vi hur ett typiskt arbetsflöde ser ut och varför det bara kan vara den bästa visuella webbredigeraren jag någonsin har använt.
Varför är Flux olika?
När jag tänker på en WYSIWYG-webbplatsredaktör kommer två populära applikationer att komma i åtanke. Den första är Dreamweaver. Dreamweaver är en löjligt kraftfull applikation, men har en inlärningskurva som är ganska hög. Det är helt enkelt en stor applikation som kanske inte är värt besväret för många designers som redan är bekväma kodning för hand.
Den andra applikationen som tas upp är iWeb. iWeb är roligt i några timmar, men när du förstår hur strikt mallsystemet är, går tanken på att använda den för professionell webbdesign ut genom fönstret. Även dess mycket överlägsen rival RapidWeaver tycks fortfarande driva dig mer mot förinställda mönster och verkar som riktad mot webbutvecklingsnybörjare.
Så Dreamweaver är för professionella men har en brant inlärningskurva och iWeb är för lekmän och har nästan noll inlärningskurva (och därmed noll flexibilitet), var är det glada mediet? Ange Flux.
Flux är en visuell webbdesign applikation för personer som hatar visuella webbdesign applikationer. Arbetsflödet har utformats noggrant för att spegla hur du kodar webbplatser för hand. Det bästa: det är helt flexibelt. Det finns några inkluderade mallar men jag har aldrig ens stört dem, för Flux gör det enkelt att designa från grunden, precis som jag skulle om jag skriver ut koden manuellt.
Nogsamtal, låt oss se Flux i aktion.
Vad vi bygger
Eftersom jag vill att detta ska vara en riktigt grundläggande introduktion, kommer vi att hålla designen super enkel. Om jag får tillräckligt med förfrågningar i kommentarerna kan jag skriva en mer inblandad och avancerad handledning, men för närvarande håller vi en grundläggande sida med en liten sida med mycket lite på den.
Ganska enkelt rätt? Det ser nästan ut som en av de ostiga mallarna som följer med dessa typer av appar men som jag sa ovan kommer vi att bygga detta från grunden.
Steg 1: Skapa ett nytt projekt
Att skapa ett nytt projekt i Flux är ett smärtfritt förfarande. Allt du gör är att gå till Arkiv> Ny och du är på väg. Det kommer att fråga dig var du vill placera filerna och om du vill att Flux automatiskt skapar en grundläggande webbplatsstruktur för dig. Detta inkluderar följande: index.html, main.css och en bildmapp. I det här fallet är det precis det format som jag vill använda så jag valde att låta det ställa upp det för mig. Om du har ett annat system som du gillar bättre kan du göra det manuellt.
När du dubbelklickar på HTML-filen kommer du att tas in i huvudflödet. Som du kan se är det mycket pågår här. Faktum är att vi kunde spendera hela handledningen bara diskutera varje knapp och funktion. Men för att göra sakerna mindre tråkiga går vi direkt till byggnaden och presenterar funktioner när de kommer upp. Jag rekommenderar definitivt att du laddar ner demo och pekar runt gränssnittet för att bekanta dig med det.
Steg 1: Styling Kroppen
Om du klickar på det stora tomma dukområdet bör du se en ruta som markeras med ordet? längst upp till vänster. Det här är den tomma kroppsstrukturen för din HTML. Det första vi vill göra för vår sida är att lägga till en bakgrund till det här elementet.
För att göra detta, klicka på inspektörsknappen längst upp (ser ut som ett kikare). Detta kommer att ge upp vad som enligt min mening är hjärtat av appen. Här skapar du stilar och definierar utseendet för varje element som du skapar inuti Flux. Inspektorns utdata är CSS och alla kontroller inuti är märkta med CSS-egenskaperna du är vana vid att arbeta med.
Lägga till en bakgrundsfärg
Om vi kodade den här sidan för hand kan det första steget vara att ange en bakgrundsfärg för kroppen. Vi kommer faktiskt att använda en upprepande bild i nästa steg, men vi vill se till att bakgrunden ser ut, även om bilden inte laddas.
Med den valda kroppen kommer vi till "Fyll"? avsnitt till vänster om inspektören. Härifrån är det enkelt att använda en bakgrundsfärg som att klicka på lämplig CSS-egenskap och skriva in vår färg; i detta fall # 1f1f21.
Lägga till en bakgrundsbild
För att lägga till en bakgrundsbild tar vi i princip samma exakta steg och navigerar helt enkelt till rätt fil i bildmappen. Jag använde en fantastisk fri bakgrund från Premium Pixels.
Steg 2: Lägga till en behållare
För att lägga till en behållare till en webbplats, brukar du bara kasta in en div, och det är precis hur sakerna fungerar i Flux. Klicka på? Container? knappen högst upp och gå ner till? Quick Div.? Se till att när du gör det här steget har du valt kroppsdelen. I Flux vill du alltid välja önskat förälderobjekt när du skapar ett nytt element. Detta säkerställer att det läggs in i rätt del av din HTML.
Detta borde skapa en liten tom låda med guider på din duk.
Precis som vi gjorde tidigare, välj elementet och öppna inspektören. Under? Position & Size?, Sätt bredden till 700px och höjden till 810px. Var noga med att ta bort standardvärdena för? Top? och vänster? medan du är på den.
Auto-centrerar ett element
Nu, om du är en webbutvecklare vet du redan exakt hur du ska centrera denna div: sätt marginalerna till auto. Du kan gå in och göra det manuellt eller helt enkelt klicka på det lilla redskapet längst upp till höger om inspektören och gå ner till? Auto Center.?
Lägga till en skugga
Vid denna tidpunkt borde du ha grundramen för webbplatsen.
Bara för skojs skull vill jag visa upp några av de Webkit CSS3-funktioner som är inbyggda i Flex. Om du klickar på? Webkit? I inspektören ser du en handfull roliga CSS-egenskaper: boxskugga, boxreflekter, webkitövergångar etc. Tyvärr finns det inga Mozilla-ekvivalenter, men du kan alltid släppa dem i koden manuellt.
För att lägga till en skugga i vår behållare, klicka bara på egenskapen och justera inställningarna.
Inline stilar?
Käta observatörer har antagligen märkt att nu har de stilar vi skapat satt till? Inline.? Detta är ett av frågorna i Flux-arbetsflödet. För någon konstig och okänd anledning är alla dina stilar inställda som inline som standard. Det är faktiskt lite lättare att installera element i Flux när de är inställda på inline, så Flux-webbplatsen rekommenderar att du först ställer in ett element så som du vill ha det på det sätt som vi har ovan, och konvertera formaten till något som kommer att visas i det externa formatmallet.
Skräck inte, det här är en snabb och smärtfri process. Markera objektet du vill konvertera, högerklicka på det och välj "Skapa stil med?" ? alternativ. Detta kommer att hämta följande dialogruta som gör att du kan tilldela ett ID eller en klass till objektet.
Om du gör det här skapas en liten ikon till vänster med det ID som vi just tillämpat. Detta område är i grunden en översikt över vår CSS-fil. Nu när du vill ändra egenskaperna för den behållaren dubbelklickar du på ikonen här för att starta inspektören.
Steg 3: rubriken
Stegen vi just lärde oss lägger ut arbetsflödet för att skapa allt innehåll på vår sida. För att lägga till namnet på företaget i vår rubrik skapar vi en annan Quick Div, men den här gången dubbelklickar du inuti den för att skriva inuti den (det skapar i huvudsak en? P? Tag). När du skriver ut vad du vill kan du ställa in texten men du vill. Som du kan se nedan har jag lagt till inställningar för färg, teckensnittsfamilj, text-transform, textjustering och typsnittstorlek.
Gör sedan samma sak för texten under rubriken.
Det borde ge dig en bra typografisk rubrik för din sida. Kom ihåg att konvertera båda dessa element till externa format precis som vi gjorde tidigare.
Steg 4: Bilden
Nu är vi redo att kasta in vår stora bild. Jag använder ett foto som jag sköt mig, men du kan allt du vill.
För att börja, välj behållaren och skapa en div som är 700px bred och så lång som du behöver den. Ange sedan bakgrunden för div till din bild och bakgrunden för att inte upprepa. Med den valda bild div kan du använda piltangenterna för att blanda upp eller ner för att flytta den till position, efter allt detta är en WYSIWYG!
Steg 5: Avsluta texten
Vid denna tidpunkt skulle handledningen vara ganska överflödig om vi gick in för mycket detaljer. Det finns verkligen inte mycket kvar att göra förutom att skapa några fler divs, fylla dem med text och styling dem som vi gjorde ovan. Jag stannade med det Georgias typsnitt som jag hade använt och gjorde bara min rubrik större än stycke kopia.
En sak att notera är att för att skapa en länk, väljer du helt enkelt ett element eller ett block av text och går till Redigera> QuickLink. Med det ska sidan vara klar!
Vad om koden?
Om vi vill titta på och redigera koden när som helst, klicka bara på Command-3 för att få upp kodvisaren.
Flux spetsar ut fin ren kod som integreras fullt ut med utvecklingsprocessen. Du kan göra så mycket eller så lite som du vill med WYSIWYG-gränssnittet och gör resten för hand. Eftersom Flux bara använder vanliga gamla HTML- och CSS-filer kan du till och med arbeta på webbplatsen i din favorit kodredigerare när du bygger in Flux. Arbetsflödet är helt öppet så att om du vill göra någonting på samma sätt som du alltid har, kan du göra det!
Vad annat gör Flux?
Denna handledning har inte repat ytan på vad Flux kan göra. Här är några andra funktioner för att bli glada över:
- Inbyggda layoutmoduler för snabb prototypning
- Live Browser View
- JavaScript, PHP, och allt som jazz
- WordPress Theme Support
- Återanvändbara kodrader
- History Palette
- Widget palette - Skapa enkla gallerier och jQuery-effekter
- HTML5-support
- Google Font API-support
- Tons mer som jag inte ens vet om än!
Slutsatser
Jag använde först Flux för några versioner sedan (Flux är nu i sin tredje iteration), och älskade idén, men var inte galen om utförandet. Det kändes lite buggy (allt som fixas nu) och verkar verkligen inte så lätt att bara hämta och springa med.
Men det mötet var ganska kort och jag har alltid velat gå tillbaka och verkligen ge det en riktig genomgång. Jag har spelat med Flux under de senaste två dagarna och måste säga att när jag tog mig tid att räkna ut rätt arbetsflöde var det en dröm att arbeta med Flux. Det tar definitivt en liten stund att räkna ut alla quirks men när du gör det äter de inte någon gång alls och känns ganska naturliga.
I alla fall är Flux fantastisk för prototypning. Fans för att designa i webbläsaren istället för Photoshop kommer att se de flesta av sina problem som tas upp här, eftersom du är tvungen att designa med hjälp av CSS-egenskaper och positionering istället för Photoshop-effekter. Min favorit del om appen är att den inte hörnar dig till att använda den genom hela processen. Det finns inga Flux-projektfiler att oroa sig för, bara de filer som du normalt brukar använda för att bygga en webbplats. Det betyder att du kan byta till en annan app eller till och med skicka projektet till en kollega eller klient som inte behöver Flux eller behöver någonsin veta att du använde den.
Om du är en utvecklare som kodar för hand som ofta drömmar om en WYSIWYG som inte suger och faktiskt kan ansluta till det sätt du arbetar för närvarande rekommenderar jag starkt att du ger Flux ett skott.Det kan vara lite frustrerande först, men ta dig tid att driva igenom det och ta reda på hur du verkligen använder appen ordentligt och jag kommer att satsa på att du kanske bara tycker att det är den bästa WYSIWYG du någonsin har använt.