U kunt een interactieve plattegrond aan een evenement koppelen wanneer u een nieuw evenement aanmaakt of wanneer u een bestaand evenement bewerkt.

Als u een nieuw evenement met een zitplaatsenschema wilt aanmaken, gaat u naar uw persoonlijke account en klikt u op "Evenement aanmaken". Ga naar stap drie "Participatie opzetten."

Wilt u de zitplaatsenindeling koppelen aan een bestaand evenement, klik dan op de link "Bewerking" op de evenementenpagina en ga naar stap "Participatie instellen".

Bij de stap "Deelname instellen" klikt u op de knop "Interactieve zitplaatsplattegrond toevoegen" onderaan het formulier op het hoofdgedeelte van de pagina.

Je zult het zien Stoelindeling-editor.

Voeg plaatsen toe aan het diagram

Verplaats de cursor naar een leeg wit gebied, dichter bij het midden, en houd de linkermuisknop ingedrukt. Verplaats de cursor, zonder de linkermuisknop los te laten, alsof u bestanden selecteert.

Tijdens het verplaatsen ziet u de plaatsen die worden aangemaakt; voor het gemak wordt de grootte van de toegevoegde groep plaatsen naast de cursor aangegeven als “Hoogte X Breedte”.

Laat de linkermuisknop los om het maken van spaties te voltooien.

Verplaats en verwijder plaatsen om de gewenste indeling te krijgen

Klik op de knop "Wijzig locaties" rechtsboven.

Als u plaatsen wilt verwijderen of verplaatsen, moet u ze eerst selecteren. U moet de linkermuisknop ingedrukt houden en bewegen zonder deze los te laten, waarbij u plaatsen selecteert op dezelfde manier als u gewoonlijk tekst of bestanden selecteert. Het proces is vergelijkbaar met placemaking.

Markeer de plaatsen die u wilt verplaatsen of verwijderen.

Om plaatsen te verplaatsen, drukt u eenvoudig op de pijl op uw toetsenbord die overeenkomt met de gewenste richting. U kunt ook de linkermuisknop op een van de geselecteerde plaatsen ingedrukt houden en, zonder deze los te laten, de cursor verplaatsen - de plaatsen zullen erachter komen. Net zoals u bestanden of een deel van een afbeelding verplaatst in grafische editors.

Om plaatsen te verwijderen, drukt u gewoon op de toets Verwijderen of Backspace.

Voorbeeld

We hebben nieuw gecreëerde zitplaatsen: een zaal van 15 zitplaatsen hoog en 51 zitplaatsen breed. Laten we zeggen dat verschillende achterste rijen geen vier zijstoelen hebben, dan moet u gangpaden tussen de stoelen maken en de eerste rijen weg van de rest verplaatsen.

Wijs kosten toe aan plaatsen

Om een ​​prijs aan stoelen toe te wijzen, selecteert u deze en klikt u vervolgens op de knop "Tickettype instellen". Selecteer in het vervolgkeuzemenu "Categorie toevoegen".

Geef bijvoorbeeld de ticketcategorie een naam "Eerste rijen", geef de kosten aan, schrijf eventueel een opmerking (deelnemers zien dit in het diagram). Het is het beste om de kosten van het ticket in de opmerking te dupliceren.

Nu hebben de toegewezen stoelen een andere kleur en zijn de kosten veranderd afhankelijk van de toegewezen categorie.

Om de kosten van een stoelcategorie te wijzigen, selecteert u de stoelen en klikt u op ‘Set ticket type’ en klik op het potlood naast de gewenste zitplaatscategorie.

Nummer de stoelen

Om stoelen te nummeren, selecteert u alle stoelen of het deel dat u wilt nummeren.

Klik "Nummer de stoelen" Selecteer in het paneel bovenaan in het venster dat verschijnt de nummeringsmethode en beginwaarden en klik op "Nummer"

Doe alles zoals je wilt

Schaal

Om het werken met het haldiagram te vergemakkelijken, moet u ervoor zorgen dat de weegschaal op een comfortabel niveau staat. Gebruik hiervoor de drie knoppen linksboven.

Gebruik respectievelijk de knoppen en om in en uit te zoomen. De knop past de schaal automatisch aan de grootte van het diagram aan. Gebruik deze functie om te voorkomen dat u verre plaatsen kwijtraakt. Het helpt u ook plaatsen te vinden die u per ongeluk te ver hebt verplaatst of bent vergeten te verwijderen.

Canvas positie

Om het bewerken te vergemakkelijken, moet u ervoor zorgen dat het canvas op een manier wordt geplaatst die bij u past. Om het canvas te verplaatsen, klikt u op de knop "Verplaats canvas", houd vervolgens de linkermuisknop ingedrukt en verplaats de cursor.

