APUNTES - PARCIAL CHRISTIAN

SAVE OFFLINE

PARCIAL CHRISTIAN (EMPIEZA EL VIERNES 7:30) - Descomprimir carpeta desde un vínculo del chat de zoom - Le cambiamos el nombre DE RISO 3C - Abrimos la carpeta: va a ver imágenes e instructivo en pdf, archivo de word para ver el sitio de wordpress y con una imagen con la página de dreamweaver de cómo tiene que quedar - Si no podes abrir el pdf ponemos abrir con > google chrome por ej - En dreamweaver vamos a necesitar master e imágenes. En la carpeta de imágenes ponemos las imágenes de dreamweaver. En la carpeta master ponemos TODO lo que está en la carpeta que descargamos IMPORTANTE → ​Cuando terminemos el examen y tengamos que comprimir la carpeta BORRAMOS TODAS LAS IMÁGENES DE WORDPRESS QUE ESTÁN EN LA CARPETA porque si la carpeta pesa más de 20mb no la vamos a poder subir a eva. WORDPRESS - En el instructivo va a ver textos, tipografía usada, etc. - HAY QUE PUBLICAR EL SITIO PARA QUE LO PUEDA VER (configuración > privacidad > PÚBLICO). - Chequear que el dominio SEA GRATUITO (paso 1) sino NO le damos ok. DREAMWEAVER - El texto de dreamweaver lo copiamos. - Va a ver que hacer un solo archivo HTML, es decir una sola página web - Cualquier medida entre 1000 y 1200 píxeles para los divisores secundarios está bien. De todas formas, nos va a dar imágenes para encabezado y pie de página que si miden 1100x80 una y la otra 1100x50 sabemos que la página va a medir 1100 de ancho por ej - No nos va a decir cuánto mide el cuerpo, lo sacamos a ojo pero vamos a tener las imágenes para darnos cuenta - Si los colores/tipografía no es exactamente igual no hay problema - El único archivo que tengamos de dreamweaver se va a llamar “index.html” SINO NO ABRE - Las palabras clave y la descripción lo ponemos nosotros dependiendo de lo que nos de, en meta author ponemos nuestro nombre CONVIENE ARRANCAR CON LO QUE MÁS RÁPIDO NOS SALGA, si te da igual empezar con dreamweaver porque vamos a tener que colocar un vínculo externo DESDE dreamweaver que nos lleve a Wordpress. CÓMO COMPRIMIR LA CARPETA Una vez que terminamos wordpress y publicamos el sitio y borramos las imágenes de wordpress de la carpeta, y lo mismo con dreamweaver CERRAMOS TODOS LOS PROGRAMAS (menos el zoom). Hacemos clic derecho en la carpeta del escritorio > enviar a > carpeta comprimida en ZIP (cierre) o en RAR (libritos). Eso es lo que subimos a EVA. En mac clic sobre la carpeta + compress ENTRA HASTA EL 11 (EL PASO 9 NO ENTRA) Si hay un inconveniente de más de 10’ vamos a recuperatorio, si salimos de zoom x más de 5’ también vamos a recuperatorio.

