söndag 27 juli 2008

Slutrapport!

Nu är jag i stort sett färdig med min hemsida som jag gjort! Och den ska läggas upp på www.karljonasberg.com i morgon om allt går som jag tänkt. Tadah!



Jag har några småkrux som jag inte lyckats lösa, och som verkar väldigt svåra. Min collapsible panel fungerar inte i Opera och Safari (men i Mozilla och Flock).
Jag skulle egentligen vilja alligna bildtexten till nederkanten av bilden, de ligger i samma div så jag skulle vilja veta hur man får ett objekt att lägga sig på "botten" istället för toppen? Tips någon?

Men annars tycker jag att jag faktiskt lärt mig grunderna i DW!
Over and out
//Kristine

tisdag 22 juli 2008

Sambo med dreamweaver.. helt okej och förvånansvärt enkelt.


Den "råa" databasen på mysql servern. Dreamveaver refererar till postens ID och filtrerar rubrik och brödtext efter mina inställningar.

Så ser dynamiskt innehåll ut i dreamweaver.


Så här visas innehållet i "wordpress" som jag använt för att ändra på innehållet i databasen.


wordpress stöder html och skickar även detta genom den koppling som DW upprättat mellan databas och websida. Dvs: vill du ha en bold ingress, välj bold ingress, och den visas i bold på websidan.

Färdigt! Finns på http://www.industridesign.de/natverk

Känns kanon att kunna hantera dreamweaver,.. äntligen.
Är jävligt impad över hur många käcka funktioner som stoppats in i det här kompetenta programmet, men framför allt hur lätt det är att skapa CSS när man väl fattat grejen. Efter att ha övat och övat känns CSS nu som en helt självklar slav i min verktygslåda i stället för tvärtom.

Började med "workflow tutorialen" från lynda vilken gjorde att jag snabbt kom igång. Gjorde ett par egna prjoktlayouts för att helt enkelt öva CSS. Blev flera rätt hyffsade layouts om jag för säga det själv.(postade dumpar i tidigare post) Dock utan innehåll. Drog igång projektet Nätverkshälsan. Gjorde layout och grafik i Photoshop viken sedan blev en CSS baserad sida i Dreamweaver. Resultatet blev en ganska sparsmakad sida för Nätverkshälsan. De sista två veckorna ägnade jag åt Behaviours och dynamic content. Förhållandevis avancerade funktioner i dreamweaver, men som är förvånansvärt enkla att hantera. För det första finns det en färdig behaviour för att hantera inkompabilitet med flash som diskuterats här tidigare. Att skicka vidare besökaren till en alternativ sida, eller visa ett annat innehåll om besökarens webbläsare är gammal. kanon feature. Finns oxå mängder av färdiga scripts att tanka hem och importera i dreamweaver som behaviours, eller javascript som det egentligen är.

En annan underbar funktion som jag använt mycket är det diagnostiska verktyget som hittar och identifierar fel i ens layout och ger förslag på lösningar. Bla i.e. buggen som dubblar padding i en div om den är alignad. <- tog ett tag att knäcka, men hade aldrig lyckats om jag inte haft diagnosverktyget i dreamweaver.

sora delar av de sista två veckorna har jag ägnat å dynamic content. alltså att texten(innehållet) och bilder inte ligger i Html-taggar utan hämtas från en mySQL databas separat. mycket enklare att uppdatera och ändra och gör propgram som contribute överflödiga. Jag bestämde mig att försöka göra innehållet i Natverkshalsan helt dynamiskt. Det var rätt krångligt och det tog rätt lång tid, men nu går det att updatera sidans innehåll genom en gratis backend vid namn wordpress som ligger och myser bredvid de ordinarie php filerna på min ftp. samtligadatabasreferenser hämtas på den halvsunkiga mySQL databasen som drivs av mitt webbhotell one.com och administreras genom phpmyadmin. Det låter krångligt men är helt genomförbart utan några ingående kunskaper iprogrammering eller dyl. Dreamweaver har överraskande bra verktyg för att integrera databasen med html-innehållet, dock förhåller jag mig liiite tveksam till den slutgiltiga säkerheten. Man vill u inte få oönskade besök i sin databas och dreamweaver lägger en textfil med inlogg osv okrypterat på FTPn, Det hänger alltså på webhotellets FTP säkerhet helt och hållet, något som kanske har en tendens att brista hos billigare leverantörer som exempelvis one.com. Dock skulle man naturligtvis behöva en hel del sådan kunskap om man behöver mer avancerade funktioner i det dynamiska innehållet eller om man behöver en egentillverkad backend för exempelvis en webbutik eller liknande där man har höga krav på driftsöäkerhet. Då kan man fundera på om det kanske är dags att löpa ett professionellt backend från någon inbiten utvecklare och själv enbart bidra med design-know-how och en CSS-mall. :)