Om het canvas ook te verplaatsen, Houd op elk gewenst moment de spatiebalk ingedrukt en verplaats het canvas met de muis.

Maak je geen zorgen over de canvaspositie en -locaties; je deelnemers zien altijd een automatisch gecentreerd en geschaald diagram.

Het grootste deel van een interactieve winkelcentrumindeling is de vloerindeling. Laat het gedetailleerd zijn, maar tegelijkertijd visueel licht. Het moet duidelijk zijn hoe de afdelingen zich bevinden, waar de entree, parkeergelegenheid en andere voorzieningen zich bevinden.

De plattegrond van elke verdieping van het winkelcentrum Vodny is gemaakt in een eigen kleurenschema. De namen van grote merken worden onmiddellijk ondertekend, terwijl kleinere verschijnen wanneer u met de muis over de muis beweegt. De ingangen van verschillende straten zijn gemarkeerd, de locatie van de parkeerplaats is zichtbaar.

Geef de mogelijkheid om een ​​vloer te kiezen

Als je alle plattegronden van een winkelcentrum onder elkaar plaatst, wordt het diagram erg volumineus. De oplossing is deze: laat altijd de plattegrond van slechts één verdieping zien. Maar geef tegelijkertijd de mogelijkheid om te schakelen tussen de indelingen van verschillende verdiepingen. De eenvoudigste optie: schrijf 'Selecteer verdieping: 1, 2, 3'. Of u kunt iets interessants doen en de vloerselectiefase verzadigen met een kleine dosis informatie. Of maak er zelfs een spel van.

Op de website van het winkel- en entertainmentcomplex Vesna, al in de fase van het kiezen van een verdieping, staat in een notendop geschreven wat zich precies op elk van hen bevindt: op de nul - parkeren, op de eerste - een café en een hypermarkt , op de tweede - een bioscoop.

In de kop van de website van het RIO-winkelcentrum bevindt zich een helder interactief element voor het kiezen van een vloer. Dit is het eerste wat gebruikers zien. De truc werkt om de aandacht beter op het lay-outgedeelte te vestigen dan op een gewone tekstlink.

Schrijf de namen van de afdelingen op

Eén van de hoofdtaken van de interactieve inrichting van een winkelcentrum is laten zien wat voor soort winkels er zijn. Als u echter alle namen in één keer ondertekent, raakt u in de war. Het is handiger om namen in pop-upvensters te plaatsen die verschijnen als u er met de muis over beweegt of klikt.

Geef een korte beschrijving van de winkels

Schrijf op de algemene plattegrond in een notendop op wat er per afdeling verkocht wordt. Plaats logo's, openingstijden en een link naar een volledige beschrijving op de website van het winkelcentrum. Dit lijkt teveel informatie. Het kan echter in even rijen worden opgemaakt in het pop-upvenster dat verschijnt als u met de muis over de naam van de winkel beweegt.

Klanten kennen mogelijk niet alle merknamen. Maar soms wordt de kleur onthouden van het uithangbord van de winkel waar ze ooit met succes shirts kochten. Gekleurde merklogo's helpen je zo'n afdeling te vinden op de interactieve kaart van het winkelcentrum.

Op de website van het BOSHE-winkelcentrum verschijnen logo's in pop-upvensters wanneer u op de overeenkomstige cel op de kaart klikt.

Op de website van winkel- en uitgaanscentrum Atmosfera verschijnen logo's als je op een afdeling klikt.

Ze handelden sluw op de website van TK Centralny. Op het algemene plan wordt in het rechterblok meteen een gedetailleerde omschrijving van de afdeling weergegeven. Tegelijkertijd blijft de kaart compact.

Voeg een zoekreeks toe

Als het onderzoeken van een plattegrond van een winkelcentrum geen resultaat oplevert, kan de gebruiker de site overstuur verlaten. Of hij kan proberen te vinden wat hij nodig heeft met behulp van de zoekbalk, zowel op merknaam als op productcategorieën: kleding, schoenen, geschenken, enz.

Organiseer afdelingen in categorieën

Tientallen verschillende winkels in het winkel- en entertainmentcomplex kunnen worden gegroepeerd in verschillende categorieën op type goederen of diensten: kleding, schoenen, kinderartikelen, boodschappen, uitrusting en andere. Dit maakt het voor klanten gemakkelijker om door het schema te navigeren. Markeer op de kaart alle merken uit de door de gebruiker geselecteerde productcategorie. Het zal meteen duidelijk zijn of er een grote keuze is aan speelgoed of leren jassen.