WORDPRESS 1) Crear cuenta, elegir dominio gratis y un tema a elección. GUARDAR SIEMPRE. 2) Customizar ese tema, ENCABEZADO Y PIE DE PÁGINA SÓLO SE PUEDEN MODIFICAR DESDE ACÁ, vamos a trabajar con las siguientes opciones: ​identidad de sitio web → ​título del sitio web, descripción corta y créditos a pie de página; ​colores y fondos​; fuentes/tipografía; imagen de encabezado; ajustes de la página de inicio. WP ADMIN:​ verdadero administrador/panel de control de wordpress 1) Primero vamos a PÁGINAS y eliminamos todas las páginas que hay permanentemente ya que las vamos a crear desde cero 2) Hacemos lo mismo en ENTRADAS, borramos todas las entradas que hay permanentemente 3) Volvemos a PÁGINAS y ponemos ​“añadir nueva” ​en ​blanco​. Elegimos un título “Home” (es importante porque forma parte del enlace permanente). PUBLICAR SIEMPRE. ¿Qué nos importa del menú del lado derecho “Página”? - Estado y visibilidad - Enlace permanente ¿Qué bloques del lado izquierdo nos importan? - Encabezado (título adicional) - Párrafo (nos permite trabajar texto, ej mensaje de bienvenida, es para escritura simple) - Cuadrícula de diseño (grilla para hacer columnas, se puede cambiar el tamaño e insertar texto/imagen) - Galería (común, podemos subir antes los archivos a la biblioteca de medios) - Galería apilada (galería en forma de mosaicos) - Formulario de contacto - Últimas entradas (aparece en widgets, se usa para blogs) - Calendario (también se usa en blogs) - Categorías (se usa en blogs y se crea desde ENTRADAS → añadir nueva → Documento (del lado derecho) → Categorías 4) Nos vamos a ​APARIENCIA ​→ Personalizar → ​Ajustes de la página de inicio → Una página estática → Home → Guardar cambios Volvemos al menú principal → Visitar sitio web → Publicar sitio web → Omitir compra → Sigue con el sitio gratuito WP ADMIN 5) MULTIMEDIA → agregamos las imágenes (800-2000px) que vayamos a usar en AÑADIR NUEVO. Completar el “Alternative Text” de la imagen ya que funciona como motor de búsqueda y BORRAR TÍTULOS. (Si eliminamos una imagen y la volvemos a usar conviene siempre​ cambiarle el nombre por la memoria caché de wordpress). 6) Vamos a ​PÁGINAS → añadir nueva página ​en blanco → agregamos título ​“Galería de imágenes”​, encabezado, párrafo, galería/galería apilada (modificar del lado derecho en “bloques” lo que sea necesario) 7) Creamos la tercer ​PÁGINA → añadir nueva página ​en blanco → agregamos título “Contacto”​, encabezado, párrafo, formulario de contacto (agregamos nuestro mail, el asunto del mail) 8) Creamos la cuarta ​PÁGINA → añadir nueva página ​en blanco → agregamos título ​“Blog” donde agregamos un párrafo, últimas entradas, calendario

9) Para agregar los POSTEOS DEL BLOG tenemos que ir a ​ENTRADAS ​→ añadir nueva, le ponemos título “Nota del…”, encabezado, párrafo 10) Los posteos del Blog pueden estar en CATEGORÍAS, eso lo agregamos desde el lado derecho en “Documento” → Categorías ​O DESDE WD ADMIN ​→ ​CATEGORÍAS BOTONES - Tenemos que ir a editar cada página (ej: Home) y lo agregamos con el bloque BOTONES o a través de CUADRÍCULA DE DISEÑO (columnas) → BOTONES y seteamos el vínculo MENÚ - Para configurar los vínculos podemos ir a APARIENCIA → MENÚS → EDITAR MENÚS - BORRAMOS el menú primario y CREAMOS un menú “Menú1” - Ahí agregamos las páginas que tenemos (en este caso Home, Galería, Blog, Contacto, Google), las ubicamos como queremos y agregamos alguna tipo Google si queremos desde enlaces personalizados - En MENÚS → GESTIONAR LUGARES podemos gestionar adónde queremos que estén nuestros menús, por ej: el “Menú1” puede estar asignado como PRIMARIO, es decir, que va a estar en la parte de arriba VÍNCULOS - Podemos generarle un vínculo a alguna palabra/frase a través de la selección de la misma más, con el símbolo de LINK que nos lleve a la galería por ej. CONFIGURACIÓN → SETEOS EN GENERAL DENTRO DE WP ADMIN - General: tenes formato de fecha, de hora, idioma, título - Escritura - Lectura - Comentarios - Multimedia - Compartir (CHEQUEAR) - Encuestas Widget:​ te permite colocar ciertas cosas ej calendario en tu sitio. Etiqueta iFrame:​ te permite en tu sitio poner otro sitio >> mapa de google, tu feed de ig, feed de fb.

