Link in pdf werkt wel op pc niet op Ipad

Status
Niet open voor verdere reacties.
Met dank aan jullie allemaal, maar speciaal aan csshunter: en hier is ie dan.

Misschien hier en daar nog wat bijpoetsen, maar het ei is gelegd.
En nogmaals: dank allemaal.

Bart
 
en hier is ie dan.
Klik om te vergroten...
Ha, gefeliciteerd: een ei gelegd dat swingt! :thumb:

Ik doe hier meteen even het antwoord op je mailtje, misschien hebben anderen er ook nog wat aan.

Ja, Frontpage is zeker niet betrouwbaar, MS Word maakt vreselijke bagger-code als je een document durft "Opslaan als ... html" (dat is dus een ratjetoe van html-codes en MSOffice-codes - die helemaal niet in html mogen staan; met een resultaat dat vaak alleen maar goed te bekijken is in Internet Explorer), en Publisher is aardig voor print-zaken, maar totaal ongeschikt voor websites (ondanks de MS-beweringen).

Van MsAccess en VBA heb ik nu weer geen verstand, maar in de loop der jaren heb ik me met schade, schande en veel experimenteerwerk (incl. grote dank aan tallozen die mooie dingen en oplossingen via internet aandragen, enz.) wat html- en css-kennis aangeleerd.

Tegenwoordig maak ik webpagina's op de "Spartaanse manier": zelf html- en css-code (en af en toe wat javascript-code) inkloppen in Kladblok (d.w.z. de geavanceerdere Notepad++).
Als er dan iets fout gaat, heb ik het helemaal zelf gedaan! :D

De "U vraagt, wij draaien" What-You-See-Is-What-You-Get webbouw-programma's ("Voor ons product heeft u totaal geen html-kennis nodig") heb ik een kijkje op. Die beloven doorgaans (heel) veel meer dan ze kunnen waarmaken. Of je kunt niet zomaar bij de code komen om er zelf iets bij te zetten, enz.

Z.g. professionele (en dure!) html-editors (bv. Dreamweaver en aanverwanten) heb ik eigenlijk nooit gemist. Om de snufjes goed te kunnen gebruiken (en om onhebbelijkheden te kunnen corrigeren!), heb je toch weer zelf code-kennis nodig. Daarbij komt dat de gebruiksaanwijzingen ook de nodige leertijd vergen. En daarnaast zijn een aantal dingen soms meer ballast dan handig, zoals bij Dreamweaver het template-systeem (vind ik; waarom, staat hier).

Verder is KompoZer een heel aardige gratis html-editor (uit de Mozilla/Firefox-hoek), die zowel een ontwerp-weergave als een code-weergave heeft, zodat je er verschillende kanten mee op kunt. Daar komen niet van die blunders uit die Microsoft zich veroorlooft!
  • Als opvolger van Frontpage heeft MS tegenwoordig Expression Web, die een stuk beter moet zijn; maar daar heb ik geen ervaring mee.
Tenslotte: als je wilt weten waarom bv. Frontpage verkeerde dingen doet, zou je deze eens kunnen doornemen: www.web-garden.be/cursus-html/cursus-html

Met vriendelijke groet,
CSShunter
 
Hoi Bart,
Je hebt intussen nog wat mooie kleurtjes toegevoegd, zie ik. En een link naar een pdf-printversie.
- Ik was ook nog even aan het knutselen:
  1. Het er nette html van maken (in plaats van de Frontpage-bende), waarbij alle opmaak-eigenschappen apart staan in een css style-blok. *)
  2. Het aanpassen van de opmaak voor printen, zodat je met deze ene pagina kunt volstaan.
Ad 1:
Bv. alle <font>-tags er uitgehaald, want die zijn vanaf 1999 afgekeurde/achterhaalde html. In plaats daarvan kan bv. in de css voor alles tegelijk het lettertype "Lucida Sans Unicode" (met wat alternatieven als er geen Lucida Sans Unicode bij de bezoeker op zijn/haar computer zit). Dan hoeft dat niet bij elke html-paragraaf opnieuw ingesteld te worden. Voor centreren is er ook een eenvoudige opdracht: "text-align: center"; dat vervangt dan al die spaties om in het midden uit te komen. Enz.
Gelukkig een kleine pagina, dus niet veel werk. ;)
Tegelijk ook even de verschillende vergrotingsfactor van de twee images aangepakt: ze zijn nu even breed, en de notenbalkjes zijn even hoog (de ruimte tussen de notenbalken verschilt, maar dat zat in het origineel).