Aeropark-producten zijn niet alleen gegroepeerd op type, maar ook op geslacht. Merken van de geselecteerde categorie worden gemarkeerd op de lay-out en hun nummer wordt bovendien op elke verdieping weergegeven.

Op de plattegrond van winkelcentrum Kit zijn winkels uit dezelfde categorie met dezelfde kleur aangegeven. Het blok met een lijst met categorieën toont de namen van de merken die erin voorkomen.

Op de plattegrond van winkelcentrum Planeta zijn bankdiensten in blauw aangegeven, sportartikelen in blauw, elektronica in rood, enz.

Afdelingen van hetzelfde type in het Omsky-winkelcentrum worden aangegeven met rode markeringen.

De kaart van het Savyolovsky-winkelcentrum begint met een apart plan van vier grote centra: mode, kinderen, computer en mobiel. Wanneer u over een categorie beweegt, wordt het aantal winkels daarin weergegeven.

Voeg iconen van infrastructuurobjecten toe

Laat zien waar de voor klanten belangrijke kamers en ruimtes zich bevinden. Markeer op de interactieve kaart de informatiebalie, toilet, lift, roltrap, moeder- en kindkamer, geldautomaat, garderobe.

Op de plattegrond van winkelcentrum Rainbow Park kunt u de laag met alle informatiepictogrammen aan- en uitzetten.

Pictogrammen op de lay-out van winkelcentrum Afimall City verschijnen wanneer u met de muis over een van de blauwe pictogrammen linksboven beweegt.

Op de plattegrond van winkelcentrum Rainbow zijn niet alleen roltrappen, garderobekasten en toiletten te zien, maar ook fonteinen, bloembedden en bankjes zijn tot in de kleinste details getekend. Dit maakt het voor winkelcentrumbezoekers gemakkelijk om een ​​bijeenkomst te regelen bij een van deze iconische objecten.

De administratie van het winkelcentrum Capital Mall verbergt zich niet voor bezoekers. De ligging ervan is aangegeven op het plan.

Ontcijfer de symbolen

Voeg een legenda toe aan uw interactieve diagram: een lijst met symbolen die u hebt gebruikt en een uitleg van hun betekenis.

Markeer de ingangen van het winkelcentrum

In de regel kunt u een winkel- en uitgaanscomplex op meerdere plaatsen tegelijk betreden. Geef op het plan alle mogelijke in- en uitgangen weer.

Geef de locatie en de kosten van parkeren aan

Soms kun je onverwachts een parkeerplaats vinden in de achtertuin van een winkelcentrum, en soms op de oprit tussen twee gebouwen. Toon alle mogelijke plekken waar klanten tijdens het winkelen hun auto kunnen laten staan.

In papieren documenten bent u beperkt tot het gebruik van puur statische schema's. Maar Visio 2010 heeft tools in zijn arsenaal voor het creëren van interactiviteit, wat handig kan zijn bij het elektronisch presenteren van een diagram in een presentatie, op een pagina op een internetsite of een SharePoint-bedrijfsportal. En zelfs dit gebied is niet beperkt tot. In dit artikel zullen we proberen de principes te begrijpen van het maken van interactieve diagrammen met Visio 2010.

Een startpagina voor een stroomdiagram maken

Voordat we ingaan op de interactieve mogelijkheden van Visio 2010, maken we een eenvoudig stroomdiagram om het ontwerpproces van een website te illustreren. IDEF0-notatie wordt vaak gebruikt voor procesmodellering, en Visio 2010 biedt een sjabloon voor het maken van overeenkomstige modellen (groepsmodellen). Blokdiagram, steekproef IDEF0-schema), we duiken echter niet in de jungle van standaarden en kiezen voor een eenvoudig blokdiagram.

U kunt vormen naar het werkblad slepen en ze vervolgens met pijlen verbinden, maar ik raad u aan de functies van Visio 2010 te behouden om uw werk gemakkelijker te maken. Wanneer u met uw muis over een van de elementen van het stroomdiagram beweegt, worden aan de vrije zijden kleine pijldriehoekjes weergegeven. Beweeg uw cursor over een ervan om de gewenste vorm te selecteren uit de lijst die verschijnt, die automatisch door een pijl wordt verbonden met het bovenliggende blok (zie figuur 1).

Figuur 1 - Snel functieblokken toevoegen

Helaas staat Visio 2010 niet toe dat je op deze manier meerdere elementen aan één kant van een blok toevoegt, dus je zult ze handmatig moeten koppelen. Sleep een vorm Subproces onder een van de bestaande en gebruik vervolgens de tool Verbindingslijn op Thuis tabblad (zie afbeelding 2).

Figuur 2 – Gereedschap “Verbindingslijn”.

