HTML

Template HTML

Aqui se muestra el template html mencionado en https://docs.planisys.net/dmds/ftp.html#ejemplo-csv-activo

Puede copiar y pegar este bloque en cualquier editor WYSIWYG y modificarlo de acuerdo a sus necesidades.

Solo debe tener en cuenta que cada seccion que agregue en vertical, debe ser o una nueva tabla, o una row (<tr></tr>) de una tabla existente.

Para lograr mayores subdivisiones, puede incluir tablas dentro de tablas.

En las piezas de e-mail no se utiliza div de HTML, sino table.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Email Subject</title>
    <style>
        /* Reset styles to ensure consistency across different email clients */
        body, table, td, div {
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            color: #333333;
        }
        table {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }
        a {
            color: #007bff;
            text-decoration: underline;
        }
        @media screen and (max-width: 600px) {
            /* Mobile-specific styles */
            table[class="container"] {
                width: 100% !important;
            }
            td[class="stack-column"], td[class="stack-column-center"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            td[class="stack-column-center"] {
                text-align: center !important;
            }
            td[class="stack-column-top"], td[class="stack-column-center-top"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
                text-align: left !important;
            }
            div[class="email-button"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 0;">
    <!-- Email content goes here -->
    <table class="container" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="max-width: 600px; margin: 0 auto;">
        <tr>
            <td align="left" valign="top" style="padding: 20px; background-color: #f7f7f7;">
                <!-- Header -->
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td align="left" valign="top">
                            <img src="https://planisys.net/static/img/planisys/planisys-horizontal.png" alt="Planisys" width="497" height="169" style="display: block; margin-bottom: 10px;">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" style="padding: 20px; background-color: #ffffff;">
                <!-- Main content -->
                <h1 style="color: #333333; font-size: 24px; margin-bottom: 20px;">Hola XYZNOMBREXYZ XYZAPELLIDOXYZ!</h1>
                <p style="margin-bottom: 20px;">&#x1F389; Exciting News! Nueva versi&#xF3;n  &#x1F680; disponible para <strong>Free-Trial</strong> &#x1F388;&#x1F635;</p>
                <p style="margin-bottom: 20px;">Please click <a href="https://www.planisys.net/pdns">here</a> for more information</p>
                <p style="margin-bottom: 20px;">Best regards,</p>
                <p style="margin-bottom: 20px;">Planisys - Cibersecurity</p>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" style="padding: 20px; background-color: #f7f7f7;">
                <!-- Footer -->
                <p style="margin-bottom: 10px; font-size: 12px;">
                    Planisys 2023 &copy; all rights reserved.<br>
                    801 Brickell Ave. Suite #800<br>
                    Miami FL, 33131<br>
                    <a href=XYZDESUSCRIPCIONXYZ style="color: #007bff; text-decoration: underline;">Desuscribirse</a> de nuestros mails.<br>
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

Template MJML

Tambien se puede utilizar el sitio https://mjml.io para armar piezas de mail, ejemplo de template:

<mjml>
<mj-style inline="inline">
.body-section {
-webkit-box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
}
</mj-style>
<mj-style inline="inline">
.text-link {
color: #5e6ebf
}
</mj-style>
<mj-style inline="inline">
.footer-link {
color: #888888
}
</mj-style>

<mj-body>
<mj-section>
  <mj-column width="100%">

    <mj-image width="200px" src="https://planisys.net/static/img/planisys/planisys-horizontal.png">
    </mj-image>
    <mj-divider border-color="grey"></mj-divider>
  </mj-column>

    <mj-column width="100%">
    <mj-text font-size="18px" color="#F45E43" font-family="helvetica">Estimado XYZNOMBREXYZ<br></br>
    </mj-text>

    <mj-text color="#637381" font-size="16px">
      <ul>
        <li style="padding-bottom: 20px"><strong>Lorem ipsum dolor:</strong> Sit amet consectetur adipisicing elit.</li>
        <li style="padding-bottom: 20px"><strong>Quia a assumenda nulla:</strong> Repudiandae accusamus obcaecati voluptatibus accusantium perspiciatis.</li>
        <li><strong>Tempora culpa porro labore:</strong> In quisquam optio quibusdam fugiat perspiciatis nobis.</li>
      </ul>
    </mj-text>

    <mj-button background-color="#5e6ebf" align="center" color="#ffffff" font-size="17px" font-weight="bold" href="https://google.com" width="300px">
      Free Trial
    </mj-button>

    <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="center">
        <mj-social-element name="facebook" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
        <mj-social-element name="google" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
        <mj-social-element name="twitter" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
        <mj-social-element name="linkedin" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
      </mj-social>
     <mj-divider border-color="grey" align="center"></mj-divider>
     <mj-text font-size="12px" color="black" font-family="Arial" align="center">
      Planisys 2023 &copy; all rights reserved<br></br>
      801 Brickell Ave. Suite #800<br></br>
      Miami FL, 33131<br></br>
      <a class="text-link" href="XYZDESUSCRIPCIONXYZ">Desuscribirse</a>
    </mj-text>

    </mj-column>

    </mj-body>
    </mjml>

Template HTML correspondiente a MJML

El sitio mjml.io nos permite la traducción a HTML del template MJML anterior. El código HTML se puede acceder en https://imagenes.planisys.com/Planisys-Template-MJML.html

La vista de esta URL en un celular/móvil es:

Y ésta es la vista desktop

Letras con acento - Unicode

á - á (Lowercase «a» with acute accent)

é - é (Lowercase «e» with acute accent)

í - í (Lowercase «i» with acute accent)

ó - ó (Lowercase «o» with acute accent)

ú - ú (Lowercase «u» with acute accent)

ü - ü (Lowercase «u» with umlaut/diaeresis)

ñ - ñ (Lowercase «n» with tilde)

Ñ - Ñ (Uppercase «N» with tilde)

Emojis - Unicode

Antes que nada, debe conocer el código Unicode de los Emojis, de la pagina https://unicode.org/emoji/charts/emoji-list.html.

P.ej. 😵

Aqui tiene mas ejemplos

😊 - Smiling Face with Smiling Eyes: 😊

😂 - Face with Tears of Joy: 😂

🥰 - Smiling Face with Hearts: 🥰

😍 - Smiling Face with Heart-Eyes: 😍

🤩 - Star-Struck: 🤩

🥳 - Partying Face: 🥳

😎 - Smiling Face with Sunglasses: 😎

🤗 - Hugging Face: 🤗

🤔 - Thinking Face: 🤔

😴 - Sleeping Face: 😴

🤢 - Nauseated Face: 🤢

🥺 - Pleading Face: 🥺

😱 - Face Screaming in Fear: 😱

🥶 - Cold Face: 🥶

😇 - Smiling Face with Halo: 😇

😈 - Smiling Face with Horns: 😈

🥴 - Woozy Face: 🥴

🤯 - Exploding Head: 🤯

🤬 - Face with Symbols on Mouth: 🤬

🤮 - Face Vomiting: 🤮

💻 - Laptop Computer: 💻

🖥️ - Desktop Computer: 🖥

📱 - Mobile Phone: 📱

📟 - Pager: 📟

⌨️ - Keyboard: ⌨

🖱️ - Computer Mouse: 🖱

🖲️ - Trackball: 🖲

🕹️ - Joystick: 🕹

🗜️ - Clamp: 🗜

📷 - Camera: 📷

🎥 - Movie Camera: 🎥

📹 - Video Camera: 📹

📼 - Videocassette: 📼

📡 - Satellite Antenna: 📡

📺 - Television: 📺

🎮 - Video Game Controller: 🎮

🎧 - Headphone: 🎧

🔋 - Battery: 🔋

🔌 - Electric Plug: 🔌

⚡ - High Voltage Sign: ⚡

➡️ - Right Arrow: ➡

⬅️ - Left Arrow: ⬅

⬆️ - Up Arrow: ⬆

⬇️ - Down Arrow: ⬇

↔️ - Left-Right Arrow: ↔

↕️ - Up-Down Arrow: ↕

↖️ - Up-Left Arrow: ↖

↗️ - Up-Right Arrow: ↗

↘️ - Down-Right Arrow: ↘

↙️ - Down-Left Arrow: ↙

↩️ - Leftwards Arrow with Hook: ↩

↪️ - Rightwards Arrow with Hook: ↪

🔀 - Shuffle Tracks Button: 🔀

🔁 - Repeat Button: 🔁

🔂 - Repeat Single Button: 🔂

🔄 - Counterclockwise Arrows Button: 🔄

🔼 - Upwards Button: 🔼

⏫ - Fast Up Button: ⏫

🔽 - Downwards Button: 🔽

⏬ - Fast Down Button: ⏬

🚗 - Car: 🚗

🚕 - Taxi: 🚕

🚙 - Sport Utility Vehicle: 🚙

🚚 - Delivery Truck: 🚚

🚛 - Articulated Lorry: 🚛

🚜 - Tractor: 🚜

🏍️ - Motorcycle: 🏍

🛵 - Motor Scooter: 🛵

🚲 - Bicycle: 🚲

🛴 - Kick Scooter: 🛴

🛺 - Auto Rickshaw: 🛺

🚃 - Railway Car: 🚃

🚄 - High-Speed Train: 🚄

🚅 - Bullet Train: 🚅

🚈 - Light Rail: 🚈

🚞 - Mountain Railway: 🚞

🚆 - Train: 🚆

🚇 - Metro: 🚇

🚉 - Station: 🚉

✈️ - Airplane: ✈

🌏 - Earth Globe Asia-Australia: 🌏

🌎 - Earth Globe Americas: 🌎

🌐 - Globe with Meridians: 🌐

🌑 - New Moon: 🌑

🌒 - Waxing Crescent Moon: 🌒

🌓 - First Quarter Moon: 🌓

🌔 - Waxing Gibbous Moon: 🌔

🌕 - Full Moon: 🌕

🌖 - Waning Gibbous Moon: 🌖

🌗 - Last Quarter Moon: 🌗

🌘 - Waning Crescent Moon: 🌘

🌙 - Crescent Moon: 🌙

🌚 - New Moon Face: 🌚

🌛 - First Quarter Moon Face: 🌛

🌜 - Last Quarter Moon Face: 🌜

🌝 - Full Moon Face: 🌝

🌞 - Sun with Face: 🌞

🌟 - Glowing Star: 🌟

🌠 - Shooting Star: 🌠

🌌 - Milky Way: 🌌

📧 - E-Mail: 📧

📨 - Incoming Envelope: 📨

📩 - Envelope with Arrow: 📩

📤 - Outbox Tray: 📤

📥 - Inbox Tray: 📥

📦 - Package: 📦

📫 - Closed Mailbox with Raised Flag: 📫

📪 - Closed Mailbox with Lowered Flag: 📪

📬 - Open Mailbox with Raised Flag: 📬

📭 - Open Mailbox with Lowered Flag: 📭

📮 - Postbox: 📮

🗳️ - Ballot Box with Ballot: 🗳

🗂️ - Card Index Dividers: 🗂

🗒️ - Spiral Notepad: 🗒

🗓️ - Spiral Calendar: 🗓

📋 - Clipboard: 📋

📝 - Memo: 📝

📜 - Scroll: 📜

📑 - Bookmark Tabs: 📑

🔒 - Locked: 🔒

🔓 - Unlocked: 🔓

🛡️ - Shield: 🛡

🚪 - Door: 🚪

🗝️ - Key: 🗝

🕳️ - Hole: 🕳

🕷️ - Spider: 🕷

🕸️ - Spider Web: 🕸

🌐 - Globe with Meridians: 🌐

🌐 - Earth Globe Americas: 🌎

🌐 - Earth Globe Asia-Australia: 🌏

📡 - Satellite Antenna: 📡

🌐 - Globe with Meridians: 🌐

📶 - Antenna Bars: 📶

📱 - Mobile Phone: 📱

📲 - Mobile Phone with Arrow: 📲

🛡️ - Shield: 🛡

🚫 - Prohibited: ⛔

⚠️ - Warning: ⚠

🤖 - Robot Face: 🤖

📥 - Inbox Tray: 📥

📤 - Outbox Tray: 📤