1"use strict";(self["webpackChunkquaese_de"]=self["webpackChunkquaese_de"]||[]).push([[775],{4161:function(e,s,i){i.d(s,{j:function(){return n}});const l=function(e){return function(s){s.preventDefault(),s.stopPropagation(),document.querySelector(e.selector)?.scrollIntoView({behavior:"smooth",block:"start"})}},n={beforeMount(e,s,i){const n=s.value||"body";e.__scrollHandler__=l({vnode:i,selector:n},!1),e.addEventListener("click",e.__scrollHandler__)},unmounted(e){e.removeEventListener("click",e.__scrollHandler__),delete e.__scrollHandler__}}},7048:function(e,s,i){i.r(s),i.d(s,{default:function(){return Me}});var l=i(9726),n=i.p+"img/canvas.81dc192f.png",t=i.p+"img/canvas_image_library.65bdf742.png",a=i.p+"img/bikebook.d2eec9cd.png",r=i.p+"img/cdsammlung.113d7c47.png",c=i.p+"img/progressorium_web.6890a62b.jpg",d=i.p+"img/progressorium_stuff.7368e575.png",o=i.p+"img/breakout.44833d4b.png",u=i.p+"img/pageflip.fac86b0c.png",p=i.p+"img/tangram.5bb21f17.png",m=i.p+"img/xgewinnt.fade940d.png",g=i.p+"img/crossword.a848a965.png",k=i.p+"img/funktionsplotter.e97ca28d.png",h="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVsAAACnCAYAAAHI78+tAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAB6PSURBVHjaYvz//z/DUAJMDEMMsMAYHz58wB7U7/YwMAi5oAgJCgoyvH//HkXsGhBrAbGAgAAjiM/IyMgNVPMFl8Xvdu9hEHJ1IcqRMDOJC2Eh4gzVIjGkiHUszhBGDr1zG5pQxEyC6hnOrGtkmLliPxiDwP2DkzHUgMDfv//gYsLCQmAapjc9whFFj1FAHdgubHIgoGifS3kaRvcMDIAcBcLoYgOa6ZBDYc2O00TpwedoZM8Tax4TMSFoqCWPEu0g0DZjM8PZK/fB7CWbjuG0ACaHLcph5oGSBMg8qoXw7JYkrKFlrKMIpmP8rHDqxScHMw9XMiPKwak183AqRg5hZEuQxfHpIdY8fO5gwhWa2EBqmAM4Z8NyOCxJ4Eun+OT+/ftPMFbxOPgGPD3Bii5CGQWWJKgBkDMdPjcgOVgDrhg5g+DLUMjgyYt3RInhAh2ztqCURrgczAhr/ACrUqq0goDmwatmIPWFmmai1HSwtgGopkOOephPkX2NHgu4QgSmBlkeX+jB1MPyCXp7BUemS0RJp7NXHYAbhI0N43NzsWOUtSA+SB02NgjD9CDLwQIL5A68SQLWWkNvI2ADsDYANmDoXwtPEkA1FCUJWFuCtNYaWrmJrVzFlzGxqYeZg0uOqg14WLkKS2ew2gybo2GtPFwNJWQ5ZPModjCs1kG3HFZx4KqCiW2tEetY9GJt0HaLkPudAAGoMWOchoEgii6RRU9uEXoK6gQBkksaLgAFF0hh0eDCF0hBLpAaKQ2C1JR05AYUFIgaCrCVzGpY/5mdFabwSpGcSB5/ObN//tudPkForwA0k8ATAeZ9kbvjcjM6m2E7bN/zVf9TuyrMbtds7dzVaHM9La5dVW7tcT13bnTBa07qmivfBlaxsZUiNqGmF/sLOsMhwb8jMCSbQl5JwImgkw8aCUbRi8q66qdGELciK7dp6yVlg/Esitgr1VetQCmdaahiYzCJANQKkxqASm/ei50+4M2kgaQEnxaQ1ODTt8FtjsVWR3stqPtPiNTuIR37l0u5DWJgac0OUgjiYKrdI+nwbvDOiIFviLOTg+SikgOQWM0NSENV59tx8Yjf7JB5HjU9B71Y7k1tD+3EhwSvyglMNd8dfT6beh3XHFPNDIEk8lYJCEPIjPmyVgeBJNc04NOCIJJ6SoNFCTC5KAkWpesQImen83YARwCpgaKS/H2Qeb67+VOQIYDkQWaQumFSoW+xfDLXMYdvNMFCRkKn4/Q7engj9Dw/bNWzZgl1gjXr9e1DhEPtOBUJQEIt4Yc0hBPM9YHByLp+BGDX6lUaCILwBUSMlVhY+ATxHQSRFCHgKwhWSWHjQ1hYWoo2gq8QCJKIla+Q5CX8KbSxciewl73J/O3eCglkmvzczd3ccDvzzfdtY91Uy7WbGb1ZR6fEEa3WWFeW20Zj113nZ5WS6OI8dnG+JbMHuJjU8eHgPjV9UXxSnURMRmPh/jPWT4rZ2Y765mIL+3Cz1an8lkjeBUrpVIRl79Pfhu+0bxPOUxJkIZg5RhBi6RdTFxeHK0Y0EgtipgRqG+/1MU6iKLm+LwGjFKygmSRlcbFoEhyXi0l0cvfteyEgOVZpzeIDx2LkNs0nd3waJ7NUvypccyapL6NRDS2bfJjRypGBrbm4m+OpMiQFwk8AwnduWXlywS93LNek+GjL23IvrhxZfXAcljyRDQ0o+teTp/lE4adPTeqH4w/Xi3OuLjrF7eNzdh/KKD9tAI718ceq09Rn0e6eFy/Dga0sYJzLdeXECb7W1B+WhboScl3DaCFkEsxQTNp94JcXvAWYNg4JI5xUrizEogfq3JB8pZZ4+FsqGfiZcB5ujFBsiwPMUBYkVcTKZnBvKy4L1DUlGOiZFyoG7p6WlUNdj8sDDElL5Ic2oXkGRzNOTgrZyZgHjN3MqZ1vqaPWZyKhWH8Q/+Za7f3re2nJ+KRyoFwqNRYgL10j9trSZqocRjS0mZs8WnOAvGlockMDDv9y2GMbGlEWWuXkAWSttP8VDJO/luWV4hNbmnLHRuUDEptcFiyK4+HBHvm/pGSm+HCW+z6cjzUf8ps7vZ/vz7HAn5h9Z5pPqugj+eWIT4qp3T2LTO5Rr9z4ZH1owKy4fGgkDPbxYpc1yf48SiTTkkrFZvHBcUnTGUXc/K4YIVJQSgT03hUL85RSIjYa2j/anwDsXb1uFDEQXh2RUkARqK4AIRDFKa+RNhXiGaC4F+ARUtBGCk+SKg0PEdEh8QJbgaDDljBY9vibP++yi3aay93enGdn7fn5Zuxsyp2QdpsKNuWukk4yR/FjHMfT9H7G8nmTJ1x7HszW1/yzXp3TPSnI+TDI+d00cy8+gpJz0cb1BzECv9cu01fjPEByXbfGhuVzV1m/6bvMZuHu3aF57Vnj870DTfLSfvgEkL3Hs83ofMPOEs3CyyDflxWYhUdBzm8qbMHSfBF5ULXBO461ISRlYahwKaUXnkpEorK/F6WGWqC75JHiCqi800sWjy6gci+Ck7hjoDQptUo5FFE3R+X7nqMnPLO1duSXwxWDLVQO7fU/sluxy0WLill4etHV7Qd9EnEUzloLRIh4LD0LiKe3fDUdfDaXW8Yt1B6dMNPisSx3bo9TT/ncoVh4OV1YlFOFYgvsZ4vEh2J5vEkd2NTynmWI0/K+Wh7KobUOkSrDrfJvLw8KxcS9YujmNN42Iv1P909Uj9/CM/VY1AMexw5xrlSZ5fcsnTjWEKvks3TVWJpHJLSr49y/oErMsNA+KU2gPwXPnGMlXSR9cMVJcubmRbeb3zaSSgS4TIVadhYezxJHs07Lc5N15rw58sVJ1ixo6/RThVVLGMuii0kqEckJlOXzfGOHpadAMzY1Rr6nfw5S9eeWvbneXN9jBzkAxyND/jtUo565Pzcaaok9kWQzCLiRRAtcf67Wu3OeX5OhXQc9HW+VLaS5YjkHhPqqLMBNxAqks6/V1e6l8p5aOjh6HRo6yqO3WbACNz2Vi+4pX0XSJAKWebhlFJdQ/qR79+2GaxW24D1ugqPynoTpL4ktbMDNEoEbypPG9+nE7FbSoeHhdhNxv52uWdr5Fw3c/C/kAW4qm3s/fB7Oh4No5mrs51psroTizE37IZDNrTK0cwKsQN61dYQrOn5
1Iy4PG7zkO2rFeAjeSchhhFg4i4CbS+7eX5P4CFIxbeCxBf0/ZKODGnf5yYMWcmz3mGKfXcX+TAjcbCWYuZZMkGZkFVLF0ykj5rCCPpcumC3CDBm4JzgmrBcu5I1tSJKJ5aNKIR6KnHQJuPCCM1vNHBUTFanrG4ve1s71Xl45ETzvJTXAH6pSBtgSEQXAiNyPRdQ4Ip2STgOeWw4hYm4vCEzQLrSThtcxYr2wWPZTAzdKih1flnogg58/BeSreBHRG7YlYxb+CWANR+/lO0MWNfPRLAPaumDWqIAivWFiku4ClaCFG0cYgiI1gLohgYWMlWJoijQRLSREsrMRGCNf4A2wshCPotRIQUpqApSlsPBvFQgXfEl+ybt6+nZ2dnTd3mQ8ed4Tsze28uXmzs9/MagWlYiKhq1/F9GQWqrjhp8BgRyJmm1Lkni6tjr+rqqI4VV3jSp+/c5Znx9w9dh8SSisFjPlVvZw08S7VJ9p0qdjX56XqZbO6QIZLGirYFFxbdfthfDMb43DleQiWoxXqHtX6/ZK+m8VOThU7YB6D5DHjt6vJc4CQtF1sPF5Nn/v2IFkO+eLMZzWpxw163HP+rn+DLmeqz9ZQIa5P2yd/MxZ6RQ3XyGOMSQPYcDXGBSHJcINbEG0eqOY41cUNbV2Ia0B2/HxirH8sqS9rr9jipZm/eHqfUJArp5YVQ0rDXei2cdP/WTn2fDh7wGPK9nMTqbqNaI2VE9KNf69inT9CLEaWGFeh4AKIaOOyJCXBFgmVoApDPE4Jj0sJ2RTqg47tRQ2XGnUxlPu4liTH5eGUKMLKlSNdf2I8LrW3dXlEUMYdJI6mkFPfJNuG/9rls6TVi1RysPNK9cJYOXHkedvWrEIsHdZ1AYqAMeCsQtcHhUgAYHGWlFXoZHFm40NrLG6caDME9m+xQ1QkyikN+32b2kVQt4rgksMWKmAXJ5SLEulx51GeF8QWoC0/6Ax3/M4s3HtuXg3fmF7BGxjLEFDFnVxyKONcigwBlxwIbD/cD/MPzehJv6Dh9vrmysr8IaPtIsWDOcJLspxpmVeqLdy/U3ngpX6WTFCo0HQKAHfrBQ0VJmdesZYUFCdXoGPcHEPFpLYwj3AuOaUf4RT655LDFXIoyQYPJdnQgo9kk/r4qMdAd2RySTZYYg41ySb1s/24MZUwgx3jg3LnjJpkgw4VILm9kILK7cgoKAG9TxBbgLZdIzbcHbMxnjM3ezRxDNW+N4ZkAxlDTbLJzcZ0FWdC7xNG1otbq2Z5uFbQcJ08rgu/JZ41CCgkkzdKr8DduUudf+59amqXeOb6wfs6j7uc8d1AedzR8HDObd3zONDD47ChAiZDgBlTOrNgfwQ3rl4w77c+ZeVVObwwNqRbb3gaua0Ynw47TIdhz+GQ7mX2FV1wU8D+GLg3OTjvU45tQKEVEIqJRGckG67ztDjPCMv9PMxhx12MwdgCP8nG7NXyf1lcyyb/pj6G/DSL5DHUj1zJYyiQe0B3vNGoXQHaN8/+F5RLssGsWCWPOco6SLKFf1kqi4/mAdoZRg03tALMJdlgVqySx2AwrTpoJdkEslRsMW5uglsfn9OrAyXZyIaSbGghg2QT6xYDfeRgyC9cBZaSPBBUPxTrE1cetPvNVHSyaSpilCKnPg0Nc6QGZnHmykv94XAUMU5useT2wJjzMrrYlCS/uLEdF5GcavuX2pOWhm33OlqaK2u4491dc3fldrBYkpMww1V+4hoRpcwmgg3H9i9n2Q7IHl4/MgufCxdL9hbXzGixfOqoieBdwhtC5JTywFgPm0oAx84hVw7UHkZdkmxiaZNS3rcLcgqlzK4INiVkNrHvuFKJoXSYTeHMVtdxzdIE8ae6vlbXD4BzsG5nRlXWCqtH8OEles6ZYiKhtEbFROKvAOxdTWgdVRS+ahDRVeLW7iwmXSoIdmVIQvoghFLctP6gLtJFCFYNkkXJomSRReomWGoENy7cSAnhQRqSUHSjEGJdSOtCragLN76sdFEQnDPJK/NeJm/uOfecM3fmnQ+GhNI7582937u599xvzmczrsFmW4PBSGswGGkNRlqDQRnHDhvMINkbXgbJZt7tDTgj+McnMZB3QvakmSMXY3Bw8HTy464rNkd+DNuf/WYte2Qjm5KWujywWcEPT1lfscL7JJZvTXt/jdRs4eoiyoW7tb3jwFUd445+L22TxNrGzRAU93J/4J3XW/Asn+IcyCHG1lWka3lrxy0gnx3vPB/JRoxiHb+8dAnVZmjiuSTOm252xL/NmYnx9PX5vKrpVQKIGebcCqrNnWRMfn4do7Q6cFtu3J3CfjiQISoRl4+0IzOpDA0zm00u4WVx97b/RMcBwoLssuqAZ8YKqy8mfTX6DWYyGeyotukLGJNVN6/SD8eOcUHtlSyaLXtQvLnwemGvyMDQNmKPNmIvJNcDn+yB5WkNlUPuTOssT+sD75nW2Wv7RUDNtLlvMhRN/w++XlV/Kg5vAonP4wNtX2Gwbd3/8Tf32dI7jwpn5/laaHoeF5UtwGCAm0hUYN6zl4wj8dp7SHXK7hoTUuCMIz2ZDDhDB4DQZdyzKq+GxwAjbRdgBuaaPbH3NDCRFsqDvrXZZK1pywWJPz++Mx6GtNqzqEYJejLS8qC/BtW0LUx5LW+u2FfbwIehcXch8BaWpz1hU6JR60srTt3weJmk+LL5bXRxsgTKVlDhRkicmPsvEtIOs65ns4N1/fPbKqTAxHn15WGVjqfGib3/fDC7OSNN2jgGCzZdmI0XNQ7Uo9q4+b5bmJkSzY1CnPUb76HjUJ8LNoPQf76bQq0vr0j2QGKwgBRcpS8l4mjV34LP+Nq5odr1X9Skpaac8khBtRaNIY4k8mZhiS8VZxzpY3UTzNBhghk+xC+Y0RK/SMbREsxoiV+k43AKZiqTp61rmqff01dqa9pQT93Q9MvFqVdU0jxScer0XNJmMJUlLaRfJBP92nHq9FxRkjb1032p0+xBYvfda53EmX7RiuMDn3gc4hfJOGg3oiM/3ZMMaVhIC166h+/ay5K2CFq5U22PhKo/F5q0R1668GYx9ZX+wo0YEPbM5aYzGLgQQliPmfbAza0nP9anOqx1wOooi3aKRHr3C/jw3XOiGyStOHV+rm5+ZAHVbvb2E+K6L8jELSDtYK4PFHhz+a4TbZfdf8/VzY8sJpeabrKM7AGYyUlthjh3v1pxtHf12KNorTgn8QMOLVSzB1I7Wu7db5Xi1P25uvnBbRhdmRMxyx5U67kkYYIZOkwwwwerMBPSBvt5JNbWoUIWqzBT8fQLFtLHkmUce9ZtnNS1B9rpF/QmQqDCjOb9ueA7Tn0hmNFOK2EhUWEGe/8YZmPfcYqStJ80ptwtRsGMlviF2kaiwgz2/tl7U9KLWiIbyvOA18RYY15WMDMLJ2KNRccpmKlT+qXO8BknPGmH3e7mittqOVKZfIBXnnb0/Pd9NViSlV/gnu379y+G3Z39A3Jrfz1t5t9CBTMxZw+6K7+8MX2W9f7ZdSLE4r5/DNmDXoKZrJ5WjLTLzIKZ2LMHmhvFmAtihIxTL8FMW0+rnj0IEcxoiV+obaTP6aG+wFe399zZF0+na0bqZg67r9AS2eTxo/KCmZgrl2htFKuwCQ0Zp1oKZix7UJ/sQRkwwQwdJpjhQz0FM7EhZkumGNtUXjDje5qU3TjE1ob7ebs3STG3KRulFOvwFY1k7xFbG9TGhGDJFHMbygRUedJSLIpiayNtyRRzm0qQdqyx1mGhE/rngtI+tjbSlkwxt8G27+6r1vai+2viGtkWwUPltXbMQsfcBQ100v6UEPaS4Ezb2nG33Eb666ibYTUMaZ9rX3l70vv8PeY21gd+WGjMu730t2myAV7vw4X0nLiZzLTTHYQFQUT2woJiRxRzGwrq3Ae9+AFaFpAmrko6NgK6LXRAEJG9sKAIRWJuQ0Gd+6CYH2E2X6VUmKGca8fchtoHYMn03Q+/oD5brG168aM2FWYo59oxt6ESl2LJFGubk/jRtxVmDIY2TDBDhwlm+GCCGQ2YYAbXJnrBDCST4Uwbjgi5DiIo4pd+g7b4pZ3LlfQQViOtBCjil5CB0HjpEvKh7Twox8CHil+qglJISykCRxF2YONov3RJfTM3r5gctY8ocaIn7VhjKv25u1muWYhGp5VZsonjUKMSs+j9
1NTf2wYa78HHTzY5IzbTnV9zu5WHXD9B+6ZLjzdwqInQCLMzTAmEPfcTKh2Tllza6DxY4PWXzqstALGnCavSbN0YOJQFgyyRGWlgezP1xpbBDpI2CtYQsvda43GtY7WfQ6LciPoCWFjj1UYCPWPFMC6qcpXHxQYVNU6/cJ5eQpSiORMyQe0NVb/i8FDWdZhxfPgxNXEs5NRTQdwOhHa8165VR5IM7Zhlr2FDxS4x8GKgSkcooHsEds4ziFyHilxj5MCAxqLHl9Qxy2Y8yJpY8wczTDkxxk19tWHoCvpV3k/77t2cHHwpmTE1XjOeT63eqYOZhcp1KrmesH3sC1F0PE1IW/b9nj64nrMtOxH/J9XfITGtdaCgNpJnWp5HBUCZsrWUw0hoM0vhfgPbOJzSuIo7jv6WFVkuRFlHBIK0eTENPxh7sQSxJKIHQlqJCbStUSHIIAS095BARaw6hlChIDm3AgsU/qEiFwFKSUAkFD3XrpbS1/itSQYIm9CDYQ6lvdpNlU5vN7r6Z35uZ/XzgsbtJyLzfm9983+zMvO/k6A4AACC2AACILQAAILYAAGGJba60OGFNxcFiBWgUk3B3K460d3tyE5zlps3OaK1ia/zUbi8sLDTsq2bsm1azDLMB5XhfjlkJ254ccyankvy7kyqBLeQmdU45D8rN5LhjU2xrXUITjAsY+P9tKjkel9JjBzbyitwEX3OzIbHVxZhAdfeUj/FrbosruUqclqvOSrgu40vxDE/LvLNApmVItRyX1yzwc9eqC63c0morym1fE397BSqGeCZRZ2VX/jXZPzbrsJxWGchPykCxvE/l0nyn7HZhT7C5U0bzJZcg48t2YqpdRlPYElUvp6V47YJD69y16kIrt9TaikRrhulnz3ZbX/lim0RNY75XvedxrLjD6mD51XVPrVV27bssFwruxq+Wrldb/6Sjxg1+1oXD3NJsKxptn57t8q8qr4xdLn1of1O+7HfVO+u8765td0vrZcl68IPSNseu4pEFOT98WE4UzPvD0jEmsuPoWQQ3ExTrQiO3FNuKStvPiFpXI5gB479ZjUA5FsoxO+F1J8evyTG32u6CGrlJnVPOg3IzOf7JYjUCAACEMoygtfVuluUs7Su3xEo+1GYLhN7hM+XP7du3/G9n+livG7nVWDlm+4zClZvlzxMjR5K82dpwDpJbutCzBQCIrWfb6N03i3Or3P7b7Koc8i4paeOp3I7SV2yeYz3bx5Mr6AU9WwAAerZgxtounzsexLnW09NbjVq3Ms7yHH1lpTF9aKqerVl7F+CjmwDQJGSvUfRsoWZ++X1OZi/9WHz/4o5n5ZmnHiMeAMQWsbDFzT/+kpcHly/dGf9kuvj61YeDsuXJR4O6blnFQ/4hthYwZhitNK5I4/nuh59W/N3Fwo3grp85Z814yD8fyF6jmqJnW00szO9sJofGkhTNeAwHel6Qhx9aJ++Nf7Ps528P7JW9Hc8Flw+H9uyUjRvWq8WjXV+uc1A7Hnq2ARGbWGQRj/m/IV4rH+Ih/yBTsdVelFxP4wphwXRs8YRKrdc2lJuVr/HEkMM81AAAwDCCPVwYxBAPGFwYxBAPYgs1wBIf4iMeQGwdwhIf6ot4wAuxtfVcvK+eArEtiYl9iQ/15Qeu/DLo2XpOGoMYH5fExBaPTWzF58sYeGzxILb3cXVqWp7o6hSze7LZDfPjp1fe2C4Ul6s0sB6V+Ignm2+qK/WQ69Eor8W2rau066bZFXNQTsoMu7kCgEf4olGpxdYEcELeSu4Ux2WGei3C7DbxEY8/+KJRqcV2cxLAaMpufizDDMxuU1/E44Y0k2j1aJTXYhsKsRnExGh4ow0GMf7nYEyoim3sE2QYjhAf8WSnHb4vIWPpl2WY3SY+4oEHgRENAAA92/DQMojBiMYftIxbMIhBbIOBJTEAtCfE1iEYdKTj+f3vcO5AewpJbLMyomHPJAB72G5PGNFERGwGMdrlfP/1u97dcH06d60x8NgMb+jZ1sn81LT82dUpbbIg54cPy88HJ2Vgm50eqU1YEgPgZ3tybURTj0Z5Lbabu1rks+4eGUze7x/LJgjQIeQJESZzmhdfNMqCxeItOZBPApCSfdnQrWzsy2hw7gh5QoTJHNqTLxplzWKx+L5/sqrhQ1ZGNDS4dFSbELlYuOH19Qv53LmB1a4dtjTKa7ENXSxCNIjRLMcQ8oSIT+ceS26wuicAsc1qgozZ0/SEPMHI5Gj47QkjGhocADdfqAmMaAAAEFsAAMQWAABqpKlcv7RMSSgn7Lqt9ogv5TRWDjSJEQ0A+AtGNBGiZahCOfoNS6tXRTmQrdjOT8vQ2KxIoUVez/dJGz1SAFD+plr1Rl6jRnkstsZF532Ro8dldKRFxrtng6hcrWe6KYc8oJys8UejUortJtk9Ek5vVeuZbsohDyjHF/zRKItjtq0ykG9tvJuvMMygZUpCOX5jzlkjHsqxh52x/tU1KhCx9R+tZ7opx28O7dkpGzesdx4P5UBmYuvDBJnWM92U4zfUT1h5EIMRDU+QAQAgtgAAiC0AACC2AAD+ENRqhFOfX5CJL74tf+599SW1rWHqIQTjlnqIeaNMX2OL3SAmlLbctGILusS8USabgAJi6/BOao4lXG6Kp2HcohFPzBv7ZRFbPXUWgkGMZpuKgfRjttdOS8ep61zJCDEPM5gF6/djfmZ+R2wQBJ5olJ2e7blj0nEued13Umb6W6ncRWIY66xlEbvPcVY7t9ge1Ih5bD0GjUovttv6ZCbfV3x79VSPDE2dldGuTU2dJM0yHuhznM00Jht7rKn1wYJG+dOzXaStf1JGA0+SwpXfpHf4TPlz+/YtMjHyRl3/wyfjFhvxNBJn1mO6mufWO/xRcp1vlj9PjBxJrvNWtVhtG8RkHY9LfahXo2yS6Trb1RpEqFQbDzRmHrHg87hnM43JmpyKMd9i04e1WTeImNykKoltPDDEOJulDmKNNTZ9WBtSkrC0BCAOam3LMd1EeFwXAECB3L1791b/o1xuXfLySHI8tvi6nksHDfJvctxOjrnF1zsp/x+5Cc5ysxZ9tC22ueRlTcWRo16gQUzC3a040mYzuQnOclNdbAEAALEFAEBsAQBA5D/cCcfP8tEd8wAAAABJRU5ErkJggg==";const b={class:"container"},L={class:"row"},v={class:"col s12"},w={class:"row"},f={class:"col s12 m12 l8"},j={class:"block-border block-border-left"},S={class:"card-content"},z={class:"row"},A={class:"col s12 m12 l8"},W={class:"block-border block-border-right"},F={class:"card-content"},D={class:"row"},C={class:"col s12 m12 l8"},M={class:"block-border block-border-left"},P={class:"card-content"},T={class:"row"},E={class:"col s12 m12 l8"},J={class:"block-border block-border-right"},H={class:"card-content"},G={class:"row"},x={class:"col s12 m12 l8"},y={class:"block-border block-border-left"},R={class:"card-content"},q={class:"row"},B={class:"col s12 m12 l8"},I={class:"block-border block-border-right"},N={class:"card-content"},Q={class:"row"},U={class:"col s12 m12 l8"},Y={class:"block-border block-border-left"},K={class:"card-content"},Z={class:"row"},X={class:"col s12 m12 l8"},O={class:"block-border block-border-right"},V={class:"card-content"},_={class:"row"},$={class:"col s12 m12 l8"},ee={class:"block-border block-border-left"},se={class:"card-content"},ie={class:"row"},le={class:"col s12 m12 l8"},ne={class:"block-border block-border-right"},te={class:"card-content"},ae={class:"row"},re={class:"col s12 m12 l8"},ce={class:"block-border block-border-left"},de={class:"card-content"},oe={class:"row"},ue={class:"col s12 m12 l8"},pe={class:"block-border block-border-right"},me={class:"card-content"},ge={class:"row"},ke={class:"col s12 m12 l8"},he={class:"block-border block-border-left"},be={class:"card-content"};function Le(e,s,i,Le,ve,we){const fe=(0,l.g2)("scroll-to");return(0,l.uX)(),(0,l.CE)("div",null,[(0,l.Lk)("div",b,[(0,l.Lk)("div",L,[(0,l.Lk)("h2",v,(0,l.v_)(ve.pageName),1)]),(0,l.Lk)("div",{class:(0,l.C4)(`card-panel ${ve.css.cardLight}`)},[...s[0]||(s[0]=[(0,l.Fv)('<div class="row"><div class="col s12 m12 l4"><p><i class="material-icons icon-left medium">navigation</i>
1 An dieser Stelle möchte ich einige Projekte vorstellen, die über die letzten Jahre entstanden sind. Sie sollen auf der einen Seite meine <strong>Fähigkeiten in der Webentwicklung</strong>, auf der anderen Seite meine <strong>Entwicklung</strong> zeigen. </p><p></p></div><div class="col s12 m6 l4"><p> Was bei älteren Projekten bei heutiger Betrachtung etwas angestaubt oder altbacken anmuten mag, war während der Implementierung aktuell, "state of the art" eben. Es war mir jederzeit ein groÃes Anliegen, die <strong>modernsten und aktuellsten</strong> Technologien einflieÃen zu lassen. </p></div><div class="col s12 m6 l4"><p> Die vorgestellten Projekte stellen einen Querschnitt meines Wirkens dar. Da gibt es das Interesse an <strong>neuen Technologien und Dokumentation</strong> - z.B. zu sehen am <code><canvas></code>-Projekt, das bereits 2008 umgesetzt wurde. Es wird aber auch in den aufgeführten Webauftritten oder Spielen deutlich. </p></div></div>',1)])],2),s[66]||(s[66]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_01"},[(0,l.Lk)("h4",{class:"col s12"},[(0,l.Lk)("code",null,"<canvas>"),(0,l.eW)(" (HTML5-Element)")])],-1)),(0,l.Lk)("div",w,[s[3]||(s[3]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"http://canvas.quaese.de/",title:"canvas (HTML5-Element)"},[(0,l.Lk)("img",{class:"project-image",src:n})])],-1)),(0,l.Lk)("div",f,[(0,l.Lk)("div",j,[s[2]||(s[2]=(0,l.Fv)('<p><i class="material-icons icon-left medium">filter</i> Mit <code><canvas></code> wurde ursprünglich für das Mac OS X ein grafisches Element entwickelt, das wenig später auch in den Browser <b>Safari</b> implementiert wurde. Mittlerweile wurde es von <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-the-canvas.html" title="WHATWG (HTML5 - Canvas)">WHATWG</a> und <a class="text" href="http://www.w3.org/html/wg/html5/#the-canvas" title="W3C (HTML5 - Canvas)">W3C</a> in die Spezifikationen für <abbr class="qp-acronym" title="Hypertext Markup Language 5">HTML5</abbr> aufgenommen. </p><p> Dieses Element bietet die Möglichkeit, dynamisch erstellte Bitmaps zu rendern. Als Hilfsmittel kann hierzu eine Scriptsprache verwendet werden - im <a href="http://canvas.quaese.de/" title="canvas (HTML5-Element)">Projekt</a> wurde JavaScript eingesetzt. </p><p> Motivation dieses <a href="http://canvas.quaese.de/" title="canvas (HTML5-Element)">Projekt</a> umzusetzen und eine deutsche Dokumentation anzubieten, ergab sich aus der Tatsache, dass das <code><canvas></code>-Element und die vielfältigen Möglichkeiten, die es eröffnet, im deutschsprachigen Raum bisher kaum Beachtung fanden. </p><p> Seit dem 19. September 2009 ist die Dokumentation bei Wikipedia unter dem Thema <a class="text" href="http://de.wikipedia.org/wiki/Canvas_(HTML-Element)" title="Wikipedia - Canvas (HTML-Element)">Canvas (HTML-Element)</a> in den Weblinks aufgeführt. </p>',4)),(0,l.Lk)("div",{class:(0,l.C4)(`card-panel ${ve.css.cardLight}`)},[(0,l.Lk)("div",S,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[1]||(s[1]=(0,l.Fv)('<ul class="card-list"><li>HTML mit <code><canvas></code></li><li>JavaScript</li><li>CSS</li><li>PHP</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label php" title="php">php</span></p>',2))])],2)])])]),(0,l.bF)(fe),s[67]||(s[67]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[68]||(s[68]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_02"},[(0,l.Lk)("h4",{class:"col s12"},"Canvas Image Library")],-1)),(0,l.Lk)("div",z,[(0,l.Lk)("div",A,[(0,l.Lk)("div",W,[s[6]||(s[6]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"color_lens"),(0,l.eW)(" Mit "),(0,l.Lk)("a",{href:"projects/canvas_image_library/index.php",title:"Canvas Image Library"},"Canvas Image Library"),(0,l.eW)(" wird eine JavaScript-Bibliothek für das HTML5 ELement "),(0,l.Lk)("code",null,"<canvas>"),(0,l.eW)(" vorgestellt. Sie stellt zahlreiche Features wie Ãberblendverfahren oder Filter zur Verfügung, die aus diversen Bildbearbeitungsprogrammen bekannt sind. Der Autor ist bemührt, den Funktionsumfang ständig zu erweitern. ")],-1)),s[7]||(s[7]=(0,l.Lk)("p",null," Derzeit umfaÃt die Bibliothek sechzehn Effekte wie Multiplizieren oder farbig Abwedeln sowie neun Filter wie Farb- oder Unschärfefilter. ",-1)),s[8]||(s[8]=(0,l.Lk)("p",null,"Der Internet Explorer wird erst ab Version 9 unterstützt.",-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card-panel ${ve.css.cardLight}`)},[(0,l.Lk)("div",F,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[4]||(s[4]=(0,l.Lk)("ul",{class:"card-list"},[(0,l.Lk)("li",null,[(0,l.eW)("HTML mit "),(0,l.Lk)("code",null,"<canvas>")]),(0,l.Lk)("li",null,"JavaScript"),(0,l.Lk)("li",null,"CSS")],-1)),s[5]||(s[5]=(0,l.Lk)("p",null,[(0,l.Lk)("span",{class:"label html",title:"html"},"html"),(0,l.Lk)("span",{class:"label css",title:"css"},"css"),(0,l.Lk)("span",{class:"label javascript",title:"javascript"}
1,"javascript")],-1))])],2)])]),s[9]||(s[9]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/canvas_image_library/index.php",title:"Canvas Image Library"},[(0,l.Lk)("img",{class:"project-image",src:t})])],-1))]),(0,l.bF)(fe),s[69]||(s[69]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[70]||(s[70]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_03"},[(0,l.Lk)("h4",{class:"col s12"},"bikebook.quaese")],-1)),(0,l.Lk)("div",D,[s[13]||(s[13]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"http://bikebook.quaese.de/",title:"bikebook.quaese"},[(0,l.Lk)("img",{class:"project-image project-image-shadow",src:a})])],-1)),(0,l.Lk)("div",C,[(0,l.Lk)("div",M,[s[11]||(s[11]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"directions_bike"),(0,l.eW)(" Seit vielen Jahren bin ich leidenschaftlicher Radfahrer. Im Durchschnitt fahre ich 8000 Kilometer im Jahr. Und einmal jährlich, meistens Anfang August, fahre ich eine groÃe Tour. Neben dem sportlichen Ehrgeiz zu genügen, kann ich so für ein paar Tage dem Alltag entrinnen, kann völlig ungeplant, terminfrei und spontan den Tagesablauf auf mich zukommen lassen. ")],-1)),s[12]||(s[12]=(0,l.Lk)("p",null,[(0,l.eW)(" Die Erinnerungen, Erfahrungen und Routen habe ich auf "),(0,l.Lk)("a",{href:"http://bikebook.quaese.de/",title:"bikebook.quaese"}," bikebook.quaese "),(0,l.eW)(" in einem "),(0,l.Lk)("strong",null,"Bikebook"),(0,l.eW)(" zusammengetragen. Damit habe ich die Mögichkeit, jederzeit in Erinnerungen schwelgen zu können. Andererseits haben Besucher die Möglichkeit, sich an meinen Touren, Routen und Erfahrungen zu orientieren. ")],-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card-panel ${ve.css.cardLight}`)},[(0,l.Lk)("div",P,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[10]||(s[10]=(0,l.Fv)('<ul class="card-list"><li>Redaxo als CMS</li><li>Bootstrap</li><li>jQuery</li><li>eigener Bildfächer (CSS3, JavaScript)</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label css-framework" title="css-framework">css-framework</span><span class="label javascript" title="javascript">javascript</span><span class="label jquery" title="jquery">jquery</span><span class="label cms" title="cms">cms</span></p>',2))])],2)])])]),(0,l.bF)(fe),s[71]||(s[71]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[72]||(s[72]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_04"},[(0,l.Lk)("h4",{class:"col s12"},"CD-Sammlung")],-1)),(0,l.Lk)("div",T,[(0,l.Lk)("div",E,[(0,l.Lk)("div",J,[s[15]||(s[15]=(0,l.Fv)('<p><i class="material-icons icon-left medium">album</i><em>Projekt ist passwortgeschützt!</em></p><p> In diesem <a href="http://cds-angular.quaese.uber.space/" title="CD-Sammlung">Projekt</a> wurde für meine bereits existierende Datenträger-Datenbank eine neue Oberfläche implementiert. Zur Umsetzung wurde ich durch die Tatsache motiviert, mich intensiver mit <strong>AngularJS</strong> auseinander setzen zu wollen. </p><p> 2020 stellte Uberspace den Betrieb seiner Server mit CentOS 6 ein und ich war gezwungen auf CentOS 7 zu migrieren. Diesen Umstand nutzte ich, um die <a href="http://cds-angular.quaese.uber.space/" title="CD-Sammlung">CD-Anwendung</a> mit <strong>React</strong> zu implementieren. </p><p> Zur Strukturierung des Layouts wurde <strong>Bootstrap</strong> als CSS-Framework eingesetzt. Die Statistiken auf der Startseite wurden mit <code><canvas></code> und eigens dafür implementierten AngularJS-Direktiven umgesetzt. </p><p> Serverseitig wurde PHP und das Framework <strong>slim</strong> verwendet. Damit wurde eine kleine <strong>REST</strong>-Schnittstelle implementiert, über die die AngularJS-Anwendung mit Daten versorgt wird. </p><p> Gestützt wurde die Entwicklung durch <strong>Gulp</strong>-Tasks (inkl. Watch-Tasks) zum Compilieren von <strong>{less}</strong>-Dateien und zum Minifizieren der CSS- und JavaScript-Files. </p>',6)),(0,l.Lk)("div",{class:(0,l.C4)(`card-panel ${ve.css.cardLight}`)},[(0,l.Lk)("div",H,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[14]||(s[14]=(0,l.Fv)('<ul class="card-list"><li>HTML mit <code><canvas></code></li><li>CSS</li><li>Bootstrap</li><li>JavaScript</li><li>React</li><li>AngularJS</li><li>jQuery</li><li>PHP (mit slim)</li><li>Gulp</li><li>NodeJS/NPM</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label css-framework" title="css-framework">css-framework</span><span class="label javascript" title="javascript">javascript</span><span class="label angularjs" title="angularjs">React</span><span class="label jquery" title="jquery">jquery</span><span class="label angularjs" title="angularjs">angularjs</span><span class="label nodejs" title="nodejs">nodejs</span><span class="label php" title="php">php</span><span class="label taskrunner" title="taskrunner">
1taskrunner</span></p>',2))])],2)])]),s[16]||(s[16]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"http://cds.quaese.uber.space/",title:"CD-Sammlung"},[(0,l.Lk)("img",{class:"project-image",src:r})])],-1))]),(0,l.bF)(fe),s[73]||(s[73]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[74]||(s[74]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_05"},[(0,l.Lk)("h4",{class:"col s12"},"Progressorium")],-1)),(0,l.Lk)("div",G,[s[23]||(s[23]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"http://www.progressorium.de/",title:"Progressorium (http://www.progressorium.de)"},[(0,l.Lk)("img",{class:"project-image project-image-shadow",src:c})])],-1)),(0,l.Lk)("div",x,[(0,l.Lk)("div",y,[s[18]||(s[18]=(0,l.Lk)("p",null,"Progressiver Metal aus dem HaÃgau - nicht möglich?",-1)),s[19]||(s[19]=(0,l.Lk)("p",null,[(0,l.eW)(" Doch, mit "),(0,l.Lk)("a",{href:"http://www.progressorium.de/",title:"Progressorium (http://www.progressorium.de)"},"Progressorium"),(0,l.eW)(" wurde im März 2006 eine Band gegründet, die oben genanntes Genre abdeckt. Ihre professionellen Ambitionen zeigen sich dadurch, dass sie bereits ein halbes Jahr später das erste Konzert mit teilweise eigenen Kompositionen spielten. ")],-1)),s[20]||(s[20]=(0,l.Lk)("p",null," Nachdem ich die Idee für den Bandname hatte, entwarf ich Logo und Schriftzug. Als sich abzeichnete, dass die Fangemeinde grösser wurde und der Bedarf an Informationen anstieg, war es an der Zeit für die eigene Homepage. ",-1)),s[21]||(s[21]=(0,l.Lk)("p",null," Neben Informationen und Bandmaterial wurde ein Gästebuch mit Kommentarfunktion implementiert (inkl. Backend). Es wurde weiterhin auf Standardkonformität geachtet und umgesetzt. Das komplette Design wurde tabellenlos erstellt. ",-1)),s[22]||(s[22]=(0,l.Lk)("p",null,[(0,l.Lk)("em",null,"Seite noch aktiv, Band inaktiv.")],-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",R,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[17]||(s[17]=(0,l.Fv)('<ul class="card-list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label php" title="php">php</span></p>',2))])],2)])])]),(0,l.bF)(fe),s[75]||(s[75]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[76]||(s[76]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_06"},[(0,l.Lk)("h4",{class:"col s12"},"Progressorium II")],-1)),(0,l.Lk)("div",q,[(0,l.Lk)("div",B,[(0,l.Lk)("div",I,[s[26]||(s[26]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"tv"),(0,l.eW)(" Neben dem Erstellen des Webauftritts wurden weitere Arbeiten für die Band übernommen. ")],-1)),s[27]||(s[27]=(0,l.Lk)("p",null,' So wurden für jeden Liveauftritt Flyer entworfen. Diese wurden jeweils in zwei Versionen entworfen und umgesetzt - einmal für den Druck und zum anderen für das Screendesign. Die "Webversionen" wurden sofort zur Ankündigung in den Onlineauftritten veröffentlicht. ',-1)),s[28]||(s[28]=(0,l.Lk)("p",null," Weiterhin wurde ein Plakat erstellt, das der Band zur Ankündigung von Veranstaltungen dient. ",-1)),s[29]||(s[29]=(0,l.Lk)("p",null,[(0,l.eW)(" Im Spätherbst 2007 begab sich "),(0,l.Lk)("a",{href:"http://www.progressorium.de/",title:"Progressorium (http://www.progressorium.de)"},"Progressorium"),(0,l.eW)(' ins Studio und hat begonnen, die erste Demo-CD mit dem Titel "Continuum" einzuspielen. Das Artwork, die Covergestaltung sowie das CD-Label des Erstlingswerks, das drei Stücke enthält, wurden von mir konzeptioniert und umgesetzt. ')],-1)),s[30]||(s[30]=(0,l.Lk)("p",null,[(0,l.eW)(" Um sich nach auÃen professioneller präsentieren zu können und eine weitere Möglichkeit zur Kontaktaufnahme zu bieten, wurden Visitenkarten entworfen. Diese wurden in Anlehnung an Spielkarten designed, wobei der Schriftzug und das Logo der Band die Spielfarbe schmücken. Besonderes Highlight ist die Eckenabrundung durch die Druckerei "),(0,l.Lk)("a",{href:"http://www.schneiderprintmedien.de/",title:"Schneider Printmedien GmbH (http://www.schneiderprintmedien.de/)"},"Schneider Printmedien GmbH"),(0,l.eW)(", wodurch der Eindruck noch verstärkt wird, eine reale Karte in der Hand zu halten. ")],-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",N,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[24]||(s[24]=(0,l.Lk)("ul",{class:"card-list"}
1,[(0,l.Lk)("li",null,"diverse Grafiktools")],-1)),s[25]||(s[25]=(0,l.Lk)("p",null,[(0,l.Lk)("span",{class:"label grafik",title:"grafik"},"grafik")],-1))])],2)])]),s[31]||(s[31]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"http://www.progressorium.de/",title:"Progressorium (http://www.progressorium.de)"},[(0,l.Lk)("img",{class:"project-image",src:d})])],-1))]),(0,l.bF)(fe),s[77]||(s[77]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[78]||(s[78]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_07"},[(0,l.Lk)("h4",{class:"col s12"},"Breakout")],-1)),(0,l.Lk)("div",Q,[s[37]||(s[37]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/breakout/breakout.html",title:"Breakout"},[(0,l.Lk)("img",{class:"project-image project-image-shadow",src:o})])],-1)),(0,l.Lk)("div",U,[(0,l.Lk)("div",Y,[s[34]||(s[34]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"games"),(0,l.eW)(" Realisiert wurde der Spielhallen-Klassiker "),(0,l.Lk)("strong",null,"Breakout"),(0,l.eW)(" von Atari als JS-Spiel. ")],-1)),s[35]||(s[35]=(0,l.Lk)("p",null,[(0,l.eW)(" Ziel des "),(0,l.Lk)("a",{href:"projects/breakout/breakout.html",title:"Breakout"},"Spiels"),(0,l.eW)(" ist es, mit dem Schläger den Ball so zu lenken, dass alle "),(0,l.Lk)("strong",null,"farbigen Blöcke"),(0,l.eW)(" getroffen werden. Jeder Farbe entspricht dabei einem Punktwert:"),(0,l.Lk)("br"),(0,l.eW)(" gelb (5 Punkte), orange (10 Punkte), rot (15 Punkte), violett (20 Punkte), blau (25 Punkte), grün (30 Punkte) und grau (unzerstörbar, 0 Punkte). ")],-1)),s[36]||(s[36]=(0,l.Lk)("p",null," Um das Spiel vernüftig spielen zu können, sollte der Cache des Browsers so eingestellt sein, dass er nicht jede Datei neu vom Server lädt. Wie sie dies erreichen, hängt vom verwendeten Browser ab. ",-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",K,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[32]||(s[32]=(0,l.Lk)("ul",{class:"card-list"},[(0,l.Lk)("li",null,"HTML"),(0,l.Lk)("li",null,"CSS"),(0,l.Lk)("li",null,"JavaScript")],-1)),s[33]||(s[33]=(0,l.Lk)("p",null,[(0,l.Lk)("span",{class:"label html",title:"html"},"html"),(0,l.Lk)("span",{class:"label css",title:"css"},"css"),(0,l.Lk)("span",{class:"label javascript",title:"javascript"},"javascript")],-1))])],2)])])]),(0,l.bF)(fe),s[79]||(s[79]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[80]||(s[80]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_08"},[(0,l.Lk)("h4",{class:"col s12"},"qpPageFlip (jQuery-PlugIn)")],-1)),(0,l.Lk)("div",Z,[(0,l.Lk)("div",X,[(0,l.Lk)("div",O,[s[39]||(s[39]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"album"),(0,l.eW)(" PageFlips bzw. Scripts mit Blätterfunktion gibt es zahlreiche, doch die meisten nur für Flash. Und da mir für JavaScript keins bekannt war, entschied ich mich, ein eigenes zu entwickeln - "),(0,l.Lk)("a",{href:"projects/qp_jquery.pageflip/qp_pageflip_final.html",title:"qpPageFlip"},"qpPageFlip"),(0,l.eW)(". ")],-1)),s[40]||(s[40]=(0,l.Lk)("p",null," Ausgehend von zwei animierten Ecken (siehe style_01) habe ich begonnen, Blätterfunktionen zu implementieren. Während der Arbeit habe ich mich noch entschieden, das Projekt als jQuery-PlugIn umzusetzen und so allgemein wie möglich zu gestalten. Resultat ist eine kleine und feine Alternative zu den meist grossen Flashanwendungen. ",-1)),s[41]||(s[41]=(0,l.Lk)("p",null,[(0,l.eW)(" Um das Projekt ansprechend und modern zu präsentieren, wurde bei der Schriftgestaltung auf CSS3 gesetzt. Es wurden zwei freie Schriftarten verwendet und mit Hilfe von @font-face verfügbar gemacht. Um IEs nicht auszuschliessen, werden die Fonts auch im eot-Format angeboten (mehr Infos gibt es "),(0,l.Lk)("a",{href:"http://www.mediaevent.de/css/font-face.html",title:"www.mediaevent.de (CSS font-face)"},"hier"),(0,l.eW)("). ")],-1)),s[42]||(s[42]=(0,l.Lk)("p",null,[(0,l.eW)(" Um das Projekt umzusetzen, wurde das JavaScript-Framework "),(0,l.Lk)("a",{href:"http://www.jquery.com",title:"jQuery"},"jQuery"),(0,l.eW)(" eingesetzt. ")],-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",V,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[38]||(s[38]=(0,l.Fv)('<ul class="card-list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label jquery" title="jquery">jquery</span></p>',2))])],2)])]),s[43]||(s[43]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/qp_jquery.pageflip/qp_pageflip_final.html",title:"qpPageFlip"},[(0,l.Lk)("img",{class:"project-image",src:u})])],-1))]),(0,l.bF)(fe),s[81]||(s[81]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[82]||(s[82]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_09"},[(0,l.Lk)("h4",{class:"col s12"},"Tangram")],-1)),(0,l.Lk)("div",_,[s[46]||(s[46]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/tangram/tangram.html",title:"Tangram"},[(0,l.Lk)("img",{class:"project-image",src:p})])],-1)),(0,l.Lk)("div",$,[(0,l.Lk)("div",ee,[s[45]||(s[45]=(0,l.Fv)('<p><i class="material-icons icon-left medium">games</i><a href="projects/tangram/tangram.html" title="Tangram">Tangram</a> ist ein altes chinesisches Legespiel, das Anfang des 19-ten Jahrhunderts auch in Europa und Amerika Verbreitung fand. Ziel des Spiels ist es, aus den sieben Einzelfiguren ein Quadrat zu legen. </p><p> Das Spiel wurde mit Hilfe des HTML 5 Elements <abbr class="qp-acronym" title="<canvas> (HTML5-Element)"><code><canvas></code></abbr> umgesetzt. </p><p> Die Idee, das Spiel in einer Online-Variante zur Verfügung zu stellen, wurde aufgrund einer Nachfrage geboren, die mir im Rahmen meines <a href="http://canvas.quaese.de/" title="canvas (HTML5-Element)"><code><canvas></code></a>-Projekts gestellt wurde. Bei der Umsetzung wurde jeder Einzelfigur ein <code><canvas></code>-Element spendiert. In diesem erfolgen die benötigten Drehungen. Um die Bewegung der Figuren zu realisieren, wurden die HTML-Elemente mit einer Drag and Drop Funktionalität versehen. </p><p><strong>03. März 2010: Update des Spiels</strong><br>Es werden nun alle Polygone in ein einziges <code><canvas></code>-Element gezeichnet. Ermöglicht wurde dieses Vorgehen, da eine Klickerkennung (Punkt in Polygon) für das <code><canvas></code>-Element implementiert wurde. Damit wurde das gezielte Ansteuern einzelner Elemente komfortabler. </p>',4)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",se,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[44]||(s[44]=(0,l.Fv)('<ul class="card-list"><li>HTML mit <code><canvas></code></li><li>CSS</li><li>JavaScript</li><li>JSON</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label json" title="json">json</span></p>',2))])],2)])])]),(0,l.bF)(fe),s[83]||(s[83]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[84]||(s[84]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_10"},[(0,l.Lk)("h4",{class:"col s12"},"X-Gewinnt")],-1)),(0,l.Lk)("div",ie,[(0,l.Lk)("div",le,[(0,l.Lk)("div",ne,[s[48]||(s[48]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"games"),(0,l.eW)(" Bei dem "),(0,l.Lk)("a",{href:"projects/xgewinnt/qp-xgewinnt.html",title:"X-Gewinnt"},"Spiel"),(0,l.eW)(" handelt sich um eine Abwandlung von "),(0,l.Lk)("b",null,"4 Gewinnt"),(0,l.eW)(". Allerdings kann die Spielfeldgrösse, sowie die Anzahl der Steine, die zum Gewinnen notwendig sind, individuell eingestellt werden. ")],-1)),s[49]||(s[49]=(0,l.Lk)("p",null," Die Idee zum Spiel wurde geboren, als in einem Forum die Frage nach einem Algorithmus gestellt wurde, mit dem Tic Tac Toe möglichst einfach auf Gewinnreihen überprüft werden sollte. Da ich an einer möglichst allgemeinen Lösung interessiert war, entstand eine Routine, mit der eine beliebige Anzahl an Spielsteinen getestet werden kann, ob sie dem Gewinnkriterium entspricht. ",-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",te,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[47]||(s[47]=(0,l.Fv)('<ul class="card-list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label jquery" title="jquery">jquery</span></p>',2))])],2)])]),s[50]||(s[50]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/xgewinnt/qp-xgewinnt.html",title:"X-Gewinnt"},[(0,l.Lk)("img",{class:"project-image",src:m})])],-1))]),(0,l.bF)(fe),s[85]||(s[85]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[86]||(s[86]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_11"},[(0,l.Lk)("h4",{class:"col s12"},"Kreuzworträtsel")],-1)),(0,l.Lk)("div",ae,[s[53]||(s[53]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/crossword/qp_crossword.html",title:"Kreuzworträtsel"},[(0,l.Lk)("img",{class:"project-image",src:g})])],-1)),(0,l.Lk)("div",re,[(0,l.Lk)("div",ce,[s[52]||(s[52]=(0,l.Fv)('<p><i class="material-icons icon-left medium">games</i> Bereits während meiner Kindheit bereitete mir das Lösen von <strong>Kreuzworträtseln</strong> groÃen SpaÃ. Ob alleine oder gemeinsam mit anderen, es war jederzeit unterhaltsam und kurzweilig. </p><p> Die Leidenschaft zu diesem Zeitvertreib hat mir letztendlich inspiriert, eine <a href="projects/crossword/qp_crossword.html" title="Kreuzworträtsel">Onlinevariante</a> zu implementieren. Ziel war eine Anwendung, die in allen gängigen Browsern läuft. Weiterhin sollte die Möglichkeit existieren, unterschiedliche Rätsel zu präsentieren. </p><p> Um die benötigten Informationen zu den Rätseln in einem möglichst schlanken und universellen Datenformat zur Verfügung zu stellen, wurde auf <a href="http://www.json.org/json-de.html" title="JSON">JSON</a> zurückgegriffen. Durch den Einsatz von <a href="http://de.wikipedia.org/wiki/Ajax_(Programmierung)" title="AJAX (Wikipedia)">AJAX</a>-Routinen wurde es zudem möglich, neue Rätsel ohne ein Neuladen der Seite anzubieten. Der Benutzer erhält somit den Eindruck einer k
1ontinuierlichen Anwendung. </p><p> Um das Projekt umzusetzen, wurde das JavaScript-Framework <a href="http://www.jquery.com" title="jQuery">jQuery</a> eingesetzt. </p><p>Viel Spaà beim Rätseln!</p>',5)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",de,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[51]||(s[51]=(0,l.Fv)('<ul class="card-list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>JSON</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label json" title="json">json</span></p>',2))])],2)])])]),(0,l.bF)(fe),s[87]||(s[87]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[88]||(s[88]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_12"},[(0,l.Lk)("h4",{class:"col s12"},"Funktionsplotter")],-1)),(0,l.Lk)("div",oe,[(0,l.Lk)("div",ue,[(0,l.Lk)("div",pe,[s[56]||(s[56]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"timeline"),(0,l.eW)(" Der "),(0,l.Lk)("a",{href:"projects/funktionsplotter/funktionsplotter.html",title:"Funktionsplotter"},"Funktionsplotter"),(0,l.eW)(" wurde als Visualisierungswerkzeug zur Anzeige von Graphen und Kurven entwickelt ")],-1)),s[57]||(s[57]=(0,l.Lk)("p",null,[(0,l.eW)(" Weil während der Entwicklungsarbeit zu einem Projekt häufiger Kurvenverläufe einfacher Funktionen benötigt wurden, entstand ein einfacher "),(0,l.Lk)("a",{href:"projects/funktionsplotter/funktionsplotter.html",title:"Funktionsplotter"},"Funktionsplotter"),(0,l.eW)(". ")],-1)),s[58]||(s[58]=(0,l.Lk)("p",null," Eine Funktion wird in einem vorgegebenen Intervall untersucht. Ermittelt werden die Funktionswerte anhand einer übergebenen Schrittanzahl, die lokalen Extremas (Maximum und Minimum), sowie die Nullstellen. Letzteres kann ebenfalls durch die Anzahl der Untersuchungsintervalle beeinflusst werden. ",-1)),s[59]||(s[59]=(0,l.Lk)("p",null,"Letztendlich wird der Graph mit den ermittelten Werten ausgegeben.",-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",me,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[54]||(s[54]=(0,l.Lk)("ul",{class:"card-list"},[(0,l.Lk)("li",null,"HTML"),(0,l.Lk)("li",null,"CSS"),(0,l.Lk)("li",null,"JavaScript")],-1)),s[55]||(s[55]=(0,l.Lk)("p",null,[(0,l.Lk)("span",{class:"label html",title:"html"},"html"),(0,l.Lk)("span",{class:"label css",title:"css"},"css"),(0,l.Lk)("span",{class:"label javascript",title:"javascript"},"javascript")],-1))])],2)])]),s[60]||(s[60]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/funktionsplotter/funktionsplotter.html",title:"Funktionsplotter"},[(0,l.Lk)("img",{class:"project-image",src:k})])],-1))]),(0,l.bF)(fe),s[89]||(s[89]=(0,l.Lk)("div",{class:"divider"},null,-1)),s[90]||(s[90]=(0,l.Lk)("div",{class:"row padding-top-medium-scroll",id:"section_13"},[(0,l.Lk)("h4",{class:"col s12"},"Fehler im Spiegel")],-1)),(0,l.Lk)("div",ge,[s[65]||(s[65]=(0,l.Lk)("div",{class:"col s12 m12 l4 center-align"},[(0,l.Lk)("a",{class:"project-image-link",href:"projects/spiegel/spiegel.php",title:"Fehler im Spiegel"},[(0,l.Lk)("img",{class:"project-image",src:h})])],-1)),(0,l.Lk)("div",ke,[(0,l.Lk)("div",he,[s[62]||(s[62]=(0,l.Lk)("p",null,[(0,l.Lk)("i",{class:"material-icons icon-left medium"},"games"),(0,l.eW)(" Realisiert wurde ein kleines selbst programiertes "),(0,l.Lk)("strong",null,"JavaScript-Spiel"),(0,l.eW)(". ")],-1)),s[63]||(s[63]=(0,l.Lk)("p",null,[(0,l.eW)(" Ziel des "),(0,l.Lk)("a",{href:"projects/spiegel/spiegel.php",title:"Fehler im Spiegel"},"Spiels"),(0,l.eW)(" ist es, ein verkehrt angeordnetes Symbol zu finden. Auf der linken Seite befinden sich kleine Bilder, die die Orginale darstellen. Im rechten Bereich sind die Duplikate der Symbole horizontal gespiegelt. ")],-1)),s[64]||(s[64]=(0,l.Lk)("p",null,"Bis auf eins - das gilt es zu finden!",-1)),(0,l.Lk)("div",{class:(0,l.C4)(`card ${ve.css.cardLight}`)},[(0,l.Lk)("div",be,[(0,l.Lk)("h6",null,(0,l.v_)(ve.usedTechnologies),1),s[61]||(s[61]=(0,l.Fv)('<ul class="card-list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li></ul><p><span class="label html" title="html">html</span><span class="label css" title="css">css</span><span class="label javascript" title="javascript">javascript</span><span class="label php" title="php">php</span></p>',2))])],2)])])])])])}
1const ve={class:"row scrollto-top-wrapper"},we={class:"col s12"},fe={class:"material-icons scroll-to-top-button"};function je(e,s,i,n,t,a){const r=(0,l.gN)("scroll-into-view");return(0,l.uX)(),(0,l.CE)("div",ve,[(0,l.Lk)("div",we,[(0,l.bo)(((0,l.uX)(),(0,l.CE)("i",fe,[...s[0]||(s[0]=[(0,l.eW)("expand_less",-1)])])),[[r,i.scrollElem]])])])}var Se=i(4161),ze={name:"scroll-to",directives:{ScrollIntoView:Se.j},props:{scrollElem:{type:String,default(){return"#app"}}}},Ae=i(6262);const We=(0,Ae.A)(ze,[["render",je]]);var Fe=We,De={name:"project-list",components:{"scroll-to":Fe},data(){return{css:{cardLight:"grey lighten-5",cardLightColored:"blue-grey lighten-5"},pageName:"Projekte",usedTechnologies:"Verwendete Techniken"}}};const Ce=(0,Ae.A)(De,[["render",Le]]);var Me=Ce}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.