Wanneer u de cursor naar het bovenliggende blok verplaatst, toont Visio de knooppunten van waaruit een verbindingslijn kan worden getekend (zie Figuur 3). Sleep een pijl naar het gewenste knooppunt op een ander blok om een ​​link te maken.

Figuur 3 – Blokken verbinden met een verbindingslijn

Het programma tekent zelf de gewenste bocht in de lijn en behoudt de verbinding bij het verplaatsen van de vormen. De standaard rechte hoeken passen misschien niet bij je, daarom hebben de ontwikkelaars de mogelijkheid geboden om het gedrag van verbindingslijnen te beïnvloeden. Zoek op het tabblad Constructeur knop Verbindingslijnen en geef het gewenste type aan (zie Fig. 4). Deze instelling heeft invloed op de hele pagina.

Figuur 4 - Het type verbindingslijn wijzigen

U kunt ook profiteren van de mogelijkheid om de relatieve positie van blokken snel te wijzigen. Zoek op het tabblad Constructeur vervolgkeuzeknop Wijzig de pagina-indeling(zie Fig. 5) en selecteer een van de opties voor het maken van een blokdiagram. Met slechts een paar klikken kunt u dus de locatie van de blokken volledig wijzigen. Deze functie is vooral handig voor hun onderlinge afstemming.

Figuur 5 – De pagina-indeling wijzigen

Andere kenmerken zullen we niet uitlichten. Je kunt zien wat ik heb in figuur 6.

Tekening6 – Hoofdpagina van het diagram

Gerelateerde pagina's toevoegen

Nu we een lege plek hebben, kunnen we verder gaan met het tot stand brengen van verbindingen. Er zijn twee hoofdtypen binding:

1. Link naar het vervolg van de pagina. Als er niet voldoende bladruimte is om de elementen van het diagram te huisvesten, kunt u een link naar het vervolg van het diagram op een ander blad plaatsen. Wordt voornamelijk gebruikt in blokdiagrammen. Visio 2010 kan de werkruimte automatisch uitbreiden, maar in sommige gevallen moet u elementen binnen specifieke grenzen inpassen.
2. Link naar een onderliggend element. Als u een subproces of de inhoud van een object wilt tonen, kunt u dit klikbaar maken. In ons geval kunnen we de essentie van het blok onthullen Scriptprogrammering meer details op een ander diagram. Dit elimineert de wirwar aan figuren en introduceert elementen van interactiviteit in het diagram.

Ondanks het externe verschil is het implementatieprincipe van beide soorten communicatie absoluut hetzelfde.

Belangrijke opmerking. Koppelingstools zijn alleen beschikbaar voor gebruikers van Visio Premium 2010. De Standard- en Professional-edities bieden deze mogelijkheden niet.

Er is een speciaal element in het stroomdiagram dat linkt naar het vervolg van de pagina Link naar een andere pagina(zie afbeelding 7).

Nadat u de vorm op het vel hebt geplaatst, wordt u gevraagd een aantal vragen te beantwoorden (zie figuur 8).

Als u nog geen andere pagina's heeft gemaakt, kunt u dit nu doen door de naam van het nieuwe blad op te geven. Anders kunt u een van de bestaande pagina's selecteren.

• Selectievakje Sleep een linkshape naar een andere pagina spreekt voor zich. Verwijder het als dit element niet nodig is op de nieuwe pagina.
• Met de hulp Vormtekst synchroniseren u plaatst hetzelfde label op beide vellen. Nogmaals, als u andere namen nodig heeft (bijv Voortzetting En Begin), vink dit vakje niet aan.
• Een hyperlink in vormen invoegen creëert een verbinding tussen pagina's. Eigenlijk gebruiken we dit element omwille ervan, dus het heeft weinig zin om te weigeren.

Na het indrukken van de knop OK de twee pagina's worden met elkaar verbonden. Op het blad wordt deze functie weergegeven in de vorm van een figuur met een hyperlink, die kan worden gevolgd door op de toets te drukken .

Figuur 9 – Het eerste deel van het diagram verwijst naar het vervolg

Net als in het vorige geval kunt u een nieuwe gekoppelde pagina maken, of u kunt een pagina aan een bestaande pagina koppelen. Er is nog een interessante mogelijkheid: een subproces selecteren, maar laten we niet op de zaken vooruitlopen.

Om een ​​nieuwe gekoppelde pagina te maken, selecteert u het blok Programmeur schrijft scripts en druk op de knop Creëren op het tabblad Proces(zie Afb. 10). In de vervolgkeuzelijst Link naar bestaand De titels van alle pagina's van het document worden vermeld. U kunt ze allemaal koppelen, of u kunt in een ander document zoeken.