De oude html met:
HTML: 
<p align="left"><font face="Lucida Sans Unicode"><font size="3"><br>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;(... enz.)
   &nbsp;&nbsp;&nbsp;&nbsp;<font color="#000080">Composed, arranged and 
   played by Bart Kuijer&nbsp;</font><br>nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (... enz.)
   <font color="#000080">Tempo 110, keyboardstyle: (Rhumba) 
   Flamenco</font></font></font>
</p>
is nu bv. simpelweg geworden:
HTML: 
<h2>Composed, arranged and played by: Bart Kuijer<br>
   Tempo 110, keyboardstyle: (Rhumba) Flamenco</h2>
... waarbij alle opmaak van deze <h2> (kopje van de tweede orde) is "verbannen" naar de css-styles:
Code: 
h1 {
     text-align: center;  /* tekst gecentreerd in de regel */
     font-weight: normal; /* niet vet */
     margin: 10px 0;      /* afstandje van 10px tot de hoofdkop erboven */
     padding: 0;          /* geen opvullingsruimte binnen de h2 */
     font-size: 1.6em;    /* lettergrootte op 160% van de standaard grootte */
   }
De css maakt het wel zo overzichtelijk, nietwaar? :)

Ad 2:
Als de opmaak eenmaal in het css-blok staat, is het ook eenvoudig om speciale instructies te geven voor het printen van een html-pagina. De player en het regeltje erboven kunnen bv. bij een printje gemist worden, dus die zijn verduisterd met {display: none;}. De muziek-afbeeldingen kunnen nu in "harde centimeters" opgegeven worden, de tweede afbeelding moet op A4-pagina 2 beginnen, enz.
- Dit scheelt de link naar de pdf; maar misschien is een pdf toch beter.

O, zien? ;)
  • Nieuwe testpagina: www.developerscorner.nl/csshunter/tests/luna-rossa-nw.htm
    (zie broncode)
  • Via menu: Bestand > Afdrukvoorbeeld kan je zien wat ie op een printer gaat doen.
  • NB: in Internet Explorer 7 werkt het ge-embedde img niet, maar daar is de pagina toch niet voor bedoeld (klopt?).
Met vriendelijke groet,
CSShunter

PS: is het nu Luna Rosso of Luna Rossa (in de html staat de o, in de pdf staat de a)?
___________
*) Helemaal netjes kan het niet, want momenteel is <embed> geen geldige html-code (het embedden was specifiek voor een aantal browsers bedoeld, en andere konden/kunnen er niet mee overweg; vandaar). Maar in de toekomstige html5 wordt <embed> als geldige html ingevoerd; dus heel erg is het ook niet (als het werkt).
 
Laatst bewerkt:
Kon het niet laten om nog wat verder te borduren aan een "universele versie", die op alle browsers en op alle Pad's Pod's PC's en OS'sen zou moeten werken.
Techniek:
  • De Quicktime player is opgenomen; omdat deze in alle browsers werkt (met kleine toevoeging in de embed-code voor Chrome).
  • Voor de bladmuziek echte images gebruikt (png's blijken het kleinste); omdat deze ook in Internet Explorer te zien zijn. Belangrijk: de images in een tekenprogramma op breedte van 750px brengen, en niet een groter formaat gebruiken dat door de browser verkleind moet worden (browsers kunnen dat niet zo mooi, en het scheelt in kB's).
  • De css in een apart stylesheet gezet, zoals het hoort, zodat deze ook bruikbaar is voor andere muziekpagina's dan de Luna-pagina.
  • Geïntegreerde print-opmaak: geen pdf daarvoor nodig.
  • Nog een pauze-tip bedacht (via hover te zien), zodat men al spelend op zijn/haar Yamaha-keybord met sneltoetsen op een notebook de player stop kan zetten (in plaats van naar muis of touchpad te moeten graaien).
Deze doet het in Firefox3.5, IE7, Opera9, Safari en Chrome, en zou ook in latere versies en op de iPad moeten werken.

Ik heb de pagina naar browsershots.org gestuurd, die op allerlei browsers en operating systems test.
Het resultaat valt hier over een half uurtje vanaf nu te verwachten.
Ziet er voorlopig niet onaardig uit (IE7 was daar te ongeduldig, maar doet het bij mij wel). :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Csshunter,

Met al jouw tips en hulp en die van Sandbest ben ik zover dat ik het nu wel red.
Op een probleempje in de voettekst -ik krijg daar de kleur van het woordje from nog niet gelijk aan de linktekst er voor en er na - is dit mijn definitieve versie, zijnde "het beste uit twee werelden". Verantwoording:

