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.

 

Plaatsen van bestanden in Muse

Muse kan JPEG, Gif en PNG bestanden plaatsen. In die gevallen wordt er een link gemaakt naar het originele bestand. Op het moment dat je een PSD bestand plaatst wordt dan maakt muse er een ander samengevoegd bestand van wat zonder link geplaatst wordt; embedded.

Een bestand wordt altijd, ook als je het in muse verkleind bewaard en geüpload in het originele formaat. Daarom is het aan te raden bestanden zelf vooraf de goede formaten mee te geven.


In het "assets" menu kun je problemen zien m.b.t. geplaatste bestanden. De 9 kleurtjes (bovenste 2 icoontjes) geven aan dat het origineel te klein / te groot is.
Het icoontje met vierkantje en driehoekje geeft aan dat een bestand "embed" is.

De bestanden waar geen icoontje bij staat zijn gelinkt. Als de originele afbeelding veranderd wordt krijg je een uitroepteken te zien in het assets paneel. Klik je met de rechtermuisknop op dit uitroepteken dan krijg je de mogelijkheid het bestand te updaten en verdwijnt het uitroepteken.

Plaats je een .PSD bestand dat uit meerdere lagen bestaat dan kun krijg je een keuzescherm tijdens het plaatsen: iedere laag apart kun je nu kiezen (import layer) of het eindresultaat (import composite image).

Als je voor een aantal lagen kiest en daarna op OK dan zie je een klein getal bovenin verschijnen. In dit geval 3. Ik heb dus 3 afbeeldingen die ik één voor één kan gaan plaatsen. De afbeelding die als eerst geplaatst wordt is bovendien klein te zien. Met pijltjes toetsen kun je hierdoor navigeren. Met de escape kun je er één verwijderen. Als je in het venster  "Clip to Layer Content" aangezet hebt dan worden de kaders aangepast aan de inhoud. Als je het origineel bewerkt dan wordt het ook gewijzigd in Muse.

Menu mogelijkheden in Muse

Het maken van een menu is in Muse gaat behoorlijk automatisch. Als je in je plan de pagina's goed benoemd hebt dan komen ze automatisch in je menu te staan.

Wil je ze, om wat voor reden dan ook, niet in het menu hebben staan of je wil ervoor zorgen dat je er niet op kunt klikken (geen hyperlink dus) dan is dat mogelijk.

Exclude Page From Menu: dan komt de pagina niet in het menu te staan. Dit kan bijvoorbeeld gebruikt worden voor een pagina waaraan je aan het werken bent terwijl de rest online staat.