Tekening10 – Linken naar de pagina. Stel beschrijvende kopjes in om verwarring te voorkomen

Hoe u een subproces ontwerpt, is aan u. Wat ik heb, wordt weergegeven in figuur 11.

Figuur 11 – Subproces “Programmeren”

Inscriptie Bovenkant heeft een verbinding met Thuis documentpagina. Je kunt doorgaan met het maken van deelprocessen en het leggen van andere verbindingen, zolang er later vraag naar dergelijke detaillering blijkt.

Figuur 12 – Contextmenu van een object met een verbinding

Er zijn hier twee nieuwe regels - Thuis En Wijzig hyperlinks(let op de meervoudsvorm). Als je kiest Thuis, volg dan gewoon de link.

Figuur 13 toont het venster dat wordt geopend wanneer u een lijn selecteert Wijzig hyperlinks. U kunt het ook openen door te selecteren Wijziging in de vervolgkeuzelijst Link naar bestaand tabbladen Proces(zie Afb. 10).

De meest voor de hand liggende actie is hier Verwijderen. Het is handig als u van de verbinding af wilt.

In de rij Adres geeft het pad naar het gekoppelde document aan. Voor het huidige bestand blijft het veld leeg. U kunt niet alleen het Visio-diagram selecteren, maar ook elk ander bestand op uw harde schijf. Aangevinkt vakje Gebruik het relatieve pad voor de hyperlink kunt u een draagbare set bestanden maken. Om naar een webpagina te linken, voert u de juiste URL in de adresbalk in.

Subadres– dit is een documentpagina. U kunt het handmatig invoeren, u kunt op de knop drukken Beoordeling en selecteer uit de lijst met beschikbare elementen (zie Fig. 14).

Tekening14 – Geef het subadres op

Hier kunt u de weergaveschaal van de geselecteerde pagina opgeven.

U kunt meerdere hyperlinks op één element maken. Waarom zou dit nodig kunnen zijn? U wilt bijvoorbeeld de adressen opgeven van websites van bedrijven die systeemeenheidcomponenten produceren. Druk in dit geval op de knop Creëren zo vaak als je punten nodig hebt. U kunt een van de koppelingen tot de belangrijkste maken: Standaard. Hoe een object met meerdere referenties er in actie uitziet, wordt weergegeven in Figuur 15.

Tekening15 – Een reeks links van één object wordt geopend met een lijst

En ten slotte zullen we kijken naar de subprocesselectiefunctie. Laten we zeggen dat u een vrij groot stroomdiagram heeft opgesteld en hebt besloten een deel van de last ervan weg te nemen door een aantal elementen naar een onderliggend proces te verplaatsen dat toegankelijk is door met de muis te klikken. Natuurlijk kunt u blokken knippen, op een nieuwe pagina plakken, het blok op het blad plaatsen en een link tot stand brengen, maar met Visio 2010 bereikt u veel sneller precies hetzelfde resultaat.

Selecteer alle vormen die u naar een nieuwe pagina en tabblad wilt verplaatsen Proces klik op de knop Maken van geselecteerd fragment(zie Afb. 16).

Tekening16 – Knop voor het aanmaken van een subproces

Hierdoor wordt een nieuwe pagina gemaakt met een standaardnaam (bijvoorbeeld Pagina-2), waarop het geselecteerde fragment van het diagram zal worden geplaatst, en een vervangend figuur met een reeds bestaande link zal op de oude plaats verschijnen. De inscriptie op het subprocesblok komt overeen met de naam van de nieuwe pagina, maar u kunt deze uiteraard op elk gewenst moment wijzigen.

Interactieve documenten exporteren

Uiteraard hebt u één kopie van het document nodig in de eigen VSD-indeling van Visio. Het is echter beter om een ​​ander formaat te gebruiken om de inhoud te verspreiden. Opslaan in statische vorm (PNG, JPEG, GIF) is niet gerechtvaardigd, omdat Er is een verlies aan interactiviteit. De keuze aan formaten waarin links worden opgeslagen, is over het algemeen klein. Ofwel ontvangen wij een webpagina of een PDF-document. Alleen deze populaire formaten maken het mogelijk om twee doelen tegelijk te bereiken: toegankelijkheid voor een groot aantal gebruikers en het behouden van linkinteractiviteit.

In beide gevallen worden er bestanden gemaakt waarvoor Visio 2010 niet op uw computer hoeft te zijn geïnstalleerd om interactieve diagrammen te bekijken. Houd echter rekening met een klein kenmerk: bij het exporteren naar deze formaten gaan meerdere koppelingen van één object verloren. Alleen de eerste uit de lijst wordt opgeslagen.