Ik koos voor wat de basisopzet betreft voor het voorstel van Sandbest: compact, overzichtelijk en voor een beginneling als ik gemakkelijk te lezen. Voor mij is dit als het ware een sjabloon waarmee ik ook de htm's voor de andere muziek van mij ga maken.

Voor de wijze waarop de images worden gevuld koos ik voor de embedded oplossing van Csshunter. Daarmee vermijd ik alle afhankelijkheid van externe bestanden. Immers, de oplossing van het verwijzen naar gif-bestanden is kwetsbaar. Zou ik ooit ook maar iets aan de mappen-structuur van mijn site veranderen, dan vindt de htm de gif-bestanden niet meer. Dat geldt natuurlijk ook voor de mp3, maar dat ligt toch iets anders vind ik.

Als lettertype koos ik voor Helvetica. Dat is een font dat Apple ook kent.

Wat me wel verbaast is dat html niet een functie kent, zoals die in VBA spaces(n) heet (waarbij n staat voor een getal), waarmee je een aantal spaties tussen twee tekstdelen zet.

Deze oplossing werkt, zoals door jullie gezegd, niet op IE. Maar daar is dit product immers ook niet voor bestemd.
Weliswaar zet ik deze htm's wel op mijn site, maar daar zet ik dan de waarschuwing bij dat deze produkten niet werken op IE.
Overigens: Is er niet een soort if-then oplossing binnen html waarbij, als lr.htm door IE wordt geopend, er een melding komt?

Maar goed, dat laatste is niet zo belangrijk. En ik ben blij met jullie hulp, want nu kan ik verder naar de volgende stap: iemand zoeken die ervaring heeft met het omzetten van een htm-bestand naar een Ipad-app.
Nogmaals: geweldig bedankt allebei.

Bart

@csshunter
Nog een berichtje aan jou van Sandbest (ik lijk TNT wel:) :)
Zou je alsjeblieft tegen csshunter kunnen zeggen dat zijn sneltoets idee sowieso niet werkt op Mac OS X, omdat cmd+spatie al een systeem toetsenbordcombinatie is (namelijk om Spotlight te openen).
Klik om te vergroten...
 
Hoi Bart (en Sandbest),
Met vereende krachten! :)
Eerst m'n reacties, dan m'n suggesties voor de finishing tutsj.

De ingekomen post van Sandbest: oew, ja, ik heb het altijd zonder Mac's moeten stellen; de sneltoets-combi had ik ergens bij docs.info.apple.com gezien, maar zeker scheef gelezen. Weg ermee! Ik zal het nooit meer doen. ;)

Basisopzet: voorstel-Sandbest. Ik begrijp dat de Quicktime-player variant is vervallen ten gunste van de <audio>-oplossing. Daarmee worden geen browsers (of: oudere browserversies) bediend, die nog niet met deze html5 kunnen omgaan. Door de keus voor embedded base64-images kan IE daarnaast de bladmuziek niet laten zien.
Maar de iPadjes waar het om gaat, kunnen dit alles prima.

Lettertype: Helvetica. Prima, als er daarnaast een "generiek lettertype" opgegeven wordt (in dit geval: schreefloos), voor computers die toevallig niet de Helvetica geinstalleerd hebben staan.

Spaties: Geen functie in html zoals die in VBA spaces(n) heet (waarbij n staat voor een getal), waarmee je een aantal spaties tussen twee tekstdelen zet?
Nee, in html/css kan je bij elk element een margin-left of margin-right (of allebei) opgeven met hetzij een vast aantal pixels, hetzij een aantal em's. Pixels verdienen meestal de voorkeur, omdat em's en ook spatie's afhankelijk zijn van de lettergrootte en onverwachte effecten kunnen geven als de bezoeker een andere lettergrootte instelt.

