{"id":4752,"date":"2024-07-23T16:59:23","date_gmt":"2024-07-23T16:59:23","guid":{"rendered":"https:\/\/bydmb.com\/?page_id=4752"},"modified":"2026-10-13T12:42:25","modified_gmt":"2026-10-13T12:42:25","slug":"info","status":"publish","type":"page","link":"https:\/\/bydmb.com\/es\/info\/","title":{"rendered":"Information"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4752\" class=\"elementor elementor-4752\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05ae225 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"05ae225\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-395a148 elementor-widget elementor-widget-html\" data-id=\"395a148\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\n  TELA 3D COLGANTE CON F\u00cdSICA + EMPUJE CON EL RAT\u00d3N \/ DEDO\n  ----------------------------------------------------\n  Pega TODO este c\u00f3digo en un widget \"HTML\" de Elementor (p\u00e1gina About).\n  - Ajustes de ORDENADOR y de M\u00d3VIL por separado (m\u00e1s abajo, en CFG_DESKTOP y CFG_MOBILE).\n  - Bloquea el scroll de la p\u00e1gina (ordenador y m\u00f3vil) \u2014 solo afecta a la p\u00e1gina donde est\u00e9 este widget.\n  - La tela no bloquea clics (pointer-events: none).\n-->\n\n<style>\n  \/* \ud83d\udd12 BLOQUEO DE SCROLL (ordenador y m\u00f3vil) *\/\n  html, body {\n    overflow: hidden !important;\n    height: 100vh;\n    height: 100dvh;\n    overscroll-behavior: none;\n    touch-action: none;       \/* en m\u00f3vil, arrastrar el dedo mueve la tela y no la p\u00e1gina *\/\n  }\n\n  #cloth-canvas {\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    pointer-events: none;   \/* los clics atraviesan la tela *\/\n    z-index: 10;            \/* por debajo del header de Elementor (suele ser ~99). Si la tela tapa el men\u00fa, baja este n\u00famero; si queda detr\u00e1s del contenido, s\u00fabelo *\/\n  }\n<\/style>\n\n<canvas id=\"cloth-canvas\"><\/canvas>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n<script>\n(function () {\n\n  \/* =====================================================\n     \u2b07\u2b07\u2b07  CONFIGURACI\u00d3N \u2014 AQU\u00cd PEGAS EL LINK DE TU FOTO  \u2b07\u2b07\u2b07\n     ===================================================== *\/\n\n  \/\/ \ud83d\udc49 PEGA AQU\u00cd la URL de tu foto de la biblioteca de medios de WordPress\n  const IMAGE_URL = \"https:\/\/bydmb.com\/wp-content\/uploads\/2026\/10\/david-ballarin-graphic-designer-valencia.png\";\n\n  \/* \u2b06\u2b06\u2b06  FIN DEL LINK  \u2b06\u2b06\u2b06 *\/\n\n  \/\/ \ud83d\udcf1 A partir de qu\u00e9 ancho de pantalla (px) se usan los ajustes de M\u00d3VIL\n  const MOBILE_BREAKPOINT = 767;\n\n  \/\/ \u2699\ufe0f Ajustes comunes (f\u00edsica)\n  const CFG_BASE = {\n    topOffset: 0,           \/\/ 0 = cuelga desde el borde superior de la pantalla (queda detr\u00e1s del header)\n    cols: 28,               \/\/ resoluci\u00f3n horizontal (m\u00e1s = m\u00e1s suave, m\u00e1s pesado)\n    rows: 36,               \/\/ resoluci\u00f3n vertical\n    gravity: 900,           \/\/ ca\u00edda de la tela\n    damping: 1,             \/\/ 1 = no se frena nunca; 0.95 = se frena r\u00e1pido\n    stiffness: 10,          \/\/ iteraciones de rigidez (m\u00e1s = tela m\u00e1s tiesa)\n    returnSpring: 0.004,    \/\/ fuerza con la que vuelve a su sitio (m\u00e1s = vuelve antes)\n    wind: 0.8,              \/\/ movimiento sutil constante (0 = ninguno)\n    introDelay: 500,        \/\/ \u23f1\ufe0f milisegundos de espera antes de que caiga la tela (0 = cae al instante)\n    introDuration: 900      \/\/ \u23f1\ufe0f milisegundos que tarda en caer y colgarse\n  };\n\n  \/\/ \ud83d\udda5\ufe0f AJUSTES DE ORDENADOR\n  const CFG_DESKTOP = {\n    clothWidthRatio: 0.35,  \/\/ ANCHURA de la tela: fracci\u00f3n del ancho de la ventana (0.35 = 35%)\n    clothHeightRatio: 0.9,  \/\/ ALTURA de la tela: fracci\u00f3n del alto de la ventana\n    offsetX: 0,             \/\/ posici\u00f3n horizontal: 0 = centro, -0.3 = izquierda, 0.3 = derecha\n    mouseRadius: 140,       \/\/ radio de influencia del rat\u00f3n en px\n    mouseStrength: 1.5      \/\/ fuerza del empuje lateral (sube para apartarla m\u00e1s)\n  };\n\n  \/\/ \ud83d\udcf1 AJUSTES DE M\u00d3VIL\n  const CFG_MOBILE = {\n    clothWidthRatio: 0.75,  \/\/ ANCHURA de la tela en m\u00f3vil (0.75 = 75% del ancho de la pantalla)\n    clothHeightRatio: 0.78, \/\/ ALTURA de la tela en m\u00f3vil\n    offsetX: 0,\n    mouseRadius: 100,       \/\/ radio de influencia del dedo en px\n    mouseStrength: 2.0      \/\/ fuerza del empuje del dedo\n  };\n\n  const isMobile = () => window.innerWidth <= MOBILE_BREAKPOINT;\n  let CFG = Object.assign({}, CFG_BASE, isMobile() ? CFG_MOBILE : CFG_DESKTOP);\n\n  \/* ---------- \ud83d\udd12 Refuerzo del bloqueo de scroll en m\u00f3vil (iOS\/Safari) ---------- *\/\n  document.addEventListener(\"touchmove\", function (e) { e.preventDefault(); }, { passive: false });\n  window.addEventListener(\"scroll\", function () { window.scrollTo(0, 0); }, { passive: true });\n\n  const canvas = document.getElementById(\"cloth-canvas\");\n  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n  renderer.outputEncoding = THREE.sRGBEncoding;\n  renderer.setClearColor(0x000000, 0);\n\n  const scene = new THREE.Scene();\n  const FOV = 30;\n  const camera = new THREE.PerspectiveCamera(FOV, 1, 1, 6000);\n\n  \/\/ Luces para que se vean los pliegues\n  scene.add(new THREE.AmbientLight(0xffffff, 0.75));\n  const dir = new THREE.DirectionalLight(0xffffff, 0.7);\n  dir.position.set(-300, 400, 700);\n  scene.add(dir);\n\n  let W = window.innerWidth, H = window.innerHeight;\n\n  function resizeCamera() {\n    W = window.innerWidth; H = window.innerHeight;\n    renderer.setSize(W, H, false);\n    camera.aspect = W \/ H;\n    \/\/ la c\u00e1mara se coloca para que 1 unidad del mundo = 1 p\u00edxel en el plano z = 0\n    camera.position.set(0, 0, (H \/ 2) \/ Math.tan((FOV * Math.PI \/ 180) \/ 2));\n    camera.updateProjectionMatrix();\n  }\n  resizeCamera();\n\n  \/* ---------- Textura (tu foto o una de prueba) ---------- *\/\n  function fallbackTexture() {\n    const c = document.createElement(\"canvas\");\n    c.width = 512; c.height = 780;\n    const g = c.getContext(\"2d\");\n    const grad = g.createLinearGradient(0, 0, 512, 780);\n    grad.addColorStop(0, \"#5ee07a\"); grad.addColorStop(1, \"#1b3d28\");\n    g.fillStyle = grad; g.fillRect(0, 0, 512, 780);\n    g.fillStyle = \"rgba(255,255,255,.85)\";\n    g.font = \"bold 44px sans-serif\"; g.textAlign = \"center\";\n    g.fillText(\"TU FOTO AQU\u00cd\", 256, 380);\n    g.font = \"24px sans-serif\";\n    g.fillText(\"(pon IMAGE_URL en el c\u00f3digo)\", 256, 424);\n    return c;\n  }\n\n  let currentTexture = null, currentAspect = 1;\n\n  function startWithTexture(tex, aspect) {\n    tex.encoding = THREE.sRGBEncoding;\n    tex.anisotropy = 8;\n    currentTexture = tex; currentAspect = aspect;\n    buildCloth(true);   \/\/ true = con animaci\u00f3n de ca\u00edda al entrar\n    requestAnimationFrame(loop);\n  }\n\n  \/\/ Equivale a \"object-fit: cover\": la foto rellena la tela sin estirarse (recorta lo que sobre)\n  function applyCover(tex, imgAspect, clothAspect) {\n    tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping;\n    if (imgAspect > clothAspect) {\n      tex.repeat.set(clothAspect \/ imgAspect, 1);\n      tex.offset.set((1 - tex.repeat.x) \/ 2, 0);\n    } else {\n      tex.repeat.set(1, imgAspect \/ clothAspect);\n      tex.offset.set(0, (1 - tex.repeat.y) \/ 2);\n    }\n    tex.needsUpdate = true;\n  }\n\n  if (IMAGE_URL && IMAGE_URL.trim() !== \"\") {\n    new THREE.TextureLoader().setCrossOrigin(\"anonymous\").load(\n      IMAGE_URL,\n      (tex) => startWithTexture(tex, tex.image.width \/ tex.image.height),\n      undefined,\n      () => { console.warn(\"No se pudo cargar IMAGE_URL, uso textura de prueba\"); const t = new THREE.CanvasTexture(fallbackTexture()); startWithTexture(t, 512 \/ 780); }\n    );\n  } else {\n    const t = new THREE.CanvasTexture(fallbackTexture());\n    startWithTexture(t, 512 \/ 780);\n  }\n\n  \/* ---------- Rat\u00f3n \/ t\u00e1ctil ---------- *\/\n  const mouse = { x: -9999, y: -9999, px: -9999, py: -9999, vx: 0, vy: 0, active: false };\n  function setMouse(e) {\n    const nx = e.clientX - W \/ 2;\n    const ny = H \/ 2 - e.clientY;\n    if (!mouse.active) { mouse.px = nx; mouse.py = ny; }\n    mouse.x = nx; mouse.y = ny; mouse.active = true;\n  }\n  function releaseMouse() { mouse.active = false; }\n  window.addEventListener(\"pointerdown\", setMouse, { passive: true });\n  window.addEventListener(\"pointermove\", setMouse, { passive: true });\n  window.addEventListener(\"pointerup\", function (e) { if (e.pointerType !== \"mouse\") releaseMouse(); }, { passive: true });\n  window.addEventListener(\"pointercancel\", releaseMouse, { passive: true });\n  window.addEventListener(\"pointerleave\", releaseMouse);\n  window.addEventListener(\"blur\", releaseMouse);\n\n  \/* ---------- Tela (simulaci\u00f3n Verlet) ---------- *\/\n  let P = [], C = [], mesh = null, geo = null, clothW, clothH, cols, rows;\n  let intro = null;   \/\/ estado de la animaci\u00f3n de ca\u00edda\n\n  function buildCloth(animate) {\n    \/\/ si ya hab\u00eda una tela, la quitamos (para recalcular tama\u00f1os al girar\/redimensionar)\n    if (mesh) {\n      scene.remove(mesh);\n      geo.dispose();\n      mesh.material.dispose();\n      mesh = null;\n    }\n\n    CFG = Object.assign({}, CFG_BASE, isMobile() ? CFG_MOBILE : CFG_DESKTOP);\n\n    cols = CFG.cols; rows = CFG.rows;\n    clothW = W * CFG.clothWidthRatio;\n    clothH = H * CFG.clothHeightRatio;\n    applyCover(currentTexture, currentAspect, clothW \/ clothH);\n\n    const left = -clothW \/ 2 + CFG.offsetX * W;\n    const top = H \/ 2 - CFG.topOffset + 6; \/\/ +6px para que el borde superior quede oculto\n    const dx = clothW \/ cols, dy = clothH \/ rows;\n\n    P = [];\n    for (let j = 0; j <= rows; j++) {\n      for (let i = 0; i <= cols; i++) {\n        const x = left + i * dx, y = top - j * dy;\n        \/\/ peque\u00f1a onda inicial para que no nazca perfectamente plana\n        const z = Math.sin(i * 0.5) * 2;\n        P.push({ x, y, z, px: x, py: y, pz: z, rx: x, pin: j === 0 });\n      }\n    }\n\n    C = [];\n    const idx = (i, j) => j * (cols + 1) + i;\n    const link = (a, b) => {\n      const A = P[a], B = P[b];\n      C.push({ a, b, d: Math.hypot(A.x - B.x, A.y - B.y, A.z - B.z) });\n    };\n    for (let j = 0; j <= rows; j++) {\n      for (let i = 0; i <= cols; i++) {\n        if (i < cols) link(idx(i, j), idx(i + 1, j));             \/\/ horizontal\n        if (j < rows) link(idx(i, j), idx(i, j + 1));             \/\/ vertical\n        if (i < cols && j < rows) {                                \/\/ cizalla\n          link(idx(i, j), idx(i + 1, j + 1));\n          link(idx(i + 1, j), idx(i, j + 1));\n        }\n        if (i < cols - 1) link(idx(i, j), idx(i + 2, j));         \/\/ flexi\u00f3n\n        if (j < rows - 1) link(idx(i, j), idx(i, j + 2));\n      }\n    }\n\n    \/\/ \ud83c\udfac Animaci\u00f3n de entrada: la tela empieza fuera de pantalla (arriba) y cae hasta quedar colgada\n    intro = null;\n    if (animate) {\n      const shift = clothH + 60;\n      for (let n = 0; n < P.length; n++) { P[n].y += shift; P[n].py += shift; }\n      intro = { t0: null, shift: shift, top: top, delay: CFG.introDelay \/ 1000, dur: Math.max(CFG.introDuration, 1) \/ 1000 };\n    }\n\n    geo = new THREE.PlaneGeometry(clothW, clothH, cols, rows);\n    const mat = new THREE.MeshStandardMaterial({\n      map: currentTexture,\n      side: THREE.DoubleSide,\n      roughness: 0.92,\n      metalness: 0.0\n    });\n    mesh = new THREE.Mesh(geo, mat);\n    mesh.frustumCulled = false;\n    scene.add(mesh);\n  }\n\n  function simulate(dt, time) {\n    const g = CFG.gravity * dt * dt;\n    const R = CFG.mouseRadius;\n\n    \/\/ velocidad del rat\u00f3n desde el \u00faltimo paso\n    if (mouse.active) {\n      mouse.vx = mouse.x - mouse.px; mouse.vy = mouse.y - mouse.py;\n      mouse.px = mouse.x; mouse.py = mouse.y;\n    } else { mouse.vx = mouse.vy = 0; }\n    const speed = Math.min(Math.hypot(mouse.vx, mouse.vy), 60);\n\n    \/\/ \ud83c\udfac mueve el borde superior (anclaje) desde fuera de pantalla hasta su sitio; el resto cae tras \u00e9l\n    if (intro) {\n      if (intro.t0 === null) intro.t0 = time;\n      const elapsed = time - intro.t0 - intro.delay;\n      if (elapsed >= 0) {\n        const k = Math.min(elapsed \/ intro.dur, 1);\n        const e = 1 - Math.pow(1 - k, 3);               \/\/ easeOutCubic\n        const yPin = intro.top + intro.shift * (1 - e);\n        for (let n = 0; n <= cols; n++) { P[n].y = yPin; P[n].py = yPin; }\n        if (k >= 1) intro = null;\n      }\n    }\n\n    for (let n = 0; n < P.length; n++) {\n      const p = P[n];\n      if (p.pin) continue;\n\n      let vx = (p.x - p.px) * CFG.damping;\n      let vy = (p.y - p.py) * CFG.damping;\n      let vz = (p.z - p.pz) * CFG.damping;\n      p.px = p.x; p.py = p.y; p.pz = p.z;\n\n      \/\/ gravedad + viento suave\n      vy -= g;\n      vz += Math.sin(time * 0.9 + p.y * 0.01 + p.x * 0.006) * 0.015 * CFG.wind;\n\n      \/\/ muelles suaves para que la tela vuelva a su sitio (plano z = 0 y posici\u00f3n x original)\n      vz -= p.z * 0.0035;\n      vx -= (p.x - p.rx) * CFG.returnSpring;\n\n      \/\/ empuje lateral del rat\u00f3n\/dedo: como pasar la mano por el lado de la tela\n      if (mouse.active) {\n        const ddx = p.x - mouse.x, ddy = p.y - mouse.y;\n        const d = Math.hypot(ddx, ddy);\n        if (d < R) {\n          const f = Math.pow(1 - d \/ R, 1.5);\n          vx += mouse.vx * 0.28 * f * CFG.mouseStrength;   \/\/ la aparta hacia donde mueves el rat\u00f3n\n          vy += mouse.vy * 0.05 * f * CFG.mouseStrength;   \/\/ casi nada en vertical\n          vz += (Math.random() - 0.5) * 0.02 * speed * f;  \/\/ un pel\u00edn de ondulaci\u00f3n al rozarla\n        }\n      }\n\n      p.x += vx; p.y += vy; p.z += vz;\n    }\n\n    \/\/ restricciones de distancia\n    for (let it = 0; it < CFG.stiffness; it++) {\n      for (let k = 0; k < C.length; k++) {\n        const c = C[k], A = P[c.a], B = P[c.b];\n        const dx = B.x - A.x, dy = B.y - A.y, dz = B.z - A.z;\n        const dist = Math.hypot(dx, dy, dz) || 0.0001;\n        const diff = (dist - c.d) \/ dist;\n        const wa = A.pin ? 0 : (B.pin ? 1 : 0.5);\n        const wb = B.pin ? 0 : (A.pin ? 1 : 0.5);\n        A.x += dx * diff * wa; A.y += dy * diff * wa; A.z += dz * diff * wa;\n        B.x -= dx * diff * wb; B.y -= dy * diff * wb; B.z -= dz * diff * wb;\n      }\n    }\n  }\n\n  function updateGeometry() {\n    const pos = geo.attributes.position;\n    for (let n = 0; n < P.length; n++) pos.setXYZ(n, P[n].x, P[n].y, P[n].z);\n    pos.needsUpdate = true;\n    geo.computeVertexNormals();\n  }\n\n  \/* ---------- Bucle ---------- *\/\n  let last = performance.now(), acc = 0;\n  function loop(now) {\n    const frame = Math.min((now - last) \/ 1000, 0.05);\n    last = now; acc += frame;\n    const step = 1 \/ 60;\n    while (acc >= step) { simulate(step, now \/ 1000); acc -= step; }\n    if (mesh) {\n      updateGeometry();\n      renderer.render(scene, camera);\n    }\n    requestAnimationFrame(loop);\n  }\n\n  \/* ---------- Redimensionar \/ girar el m\u00f3vil ---------- *\/\n  let lastW = window.innerWidth, lastH = window.innerHeight, resizeTimer = null;\n  window.addEventListener(\"resize\", function () {\n    resizeCamera();\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(function () {\n      \/\/ recalcula la tela si cambia el ancho (o el alto de forma notable, p. ej. al girar el m\u00f3vil)\n      if (Math.abs(window.innerWidth - lastW) > 2 || Math.abs(window.innerHeight - lastH) > 150) {\n        lastW = window.innerWidth; lastH = window.innerHeight;\n        if (currentTexture) buildCloth(false);   \/\/ al redimensionar, sin animaci\u00f3n de ca\u00edda\n      }\n    }, 200);\n  });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d80da5 elementor-widget elementor-widget-heading\" data-id=\"5d80da5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">David M Ballar\u00edn \u2013 Graphic Designer in Valencia<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34bbc7e e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"34bbc7e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-12d1239 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"12d1239\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-925e7f4 elementor-widget elementor-widget-heading\" data-id=\"925e7f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">David M Ballar\u00edn is a graphic designer based in Valencia, Spain, with over 5 years of experience in branding, 2D &amp; 3D animation, web and editorial design. He creates brand identities and applies them across digital and print to help businesses reach their growth goals.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4be276c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"4be276c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b424b0d e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"b424b0d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b368a18 elementor-widget elementor-widget-heading\" data-id=\"b368a18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Services<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c95fa4 titulo-effect elementor-widget elementor-widget-text-editor\" data-id=\"7c95fa4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Branding<br \/>2D &amp; 3D Animation<br \/>Web design<br \/>Editorial Design<br \/>Apparel Design<br \/>Packaging<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34f3db9 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"34f3db9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdde360 elementor-widget elementor-widget-heading\" data-id=\"fdde360\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Clients<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78bff8c titulo-effect elementor-widget elementor-widget-text-editor\" data-id=\"78bff8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/melcomunicacio.es\/\">Mel Comunicaci\u00f3<\/a><br \/><a href=\"https:\/\/bettogarcia.es\/\">Betto Garc\u00eda<\/a><br \/><a href=\"https:\/\/ramonesteve.com\/?gad_source=1&amp;gad_campaignid=1113047238&amp;gbraid=0AAAAADk48xF0Uj1UNbjpbMR6T5bs-lCcC&amp;gclid=CjwKCAjwgeLHBhBuEiwAL5gNEVdb1xCkEaerbJgyRPXXiZxDLv-K4MSGdUuQ78u9Cx7ernjNR9_VFRoCOhYQAvD_BwE\">Ram\u00f3n Esteve Estudio<\/a><br \/><a href=\"https:\/\/www.instagram.com\/soymarcardona\/\">Mar Cardona<\/a><br \/><a href=\"https:\/\/www.complicit.studio\/\">Complicit Studio<\/a><br \/>Mario Alcal\u00e1<br \/><a href=\"https:\/\/jakiens.com\/\">Jakiens Production House<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-11188fe e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"11188fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d12e224 elementor-widget elementor-widget-heading\" data-id=\"d12e224\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Contact<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f79c9b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"4f79c9b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a750a4c titulo-effect elementor-widget elementor-widget-text-editor\" data-id=\"a750a4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.instagram.com\/by.dmb\/\">IT. @by.dmb<\/a>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de2b747 titulo-effect elementor-widget elementor-widget-text-editor\" data-id=\"de2b747\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"mailto: info@bydmb.com\">M. info@bydmb.com<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hi, I&#8217;m a graphic designer based in Valencia with more than 5 years of experience in visual art and brand design.<\/p>","protected":false},"author":1,"featured_media":7501,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4752","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Info &amp; Studio | David M Ballar\u00edn \u2014 Design &amp; Art Direction<\/title>\n<meta name=\"description\" content=\"About David M Ballar\u00edn, graphic designer and art director in Valencia. Services include brand identity, art direction, and visual strategy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bydmb.com\/es\/info\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Info &amp; Studio | David M Ballar\u00edn \u2014 Design &amp; Art Direction\" \/>\n<meta property=\"og:description\" content=\"About David M Ballar\u00edn, graphic designer and art director in Valencia.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bydmb.com\/es\/info\/\" \/>\n<meta property=\"og:site_name\" content=\"David M Ballar\u00edn\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-13T12:42:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/07\/TEAM-10-VERDE-839x1024.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"839\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Info &amp; Studio | David M Ballar\u00edn \u2014 Design &amp; Art Direction\" \/>\n<meta name=\"twitter:description\" content=\"About David M Ballar\u00edn, graphic designer and art director in Valencia.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/07\/TEAM-10-VERDE-scaled.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/info\\\/\",\"url\":\"https:\\\/\\\/bydmb.com\\\/info\\\/\",\"name\":\"Info & Studio | David M Ballar\u00edn \u2014 Design & Art Direction\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/info\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/info\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/david-ballarin-graphic-designer-valencia.png\",\"datePublished\":\"2024-07-23T16:59:23+00:00\",\"dateModified\":\"2026-10-13T12:42:25+00:00\",\"description\":\"About David M Ballar\u00edn, graphic designer and art director in Valencia. Services include brand identity, art direction, and visual strategy.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/info\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bydmb.com\\\/info\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/info\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/david-ballarin-graphic-designer-valencia.png\",\"contentUrl\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/david-ballarin-graphic-designer-valencia.png\",\"width\":712,\"height\":1075},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/info\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/bydmb.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Information\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/#website\",\"url\":\"https:\\\/\\\/bydmb.com\\\/\",\"name\":\"byDMB\",\"description\":\"Portfolio ByDMB\",\"publisher\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/#\\\/schema\\\/person\\\/782ed7a7ebdf95447d3d182355446533\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bydmb.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/bydmb.com\\\/#\\\/schema\\\/person\\\/782ed7a7ebdf95447d3d182355446533\",\"name\":\"bydavidmartinez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\",\"url\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\",\"contentUrl\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\",\"width\":1080,\"height\":1080,\"caption\":\"bydavidmartinez\"},\"logo\":{\"@id\":\"https:\\\/\\\/bydmb.com\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/Branding-BYDMB-2025-12.png\"},\"sameAs\":[\"https:\\\/\\\/bydmb.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Info & Studio | David M Ballar\u00edn \u2014 Design & Art Direction","description":"About David M Ballar\u00edn, graphic designer and art director in Valencia. Services include brand identity, art direction, and visual strategy.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bydmb.com\/es\/info\/","og_locale":"es_ES","og_type":"article","og_title":"Info & Studio | David M Ballar\u00edn \u2014 Design & Art Direction","og_description":"About David M Ballar\u00edn, graphic designer and art director in Valencia.","og_url":"https:\/\/bydmb.com\/es\/info\/","og_site_name":"David M Ballar\u00edn","article_modified_time":"2026-10-13T12:42:25+00:00","og_image":[{"width":839,"height":1024,"url":"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/07\/TEAM-10-VERDE-839x1024.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"Info & Studio | David M Ballar\u00edn \u2014 Design & Art Direction","twitter_description":"About David M Ballar\u00edn, graphic designer and art director in Valencia.","twitter_image":"https:\/\/bydmb.com\/wp-content\/uploads\/2024\/07\/TEAM-10-VERDE-scaled.jpg","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bydmb.com\/info\/","url":"https:\/\/bydmb.com\/info\/","name":"Info & Studio | David M Ballar\u00edn \u2014 Design & Art Direction","isPartOf":{"@id":"https:\/\/bydmb.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bydmb.com\/info\/#primaryimage"},"image":{"@id":"https:\/\/bydmb.com\/info\/#primaryimage"},"thumbnailUrl":"https:\/\/bydmb.com\/wp-content\/uploads\/2026\/10\/david-ballarin-graphic-designer-valencia.png","datePublished":"2024-07-23T16:59:23+00:00","dateModified":"2026-10-13T12:42:25+00:00","description":"About David M Ballar\u00edn, graphic designer and art director in Valencia. Services include brand identity, art direction, and visual strategy.","breadcrumb":{"@id":"https:\/\/bydmb.com\/info\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bydmb.com\/info\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/bydmb.com\/info\/#primaryimage","url":"https:\/\/bydmb.com\/wp-content\/uploads\/2026\/10\/david-ballarin-graphic-designer-valencia.png","contentUrl":"https:\/\/bydmb.com\/wp-content\/uploads\/2026\/10\/david-ballarin-graphic-designer-valencia.png","width":712,"height":1075},{"@type":"BreadcrumbList","@id":"https:\/\/bydmb.com\/info\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/bydmb.com\/"},{"@type":"ListItem","position":2,"name":"Information"}]},{"@type":"WebSite","@id":"https:\/\/bydmb.com\/#website","url":"https:\/\/bydmb.com\/","name":"byDMB","description":"Portfolio ByDMB","publisher":{"@id":"https:\/\/bydmb.com\/#\/schema\/person\/782ed7a7ebdf95447d3d182355446533"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bydmb.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/bydmb.com\/#\/schema\/person\/782ed7a7ebdf95447d3d182355446533","name":"bydavidmartinez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png","url":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png","contentUrl":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png","width":1080,"height":1080,"caption":"bydavidmartinez"},"logo":{"@id":"https:\/\/bydmb.com\/wp-content\/uploads\/2025\/01\/Branding-BYDMB-2025-12.png"},"sameAs":["https:\/\/bydmb.com"]}]}},"_links":{"self":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages\/4752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/comments?post=4752"}],"version-history":[{"count":193,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages\/4752\/revisions"}],"predecessor-version":[{"id":7567,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/pages\/4752\/revisions\/7567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/media\/7501"}],"wp:attachment":[{"href":"https:\/\/bydmb.com\/es\/wp-json\/wp\/v2\/media?parent=4752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}