Muse HD kwaliteit

In Muse is het mogelijk om de website in 2 verschillende kwaliteiten/ resoluties te bouwen.
Dit is bedoeld voor hoge kwaliteit beeldschermen zoals de retina maar geeft, bij gewone beeldschermen de mogelijkheid in te zoomen op foto's met behoud van kwaliteit.

1. Hoe te beginnen? 

In het scherm 'nieuwe site' kies je links onderaan voor de resolutie HiDPI (2x).
Je krijgt nu de waarschuwing dat daardoor de laadtijd langer wordt want de foto's worden groter.
Gelukkig kun je een (standaard) knop inbouwen die dat probleem verhelpt. (later meer daarover).

2. Hoe groot plaatsen? 

Op het moment dat je een foto plaatst kun je in het assist / elementen paneel zien of deze geschikt is voor het gebruik van HiDPI. Achter de foto staat dan: 2x. Als je de foto te groot op de pagina plaatst dan verdwijnt deze '2x'. Als je een foto 500 pixels breed op de pagina wilt plaatsen moet je hem opslaan met een breedte van 1000 pixels.

foto met HiDPI geplaatst

foto te groot op de pagina geplaatst

3. Normaal / HiDPI knop

In de widgets bibliotheek bij 'knoppen' zie je een HiDPI button. Deze kun je op de pagina slepen. In principe zal de website op een hoge kwaliteit beeldscherm automatisch de beste kwaliteit laten zien. Met deze knop kun je dat uitzetten waardoor de laadtijd versnelt wordt. Als je op een gewoon beeldscherm aan het kijken bent en je zet de knop aan dan kun je de foto vergroten met behoud van kwaliteit zoals op de afbeeldingen beneden duidelijk te zien is (bijv. bij de snorharen links onder).

 4. Hoe werkt dit?

Als je de website exporteert naar HTML dan zie je wat er gebeurd; de foto wordt op 3 verschillende formaten opgeslagen. De ene groter als de andere. Als je vervolgens ook nog een versie voor de tablet en telefoon maakt waarbij de foto aanpast aan het apparaat dan heb je in de map 4 bestanden staan met verschillende afmetingen. 

HTML embedden in WEB, MUSE

Hoe kun je in je eigen website diensten aanbieden zoals google maps, verkoop van foto's via Oypo of je Blurb boek

A. Tegenwoordig zie je op iedere website wel een google maps kaartje. Hoe kun je deze zelf in Muse inbouwen in je site?

1. Je gaat naar Google maps https://maps.google.com
2. Je typt daar het gewenste adres in

3. Je klikt op het link icoontje 

4. Dan kies je voor paste html to embed in website: selecteer de hele tekst (ctrl/cmd+A)
en kopieer dan de tekst (ctrl/cmd+C) Formaten zijn eventueel te veranderen in via customize and preview embedded map (blauw linkje onderaan).



5. In muse plak je dan de tekst in de gewenste pagina (ctrl/cmd+V)
Dat is alles: je google maps kaartje staat in je website.

B. Datzelfde kun je doen met OYPO. Oypo is een plek waar je je foto's kunt verkopen.
Ook zij hebben een plaats waar de HTML code gegenereerd kan worden. Deze kopieer en plak je weer. Nu heeft je website een OYPO winkel.

http://www.oypo.nl/content.asp?path=oamzcdn1

 C. Blurb boek. Als je via blurb een boek gemaakt hebt kun je dit boek helemaal of een zelf te kiezen aantal pagina's op je website tonen. Ook zij hebben een code generator daarvoor. Ook hier kies je weer voor <> Embed. Op je eigen website kunnen mensen dan direct het boek bestellen bij blurb: COOL.

http://www.blurb.com/my/book/widgets

i-phone site met muse; het menu maken

http://hildemaassen.businesscatalyst.com/index.html

Vandaag mijn eerste I-phone site gemaakt met Muse. Ook te zien met andere smartphones hoor.
Hij staat op bovenstaande linkje gepubliceerd.

Het probleem van een i-phone site is dat je grote knoppen moet hebben en minder tekst.
Ik heb hem nu heel eenvoudig gehouden.