Conclusie

Met Microsoft Visio 2010 Premium kunt u met slechts een paar klikken dynamische diagrammen maken. Als je wilt, kun je een complexe structuur met meerdere niveaus en meerdere verbindingen ontwikkelen die een proces of object in al zijn verschijningsvormen demonstreert, of zelfs een heel zoektochtspel. Maar laat u niet meeslepen; een plan dat te goed ontworpen is, zal de inspanningen die in de totstandkoming ervan zijn gestoken mogelijk niet terugverdienen. Hier is, net als bij veel andere zaken, de balans tussen kosten en details belangrijk.

Het is handig om soorten grammaticale analyses uit te voeren, waarbij u met gedrukte woorden, sjablonen en voorbeelden werkt. Mogelijkheden om een ​​interactief whiteboard te gebruiken in Russische taal- en literatuurlessen. Borden met frontale projectie. Er ontstaan ​​ruime mogelijkheden bij het gebruik van een interactief whiteboard bij het werken met tekst.

“Interactieve dienst” - ETV/Algemene TV. Amusement. Optie 2 - Een beveiligingsstation delen. Ontwikkelingsmissie. Sectie 1. Middleware-technologie van NDS. Multiplatform/apparaat Wat momenteel wordt aangeboden. VideoGuard Express: Nieuw. Ik wil mijn eigen inhoud bekijken en pc-functionaliteit op tv hebben. NDS-producten.

“Interactieve communicatie” - Interactieve communicatieservers. Snelle internettoegang vanaf een mobiele telefoon kan worden bereikt met behulp van GPRS-technologie. Interactieve communicatieservers (vervolg). Interactieve communicatie met behulp van ICQ. Invoering. NetMeeting-programma. Interactieve communicatieservers (einde). Een “live” gesprek is echter alleen mogelijk tussen twee gesprekspartners tegelijkertijd.

“Lessen met een interactief whiteboard” - Wat levert het gebruik van ID op? Creëer een bibliotheek met afbeeldingen en sjablonen. 5. Onbeperkte middelen. Presentatie van informatie met behulp van verschillende multimediabronnen. Verduidelijking. ID-mogelijkheden. Encyclopedieën. Multimediales. 4. Efficiëntie van materiaaltoevoer. 1. Lesintensivering. Controlevragen voor de groepen 9-11:

“Het interactieve whiteboard gebruiken” - “Blind” in actie. 2. Beoordeling van internetbronnen. Een interactief whiteboard gebruiken bij het wiskundeonderwijs. Maak een video met behulp van interactieve whiteboard-opnames. Belangrijkste vragen van het seminar. Disraeli Benjamin (Engelse staatsman en schrijver). Gezondheidsbesparing. 4. Interactieve whiteboardsoftware gebruiken bij het ontwerpen van taken.

“Interactieve methoden” - Passieve methode. Interactieve benaderingen. Actieve methode. Interactieve methode. Voer een interactieve oefening uit om de stof te versterken (“iedereen leert iedereen”). Aan het einde van de les vat u altijd samen door vragen te stellen. Lesmethoden weerspiegelen de vorm van interactie tussen docent en studenten. Interactiviteit - interactie, in de vorm van gesprek zijn, dialoog: uitgebreide interactie van studenten, niet alleen met de leraar, maar ook met elkaar, met behulp van interactieve benaderingen.

De metro van Moskou verandert. Iedereen die zich het plan van bijvoorbeeld 1945 wil voorstellen, zal geen probleem hebben met het verzamelen van gegevens uit open bronnen; De vraag blijft bij de presentatie van het resultaat: het mag niet in een cirkeldiagram worden weergegeven. In dit artikel zal ik het hebben over de belangrijkste stappen bij het creëren proof-of-concept dienst waarmee u bijvoorbeeld de metrokaart op 1 mei 1974 kunt weergeven (links) of stations met een diepte van meer dan 30 meter (rechts).

1 fooi

Sla het diagram op als afbeelding, stel een lage transparantie in en plaats het onder ons SVG-canvas, waarbij we dezelfde afmetingen instellen. Dit zal de plaatsing van stations vereenvoudigen.

Laten we zoiets als dit nemen

Om comfortabel verder te kunnen gaan, heb ik ook hun index (numeriek) en lijn toegevoegd aan de stationseigenschappen - iets lager zul je begrijpen waarom dit is gedaan.

Tip 2

Als je meer doet dan een proof of concept, besteed dan een paar uur aan het schrijven van een editor met de mogelijkheid om stations te slepen en neer te zetten en hun eigenschappen te specificeren. Het onderhoud van uw kaart wordt veel eenvoudiger. De haalbaarheid is recht evenredig met het aantal stations en hun eigendommen.