Nåja Nätverkshälsan projektet representerar det mesta av vad jag lärt mig under de här veckorna, CSS, photoshop-dreamweaver workflow, rolovers, bahaviours, formulär, dyn.cont etc. lite svårt att demonstrera de dynamiska funktionerna, men jag postar lite skärmdumpar iaf.

Sidan finns att skåda på http://www.industridesign.de/natverk

Hoppas inte att allt mitt tugg vart för osammanhängande, det var en kort version av mina erfarenheter från 4 veckors samboliv med dreamweaver.

Puss och kram kära kollegor.

lördag 19 juli 2008

Min hjärna är späckad med tutorials

Har haft lite semester med fjällvandring och sommarstuga men nu tänkte jag ta tag i den här allt mer självständiga och lokallösa sommarkursen igen.

Har faktiskt kollat på massa tutorials i sommarstugan, har betat av lynda.com:s tutorials paket essential training på hela 124 tutorials!!

Nu ska vi bara se om den här kunskapen kan omvandlas till något, har haft lite problem med att få min så kallade "kund"/pojkvän att leverera bilder och bestämma sig för upplägget på hemsidan. Men nästa vecka ska det hela vara klart har jag tänkt. Så nu hoppas jag på regn så att det blir lite enklare att koncentrera sig.

fredag 18 juli 2008

Då kan man göra hemsidor då!

Nu ska det göras sidor!
Ordet CSS var något jag var rädd för innan denna kursen.
Men ej längre! Att skapa sidor med dreamweaver känns nu väldigt lätt och bekvämt.
Jag har fokuserat på att hitta ett bra arbetsflöde. Att kunna jobba snabbt mellan adobes program. Här kände jag att jag saknade programmet Fireworks i min samling. Där dropdowns och annan javascript kan göras snabbt.
Men från photoshop till dreamweaver känns det nu naturligt att jobba. Klipp och klistra.
Men det som är mest underlättande för ens arbestprocess är hur man döper sina filer. Finns inget värre en kaos i hemside mappen. Håll koll på namnen, bg_ för bakgrund osv. Den tutorial som Robin skrev om där nere, går igenom ett arbetsflöde som är väldigt effektivt.

En annan sak som kändes skönt att förstå var kontrollen och uppbyggnaden av sin/sina style sheets. Detta gjorde att vidare ändringar i uppbyggnaden påverkade hela sidan och inte bara den html delen man var inne på.


/Magnus

onsdag 16 juli 2008

Yo Robin

Robin.
Hittade du någon svar på flash frågan?
Ett flash element som byts till bild då besökaren inte har falsh installerat.

torsdag 10 juli 2008

Typografi




Någon av er som har lite tips angående hur man hanterar typografin i CSS.
Har möe svårt att få till snygga radbrytningar och stycken. Antagligen svårt att få det perfekt, men det vore roligt om man kunde få det till mer än ett textblock.

Så om någon har tips så...

Har för övrigt kollat igenom lynda titeln "essential training" för att lära mig lite mer om "Behaviours" i DW. Rätt avancerade grejer, men man lär sig bl.a att göra EGNA behaviours. Sjyst om man vill gå bortom de vanliga "rollover" "popup" etc som är inbyggda i dreamweaver. Krävs liiite klipp och klistra med javascript men inget som jag inte klarade, och jag är rena rama trafikolyckan på programmering har jag insett.

Ang. robins tips om Contribute; problemet är väl att kunden måste köpa en licens på Contribute, och antagligen lära sig det oxå. Känns inte döds praktiskt men absolut en väg att gå. Sen kan man ju fråga sig hur praktiskt det är att kunden kan uppdatera och ändra text själv. De flesta skriver ju som krattor och har ingen aning om hur man skall skriva en text,... men det är ju en HELT annan frågeställning. :)



Glad sol på er.

fredag 4 juli 2008

Robins vecka

