Bases de desarrollo para Email

Clase 5 de 33 • Curso de Diseño HTML y CSS para Emails 2016

Resumen

Las Bases del Desarrollo para Emails:

Las formatos de imagen que vamos a usar cuando programamos emails son GIF, JPEG y PNG.

Recuerda que dejar comentarios en el código es muy útil porque te permite organizarte mejor y comunicarte con otros programadores.

Uno de los grandes desafíos cuando programas emails es responder a la variedad de dispositivos de Android.

Las reglas de CSS nos muestra lo que podemos usar de acuerdo al tipo de dispositivo y al sistema operativo.

Para programar emails los elementos de HTML que más vamos a usar son:

Si aún tienes dudas de cómo programar en HTML te recomiendo que tomes el curso de Desarrollo Web aquí en Platzi https://platzi.com/cursos/html5-css3/

Diego Burlando

student•

Gif: Graphics Interchange Format (
formato de gráficos intercambeable)

JPEG: Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía)

PNG: Portable Network Graphics(Gráficos de Red Portátiles)

Saludos…

Michael Posso

teacher•

gracias!

Enrique Tecayehuatl

student•

¿Para la etiqueta <img /> aplica la propiedad srcset para dispositivos retina?

Rodrigo Burgos S.

student•

Exacto.

Andres Ortegon

student•

¿si trabajo con sublime text, es necesario crear el archivo emmet?

Diego Forero

Team Platzi•

emmet no es un archivo, es un plugin que ayuda con el autompletado de etiqetas html por ejemplo si escribes

.MiClase

Al hacer tab emmet lo transforma en

<div class="MiClase"></div>

Andres Ortegon

student•

ok, es decir que no es necesario.

Manuel Ferrer García

student•

Para mi el mejor editor es VS Code ya que comparte arquitectura con los editores más demandados del mercado laboral

Vivi

student•

Estoy empezando el curso, ya descargue brackets, y los plugins, realizo los pasos del video: 
table>tr(td*3)

<!-- table>(tr(td*3)*)–> le doy tab o enter y no pasa nada… ¿que puedo hacer? gracias por la yuda

Edgar Francisco San Juan Herrera

student•

Hola 😃

Recuerda el operador de multiplicación (*)

table>tr(td*3)

table(tr(td*3)*3)

Daniel olivares

student•

quizas la aopcion ctrl alt enter

Jorge Levy Cen Avila

student•

Una tabla con una fila y una columna table>tr>td + TAB

Para poner textos spam + TAB

Para poner contenedores y darle estetica div + TAB

Para agregar imágenes (no se usa </img> ) img + TAB

Emmanuel Sturla

student•

Gif: Graphics Interchange Format (
formato de gráficos intercambeable) ventajas: es muy liviano, permite hacer animaciones también permite hacer transparencias. desventajas: no deja usar mucha definición

JPEG: Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía) ventajas: usar imágenes con mas definición y mas colores y son livianas

PNG: Portable Network Graphics(Gráficos de Red Portátiles) ventajas: permite usar transparencias de alta calidad

Junior Cupe Casquina

student•