Dreamweaver Video 1 → Estructura de Carpetas ​https://www.youtube.com/watch?v=pGeK3L_d8xw - Crear carpeta en escritorio “Sitio de prueba” (archivos html; archivos CSS-diseño; archivo PHP-formulario de contacto; archivo JS-javascript) - Dentro de esa carpeta creamos subcarpetas: ”Máster” (archivos originales de mi sitio, audio, video, docs, imagenes), “imagenes” (imagenes de mi sitio; jpg - dentro de jpg iría la carpeta de galería por ej; png; gif), “documentos” (archivos de descarga, manual en pdf, excel, word) - La estructura de las carpetas es DINÁMICA, creo lo que me hace falta y sea necesario cuando lo necesito, no necesariamente desde principio. Se adapta al sitio web que estemos creando. - REGLAS DE NOMBRAMIENTO PARA ARCHIVOS Y CARPETAS: ​todo en minúsculas, ​sin espacios de barra espaciadora​, máximo 25 caracteres, caracteres alfanuméricos de la “a-z” sin la ñ, “números” y “_-” lo puedo usar para separar. No puedo usar signos de exclamación ni interrogación. Las carpetas “Sitio de prueba” y “Máster” son las únicas dos que pueden tener mayúsculas ya que no van a ser subidas ni utilizadas por el usuario como las otras.

Video 2 → Definición de Sitio ​https://www.youtube.com/watch?v=1xkk7I3CFw0 - Le indicamos a Dreamweaver CS6 dónde están las carpetas que creamos anteriormente - A la derecha VENTANA → ARCHIVOS → EQUIPOS → Administrar Sitios → Nuevo Sitio - Dentro de la configuración del sitio → Sitio → Nombre del sitio “Sitio de prueba” (o nombre de la empresa) y en → Carpeta del sitio local: buscamos la carpeta que creamos para contener nuestro sitio, en este caso, “Sitio de prueba”. - De esta manera aparece en la lengüeta de la derecha la carpeta con nuestro sitio - ERRORES COMUNES: ​ renombrar la carpeta “Sitio de prueba” o moverla de lugar ¿Qué pasa si cambiamos el nombre a mitad de programación? Nada, se vuelve a cargar. Y si cambiamos el nombre de alguna carpeta interna no cambia en nada. Conviene tener todo el contenido antes de arrancar, pero sino no hay problema y no es necesario “actualizar” la carpeta de máster Video 3 → Propiedades de Página ​https://www.youtube.com/watch?v=25nznmVKFls - Son independientes, las páginas pueden llevar diferentes propiedades - Empezamos teniendo un archivo HTML: ARCHIVO → Nuevo → Página en blanco → HTML → Diseño ninguno - Vamos a empezar trabajando en la lengüeta de DISEÑO. ​Activar la regla en VER → REGLAS → MOSTRAR - Para empezar a diseñar apretar Clic derecho → Propiedades de la página Propiedades de la página - vamos a trabajar con: ● Apariencia (CSS) → color de fondo RGB blanco #FFF y márgenes todos en 0 para poder utilizar toda la página ● Vínculos (CSS) → color de vínculo #00F; vínculo visitados #936; vínculos de sustitución #F00; vínculos activos #F00; estilo subrayado depende de cada uno en esta caso ponemos “ocultar subrayado al situar cursor encima” ​La tipografía la dejamos para una hoja de estilo externa. ● Título/codificación → en Título va el nombre del sitio o el nombre del sitio y la sección, en este caso le ponemos “Sitio de prueba - HOME”. Por otro lado en Codificación ​siempre tiene que decir “Unicode (UTF-8)” es la codificación de los caracteres de la tipografía del documento -

-

Guardamos el documento en ARCHIVO → GUARDAR CÓMO. Ver donde lo guardamos, tiene que estar guardado en la carpeta SITIO DE PRUEBA que creamos en el Paso 2. A su vez, el nombre de la ​página de apertura tiene que ser SI O SI “index.html” para que después abra. Prestar atención al asterisco (​*) al lado de index ​porque indica que el archivo fue modificado pero no guardado