Lijnen

Wat is een lijn? Dit is een reeks segmenten tussen stations. We hebben coördinaten, indexen en lijnen van stations - wat betekent dat we gemakkelijk segmenten kunnen tekenen. Laten we de stations doornemen en ons voor elk ervan laten leiden door de volgende logica: als er een station op dezelfde lijn is, maar met een index die één hoger is, teken dan een segment ertussen.

Dit is onze tussenoptie

Overgangen

Svg-afbeeldingen gebruiken een lagenmodel, wat betekent dat we, om het gewenste resultaat te krijgen, elke overgang zullen maken met behulp van twee curven: een gekleurde met een dikke lijn lager en een witte met een dunne lijn hoger. De uiteindelijke rangschikking van de elementen is als volgt, van onder naar boven: lijnen, overgangssegmenten met een gekleurde dikke lijn, stations, overgangssegmenten met een dunne witte lijn, achtergrond van de stationsnaam, stationsnaam.

Stationsnamen en achtergrond

Geef de titels weer en lijn de tekst uit met behulp van de eigenschap tekst-anker. Helaas is er geen andere manier om een ​​regeleinde te implementeren dan door een extra element te maken.

Laten we van de tekstachtergrond een regelmatige, doorschijnende rechthoek maken. We krijgen de afmetingen en coördinaten van de tekst met behulp van getBBox.

Tip 3

Nadat je wat tijd hebt besteed aan het zoeken naar een elegantere oplossing voor het onderdrukken van tekst, zul je op Stackoverflow een suggestie vinden om een ​​filter te gebruiken. Ik raad aan deze oplossing alleen te gebruiken in het geval van een enkel grafisch beeldscherm. Als verdere manipulaties met afbeeldingen worden verwacht, zal het filter zich onjuist gedragen.

Opnieuw schilderen

Ik heb de standaardkleuren voor de stations gekozen als lijnkleuren. Maar wat als we alles opnieuw willen kleuren met een willekeurig verloop? Het is niet zo moeilijk als het lijkt.

We hebben een willekeurige gradiënt van de ene kleur naar de andere, die we voor het gemak meenemen in de kanalen, de waarde van het station (bijvoorbeeld de diepte van 23 meter) en de maximaal en minimaal mogelijke waarden (0 voor grondstations en 80 voor het diepste “Victory Park”). Laten we de procentuele verhouding van de stationwaarde tot het verschil tussen de extreme waarden berekenen en de resulterende verhouding wordt toegepast op het verschil in waarden voor elk kanaal. Dit is onze kleur.

We schilderen de rest van de elementen op de pagina met een verloop, we hebben de coördinaten en kleuren van de stations - en dat is alles wat we nodig hebben.

Filteren

Ook hier is het niet eng. Laten we controleren of de stationwaarde binnen het geselecteerde bereik ligt en het station verbergen als dat niet het geval is. Zodra we de stations begrijpen, zullen we begrijpen wat we met de overige elementen moeten doen: als een station verborgen is, mag noch de naam, noch de overgang ernaar, noch het taksegment worden weergegeven.

Tip4

Gebruik de zichtbaarheidseigenschap, omdat de dekking elementen weliswaar verbergt, maar ze wel selecteerbaar en klikbaar laat.

We zien ook dat sommige stations dezelfde naam hebben. Dienovereenkomstig hoeft u een naam alleen te verbergen als de laatste zender die aan deze naam is gekoppeld, verborgen is.

Het enige dat overblijft is het configureren van de gewenste bereikschuifregelaar. Om bepaalde redenen heb ik de mijne geschreven. Ik zou dit bijvoorbeeld aan luie mensen aanraden.

Schaal en beweeg

De accommodatie neemt hiervoor de verantwoordelijkheid. bekijkBox. De jongens van Microsoft schreven met voorbeelden. Om de boekrol te onderscheppen heb ik gebruikt jQuery-muiswiel. Eerlijk gezegd is dit niet de meest triviale taak, omdat je bij het wijzigen van de schaal rekening moet houden met de verschuiving ten opzichte van de oorspronkelijke positie met de bijbehorende zoomfactor.

Bijna alles

Ik heb modulaire architectuur gebruikt (er zijn ongeveer een dozijn modules uitgebracht), Ik heb Snap.svg gebruikt om te helpen. De gegevens werden dynamisch geladen, berekend en, aangezien sommige dingen werden gedaan met behulp van (Ik gebruikte jQuery, dus ik heb ze daar vandaan gehaald), kon ik zelfs een eenvoudige voortgangsbalk toevoegen terwijl alles werd geladen.