I väntan på svar på en offert ang. skarp hemsida så har den här veckan har blivit en tutoriol/läsa bok-vecka.


Här sett igenom Total Training for Adobe CS3 Web Design - Workflow-kursen.
Den ger en bra förståelse för hur man lägger upp ett arbetsflöde för en hemsida
och hur man kan lära sig att jobba mer tidseffektivt.




Man får även lära sig hur de olika CS3-programmen interagerar med varandra, vilket
är riktigt användbart och smidigt.
T ex användandet av "Smart-objects" i photoshop kopplat till illustrator.

Användandet att ordna lagren i "grupper" i Photoshop är också en bra grej att göra, eftersom
det lätt blir att man sitter med en massa olika lager och snart har världens kaos...

Kursen lär en även hur man ska döpa olika filer och objekt enligt standard så att man lätt håller ordning på vad som e vad: typ att allt som har med bakgrunden att göra döps "bg_xxx", flashobjekt: "fl_xxx" och så vidare...matnyttigt.

En annan smart grej är programmet Contribute som underlättar för kunden att editera hemsidan utan att gå in i DW och lära sig kod. I Ct kan man bestämma vad som ska kunna ändras på och sen kan man lätt göra uppdateringar och lägga upp via en inbyggd ftp-funktion.






Har även lånat boken Web Design: portfolios, där man kan se exempel på olika lösningar av porfolios...lite inspiration.



Nästa vecka åker jag på semester. Gör min sista vecka för sommarkursen när jag kommer hem och då förhoppningsvis med ett skarpt uppdrag för en tandtekniker...

//Robin

torsdag 3 juli 2008

Avlägger rapport!


enkelt och ordnat. CSS layout för det lite längre projektet Natverkshälsan. På sikt hoppas jag kunna göra innehållet dynamiskt med Dreamweaver som verktyg.


CSS övning.




Här är lite resultat efter mitt experimenterande med CSS. På sikt hoppas jag kunna göra innehållet till Natverkshalsan dynamiskt. Gör sidor lite löst för Nätverkshälsan, colt och protec som båda gör skyddsutrustning. Tyckte det blev roligare på det viset.

Hej mina vänner!
Förstår att ni jobbat på! Har på något sätt lyckats hamna utanför er mysiga gemenskap. Jobbar dock hårt på mitt hörn. Skall försöka sammanfatta vad jag sysslat med. CSS hanteringen i Dreamweaver är verkligen sjukt smidig. Bara man fattar "cascading stylesheets" och hur div-arna påverkar varandra är det väldigt lätt att knacka ihop något snyggt och fungerande.

Har använt lynda.com e-böcker som material.

Vet inte vad ni har för workflow men kopplingen photoshop-fireworks-dreamweaver fungerar väldigt bra för mig. Designen och måttförhållanden görs helt och hållet i photoshop och sparas i .psd för att sedan mer eller mindre klipp och klistras in i dreamweaver. Använder man bilden som "trace-image" i dreamweaver så går det snabbt att spika ihop ett CSS-dokument baserat på layouten från photoshop. Fireworks genererar snabbt rollover effects i xhtml som snabbt importeras i DW. Efter att första veckan lekt med CSS, layout och styles gick jag vidare med dynamiskt innehåll.

Ofta vill man kunna publicera saker fort på webben. Inte minst när man gör prylar åt kund el dyl. Dreamweaver har ju sin trevliga mall funktion där Mr Designer kan spara sidan som mall till Adobe Contribute som kunden i sin tur använder för att uppdatera text bilder etc.
Känns rätt osmidigt tycker jag. Naturligtvis vill man kunna uppdatera sin webbsida direkt i webbläsaren. logga in osv. Dreamweaver har ett sjukt smidigt verktyg för att hantera databas querys. d.v.s php, mySQL osv. Detta utan att behöva skriva en enda linje kod. Bara man har ett webbhotell som tillhandahåller databas. Lyckades hitta ett kanonprogram som skapar en låtsas php-databas på den egna datorn vid namn "MAMP". <- programmet är givetvis gratis och går alldeles utmärkt att använda som testmiljö för sin websida. Slippa strula med FTP etc under utvecklingsfasen. Googla "MAMP Download" bara, finns till Windows och OSX. Skall titta narmare på detta under följande veckor.