Met Include Page without Hyperlink is het mogelijk de pagina wel in het menu te hebben staan zonder dat je daar naar toe kunt. (Als de pagina's bijvoorbeeld "childs"heeft).



Een menu zet je natuurlijk in je master pagina zodat het op alle pagina's hetzelfde is. Zorg dat het altijd op dezelfde plaats staat zodat mensen niet hoeven te gaan zoeken. (maar dat gebeurd ook automatisch als je hem in de master hebt staan.

Een menu maken is erg gemakkelijk. Ga naar het widgets library paneel en kies voor horizontal of verticaal. Daarna is het een kwestie van slepen naar de gewenste plaats.

Het menu maakt gebruik van de pagina's zoals deze in je plan staan. De knoppen worden automatisch gemaakt, en werken ook meteen.

Als je een extra button wil, zoals ik naar dit blog dan kun je een tweede menubalk aanmaken die dan "manueel"ingevuld wordt.
Aan deze knop kun je dan een hyperlink toevoegen.

Op zich spreekt het menu maken voor zich. Je kunt alle buttons zelf veranderen van kleur, er ook een ander icoontje op plakken, rollover states maken e.d. De teksten kun je ook zelf aanpassen.

 Je kunt bepalen of je alleen de toplevel pagina's ziet (parents) of ook de andere pagina's (children) en ook die submenu's zijn naar eigen smaak aan te passen.

Je kunt het vlak vullen met een kleur of een gradiënt of het transparant maken. Of een afbeelding in de button plaatsen.




 


Het kleine driehoekje dat aangeeft dat er een submenu is kun je van plaats veranderen door een andere parts positioning te kiezen. Als je het driehoekje selecteert en vervolgens weggooit dan zal het menu er uitgeklapt uitzien (zoals hieronder)

De breedte van het submenu moet per submenu veranderd worden.













Bovendien kun je ook nog een effect meegeven aan het menu of aan de tekst. In het voorbeeld hieronder is overal schaduw toegevoegd.

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. 

Favicon en hyperlinks in Muse

Een favicon blijkt een logo te zijn dat je ziet naast de naam URL. Om er zelf één te maken in bijvoorbeeld Photoshop heb je een vierkant documentje nodig van  32x32 pixels en 72DPI. Te bewaren als: GIF, JPG of PNG. Je kunt hem toevoegen in het venster file > image properties. Door op het mapjes icoon te klikken in het layout-venster kun je je favicon bestandje selecteren en invoegen. De code:  link rel="shortcut icon" href="images/home-favicon.ico?3921047416"/

In het Hyperlinks paneel blijk ik de keuzes van de kleuren van de hyperlinks te kunnen instellen. Je kunt het ook opslaan als een style. Op het moment dat ik een stuk tekst om wil zetten in een hyperlink dan zie ik daar mijn opgeslagen style terug als keuze.Ook kan ik instellen hoe de tekst zich moet gaan gedragen.
T = boldT = cursiefT = onderlijnd
Je kunt hierin verschillen maken met 3 mogelijkheden.☑ Een vinkje betekend dat je ervoor kiest (3 vinkjes op een rijtje kan ook. Gevolg: bold, cursief en onderstreept)☐ Een leeg vlakje betekend dat het NIET gebeurd⚀ Een grijs blokje betekend dat de staat blijft zoals hij was. Dus als de tekst in de normal-state onderstreept was en in de hover staat een grijs vlakje dan blijft hij onderstreept. Dan nog de code die Muse wegschrijft op het moment dat je de site publiceert. Aan de achterkant schrijft Muse dus gewoon de HTML code.a:linka:visiteda:hovera:active color: #78CE07; (kleurcode) font-style: italic; (schuin/ cursief) font-weight: bold; (bold/ dim) text-decoration: inherit; (vorige) text-decoration: underline (onderstreept)
Nu heb ik dit voor de hele site gedaan bij file > site properties. Maar een aantal properties zijn ook op pagina niveau te veranderen of in de master bij page > page properties. Page properties overschrijven altijd de site en de master properties (ook als de site properties later nog aangepast worden). Master properties overschrijven alleen de site properties.In het tweede tabblad kan ik per pagina de metadata aanpassen. Metadata zijn tekst beschrijvingen op basis waarvan zoekmachines werken. Waardoor je site bijvoorbeeld sneller gevonden kan worden. a. description: beschrijving die weergegeven wordt in een zoekmachine over de site. Houdt ongeveer 150 karakters aan. Maak per pagina een unieke beschrijving waarbij je feiten die niet in de titel van de pagina staat noemt.                                                         b. keywords: de woorden waarop gezocht kan worden. Zet deze in volgorde van belangrijkheid. Plaats komma's tussen de woorden waarop gezocht kan worden.c. Page title is normaal gesproken dezelfde als de page name. Als je het vinkje "same as Page Name"uitzet dan kun je dit veranderen. Wat je daar nu als titel zet kom je tegen boven de pagina als je hem opent. Zorg dat je er ook achter zet wat soort pagina het is: in dit geval "| Home". meta http-equiv="Content-type" content="text/html;charset=UTF-8"/meta name="description" content="Hilde Maassen is photographer. She likes to react on thinks that happens."/meta name="keywords" content="dogs, dogs in the city, Rotterdam, the netherlands, photography, pictures, hond, honden, hondjes, stad, "/(Ik moet haakjes om de code weglaten anders laag mijn blog het niet zien).

Muse plaatsen GIF

Ik was me opeens af aan het vragen of je in Muse ook iets kunt doen met bewegend beeld. De mogelijkheid om een fimpje te plaatsen heb ik nog niet gevonden. Maar een GIF lukt zeker wel. Gewoon met "file > place" doet ie het al. Kijk maar naar het resultaat in de movie.