De vreugde duurde totdat ik besloot in te loggen vanaf mijn telefoon... Op een zeer slimme Lumia 1020 duurde het laden van de dienst langer dan een halve minuut. Ik vergat de kosten van het manipuleren van de dom volledig. We hebben voor een seconde meer dan duizend elementen! En het manipuleren van de viewBox op een mobiel apparaat werkte niet goed.

Wij corrigeren tekortkomingen

Van cliënt tot server

Door een opzettelijke beslissing brengen we de logica over naar de server en slaan we de uitvoer op in de cache, zodat we deze niet elke keer hoeven te tellen. Nu kunt u Snap.svg op de client verlaten!

O nee, dat kan niet

De zelfgemaakte gradiëntgenerator voor SVG woog niets en was elegant, maar soms werkte het niet: op sommige elementen werd geen van de gradiënten toegepast, alleen de kleur. Tegelijkertijd werkten verlopen prima samen met andere elementen. Moe van de ‘zwarte magie’, heb ik de bibliotheek weer in gebruik genomen. Toch schrijf ik een prestatiebewijs, geen ‘product’.

We moeten het probleem oplossen met schaalvergroting en de mogelijkheid om mobiele apparaten te gebruiken. Bedenk eens hoe jij dit zou aanpakken.

Ik heb dit gedaan

Ik begon met het zoeken naar bibliotheken (ik koos voor hammer.js) en las zelfs de documentatie, maar ik herinnerde me TRIZ. Heinrich Altshuller definieert een ideaal object als een object dat niet bestaat, maar waarvan de functie vervuld is.

We hebben al geweldige ondersteuning voor zoomen en pannen op wearables. Dat betekent... Ja, ik heb zojuist de manipulatie van de viewBox-eigenschap voor telefoons en tablets uitgeschakeld.

Wat heeft de overdracht in cijfers opgeleverd?

Naar

Na

Conclusies

Problemen met Mozilla Firefox

Tijdens de werkzaamheden bleek dat Mozilla Firefox overgeoptimaliseerd was. Terwijl anderen alle afbeeldingen correct weergeven, staat Mozilla toe dat elementen worden overgeslagen als het element niet zichtbaar is voor de gebruiker - verborgen door een div bovenaan of gewoon buiten het zichtbaarheidsgebied van de monitor. Als gewetensvolle burger heb ik een bug toegevoegd die nog steeds aanwezig is onbevestigd, om aan het verzoek tot verstrekking te voldoen de eenvoudigst mogelijke testcase Ik kan het niet, op een klein aantal elementen werkt alles prima, maar de link naar het project is blijkbaar niet voldoende.

Als een Mozilla-vertegenwoordiger dit leest: Jongens, het werkt scheef, ongeacht het platform (windows/mac) en versies (ook waargenomen in oudere versies), eerlijk gezegd.

Als conclusie

Ook al zit er nog wat rauwheid in html5, het is tijd om het te gebruiken. Het is niet nodig om de processors van gebruikers te laden door ‘modieuze’ effecten toe te voegen aan elke tweede site die gisteren nog op de mailinglijst voor frontend-ontwikkelaars stond.

Maar de tijd is gekomen om handige transportschema's en interactieve producten vanaf elk apparaat toegankelijk te maken.

Ik begrijp niet waarom dezelfde Yandex Ya.Metro niet zal overbrengen naar een nieuw officieel schema dat overal zal werken; Voor gebruikers van mobiele apparaten geven de jongens er de voorkeur aan links naar applicaties weer te geven. Winkels (toepassingen) zitten vol met klanten voor sociale netwerken en grote websites en daar is naar mijn mening iets mis mee.

UPD

Het werken aan elk project gaat gepaard met enigszins geïdealiseerde verwachtingen, maar de realiteit is ontnuchterend.
Ik vond het nodig om hier een paar punten naar voren te brengen:
1. Bedankt voor uw feedback en de eerste donatie in mijn praktijk. Voor auteurs (ik in het bijzonder) dit is echt belangrijk.
2. Het project zal niet worden bijgewerkt in zijn bestaande, onafhankelijke vorm.
Ik heb veel fouten gemaakt en ben het ermee eens dat er een aantal verbeteringen kunnen worden aangebracht. De implementatie ervan zou mij dwingen om op te geven waar ik nu aan werk, en de onophoudelijke ontwikkeling van de metro zou het proces eindeloos maken.
3. Ik zal proberen vragen over de implementatie te beantwoorden of indien nodig bestaande informatie te verstrekken. Vraag het in de reacties.

Tags:

• SVG
• vectorafbeeldingen

Tags toevoegen