Nu har jag börjat titta på behaviors för att göra snygga rollovers och bildbibliotek...
Har ett tips på en cool sida med ett annorlunda navigationssystem.... ban bläddrar i sidled istället för höjdled. kolla in.

http://ceegraphics.com/
tror inte det funkar i safari dock...

fredag 27 juni 2008

Det går lååångsamt framåt

Har gjort en utfällbar meny som funkar sådär...


Det har tagit ganska lång tid för mig att komma igång och förstå css. Men nu börjar det lossna lite...

Det bästa läromedlet som jag fått tag i är en bok som jag lånade på ekonomiska bilioteket som hette Learn Macromedia Dreamweaver 8, från Lynda.com. Till den finns det tutorials och övningsuppgifter, allting väldigt pedagogiskt och bra!

Annars tycker jag mest det här med relativa mått och att få till en elastisk layout är svårt... Det är mkt pill för att få saker att placera sig där man vill. Bra förklaringar på just det finns på hemsidan: http://www.ninetnet.com/ (som är allmänt bra för nybörjare).








tisdag 24 juni 2008

So far...


Har gått igenom i Palles kurs och har fattat hur man kan använda olika "div:ar" och grunderna i CSS. det känns som att man måste sitta och pröva sig fram en hel del och testa olika lösningar, för att gå vidare.

Hittade en sjysst sida med CSS-grejer där jag kopierade koden för en rollover-meny helt i CSS till min "Pallesida".

http://css.maxdesign.com.au/listamatic/





Sen så upptäckte jag hur smidigt det är att läga skuggeffekter och liknande som transparenta
png:er för att kunna jobba friare med gradienter/mönster i bakgrunden, det enda neg. med det är väl iofs att de väger en del, och det kan nog tynga ned en sida rätt rejält om man
overdoserar med png:er:

En sak som jag klurar på är om man t ex lägger in ett bildspel gjort i flash i sin html-sida och den som som tittar på sidan inte har flash installerat.

Då tror jag att man kan göra en sk fallback, alltså en jpg som visas istället för flashfilen.

Samma sak hade ju varit bra om man gjorde grejer i Java, eftersom inte heller alla har det påkopplat.




Länktips:
http://webdesignskolan.com
http://www.thefwa.com/
http://www.dynamicdrive.com/

måndag 23 juni 2008

Divar o divar o divar


Status rapport:
Css delen börjar klarna lite nu. Börjar bli smidigt att jobba med divar.
Det börjar även kännas skönt att jobba i DW och samarbetet med de övriga cs programmen är underbart. Nu ska det tittas lite närmare på funktioner som att integrera flash och andra möjliga bildvisningar.
Over and Out
/Magnus

torsdag 19 juni 2008

Hemma

Hej!
Jag jobbar hemifrån idag...
Glad midsommar på er så ses vi på måndag!

måndag 16 juni 2008

Då ska vi se.

Allmän information

Det är öppet att sitta på Kulturverkstan att jobba alla vardagar 10 – 22, nyckeln får man hämta på avtalad plats.

Måndagar och Fredagar är det "mer obligatoriskt" att man kommer kl. 10 - 17
Måndagar är det tutorials. Det börjar med Palles kurs (www.northernwhisper.com/css)
sedan får alla ta med sig något "tips och tricks" som de vill dela med sig av.
Fredagar är det redovisning. Då får alla visa vad de har gjort hittills.

Bloggen är till för att man ska kunna lägga upp tips, frågor, inspiration, länkar osv. Så lägg upp allt ni hittar! Bloggen är även till för att redovisa sommarkursen, det är alltså den som kommer dokumentera det vi gör. Om man inte kan närvara någon av veckorna är det extra viktigt att man bloggar!

Schema sommarkursen

Plats: Kulturverkstan, Järntorget

v. 25
måndag 10 - 17 tutorials
fredag 10 - 17 genomgång

v. 26
måndag 10 - 17 tutorials
fredag 10 - 17 genomgång
(Charlotte bortrest)

v.27
måndag 10 - 17 tutorials
fredag 10 - 17 genomgång
(Kristine bortrest)

v.28
måndag 10 - 17 tutorials
fredag 10 - 17 genomgång
(Robin och Magnus bortresta)

v. 30
fredag 21 juli
slutsammanställning

Hej på er!

Vad roligt detta ska bli!
http://northernwhisper.com/css/

WE ARE LIVE!

NU KÖR VI!