Video 4 → Atributos meta ​https://www.youtube.com/watch?v=Yru9Kq7s37U - Son las propiedades meta de un documento, estos atributos son independientes en cada una de las páginas web o archivos HTML y constan de tres cosas: de los meta, las palabras clave y la descripción. Solamente pueden ser leídos por motores de búsqueda (ej: Google). Es importante que lo programemos para que no sea indexado de manera incorrecta o lenta. Esto es parte del SEO (Search Engine Optimization - posicionamiento en buscadores orgánicos). - Las palabras clave que utilicemos conviene que también estén en el cuerpo de la página para que el posicionamiento sea más efectivo y rápido. - Colocamos la barra de insertar en la barra horizontal de herramientas, si no aparece vamos a arriba de todo a la derecha en DISEÑADOR → RESTABLECER “DISEÑADOR”. Vamos a

-

trabajar con el 4to icono (si vamos de derecha a izquierda) donde vamos a trabajar los atributos meta. La barra que está abajo de “Código/Dividir/Diseño” es la que muestra los atributos meta, para activarla hay que ir a VER → CONTENIDO DE ​HEAD​, activarla si no está activada porque sirve para ver mis archivos meta y no repetirlos. Atributos meta contenidos en HEAD ● Meta: lo utilizamos para indicar la autoría del sitio web. Hay tres propiedades: Atributo (dejamos siempre la opción de nombre), en Valor ponemos “Author”, y en Contenido vamos a colocar el nombre del autor del sitio, puede ser nuestro nombre el de una empresa. Si lo quiero eliminar selecciono el icono y hago clic en Delete/Suprimir. ● Palabras clave: o tags (etiquetas), coloco las palabras clave o frases cortas con las que yo deseo indexar mi sitio. El mínimo conveniente es entre 50 y 70 palabras/frases cortas que ayuden a las personas a llegar a mi sitio. Se aceptan faltas de ortografía o que falten tildes porque no sabes como alguien lo va a buscar. Por ej: ​“uca, publicidad, tercer año, carrera de publicidad, comunicacion, comunicación, comunicasion, buenos aires, bienvenida oficial al sitio, home, página de inicio, …”​ ​no se termina ni con punto ni con coma. ● Descripción: de la página web, es lo que se encuentra debajo del link de un motor de búsqueda. Párrafo de dos o tres líneas, si no lo escribimos Google o el buscador que utilicemos toma las primeras oraciones al azar de mi página web. Ej: ​“Sitio web oficial de la materia Producción y Edición Multimedial de la carrera de Comunicación Publicitaria e Institucional de la UCA.”

-

De esta manera ya programamos el SEO. Si tenemos Dreamweaver CC o si no nos aparece para activar el “Contenido de Head” podemos modificar los atributos meta desde la lengueta de “Código”.

Video 5A → Divisores Principales (parte teórica) https://www.youtube.com/watch?v=RqeiTVDFEBM - ES MUY IMPORTANTE. La etiqueta de divisores en HTML se llama “DIV”. - El divisor es una “caja contenedora vacía” que no posee formato y puede tener cualquier tipo de contenido (ya sea de audio, texto, video), es decir, todo lo que conforma un sitio web. Siempre vamos a utilizar divisores para colocar contenido​, NUNCA SUELTO. Además, lo vamos a colocar dentro de divisores ​SECUNDARIOS​. - En este paso, vamos a crear la base estructural de nuestra página web a través de cuatro divisiones principales y vamos a ver estilos CSS (​Cascading Style Sheets)​ internos - ESTILOS ≠ DIVISOR, ​son independientes, pueden funcionar por separado. ¿Qué son los estilos CSS? Es algo que posibilita que nosotros formateamos el contenido de nuestros divisores de una manera determinada, no solo el contenido sino también el divisor en sí. ​Es decir que el divisor es la “caja contenedora vacía” y el estilo le va a aportar formato a ESA caja. Hay dos clasificaciones de estilos: ● Internos: Estilos de tipo ID, se pueden utilizar 1 sola vez en 1 solo elemento en el archivo HTML. Van asociados directamente con UN divisor. En este caso los vamos a llamar “principal1”, “principal2”, “principal3”, etc. ● Externos: e ​ stilos de tipo clase, se pueden utilizar varias veces en varios elementos en la misma página. Se pueden aplicar a diferentes elementos. Ej; el de tipografía.