<!--Tags-->
<table>
    <tr>
        <td>GIF</td>
        <td>JPEG</td>
        <td>PNG</td>
    </tr>
    <tr>
        <td>Graphics Interchange Format</td>
        <td>Joint Photographic Experts Group</td>
        <td>Portable Network Graphics(</td>
    </tr>
</table>
<span>
        A Span
</span>
<div>
    A Space
</div>
<img src="img/amigo.jpg"/>

Junior Cupe Casquina

student•

<!--Tags-->
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<span>
        A Span
    </span>
<div>
    A Space
</div>

r2d2bt Barajas Tirado

student•

para email de lotus notes?

Michael Posso

teacher•

Que pena, pero Lotus ya esta muy poco usado, La ultima vez que tuve que codificar para lotus fue en el 2011 😦

Michael Mojica

student•

Los que mandan en el mercado es apple, gmail, android y outlook… - lotus notes ya esta viejito

Michael Mojica

student•

El formato **GIF ** (Es el unico formato que te permite animar) - Claro es de entender que va de 2 a 256 colores permitidos, comúnmente lo utilizamos para imagenes de tonalidades planas, me refieron a tintas planas sin tramado, ya que si es imagen perdería calidad y veriamos brumo o distorsión en la imagen.
El formato JPG el formato para las imagenes en donde se podra optimizar su calidad dependiendo la calidad y peso.
y el **PNG **como lo indico que es un formado muy acertado en la transparencia siempre y cuando este en 16bit, porque si esta a 8bit su calidad quedaría como un gif (se notaria pixelado).

Jonatan Padilla

student•

Vamos a prender las técnicas y herramientas mas avanzadas para que nuestros E-mails se vean en la mayor cantidad de dispositivos posibles. Es decir, Desarrollar e-mails que se adapten a cualquier tamaño de la pantalla.

Luis Palomo

student•

Una buena forma de comentar es usarndo el comando Shift + Ç (para windows teclado español) o Shift + / (windows teclado en ingles).

Hugo Hiarmes

student•

Hola! Ya en 2018 pueden seguir checando la tabla de compatibilidad, algunas propiedades cambiaron y hay más compatibilidad

Alexander Valencia

student•

👍😎

Edison Andres Portilla Chungandro

student•

Excelente clase!!

Dario Espinosa

student•

Que sucede respecto a accesibilidad (navegaciòn para gente discapacitada al leer un mail) ya que es una tabla ¿Es posible adaptar el código html en un email?

Enrique Tecayehuatl

student•

Ahí entra la versión de texto, ¡texto texto texto! de eso se encargan los dispositivos lectores.

Michael Posso

teacher•

perdon “agencias del govierno”

German Yesid Rubiano Romero

student•

En Brackets la combinación de teclas para comentar una línea de código es cmd + / (mac) , para comentar un bloque de líneas alt + cmd + / (mac) para Windows lo que aplica es cambiar usar la tecla ctrl por la de cmd

Franklin Roldan

student•

La propiedad colspan no lo procesa Outlook

Luis Osvaldo Ledo Torrez

student•

que es mejor brackets o sublime text ?

Diego Forero

Team Platzi•

El que te guste más y te sientas cómodo

Michael Posso

teacher•

en realidad, use dreamweaver por mucho timpo por que es un editor con muchas erramientas para TABLES. Hace unos meses llevo usando Atom y unos plug in muy buenos para HTML y EMMET. Brackets is bueno, pero si haces front-end development con javascript, se pone lento y hasta se blokea, entonces ahora estoy usando Atom.

Diego Burlando

student•

Gif: Graphics Interchange Format (
formato de gráficos intercambeable)

JPEG: Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía)

PNG: Portable Network Graphics(Gráficos de Red Portátiles)

Saludos…

Michael Posso

teacher•

gracias!

Enrique Tecayehuatl

student•

¿Para la etiqueta <img /> aplica la propiedad srcset para dispositivos retina?

Rodrigo Burgos S.

student•

Exacto.

Andres Ortegon

student•

¿si trabajo con sublime text, es necesario crear el archivo emmet?

Diego Forero

Team Platzi•

emmet no es un archivo, es un plugin que ayuda con el autompletado de etiqetas html por ejemplo si escribes

.MiClase

Al hacer tab emmet lo transforma en

<div class="MiClase"></div>

Andres Ortegon

student•

ok, es decir que no es necesario.

Manuel Ferrer García

student•

Para mi el mejor editor es VS Code ya que comparte arquitectura con los editores más demandados del mercado laboral

Vivi

student•

Estoy empezando el curso, ya descargue brackets, y los plugins, realizo los pasos del video: 
table>tr(td*3)

<!-- table>(tr(td*3)*)–> le doy tab o enter y no pasa nada… ¿que puedo hacer? gracias por la yuda

Edgar Francisco San Juan Herrera

student•

Hola 😃

Recuerda el operador de multiplicación (*)

table>tr(td*3)

table(tr(td*3)*3)

Daniel olivares

student•

quizas la aopcion ctrl alt enter