1. Open een nieuwe i-phone site. Ik maak een aantal pagina's in mijn plan-modus zoals: portret, info en experiment.

2. Open de masterpage in design modus (Dubbel klikken op de master)

3. Maak de ruimte voor de header groter: dat is het 2de blauwe pijltje vanaf boven gezien.

.

3. Plaats in het header-vlak een accordeon panel. (in widget library, slepen naar juiste plaats)

 

4. Dit accordion paneel heeft 3 vensters, ik houdt er 1 over. Bovendien pas ik de breedte aan.

In het titel-gedeelte plaats ik een banner (een plaatje gemaakt in Photoshop met mijn naam en een "menu-verwijzer".

5. In het tekstgedeelte delete ik de tekst en plaats ik een verticaal menu. Deze vind ik in de widget library en sleep ik weer. De menu's die erin komen zijn de pagina's die ik bij stap 1 in het plan gemaakt heb. Ik pas de kleuren aan en haal de stroke (omlijning) overal weg.

 

6. In het accordion panelen submenu zet ik alle 3 de opties aan. Daardoor zal het menu uitklappen als ik op de banjer druk.

7. In de footer zet ik mijn mailadres en telefoonnummer (moet nog even uitzoeken hoe ik ook alweer deze kan laten werken)

8. Nu ga ik naar de afzonderlijke pagina's om daar foto's toe te voegen.

 

Muse terminologie en web basics

Omdat ik niet gewend ben aan het maken van websites is voor mij een hoop van de terminologie nieuw. Ook weet ik niet zo heel erg veel af van webdesign. Hoewel je als gebruiker je natuurlijk wel eens ergert aan bepaalde dingen op een site.

Een rijtje met basale kennis die ik nodig blijk te hebben. Soms erg basaal en weet ik het ook wel, maar ik probeer zo volledig mogelijk te zijn.

Terminologie:

• Home: Ik weet natuurlijk dat de home page de eerste pagina is en dat die meestal index.html heet.
• Sibling page is een pagina op hetzelfde niveau.
• Child-page is een pagina "eronder" een sub-pagina zou een ander woord ervoor kunnen zijn.
• Hyperlink: een verwijzing naar een andere pagina of artikel.
• Favicon: een klein logo dat naast de URL op de pagina verschijnt.
• Content: de inhoud, hetgeen op de site staat.
• Performs: o.a. de snelheid van binnenhalen.
• Browser fill: hetgeen buiten de pagina wat in de browser te zien is. 
• Page area: het gedeelte waarop de content van de pagina staat.
• Toolbox: selecteer-, crop-, tekst-, zoom-, hand- en rechthoek-tool.
• Controlpanel: laat mogelijkheden zien per tool verschillend.
• Panels: panelen met widgets, kleuren, tekst mogelijkheden etc.
• Header: kop met logo, titel en/of menu balk.
• Foother: links naar social media e.d. 
• Gutters: de afstand tussen kolommen
• Page area: het gedeelte waaraan je content kunt toevoegen
• Margin: een vrije ruimte, soort kantlijn in de site.
• Padding is ook een vrije ruimte maar deze creëert ruimte boven de website waardoor je meer van de browser fill ziet.
• Web fonts: lettertypes gepost door een bedrijf online: zoals Adobe Typekit. Op het moment dat de website geopend wordt wordt het font in de browser geladen via een script src="http://webfonts.creativecloud.com/de-walpergens-pica:n4:all.js.
• Web save fonts: lettertype die eigenlijk op alle systemen wel geïnstalleerd is en daardoor te zien. (Denk aan arial).
• System fonts: deze fonts worden door Muse omgezet naar een image (.PNG) zodat ze op de site te zien zijn. Te herkennen aan het logootje: een logo met een "T".

Footer en header guides zijn alleen op master pagina's te veranderen.

• Letter space: afstand tussen de letters. Als je een heel woord selecteert worden alle letters uit elkaar geschoven. Ga je tussen 2 letters staan dan alleen daar plaatselijk.
• Leading: onderlinge regelafstand (standaard %, maar je kunt ook px intypen).
• Indent: Inspringen bovenste regel
• Align justify: het uitvullen van een tekst waardoor er een blok ontstaat.
• Inline Content: inhoud (afbeelding) die in een tekstvlak geplaatst is waardoor hij bij het verschalen meebeweegt. De afbeelding behoudt dus zijn plaats ten opzichte van de tekst.

Webdesign:

• Muse maakt de site met vaste breedte gecentreerd in de browser: fixed width. De hoogte is afhankelijk van de content.
• File size: de grootte van een bestand op de site. Om een bestand te kunnen zien moet het gedownload worden naar de computer; hoe kleiner de bestanden hoe sneller ze zijn. Dit kun je bij Photoshop > save for web helemaal zelf in de hand houden. 
• Het is aan te raden de kleuren op alle pagina's gelijk te houden. Ook de navigatie niet van plaats veranderen omdat mensen dan moeten gaan zoeken.
• navigatie snel, overzichtelijk en duidelijk maken en zorg dat de interactiviteit duidelijk wordt zodat mensen snel doorhebben waar deze te vinden is: in muse kun je dit regelen in je masterpage.
• In de Footer en Header van een pagina kun je de dingen zetten die iedere pagina aanwezig moeten zijn. 

Webgalleries koppelen

Als je werkt met webgalleries dan zou het in bepaalde gevallen wel zo gemakkelijk zijn om ze te koppelen. Je kan op die manier met behulp van verschillende webgalleries op vrij eenvoudige wijze een website maken.

Het enoge wat je eigenlijk nog nodig hebt is een startpagina. Deze is dan de enige die je af en toe moet veranderen door er nieuwe links aan toe te voegen. Er zijn heel veel manieren om een startpagina te maken. Vanuit Flash, Dreamweaver en Fireworks bijvoorbeeld.

In dit geval begin ik vanuit Photoshop.

Daar maak ik de startpagina.

1. Kies het formaat waarin je de site wil maken. Maak de achtergrond transparant.

2. Zet afbeeldingen, tekst en headers in het document.

Zorg voor een goede mappenstructuur en benaming.

3. Nu ga je segmenten aanmaken. Met segmenten verdeel je een pagina in stukken; een soort stramien. Aan ieder stuk kun je in Dreamweaver een functie toekennen zoals een rollover of een link.

Er is een speciaal gereedschap om deze segmenten te maken: " segment"

Je ziet dat als je een segment maakt dat er automatisch andere ontstaan. Dit zijn " niet actieve segmenten".

Je kan een segment onderverdelen in gelijke stukken: met het gereedschap "segment selectie" door in de balk voor "verdelen" te kiezen.

4. Nu gaan we dit opslaan > save for web and devices.

Je moet nu van alle actieve segmenten vertellen hoe je ze wil laten werken. Je gaat ze één voor één selecteren en kiezen voor de opslag.

De keuzemogelijkheden zijn:

• GIF op PNG-8: beide met slechts 256 kleuren; goed voor teksten en logo's maar slecht voor foto's. (Animaties zijn als GIF op te slaan)
• JPEG: goed voor foto's maar in dit geval wordt er om de foto een achtergrond mee opgeslagen en is deze niet meer te wijzigen. (segmenten precies maken is de oplossing)
• PBG-24: zelfde al JPEG maar dan met transparantie maar niet door alle browsers ondersteund.
• WBMP: alleen zwart en wit.

5. Kies bij opslag voor: HTML en afbeeldingen.

6. Open nu het document wat je zojuist opgeslagen hebt in dreamweaver door voor " index" te kiezen.

7. Je kan nu op een tekst of afbeelding gaan staan (klik) in het venster onderin kun je hem dan koppelen aan een eerder gemaakte webgallery door erheen te browsen.

8. Invoegen filmpjes, hyperlink of emailkoppeling: zie venster invoegen.

9. De achtergrondkleur van je site: Deze moet je in de tekst wijzigen. Vrij bovenaan staat

TOT SLOT:

De afbeeldingen en teksten kun je ook toevoegen in Dreamweaver je kunt in Photoshop dus alleen het stramien maken met behulp van de segmenten.

Het maken van segmenten in Photoshop heeft als voordeel dat je ook een achtergrond foto kunt nemen waarbij je op verschillende onderdelen in de foto kunt klikken; de segmenten zijn te maken waar en hoe je wilt.