Video 5B → Divisores Principales https://www.youtube.com/watch?v=422ut6hvvtE -

(parte

práctica)

Vamos a estar trabajando desde la lengüeta de Diseño, es decir, donde veníamos trabajando. Para eso vamos a necesitar la barra de herramientas horizontal, si no la tenemos vamos a VENTANA → ​ ​INSERTAR y la activamos

PASOS PARA EL DIVISOR PRINCIPAL 1 1) Clic en “Insertar Etiqueta Div”, vamos a trabajar con las opciones de Insertar “en el punto de inserción” y con ID “principal1”, ​pero NUNCA con clase. Apretamos donde dice NUEVA REGLA CSS. Foto uno

2) Una vez que chequeamos que este todo como en la imagen apretamos “Aceptar'' y se abre una nueva ventana que es la de ​ESTILO​. En BORDE ​→ ​Style: ​none​ - Width: 0 ​ ​ - Color: ​vacío En CUADRO ​→​ Margin: Left: ​Auto,​ Right; ​Auto​ ​(quitar el “igual para todo”). PASOS PARA EL DIVISOR PRINCIPAL 2 1) Clic en “Insertar Etiqueta Div”, vamos a trabajar con las opciones de Insertar “después de la etiqueta” (del divisor anterior “principal1”) y con ID “principal2”, ​pero NUNCA con clase. Apretamos donde dice NUEVA REGLA CSS y chequeamos que todo esté como en la ​foto uno. 2) Una vez que chequeamos que este todo como en la imagen apretamos “Aceptar'' y se abre una nueva ventana que es la de ​ESTILO​. En BORDE ​→ ​Style: ​none​ - Width: 0 ​ ​ - Color: ​vacío En CUADRO ​→​ Margin: Left: ​Auto,​ Right; ​Auto​ ​(quitar el “igual para todo”). Si queremos hacer lo mismo desde la lengüeta de “Código” vamos a donde dice BODY para ver los DIV y a la parte de HEAD para ver a los ESTILOS. Ej: PASOS para crear EL DIVISOR PRINCIPAL 3 (desde código) 1) Copiamos el “principal2” desde el ​#principal2 {​ hasta la ​}​ en HEAD y cambiamos el 2 por el “principal3” #principal2 {

margin-right: auto; margin-left: auto; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } 2) Copiamos el “principal2” desde el ​ 70-25= ​height 45px A TENER EN CUENTA → ESTO ES SOLO PARA ​VÍNCULOS EXTERNOS Cuando ponemos un URL por ejemplo el de Google ​https://www.google.com/ en la barra de propiedades, abajo, nos aparece la opción de ​Destino allí seleccionamos la opción de _ ​ blank para que ese vínculo se nos abra en una nueva pestaña Empezamos a vincular: - Google > vínculo externo es siempre un vínculo de ​categoría absoluto (agregar URL directo)​. Seleccionamos la palabra y en la barra de propiedades ​que está debajo a ​ gregamos el link de https://www.google.com/ - Producto ​> vínculo interno de ​categoría relativa​, le agregamos el nombre del archivo con su extensión por ej: ​productos.html - Enviá un e-mail > escribimos el comando, es decir en vínculo ponemos mailto:[email protected]​ todo seguido en minúscula - Descarga > actúa igual que un vínculo interno, si tenes un archivo de descarga en docs se vincula poniendo por ej: ​docs/manual.pdf (puede ser también un archivo mp3, mp4 y cualquier otro tipo de archivo) - Ancla > sirve para conectar divisores en una misma página, se utiliza cuando se programan por ejemplo las preguntas frecuentes. Se conecta con el ID, es decir, con el hashtag #. Por ejemplo: ponemos en el contenedor del pie de foto ​“Volver al inicio” para anclarlo con ​Ancla.​ Seleccionamos la palabra ​Ancla y en vínculo ponemos #pie y viceversa, seleccionamos donde dice ​Volver al inicio y en vínculo ponemos #encabezado. Se puede hacer desde código también. - Llamanos​ > escribimos el comando, es decir en vínculo ponemos ​tel:+ ​ 5491138814416