IE-only: Is er niet een soort if-then oplossing binnen html waarbij, als lr.htm door IE wordt geopend, er een melding komt?
Ja, die is er. Dat werkt met een zogenaamd "Conditional Comment". Dat is een speciale soort commentaar-regel, die alleen door IE begrepen wordt (of met name genoemde IE-versies). Zie deze voorbeeldpagina.
Maar voor andere browsers bestaat niet iets dergelijks. Er bestaat wel "browser sniffing" (met javascript), maar dat is hogelijk onbetrouwbaar en niet toekomst-vast. Ik denk dat onderaan een algemene opmerking over eventueel niet werken beter is, samen met een CC voor IE.
Toelichting:
  • html:
    Om er valid html van te maken, moet er altijd een <meta> element met de "charset" bij. Ook een <title> (voor in de browserbalk) mag nooit ontbreken; en is ook goed voor Google. De eigenschap align="center" is afgekeurde html (via css te regelen). De riedel nbsp'tjes ook vervangen door css. In de <audio> mogen controls="" autobuffer="" geen ="" hebben, zoals Sandbest ook al opmerkte. Daarmee is het valid html5, tenminste als we afzien van de pietluttigheid dat formeel gezien de base64-data geen linebreaks mogen hebben, en in één lange regel achter elkaar horen te staan (zegt de w3c html-validator). Browsers mogen echter wel net doen of ze die ongeoorloofde linebreaks niet zien, stond ergens anders bij w3c; en o.a. de iPad kan dat dus, gezien de eerdere resultaten. Maken we ons niet druk om.

  • css:
    "Tekst met behulp van CSS gewoon uitlijnen, dit moet je inderdaad niet met spaties gaan doen,
    maar daar wil csshunter je vast wel meer van vertellen. ;)"
    - Is geregeld. ;) Alles in de pagina is gecentreerd, de subkop-delen zijn van elkaar gescheiden door ze naar links en naar rechts te "floaten", verticale delen hebben css-afstanden gekregen, en wat extra css toegevoegd voor de onzichtbaarmaking van de zinnetjes voor IE-eyes only.

  • img:
    In eerdere bijdragen had ik de images bewust (verschillende) exacte breedtes en hoogtes gegeven. Dit omdat de originele images van elkaar afweken in de breedte, in de witruimte aan de linkerkant, en in de afstanden tussen de notenbalken; en daarmee niet goed op elkaar aansloten (de tweede was o.a. een stuk smaller).
    Nu gecorrigeerd in tekenprogramma, teruggebracht naar een formaat met 950px breed (want iPad heeft liggend 1024px resolutie las ik); en dan als gif met 16 kleuren opgeslagen. Dit zijn ze: luna-1_950x1010.gif en luna-2_950x880.gif. Daarna opnieuw door de base64-omvormer geworpen, en die verse letterbrij in de html gezet. Nu kunnen ze ook zonder pijn op 100% breedte gezet worden (met automatische hoogteregeling): aldus geschiedde.
    Met de twee img's mee is nu de totale pagina zo'n 60kB: dat is te overzien! :)

  • support:
    Voor alle oudere browsers een extra voetnootje gemaakt hoe die toch de muziek kunnen horen als de player 't niet doet. En voor IE'ers dat CC'tje, omdat die helemaal niets kunnen zien of horen als ze de pagina openen.

  • links:
    De link-kleur en de tekstkleur moet los van elkaar ingesteld worden; kan met css. Ook de link-kleur voor "al bezocht" kan apart ingesteld worden. Ik heb ze nu zo gezet, dat alles altijd in hetzelfde paars is. Maar alle andere varianten zijn ook mogelijk. Lijkt me niet zo'n gek idee om voor het onderscheid het "from" in het gewone tekst-blauw te zetten (en eventueel nog in de kleinere lettergroote).
Kortom: met css is alles op bestelling leverbaar! :)

Met vriendelijke groet,
CSShunter
_____
Het andere forum: macwereld.nl/forum/2011/01/link_in_pdf_werkt_wel_op_pc_niet_op_ipad
Een IE-screenshotje: www.developerscorner.nl/csshunter/tests/images/luna-ie-screenshot.png
 
Laatst bewerkt:
Dankjewel csshunter!

En ook nog bedankt voor de melding van de foute naam.
Voor de zekerheid heb ik dat even gevraagd aan Enrico een Italiaanse Nederlander die, net als ik, ook lid is van het Muzikantenforum.
Hij zegt
Het is ...Luna rossa.
ROSSO ,betekent ook rode, maar is dan mannelijk bedoeld.
Luna is een vrouw ,
Ciao ,Un saluto
Klik om te vergroten...

O.k "Rode maan" is dus in het Italiaans "Luna RossA":o
 
Ik kan hem wel voor je spelen hoor, voor mij persoonlijk een makkelijk lied.
Moet nu weer keyboard gaan oefenen, nu ik het bedenk...
 
Ik heb nog een opmerking over het audiotype. Bij mij in Firefox werken de .MIDI-bestanden niet. Ik geloof dat .ogg-bestanden worden ondersteund door bijna alle browsers en dat dit op weg is om de standaard te worden bij audiobestanden in HTML5. Daarnaast hebben .ogg ook een kleinere grootte als .mp3-bestanden.

Ook mogelijk; meerdere bestanden toevoegen, ik geloof dat de browser dan zelf het meest geschikte bestand kiest. Voor een voorbeeld: klik.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan