{"id":8812,"date":"2026-01-25T08:43:23","date_gmt":"2026-01-25T07:43:23","guid":{"rendered":"https:\/\/innovacore.group\/?post_type=portfolio&#038;p=8812"},"modified":"2026-03-17T15:54:28","modified_gmt":"2026-03-17T14:54:28","slug":"contribly","status":"publish","type":"portfolio","link":"https:\/\/innovacore.group\/hu\/portfolio\/contribly\/","title":{"rendered":"Contribly &#8211; N\u00f6veld az olvas\u00f3i elk\u00f6telez\u0151d\u00e9st"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A Contribly egy SaaS platform, amelyet a The Guardian-ben sz\u00fcletett, \u00e9s amely nagy l\u00e9pt\u00e9kben k\u00e9pes a k\u00f6z\u00f6ss\u00e9g \u00e1ltal gener\u00e1lt tartalmak (CGC) kezel\u00e9s\u00e9re. Egyszer\u0171s\u00edti a felhaszn\u00e1l\u00f3i t\u00f6rt\u00e9netek, fot\u00f3k \u00e9s vide\u00f3k gy\u0171jt\u00e9s\u00e9t, moder\u00e1l\u00e1s\u00e1t \u00e9s azonnali k\u00f6zz\u00e9t\u00e9tel\u00e9t. Az\u00e1ltal, hogy a passz\u00edv olvas\u00f3kat akt\u00edv k\u00f6zrem\u0171v\u0151kk\u00e9 alak\u00edtja, a Contribly jelent\u0151s id\u0151t takar\u00edt meg a szerkeszt\u0151s\u00e9gek sz\u00e1m\u00e1ra, mik\u00f6zben drasztikusan n\u00f6veli a h\u0171s\u00e9get, az oldalon t\u00f6lt\u00f6tt id\u0151t \u00e9s az els\u0151 f\u00e9l \u00e1ltal gy\u0171jt\u00f6tt adatok mennyis\u00e9g\u00e9t a kiad\u00f3k \u00e9s m\u00e1rk\u00e1k sz\u00e1m\u00e1ra.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A SaaS platform k\u00f6z\u00f6ss\u00e9gi tartalmak gy\u0171jt\u00e9s\u00e9re, moder\u00e1l\u00e1s\u00e1ra \u00e9s nagyl\u00e9pt\u00e9k\u0171 k\u00f6zz\u00e9t\u00e9tel\u00e9re.<\/p>\n","protected":false},"featured_media":2369,"parent":0,"template":"","meta":{"inline_featured_image":false,"company_name":"Contribly","summary":"A SaaS platform k\u00f6z\u00f6ss\u00e9gi tartalmak gy\u0171jt\u00e9s\u00e9re, moder\u00e1l\u00e1s\u00e1ra \u00e9s nagyl\u00e9pt\u00e9k\u0171 k\u00f6zz\u00e9t\u00e9tel\u00e9re.","mission":"<p>Az a c\u00e9l, hogy a k\u00f6z\u00f6ns\u00e9g elk\u00f6telez\u0151d\u00e9s\u00e9t strat\u00e9giai \u00fczleti eszk\u00f6zz\u00e9 alak\u00edtsa. A Contribly k\u00fcldet\u00e9se, hogy a kiad\u00f3k sz\u00e1m\u00e1ra m\u00e9ly bizalmat \u00e9s relevanci\u00e1t \u00e9p\u00edtsen az\u00e1ltal, hogy egyszer\u0171v\u00e9 teszi az olvas\u00f3k bevon\u00e1s\u00e1t a t\u00f6rt\u00e9netbe, az elk\u00f6telez\u0151d\u00e9st \u00e9rt\u00e9kes els\u0151 f\u00e9l adatokkal \u00e9s el\u0151fizet\u00e9ses n\u00f6veked\u00e9ssel alak\u00edtja \u00e1t.<\/p>\n","impact":"<p>Contribly \u00e1talak\u00edtja a kiad\u00f3 \u00e9s k\u00f6z\u00f6ns\u00e9g k\u00f6z\u00f6tti kapcsolatot az\u00e1ltal, hogy a \u201ek\u00f6zvet\u00edt\u00e9s\u201d helyett k\u00e9toldal\u00fa besz\u00e9lget\u00e9st hoz l\u00e9tre. A szerkeszt\u0151s\u00e9gek sz\u00e1m\u00e1ra egy \u201e\u00e9rt\u00e9kcsere\u201d modellt biztos\u00edt, amely algoritmusbiztos forgalmat \u00e9s \u00e9rt\u00e9kes adatokat gener\u00e1l, elengedhetetlen a m\u00e9diapiacok j\u00f6v\u0151biztos\u00edt\u00e1s\u00e1hoz a k\u00f6z\u00f6ss\u00e9gi platformokra val\u00f3 t\u00e1maszkod\u00e1s ellens\u00falyoz\u00e1s\u00e1ra.<\/p>\n","company_logo":"https:\/\/innovacore.group\/wp-content\/uploads\/contribly_logo-innovacore-optimized.jpg","website_url":"https:\/\/www.contribly.com\/","linkedin_url":"https:\/\/www.linkedin.com\/company\/contribly\/","location":"Northwich, Egyes\u00fclt Kir\u00e1lys\u00e1g","founded_year":"","key_numbers":{"item-0":{"metric_label":"Oldalon t\u00f6lt\u00f6tt id\u0151","metric_value":"3-10x"},"item-1":{"metric_label":"K\u00f6z\u00f6ss\u00e9gi elk\u00f6telez\u0151d\u00e9s","metric_value":"3x"},"item-2":{"metric_label":"Alkalmaz\u00e1s let\u00f6lt\u00e9s\u00e9nek n\u00f6veked\u00e9se","metric_value":"44%"}},"hiring_status":"stealth","sector":"saas","company_type":"startup","audience":["B2B"],"geo_scope":["glob\u00e1lis"],"business_model":["saas"],"funding_stage":"folyamatban","partnership_type":"friss\u00edt\u00e9s","logo_animation":"<div id=\"contribly-particle-root\">\r\n    <canvas id=\"contriblyCanvas\"><\/canvas>\r\n<\/div>\r\n\r\n<style>\r\n    #contribly-particle-root {\r\n        width: 100%;\r\n        height: 300px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        background: transparent;\r\n        overflow: hidden;\r\n        cursor: crosshair;\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n    const canvas = document.getElementById('contriblyCanvas');\r\n    const ctx = canvas.getContext('2d', { willReadFrequently: true });\r\n    const root = document.getElementById('contribly-particle-root');\r\n    \r\n    let width, height;\r\n    let particles = [];\r\n    let mouse = { x: -1000, y: -1000 };\r\n    const particleColor = '#f5f5f5'; \/\/ Gris clair demand\u00e9\r\n    let time = 0;\r\n\r\n    function init() {\r\n        width = root.offsetWidth;\r\n        height = 300;\r\n        \r\n        const dpr = window.devicePixelRatio || 1;\r\n        canvas.width = width * dpr;\r\n        canvas.height = height * dpr;\r\n        canvas.style.width = width + 'px';\r\n        canvas.style.height = height + 'px';\r\n        ctx.scale(dpr, dpr);\r\n\r\n        createLogoParticles();\r\n    }\r\n\r\n    function createLogoParticles() {\r\n        particles = [];\r\n        const cx = width \/ 2;\r\n        const cy = height \/ 2;\r\n        const isMobile = width < 600;\r\n\r\n        \/\/ --- 1. CONFIGURATION DU DESSIN ---\r\n        ctx.fillStyle = 'white';\r\n        ctx.strokeStyle = 'white';\r\n\r\n        \/\/ Dimensions relatives\r\n        \/\/ On augmente un peu la taille de l'ic\u00f4ne pour bien voir les d\u00e9tails\r\n        const iconSize = isMobile ? 60 : 100; \r\n        const fontSize = isMobile ? 35 : 60;\r\n        const gap = isMobile ? 15 : 30;\r\n\r\n        \/\/ Typo\r\n        ctx.font = `bold ${fontSize}px \"Poppins\", \"Montserrat\", Arial, sans-serif`;\r\n        const textMetrics = ctx.measureText('Contribly');\r\n        const textWidth = textMetrics.width;\r\n\r\n        \/\/ Centrage\r\n        const totalWidth = iconSize + gap + textWidth;\r\n        const startX = cx - (totalWidth \/ 2);\r\n        const centerY = cy;\r\n\r\n        \/\/ --- 2. DESSIN DE L'IC\u00d4NE (Complexe et fid\u00e8le) ---\r\n        const ix = startX;\r\n        const iy = centerY - (iconSize \/ 2);\r\n        const centerIx = ix + iconSize \/ 2;\r\n        const centerIy = iy + iconSize \/ 2;\r\n\r\n        \/\/ A. Le cadre carr\u00e9 (fin)\r\n        ctx.lineWidth = iconSize * 0.03;\r\n        ctx.strokeRect(ix, iy, iconSize, iconSize);\r\n\r\n        \/\/ B. Le Point Central (Le plus gros)\r\n        const centerDotRad = iconSize * 0.12;\r\n        ctx.beginPath();\r\n        ctx.arc(centerIx, centerIy, centerDotRad, 0, Math.PI * 2);\r\n        ctx.fill();\r\n\r\n        \/\/ C. Les Points P\u00e9riph\u00e9riques (Tailles et positions vari\u00e9es)\r\n        const networkRad = iconSize * 0.36; \/\/ Distance au centre\r\n        const bigRad = iconSize * 0.075;   \/\/ Rayon des \"gros\" points p\u00e9riph\u00e9riques\r\n        const smallRad = iconSize * 0.045; \/\/ Rayon des \"petits\" points\r\n\r\n        \/\/ D\u00e9finition manuelle des 6 points pour respecter le logo :\r\n        \/\/ Angles approximatifs en radians et taille associ\u00e9e.\r\n        const pointsDef = [\r\n            { angle: -0.4, size: smallRad }, \/\/ Haut-Droite (petit)\r\n            { angle: 0.3,  size: smallRad }, \/\/ Droite (petit)\r\n            { angle: 1.2,  size: bigRad },   \/\/ Bas-Droite (gros)\r\n            { angle: 2.6,  size: bigRad },   \/\/ Bas-Gauche (gros)\r\n            { angle: 3.5,  size: smallRad }, \/\/ Gauche (petit)\r\n            { angle: 4.5,  size: bigRad }    \/\/ Haut-Gauche (gros)\r\n        ];\r\n\r\n        ctx.lineWidth = iconSize * 0.025; \/\/ Lignes de connexion fines\r\n\r\n        pointsDef.forEach(pt => {\r\n            const px = centerIx + Math.cos(pt.angle) * networkRad;\r\n            const py = centerIy + Math.sin(pt.angle) * networkRad;\r\n\r\n            \/\/ 1. A kapcsolat vonal\r\n            ctx.beginPath();\r\n            ctx.moveTo(centerIx, centerIy);\r\n            ctx.lineTo(px, py);\r\n            ctx.stroke();\r\n\r\n            \/\/ 2. A pont\r\n            ctx.beginPath();\r\n            ctx.arc(px, py, pt.size, 0, Math.PI * 2);\r\n            ctx.fill();\r\n        });\r\n\r\n\r\n        \/\/ --- 3. DESSIN DU TEXTE ---\r\n        const textX = startX + iconSize + gap;\r\n        ctx.textAlign = 'left';\r\n        ctx.textBaseline = 'middle';\r\n        ctx.fillText('Contribly', textX, centerY);\r\n\r\n\r\n        \/\/ --- 4. SCAN DES PIXELS (Densit\u00e9 \u00e9lev\u00e9e pour le d\u00e9tail) ---\r\n        const density = 3;\r\n        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\r\n        const dataWidth = canvas.width; \r\n\r\n        for (let y = 0; y < canvas.height; y += density) {\r\n            for (let x = 0; x < canvas.width; x += density) {\r\n                if (imageData[(y * dataWidth + x) * 4 + 3] > 128) {\r\n                    const dpr = window.devicePixelRatio || 1;\r\n                    particles.push({\r\n                        x: x \/ dpr,\r\n                        y: y \/ dpr,\r\n                        originX: x \/ dpr,\r\n                        originY: y \/ dpr,\r\n                        vx: 0, \r\n                        vy: 0,\r\n                        \/\/ Taille de particule l\u00e9g\u00e8rement variable pour le c\u00f4t\u00e9 \"soft\"\r\n                        size: Math.random() * 1.2 + 0.8, \r\n                    });\r\n                }\r\n            }\r\n        }\r\n        \r\n        ctx.clearRect(0, 0, width, height);\r\n    }\r\n\r\n    function draw() {\r\n        ctx.clearRect(0, 0, width, height);\r\n        \r\n        \/\/ --- PHYSIQUE \"SOFT\" ---\r\n        time += 0.02; \/\/ Vitesse d'ondulation lente\r\n\r\n        ctx.fillStyle = particleColor;\r\n        \r\n        particles.forEach(p => {\r\n            \/\/ 1. Respiration lente et ample\r\n            const waveX = Math.sin(time * 0.5 + p.y * 0.03) * 3;\r\n            const waveY = Math.cos(time * 0.4 + p.x * 0.03) * 3;\r\n\r\n            \/\/ 2. Interaction Souris douce\r\n            const dx = mouse.x - p.x;\r\n            const dy = mouse.y - p.y;\r\n            const dist = Math.sqrt(dx*dx + dy*dy);\r\n            const radius = 100;\r\n\r\n            let repelX = 0;\r\n            let repelY = 0;\r\n\r\n            if (dist < radius) {\r\n                const force = (radius - dist) \/ radius;\r\n                const angle = Math.atan2(dy, dx);\r\n                \/\/ Force mod\u00e9r\u00e9e (10) pour une r\u00e9pulsion visible mais pas violente\r\n                repelX = -Math.cos(angle) * force * 10;\r\n                repelY = -Math.sin(angle) * force * 10;\r\n            }\r\n\r\n            const targetX = p.originX + waveX;\r\n            const targetY = p.originY + waveY;\r\n\r\n            \/\/ 3. Physique fluide (Retour \u00e9lastique mou et forte friction)\r\n            const ax = (targetX - p.x) * 0.02; \/\/ Retour tr\u00e8s souple\r\n            const ay = (targetY - p.y) * 0.02;\r\n\r\n            p.vx += ax;\r\n            p.vy += ay;\r\n            p.vx += repelX * 0.2; \/\/ Application douce de la force souris\r\n            p.vy += repelY * 0.2;\r\n            \r\n            \/\/ Friction \u00e9lev\u00e9e pour l'effet \"flottant dans l'eau\"\r\n            p.vx *= 0.92; \r\n            p.vy *= 0.92;\r\n\r\n            p.x += p.vx;\r\n            p.y += p.vy;\r\n\r\n            ctx.beginPath();\r\n            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n            ctx.fill();\r\n        });\r\n\r\n        requestAnimationFrame(draw);\r\n    }\r\n\r\n    const updateMouse = (e) => {\r\n        const r = canvas.getBoundingClientRect();\r\n        const cx = e.touches ? e.touches[0].clientX : e.clientX;\r\n        const cy = e.touches ? e.touches[0].clientY : e.clientY;\r\n        mouse.x = cx - r.left;\r\n        mouse.y = cy - r.top;\r\n    };\r\n\r\n    window.addEventListener('resize', init);\r\n    canvas.addEventListener('mousemove', updateMouse);\r\n    canvas.addEventListener('touchmove', updateMouse, {passive: true});\r\n    canvas.addEventListener('mouseleave', () => { mouse.x = -1000; mouse.y = -1000; });\r\n    canvas.addEventListener('touchend', () => { mouse.x = -1000; mouse.y = -1000; });\r\n\r\n    setTimeout(init, 100);\r\n    draw();\r\n})();\r\n<\/script>"},"pt":[],"pipeline":[],"class_list":["post-8812","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/portfolio\/8812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":2,"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/portfolio\/8812\/revisions"}],"predecessor-version":[{"id":8851,"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/portfolio\/8812\/revisions\/8851"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/media\/2369"}],"wp:attachment":[{"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/media?parent=8812"}],"wp:term":[{"taxonomy":"pt","embeddable":true,"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/pt?post=8812"},{"taxonomy":"pipeline","embeddable":true,"href":"https:\/\/innovacore.group\/hu\/wp-json\/wp\/v2\/pipeline?post=8812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}