Jorge Levy Cen Avila

student•

Una tabla con una fila y una columna table>tr>td + TAB

Para poner textos spam + TAB

Para poner contenedores y darle estetica div + TAB

Para agregar imágenes (no se usa </img> ) img + TAB

Emmanuel Sturla

student•

JPEG: Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía) ventajas: usar imágenes con mas definición y mas colores y son livianas

PNG: Portable Network Graphics(Gráficos de Red Portátiles) ventajas: permite usar transparencias de alta calidad

Junior Cupe Casquina

student•

<!--Tags-->
<table>
    <tr>
        <td>GIF</td>
        <td>JPEG</td>
        <td>PNG</td>
    </tr>
    <tr>
        <td>Graphics Interchange Format</td>
        <td>Joint Photographic Experts Group</td>
        <td>Portable Network Graphics(</td>
    </tr>
</table>
<span>
        A Span
</span>
<div>
    A Space
</div>
<img src="img/amigo.jpg"/>

Junior Cupe Casquina

student•

<!--Tags-->
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<span>
        A Span
    </span>
<div>
    A Space
</div>

r2d2bt Barajas Tirado

student•

para email de lotus notes?

Michael Posso

teacher•

Que pena, pero Lotus ya esta muy poco usado, La ultima vez que tuve que codificar para lotus fue en el 2011 😦

Michael Mojica

student•

Los que mandan en el mercado es apple, gmail, android y outlook… - lotus notes ya esta viejito

Michael Mojica

student•

Jonatan Padilla

student•

Luis Palomo

student•

Una buena forma de comentar es usarndo el comando Shift + Ç (para windows teclado español) o Shift + / (windows teclado en ingles).

Hugo Hiarmes

student•

Hola! Ya en 2018 pueden seguir checando la tabla de compatibilidad, algunas propiedades cambiaron y hay más compatibilidad

Alexander Valencia

student•

👍😎

Edison Andres Portilla Chungandro

student•

Excelente clase!!

Dario Espinosa

student•

Que sucede respecto a accesibilidad (navegaciòn para gente discapacitada al leer un mail) ya que es una tabla ¿Es posible adaptar el código html en un email?

Enrique Tecayehuatl

student•

Ahí entra la versión de texto, ¡texto texto texto! de eso se encargan los dispositivos lectores.

Michael Posso

teacher•

perdon “agencias del govierno”

German Yesid Rubiano Romero

student•

Franklin Roldan

student•

La propiedad colspan no lo procesa Outlook

Luis Osvaldo Ledo Torrez

student•

que es mejor brackets o sublime text ?

Diego Forero

Team Platzi•

El que te guste más y te sientas cómodo

Michael Posso

teacher•

Bases de desarrollo para Email

¡Espera pronto la actualización de este curso!

¡Espera pronto la actualización de este curso!

Bienvenido al curso

Bienvenidos

Un poco de historia del correo electrónico

Buenas Prácticas en el Diseño de Email

Configurando el Entorno de Trabajo para Email

Bases de desarrollo para Email

Buenas prácticas en plantilla de estilos para email

Imágenes de“fondo” y VML para Outlook

Imágenes de Alta resolución para Email

¿Cómo organizar tu CSS para email ?

Técnica de Stacking

Técnica de Spacers

Repaso de buenas prácticas para Email

Creando nuestro proyecto

Introducción al proyecto

Exportando nuestras imágenes desde Photoshop

Header de Email de Bienvenida

Responsive en Email de Bienvenida

Call to action en nuestro Email de bienvenida

Terminando el Header del Email

Construyendo el Hero de nuestro Email de bienvenida

Agregando elemento de 3 columnas en el email

Creando un Footer para nuestro Email

Creando un Mail Transaccional

Creando un email de promoción

Mailchimp y Testing con Litmus

MailChimp

Subiendo nuestro Email a MailChimp

Testing con Litmus

Conclusiones

Conclusiones

Complementos del curso

Como usar web fonts en email

Email HTML5 para video

Usando responsive email frameworks

Desafíos

Crear un email con 2 web fonts

Crear un email con Video