Gezocht: hint in de goeie richting - Softwareontwikkeling

vrijdag 8 november 2013 21:09

Acties:

BEATI PAVPERES SPIRITV

Topicstarter

Sorry dat de titel niet veel zegt, maar ik zie niet in hoe dit uit te leggen in een titelveld.

De laatste keer dat ik een website maakte is de tijd dat <frame> state-of-the-art was, dus ik ben een webdesign fossiel intussen.

Nu wil ik een kleine website maken ivm. onze nieuwe woonst. Mijn idee is simpel: een pagina met een grondplan en dan wil ik op die foto 'spots' maken waarop men kan klikken om een foto van die ruimte te zien.

Mijn beste idee tot nu toe is het grondplan in stukken knippen en via HTML terug aan elkaar plakken. Omdat elke ruimte op het grondplan dan een aparte image is kan ik gemakkelijk doorlinken naar een foto. Als iemand evenwel betere ideeën kent hoor ik het graag.

vrijdag 8 november 2013 21:14

Acties:

crisp

Devver

Pixelated

In de tijd van frames had je ook al image maps, en die bestaan nog steeds

Intentionally left blank

vrijdag 8 november 2013 21:15

Acties:

Onbekend

...

Je kunt het grondplan op de achtergrond zetten en dan van de area-tag gebruikmaken.
En anders verschillende div's gebruiken en een absolute offset geven.

Speel ook Balls Connect en Repeat

vrijdag 8 november 2013 21:15

Acties:

frumper

Klopt, gewoon maps gebruiken! Werkt makkelijk en goed.

Life is what happens while you're busy making other plans

vrijdag 8 november 2013 21:17

Acties:

Ramon

Als je Adobe Fireworks hebt (of de trial download) kan je de afbeelding inladen, "klikzones" definieren en als een html table exporteren. Erg makkelijk! Gebruiken wij vooral voor html nieuwsbrieven maar werkt natuurlijk ook voor websites.

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

vrijdag 8 november 2013 21:54

Acties:

YellowOnline

BEATI PAVPERES SPIRITV

Topicstarter

crisp schreef op vrijdag 08 november 2013 @ 21:14:
In de tijd van frames had je ook al image maps, en die bestaan nog steeds

Ik denk dat ik hiermee aan de slag ga, al moet ik nog uitzoeken hoe dat coordinatensysteem werkt.

code:

1	<area shape="rect" coords="0,0,100,100" href="iets.html">

Klopt het als ik denk dat de eerste twee parameter de x en de y van de rechthoek zijn en de laatste twee de x en de y van de tegenoverliggende hoek? En dat die eerste berekent worden ten opzichte van het nulpunt (enfin, de linkerbovenhoek) van de afbeelding die als 'map' gebruikt wordt?

Enfin, ik ga het meteen proberen

@andere suggesties:
1) Ik kan mij vergissen met meer dan 15 jaar achterstand in HTML, maar een achtergrond zou toch slecht aflopen tenzij je hem absoluut maakt, iets dat moeilijk is gezien verschillende resoluties e.d.
2) Geen Adobe bloatware op mijn PC liefst

Ik kijk al uit naar de dag dat alles HTML5 is en Flash - het enige van Adobe dat ik heb - de deur uit mag. Ik herinner me trouwens nog vaag Adobe PageMill, een niet meer bestaand product tot zover ik weet, dat kampioen was in zinloze metadata genereren. Alleen Microsoft Frontpage (of hoe heette het?) was erger - en die bestaat ook niet meer.

Sorry voor de Adobe rant. Ik ben gewoon geen fan.

Neen, de MAP manier lijkt mij het mooiste.

Edit:

Geweldig, dit werkt perfect:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>J# &amp; J* have moved...</title>
    </head>
    <body>
        <p align=center style='text-align:center'><b><span style='font-size:26.0pt;font-family:"Calibri","sans-serif"'>The New J# &amp; J* Flat in Neuk&ouml;lln,Berlin</span></b></p>
        <p align=center style='text-align:center'><i><span style='font-size:12.0pt;font-family:"Calibri","sans-serif"'>// Click on a room to see a picture // Klik op een kamer om een afbeelding te zien. //<br>// Cliquez sur une chambre pour voir une image. // Klick auf einen Raum um ein Foto zu sehen. //</span></i></p>        
        <br>
        <br>
        <br>
        <br>
        <br>
        <table style='width: 100%' border="0">
            <tr>
                <td>
                    <center><img src="01-plan.jpg" width="454" height="537" alt="Apartment" usemap="#ApartmentMap"></center>
                    <map name="ApartmentMap">
                        <area shape="rect" coords="9,9,55,132" alt="Wardrobe" href="10-wardrobe.jpg" target="Images">
                        <area shape="rect" coords="55,9,200,132" alt="Office" href="11-office.jpg" target="Images">
                        <area shape="rect" coords="9,137,296,321" alt="LivingRoom" href="07-livingroom.jpg" target="Images">
                        <area shape="rect" coords="299,113,416,170" alt="Balcony" href="05-balcony.jpg" target="Images">
                        <area shape="rect" coords="295,175,416,268" alt="Kitchen" href="04-kitchen.jpg" target="Images">
                        <area shape="rect" coords="301,273,416,321" alt="Hall" href="02-hall.jpg" target="Images">
                        <area shape="rect" coords="9,236,76,400" alt="Passage" href="13-sleepingroom.jpg" target="Images">
                        <area shape="rect" coords="82,326,202,400" alt="Bathroom" href="12-bathroom.jpg" target="Images">
                        <area shape="rect" coords="9,404,203,505" alt="Bedroom" href="14-sleepingroom.jpg" target="Images">
                    </map>
                </td>
                <td>
                    <!--'Seamless' isn't supported by every browser yet, so I try both the old and the new style by specifying the frameborder too-->
                    <iframe src="" name="Images" height="700" width="700" frameborder="0" seamless></iframe>
                </td>
            </tr>
        </table> 
    </body>
