Empezado en el maquetado de Emails con HTML y ¿Tablas? PT 1

Lizeth Garcia — Sat, 27 Mar 2021 03:53:39 +0000

Estos días por el trabajo he empezado a introducirme en el email Marketing y a codificar todo para el. Empecé como todos con plantillas y documentando me pero había estado en un error gradual:

Yo tenía un año sin trabajar con código y estaba oxidada y no entendía nada de lo que "estaba editando" Así que me propuse como meta volver a trabajar con ello y pues, aprovecho que estoy aquí para narrar mis experiencias en el retorno al código.

Ahora empecemos en el maravilloso mundo del Email Coding.

Ahora la pregunta más importante de toda.

¿Cómo empiezo?

Todo lo que he "leído" me dice que debo escribir css de manera "inline".

¿Cómo en los viejos tiempos?
¡Así es!

¿Que es el CSS inline? (Desde mis propias palabras)
Prácticamente escribes el css en tu HTML

<p style="margin: 0;">

Les puede explotar el cerebro a muchos cuando están casados con las clases y los ID.

Todo bien hasta aquí. No es como si no hubiera escrito inline css en mis días mozos en la universidad/preparatoria.

Así que en ese punto estoy "familiarizada".

Ahora hablemos de la cosa que tengo que hablar en esta publicación y por la cual me digne a escribir esto en base a este super poderoso Tutorial y el cual voy a estar analizando porque no tengo amigos con quien hablar de esto y necesito hablarlo con alguien :

Las tablas

Las tablas van a ser tus mejores amigas.

La etiqueta tabla se compone de lo siguiente:
<table> </table>

La estructura en HTML dentro del body se vería así:

<body>
<table>
<tr>
<td>

AQUI VA TU CONTENIDO DE TU EMAIL

</td>
</tr>
</table>
</body>

¿Cómo juego con table?

Ya conociendo la estructura básica de las tablas nos pasamos directamente al código.

Primero, esto va a ser escrito en HTML 4.0 transicional o en XHTML debido a que la 'renderizarse' de tantas maneras en diferentes clientes de correo.

Después del body (poderoso) empezamos con nuestra tabla principal.

Esta tabla va a ser un contenedor de todas las tablas que usaremos en el resto de nuestra estructura.

Aquí llega el punto que más me hace explotar la cabeza.

Escribir la primera tabla que va a contener "Objetos"

<body>
<table>
<tr>
<td>

  <!-- PRIMERA TABLA -->
  <table>
  <tr>
  <td>
     <p> hola mundo </p>
  </td>
  </tr>
  </table>

</td>
</tr>
</table>
</body>

Prácticamente con el código anterior ya tenemos el esqueleto básico de nuestro HTML (Sin CSS). Pero seguiremos en la siguiente parte que yo tengo que procesar como explicarme y explicarles lo que yo entendí.

Nos leemos luego en mas aventuras con el código.

Sobre Mi

Lizeth Garcia — Sun, 14 Mar 2021 21:24:27 +0000

Hola! Soy Liz (o Lizeth y todos me conocen como Miss Alpaca).
Vivo en la frontera de México con USA y trabajo como diseñadora web y gráfica

Conocí el desarrollo web (hacer paginas) cuando tenia 16 años y empecé a editar plantillas para blogs sobre anime y manga. Estudie ingeniería en sistemas y ahí empecé a trabajar más mi lógica pero nunca profundice como tal. Aprendí el uso de wordpress y de programas de diseño (PS/Illustrator) y aprendí a maquetar en Illustrator (No, no uso Adobe XD ni Sketch) y pasar a código usando frameworks (boostrap/materialice) y editores de texto como sublime text.

Actualmente trabajo en la rama creativa, aunque la razón por la que regrese fue porque estoy aprendiendo a redactar código para email marketing, pero mi meta este año es regresar de nuevo al código y narrar mis experiencias en como ahora si "programo de verdad" 🤣. Bueno, espero empezar como frontend.

Metas este 2021

Aprender Ingles
Realmente me quiero enrolar más en la comunidad en dos idiomas. Esta también pensado meterme al japonés pero hablaremos de eso después.
Mejorar mis skills en HTML/CSS
Cuando empecé a hacer mi código para email sentí que estaba muy oxidada después de un tiempo y necesito mejorar mucho al respecto.
Aprender más tecnologías para empezar a trabajar como frontend como tal.
Mejorar mis habilidades en fotografía y video de producto
Esto es por parte del trabajo realmente. Trabajar como creativa también es enrolarse en aprender cosas que vas a necesitar en tu trabajo.
Desarrollar un videojuego
Minimo aunque sea escribirlo. He vivido con la espinita pero aun no sale algo complejo.
Dibujar mi primer comic
Esto si esta en proceso, dibujar tambien es una de mis pasiones.

Y bueno, esto es algo sobre mi! Espero seguir compartiendo más de mis aprendizajes en este lugar. ¡Gracias por leer!

DEV Community: Lizeth Garcia

Empezado en el maquetado de Emails con HTML y ¿Tablas? PT 1

Sobre Mi