Video 10 → Edición e https://www.youtube.com/watch?v=feK0ZyNEuP8 -

-

inserción

de

imágenes

LAS IMÁGENES SIEMPRE VAN EN DIVISORES En este tutorial cubriremos los aspectos básicos de edición de imagen en Photoshop para luego insertarla en Dreamweaver, dentro de un divisor. Vamos a trabajar con ​archivos jpg​. Los archivos jpg van a estar en master cuando están SIN editar, para luego EXPORTARLAS a la carpeta imágenes con un nombre apto para la web por ej: image01.jpg Vamos a colocar las imágenes dentro de un divisor con ancho y alto, por ende, hay dos opciones: o tomamos la imagen y la adecuamos al tamaño del divisor (que midan lo mismo), o adaptamos el tamaño del divisor a la imagen.

Empezamos tomando la imagen y adecuándose al tamaño del divisor:

1) Primero vemos cuánto mide el divisor que va a llevar la imagen, en este caso, el div #derecha mide 296px de altura x 541px de ancho 2) Vamos a Photoshop → carpeta master → abrimos imagen → editamos → exportar para web (IMPORTANTE: cuando cerramos photoshop NO guardamos los cambios ya que altera el archivo original) → la guardamos en la carpeta de ​imágenes con un nombre apto para la web por ej: ​index01.jpg 3) Vamos a la vista en CÓDIGO a la parte de ​body ​→ ​#derecha ​y borramos lo que haya escrito. Arrastramos la imagen que se encuentra en la carpeta de ​imágenes en medio de las dos etiquetas del divisor. Cuando la sueltes te hace una pregunta y pones aceptar/cancelar ya que es lo mismo. Probamos hacer de la otra manera, adaptando el divisor al tamaño de la imagen: 1) Si la imagen por ej mide 450px de altura x 600px de ancho y queremos cambiar el divisor vamos a achicar el divisor de la ​#izquierda a ​ 435px de ancho. L ​ e cambiamos el ancho al divisor ​#izquierdo​ y luego le aumentamos el ancho al divisor ​#derecho ​a 476px 2) En cuanto a la altura, primero ampliamos el divisor “CUERPO” (medía 700px) y lo aumentamos a 704px. Luego cambiamos la altura ambos divisores ​#izquierda a 454px ​(por los bordes del div derecho) y ​#derecha a 450px (que es lo que mide la imagen que queremos ubicar) 3) Por último, achicamos la altura del divisor secundario “CONTENIDO” a 200px de altura RECORDAR: que las imágenes SIEMPRE van dentro de divisores Video 11 → Encabezado y Pie de página ​https://www.youtube.com/watch?v=pmLHdwrh54k - Diseñaremos un encabezado y un pie de página en Photoshop para luego insertarlo en nuestras páginas web (archivos HTML) adecuandonos a las medidas del encabezado y del pie de página de Dreamweaver Empezamos: 1) Vemos las medidas del encabezado en Dreamweaver, en este caso miden 1100px de ancho x 100px de alto 2) Entramos a Photoshop → hacemos la figura en el tamaño que corresponde respetando el color de #Principal1 que en este caso es #666 (gris oscuro) → agregamos la tipografía “Sitio web de prueba” con efecto → colocamos una imagen yendo a ARCHIVO ​> COLOCAR → guardar para web en jpg en la carpeta de ​imágenes​ como ​encabezado.jpg 3) Abrimos dreamweaver y arrastramos la imagen entre las etiquetas del divisor ​encabezado 4) REPETIMOS LO MISMO con el pie de página. En este caso, el divisor del pie de página mide 1100px de ancho x 70px de alto y el color del #principal4 es #666 5) Entramos a Photoshop → hacemos la figura en el tamaño que corresponde respetando el color de #Principal4 que en este caso es #666 (gris oscuro) → agregamos la tipografía “Copyright 2020” con efecto → guardar para web en jpg en la carpeta de ​imágenes como pie.gif​ ​(gif es porque usamos pocos colores y pesa menos que jpg) 6) Abrimos dreamweaver y arrastramos la imagen entre las etiquetas del divisor ​pie de foto