</html>

Als er in deze code nog artefacten uit het verleden zitten die netter kunnen tegenwoordig, laat gerust weten. Wat ik overigens niet snap is dat ik met een opgegeven height en width van 640 voor alle foto's een scrollbar krijg, hoewel de langste zijde steeds resized is naar 640. Door de iframe wat te rekken (naar 700 was nogal arbitrair) is dat probleem wel opgelost.

Edit:

Check: http://www.berlin.co.nf/

[ Voor 47% gewijzigd door YellowOnline op 09-11-2013 11:36 ]

zaterdag 9 november 2013 11:54

Acties:

Tsjilp

RS[I]ds

Waarom een iframe? Je kunt dit prima laden zonder iframe. Stukje javascript voor nodig, maar zeker geen rocket science. Kwestie van een lege <img /> tag plaatsen waar je nu het iframe hebt staan en onclick de src zetten.

Raar... Is zo gek nog niet

zaterdag 9 november 2013 12:10

Acties:

YellowOnline

BEATI PAVPERES SPIRITV

Topicstarter

Tsjilp schreef op zaterdag 09 november 2013 @ 11:54:
Waarom een iframe? Je kunt dit prima laden zonder iframe. Stukje javascript voor nodig, maar zeker geen rocket science. Kwestie van een lege <img /> tag plaatsen waar je nu het iframe hebt staan en onclick de src zetten.

Ik heb talloze manieren opgezocht gisteren om de afbeelding zichtbaar te maken, maar ze waren allemaal met scripting. Omdat ik het eenvoudig wil houden en een aantal mensen die dit zien met NoScript werken koos ik voor HTML-only. Is er trouwens een technische reden om een lege img tag te prefereren boven een iframe? Heb m'n best gedaan om HTML5 compliant te zijn nochtans, tot zover ik de opmerkingen op w3schools goed gevolgd heb

zaterdag 9 november 2013 14:08

Acties:

R4gnax

YellowOnline schreef op zaterdag 09 november 2013 @ 12:10:
[...]
tot zover ik de opmerkingen op w3schools goed gevolgd heb

Even terzijde: meteen mee stoppen en iets beters gebruiken.

zaterdag 9 november 2013 21:53

Acties:

YellowOnline

BEATI PAVPERES SPIRITV

Topicstarter

R4gnax schreef op zaterdag 09 november 2013 @ 14:08:
[...]

Even terzijde: meteen mee stoppen en iets beters gebruiken.

Ok, de boodschap is doorgekomen. Als leek is het wel moeilijk dat te weten hé. Of zelfs te weten in hoeverre die kritiek terecht is overigens.

maandag 11 november 2013 08:02

Acties:

hiekikowan

Goed punt... w3fools is inmiddels achterhaald, dat punt is op tweakers al veel vaker aangehaald. Ze zijn nog niet altijd correct echter, correcter (maar ook technischer) is MDN

maandag 11 november 2013 09:53

Acties:

YellowOnline

BEATI PAVPERES SPIRITV

Topicstarter

Dit is allemaal natuurlijk offtopic, maar ik heb sowieso m'n oplossing al dus dat geeft niet.

Nu, om verder op dit thema te borduren: is MDN dan niet toegespitst op wat Mozilla ondersteund? Als ik even snel-snel kijk zie ik aparte vermeldingen voor attributes voor FireFox maar niet voor andere browsers.

maandag 11 november 2013 10:24

Acties:

Barryvdh

Volgens mij is http://docs.webplatform.org/ een samenwerking met meerdere browsers/bedrijven en kan iedereen zelf ook contributen.

maandag 11 november 2013 22:23

Acties:

R4gnax

YellowOnline schreef op maandag 11 november 2013 @ 09:53:
Dit is allemaal natuurlijk offtopic, maar ik heb sowieso m'n oplossing al dus dat geeft niet.

Nu, om verder op dit thema te borduren: is MDN dan niet toegespitst op wat Mozilla ondersteund? Als ik even snel-snel kijk zie ik aparte vermeldingen voor attributes voor FireFox maar niet voor andere browsers.

De documentatie is over het algemeen gespleten in Mozilla-specific en general purpose. Waar dat niet expliciet het geval is staat bovenaan de pagina's vermeldt dat het een Mozilla-specifieke technologie betreft. Hier wordt ook een melding geplaatst als het een nog experimentele techniek of een depracted/obsolete techniek betreft.

Mozilla is ook heel compleet met exact in hun compatibility tables aan de bodem van elke pagina de browser support te vermelden, compleet met voetnoten betreffende browser vendor prefixing enz.

maandag 11 november 2013 23:17

Acties:

Caelorum

Barryvdh schreef op maandag 11 november 2013 @ 10:24:
Volgens mij is http://docs.webplatform.org/ een samenwerking met meerdere browsers/bedrijven en kan iedereen zelf ook contributen.

Overigens is MDN ook gewoon een wiki hoor en kan iedereen daar aan bijdragen