1

COLEGIO NUESTRA SEÑORA DEL ROSARIO DE FLORIDABLANCA “Verdad, Virtud y Ciencia”

ASIGNATURA Tecnología e Informática PERIODO TERCERO

DOCENTE Ivonne Tatiana Paredes FECHA

ESTUDIANTE CURSO 10°

GUÍA PARA EL DESARROLLO DE COMPETENCIAS

I. PREGUNTA PROBLEMATIZADORA ¿Cómo hago uso responsable y efectivo de las herramientas tecnológicas para la creación de maquetación de proyectos web?

II. NIVELES DE DESEMPEÑO SUPERIOR: Manipula las herramientas de los programas de diseño para la maquetación y desarrollo del proyecto final.

ALTO: Estructura la maquetación de un proyecto, mediado por los softwares de diseño.

BASICO: Identifica los diferentes estilos de maquetación que se pueden usar en la edición de revista, libros, y páginas web.

BAJO: Se le dificulta identificar los diferentes estilos de maquetación que se pueden usar en la edición de revista, libros, y páginas web.

I. PLAN ESTRATÉGICO DE APRENDIZAJE

TIEMPO (Semanas)

PROCESO DE EVALUACIÓN (Instancias)

COMPETENCIAS

ESTRATEGIAS DIDÁCTICAS Y

EVIDENCIAS DE APRENDIZAJE

CONTENIDO CONCEPTUAL

1

Identifico y analizo ejemplos exitosos y no exitosos de la transferencia tecnológica en la solución de problemas y necesidades. • Actúo teniendo en cuenta normas de seguridad industrial y utilizo elementos de protección en ambientes de trabajo y de producción. •Propongo, analizo y comparo diferentes soluciones a un mismo problema, explicando su origen, ventajas y dificultades. . • Tengo en cuenta aspectos relacionados con la antropometría, la ergonomía, la seguridad, el medio ambiente y el contexto cultural y socio-económico al momento de solucionar problemas con tecnología. Identifico e indago sobre los problemas que afectan directamente a mi comunidad, como consecuencia de la implementación o el retiro de bienes y servicios tecnológicos. •Identifico e indago sobre los problemas que afectan directamente a mi comunidad, como consecuencia de la implementación o el retiro de bienes y servicios tecnológicos.

Explicación del tema por clase magistral, desarrollando el contenido del tema a través de definiciones y los procesos correspondientes a la aplicación de las herramientas, con información técnica, recomendaciones y comentarios para su buen funcionamiento. Descripción, ejecución y aplicación de actividades propuestas en el aula especializada, con la herramienta de html. Actualización del archivo en desarrollo.

MAQUETAR UNA

PÁGINA WEB

2

TI 1

3

QUIZ 1 4

5 SEMANA ROSARISTA TI 2

Explicación del tema por clase magistral, desarrollando el contenido del tema a través de definiciones y los procesos correspondientes a la aplicación de las herramientas, con información técnica, recomendaciones y comentarios para su buen funcionamiento. Descripción, ejecución y aplicación de actividades propuestas en el aula especializada, con la herramienta de html.

POSICIONAMIENTO

6 SEMANA ROSARISTA QUIZ 2

7 DESARROLLO DE GUIA

8

2

•Propongo acciones encaminadas a buscar soluciones sostenibles dentro un contexto participativo.

Actualización del archivo en desarrollo.

9 SUSTENTACIÓN Descripción, ejecución y aplicación de actividades propuestas en el aula especializada, con la herramienta de html.

10 RETROALIMENTACIÓN

11 TRIMESTRAL

12 AUTOEVALUACIÓN

III. DESARROLLO CONTEXTUAL

QUÉ HACE EL DISEÑADOR Y QUÉ EL MAQUETADOR

Es habitual que el diseñador y el maquetador sean la misma persona. O sea, que ambas tareas sean desarrolladas por un solo profesional. En editoriales, empresas o instituciones de envergadura las funciones suelen estar divididas en dos departamentos. Lo mismo sucede cuando una editorial encarga el diseño de la publicación a un estudio de diseño externo y la maquetación de los contenidos se realiza dentro de la editorial. La estética que tendrá que el libro, la definición de la tipografía que se utilizará, de los niveles de jerarquía de la información, incluidos los estilos de párrafos, corresponden al ámbito del diseñador, no del maquetador. A este le corresponde la aplicación de las directrices del diseño y la ejecución de la maqueta propuesta por el diseñador. La tarea del maquetador es componer el contenido sobre las páginas de acuerdo a lo estipulado por el diseño. Y hacer que esa composición posea lógica y armonía editorial. Contratar el diseño de forma externa suele aplicarse a una colección o a revistas y periódicos más que al diseño de un libro de ficción. En estos casos, lo habitual es ofrecer el diseño editorial junto a la maquetación profesional. Esta mixtura de servicios se da cuando un autor publica por su cuenta y contrata los servicios editoriales por su cuenta. LO QUE NOTAMOS Y LO QUE NO SE VE Hay personas que consideran que saber utilizar InDesign los habilita para realizar una maquetación profesional. Pues no. InDesign es solo una herramienta. La herramienta más importante es el conocimiento en la creación, el diseño y la producción de publicaciones. Y eso se obtiene no solo estudiando sino también ejercitando, ensayando, experimentando y errando unas cuantas veces. Con esta base de conocimiento también se realizan maquetaciones en Word, sin que un lector evidencie en qué programa se ha realizado la composición del libro. Porque esta es una de las claves de una maquetación profesional: debe ser imperceptible y ofrecer legibilidad al contenido y fluidez al texto para que la experiencia lectora sea placentera y no se distraiga. Por el contrario, una maquetación no profesional se evidencia rápidamente de una u otra forma. Para quienes trabajamos en la edición de libros, tras observar una publicación, resulta fácil identificar por qué está mal maquetada. Por su parte, el lector no avezado en estas artes también nota “algo raro” o “algo molesto”. Se da cuenta que hay algo dificulta la lectura. Aunque no sepa cuál es el elemento o el factor que le estorba el lector reconoce que algo no habitual sucede en esas páginas. Preguntas:

¿Qué reglas de diseño tiene el maqueteador para el diseño de un libro?

¿Cuál es la función de un maqueteador?

¿Qué es un diseñador?

¿Cuantos tipos de tipografía hay?

¿Cómo puede uno identificar que el maqueteador ha utilizado Word en sus diseños?

¿Qué sucede si se contrata el diseño de un libro o revista de forma externa?

Diseñe la portada de una revista ambientalista.

3

ACTIVIDAD 1. INTERIORIZACIÓN, REFLEXIÓN DEL SABER. ¿CÓMO CREAR UNA PÁGINA WEB EN HTML? En el fondo, crear una página web en HTML, no es muy diferente a crear cualquier otro documento con un editor de texto. Consiste en crear un fichero con extensión .html o .htm y editarlo.

En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear formularios HTML, etc.), así como las etiquetas (o “tags”) HTML (luego veremos que son) necesarias para definir la estructura del documento HTML.

Esto se puede hacer de una manera más purista en modo texto trabajado directamente con el código HTML, o bien, de una manera más visual y amigable con un editor HTML especializado, muy parecido a cómo se trabaja también en un editor como Microsoft Word, por ejemplo.

Un ejemplo minimalista de página, vista como código HTML, no como el resultado final que ser ve en el navegador, sería éste:

Ejemplo de página HTML con un conjunto mínimo de elementos.

Y aquí puedes ver el resultado de este código en un navegador web:

4

¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML

Esta semántica se consigue mediante el uso de las etiquetas y los atributos. Lo primero que te llamará la atención en el ejemplo de código arriba son las palabras entre corchetes. Esto son las así llamadas etiquetas HTML. Estas etiquetas forman una estructura jerárquica, es decir, se pueden anidar entre ellas, salvo la etiqueta especial <!DOCTYPE HTML> en la primera línea de un documento HTML. Siempre hay una etiqueta de apertura y otra de cierre que es la misma etiqueta, pero con una barra delante del nombre de la etiqueta. Por ejemplo: “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre que delimita el final del contenido etiquetado). En medio viene un texto u otras etiquetas anidadas que con su contenido. El conjunto de una etiqueta y su contenido se conoce como elemento HTML. A veces, una etiqueta no tiene contenido en texto como tal (por ejemplo, las etiquetas “meta” del ejemplo). En ese caso, no hace falta usar una etiqueta de cierre. ¿Qué ganamos con esto? Conseguimos semántica, es decir, que el contenido tenga sentido para el navegador u otras aplicaciones, siendo el buscador de Google una de las más destacadas. Por ejemplo: la etiqueta title anterior le dice al navegador que se trata del título de la página, el que va a visualizar en la pestaña en la que tienes abierta esta página dentro del navegador. Otro ejemplo de aplicación sería cuando Google visita tu web: en este caso el texto etiquetado con la etiqueta title será el que utilice Google como título en sus resultados de búsqueda. ¿Te das cuenta del potencial de poder añadirle semántica a un contenido? Gracias a ello se pueden hacer cosas como éstas sin las cuales sería imposible imaginarnos la web hoy en día. El otro concepto fundamental que tienes que tener claro, junto con el concepto de etiqueta, es el concepto de atributo. Si te fijas, en el caso de las etiquetas meta del ejemplo, éstas, antes del corchete de cierre contienen palabras con un formato de xxx=”yyy”. Esto son los atributos, donde xxx es el nombre del atributo e yyy su valor. Los atributos son simplemente una manera de añadir más información semántica a una etiqueta. Esta etiqueta es un buen ejemplo de cómo aprovechar los atributos:

5

Aquí, con el atributo name estamos diciendo concretamente que se trata de una etiqueta meta que sirve como descripción de la página y que la descripción concreta es la que viene en el atributo “content”.

Los resultados de búsqueda de Google son una de las aplicaciones más importantes de las etiquetas

Google usa esto también para sus resultados de búsqueda porque es aquí de dónde saca normalmente la descripción que viene debajo de los títulos de los resultados de cada página que muestra.

Cómo trabajar con títulos y párrafos de texto en HTML

HTML tiene seis etiquetas de títulos/subtítulos: de “<h1>” hasta “<h6>”, correspondiendo los números al nivel jerárquico. Es decir, una etiqueta “<h1>” sería el nivel jerárquico máximo, “<h2>” los subtítulos de los niveles h1 y así sucesivamente. Por otra parte, los párrafos de texto normal se marcan con “<p>”. Con ambas cosas tenemos los elementos básicos para crear texto en HTML. Si comparamos esto con Word, por ejemplo, las etiquetas de títulos serían el equivalente a los estilos “Titulo 1”, “Título 2”, etc. y la etiqueta de párrafo el equivalente al estilo “normal”. De hecho, al pegar un texto desde Word a un editor HTML visual, así se deberían convertir en el código HTML generado. Cómo crear listas en páginas web

Las listas son otro elemento indispensable en un contenido. Es muy fácil crearlas en HTML, en el caso de las listas enumeradas se usa la etiqueta <ol> y en el caso de las no enumeradas (con viñetas), se usa la etiqueta <ul>. En ambos casos se usa <li> para los elementos de la lista. Por ejemplo:

Además, que, siendo una lista enumerada, no vienen los números, es decir, el “1.) …”, “2.) …”, etc. Eso es así porque, de manera similar a Word, usar listas enumeradas implica precisamente que los números se crean automáticamente cuando se visualice la página en un navegador web. Cómo usar tablas en páginas web

Las tablas son un elemento ya algo más avanzado y, por tanto, aquí me limitará a una estructura básica de tabla

6

Aquí, la etiqueta <table>, como ya te puedes imaginar, demarca la tabla. Dentro de ella, cualquier fila de cualquier tipo se demarca con <tr> que viene de “table-row” (fila de tabla en inglés). Dentro de esto, puede haber diferentes tipos de filas que se diferencian por el tipo de celdas que contienen. En este ejemplo, tenemos una primera fila con celdas con la etiqueta <th> (“table header”, cabecera de tabla en inglés) que actúan como cabecera y luego el resto, serían celdas ordinarias con datos, <td>, “table data”. Al considerar el diseño del diseño de un sitio web, tenemos en cuenta el objetivo y el público objetivo del diseño, los recursos disponibles para el sitio web (tanto de texto como gráficos), las preferencias de diseño del cliente y cualquier estilo existente, como un logotipo o impresión material de marketing. Cada uno de estos definirá en parte las elecciones de diseño que se realizan. Reconocemos que no siempre es fácil saber el aspecto que buscas, y hemos descubierto que la mejor manera de tener una buena idea de lo que te gusta es navegar por los sitios web de tu competencia y otros sitios web relacionados con la industria. Al comunicar sus propias preferencias de estilo en un diseño, es importante ser lo más específico posible sobre lo que desea para su propio diseño. Si hay sitios web que ha visto que transmiten el aspecto que busca, proporcione la dirección web a estos y háganos saber lo más específicamente posible lo que le gusta y lo que no le gusta de cada uno. Al evaluar un sitio web, revise cada uno de los siguientes y tome notas sobre lo que funciona y lo que no para cada sitio web al que proporciona un enlace. Uso del color para el diseño de la página Estilo de texto, tanto en el contenido del cuerpo como en los títulos de la página

7

El tipo de navegación, su estilo e interactividad El tipo de diseño del encabezado y el estilo La ubicación y el tamaño del logotipo El uso de imágenes en las páginas, especialmente la página de inicio Cómo se presenta el contenido de las páginas Tenga en cuenta que la mayoría de los sitios web utilizan los mismos elementos comunes; es decir, encabezado / encabezado en la parte superior, seguido de la navegación, el contenido del cuerpo, las barras laterales y el pie de página.

ESPECIFICACIONES Y CONSIDERACIONES DEL DISEÑO Si bien la mayoría de los diseños son estructuralmente similares, las opciones de diseño y el uso y la ubicación del contenido en el diseño es lo que proporciona la diversidad necesaria. En la práctica de diseño actual, todos los diseños incluirán: Dimensiones de la página: pocas páginas web tienen un tamaño inferior a 940 px de ancho. Esto garantiza que las páginas se vean bien en la resolución del navegador 1024 × 768. Las páginas receptivas suelen ser más anchas que esta para adaptarse mejor a las resoluciones más grandes, y las páginas solo para dispositivos móviles se diseñarán para verse bien a 320 píxeles de ancho. Dimensiones en columna y relleno: todos los diseños modernos utilizarán un sistema de cuadrícula en forma de columna en el que cada columna tiene un ancho definido y márgenes definidos entre columnas (por lo general, 20px). Un sistema de cuadrícula permite la creación de columnas en un diseño asignando una clase de columna CSS a la capa div. Estilo de fondo: un fondo será un color sólido, una imagen de tamaño completo (desplazable o fija) o un fondo de pantalla embaldosado. Colores de la página: diseños efectivos utilizarán una paleta de colores consistente con una opción de color primario y algunas armonías de color o cumplidos. Los colores correctos se definen mejor al muestrear primero el logotipo para garantizar una integración efectiva, teniendo en cuenta la industria y el público objetivo. Si no tiene un logotipo con el color o los colores existentes definidos, puede ser útil identificar si su página web se vería mejor con una paleta de primavera, verano, invierno o otoño. Tipografía: El tipo de letra utilizado para la web suele ser una fuente sans-serif para el área de contenido del cuerpo en aras de la legibilidad, aunque los títulos del encabezado suelen ser fuentes serif para proporcionar diferenciación visual. Las mejores familias de fuentes de sans-serif para uso web son Arial, Tahoma, Verdana y Trebuchet MS. Para las fuentes Serif, las mejores familias de fuentes para la web son Georgia, Palatino Linotype y Times New Roman. En el diseño contemporáneo, la práctica común es utilizar un color gris oscuro para el texto (no negro puro) y evitar el uso de texto de color en la mayoría de los casos. También es una buena práctica no exceder el uso de negrita, cursiva, uso de mayúsculas o mezclar familias de fuentes más allá de un tipo para encabezados, y un tipo para el resto del texto. Google Fonts se ha hecho popular (antes eran fuentes Cufon), pero debo advertirles sobre su uso, ya que aunque una fuente se vea bien impresa. Barra de título: esta es la sección más alta de una página web, y es donde muchas empresas agregan su número de teléfono, dirección de correo electrónico y pequeños iconos de redes sociales. En muchos diseños modernos, el logotipo también se incluirá aquí. Área de logotipo: la sección directamente debajo de la barra de título (cuando está en uso) es donde se coloca el logotipo. Normalmente, esta área proporciona un logotipo "rectangular" alineado a la izquierda, con un lema / eslogan adyacente a la derecha. Los logos más grandes (redondos y verticales) típicamente deberán estar centrados, o agregados a la parte superior de una barra lateral izquierda. Encabezado / masthead : en la parte superior de la página, debajo de la barra de título, se encuentra el área del masthead. En el pasado, esto solía ser una imagen singular (estática); en la práctica de diseño actual, esto será típicamente una presentación de diapositivas jQuery de algún tipo. Navegación: el menú puede colocarse directamente encima del masthead o debajo de él. Su "nivel superior" generalmente constará de 8 o menos palabras "cortas" de enlace de menú para garantizar que encajen bien en una línea. También es importante garantizar un buen contraste visual entre las palabras y un fondo en aras de la legibilidad. Si se necesitan enlaces de menú adicionales, se utiliza un submenú (menú desplegable). Contenido corporal: la sección de contenido es donde se muestra el texto de la página. El 1/3 superior de la página es el área "arriba de la página" que los motores de búsqueda indexan con más frecuencia, por lo que es importante asegurarse de que no solo tenga un texto amplio de palabras clave enriquecido, sino que haya una palabra clave una rica descripción en la parte superior que indica claramente de qué se trata el sitio web y los servicios disponibles. Barras laterales: las barras laterales se utilizan con mayor frecuencia en las páginas interiores, y es un excelente lugar para proporcionar contenido adicional, como información de contacto y formularios de

8

contacto breves, testimonios, navegación adicional (conocidos como menús de la barra lateral), llamadas a la acción, información de recursos, etc. Elementos de contenido: el desafío para muchas personas es definir cómo presentar mejor su contenido. Para empresas de servicios, una práctica común es utilizar un diseño de tres o cuatro columnas en el que se agregan a una columna imágenes representativas que reflejan cada servicio, seguidas del título del servicio, una breve descripción y un enlace a esa página. En el diseño actual, hay muchas opciones posibles para la inclusión, como sistemas tabulares, alternaciones / acordeones, enlaces de desplazamiento o testimonios, videos incrustados y presentaciones de imágenes. Lo importante es asegurarse de que las páginas se vean completas garantizando suficiente contenido, sin sobrecargarlo. Sección de pie de página: el pie de página (como la barra de título) es coherente en todas las páginas y se ubica debajo del área de contenido del cuerpo. El pie de página se presenta más a menudo en un formato de tres o cuatro columnas para permitir el aspecto ordenado. Esta área se utiliza generalmente para proporcionar información general de la empresa, áreas atendidas, iconos de redes sociales, enlaces a páginas clave o recursos, testimonios, imágenes en miniatura de contenido visual importante, etc. Sub-pie de página: el pie de página secundario es la barra inferior de la página, también coherente en todas las páginas. Esto normalmente se usa para el aviso de copyright, información de diseñador, licencia comercial y política de privacidad / términos de uso.

MEJORES PRÁCTICAS DE CONTENIDO Una consideración importante al agregar contenido a sus páginas es cómo y dónde ubicarlo. Para que el contenido se vea bien en un diseño, generalmente recomendamos: Cuando hay dos o más columnas, asegúrese de que la longitud vertical esté muy cerca entre ellas; esto

es especialmente importante con columnas de solo unas pocas líneas. Si está utilizando una estructura de dos columnas, es mejor si la primera columna (izquierda) tiene la misma cantidad o un poco más de texto que la segunda columna (derecha). En la mayoría de las situaciones, la alineación a la izquierda es lo mejor para los títulos de página y la copia de texto.

La mayoría de las páginas web incluirán páginas de ancho completo y páginas de la barra lateral. En la mayoría de los casos, es mejor usar una barra lateral derecha que una barra lateral izquierda. La principal excepción es cuando la barra lateral izquierda se usa para navegación suplementaria; y es mejor mantenerse coherente con la ubicación de la barra lateral (todos alineados a la izquierda o alineados a la derecha).

Por lo general, lo mejor es alinear a la izquierda el contenido de texto. Aquí hay algunas excepciones,

como un título debajo de una imagen, o si elige que todos los títulos de sus páginas estén centrados, pero lo importante es la coherencia en el uso en todas las páginas.

La posición de la imagen dentro de la copia de la página generalmente se ve mejor alineada a la derecha,

y no más de 300 píxeles de ancho a menos que la imagen sea necesaria para abarcar todo el ancho de la página.

Cuando agregue imágenes a las páginas, asegúrese siempre de que haya espacio suficiente (margen o

relleno) entre la imagen y la copia de texto adyacente o la columna misma. Típicamente 20px es la cantidad correcta. Para darle un estilo adecuado a esta alineación, solo agregue la imagen en una capa div como: <div style = "float: right; padding-left: 20px "> fuente de imagen </ div> Esto asegurará que haya espacio a la izquierda. También puede agregar espacio en la parte superior e inferior de la imagen si es necesario.

Evite las propiedades de alineación de imagen predeterminadas en la mayoría de los casos. Los diseños

receptivos no funcionan bien con esto, por lo que utilizamos capas div, como se indicó anteriormente, o colocamos la imagen dentro de una columna del tamaño apropiado.

Utilice listas con viñetas cuando proporcione una lista corta de contenido. Esto simplemente hace que el

texto sea más fácil de leer y los estudios han demostrado que las personas a menudo leen listas más fácilmente que solo el texto en una página.

Evite la justificación del texto a menos que sea absolutamente necesario. El texto justificado cambiará

según las resoluciones de visualización, y en dispositivos más pequeños se ve horrible. Evite muchas oraciones declarativas breves en la copia del cuerpo. Claro, está bien para las listas, pero

cuando se utiliza como un artificio para atraer la atención de las personas, transmite una impresión de exigencia de atención, similar al uso excesivo de encabezados, texto en negrita, texto en cursiva, texto en rojo y texto en mayúscula.

Evite el uso excesivo de imágenes, pero asegúrese de tener suficiente. Las personas son visuales, por lo que las imágenes son absolutamente necesarias, pero cuando se agregan demasiadas imágenes a una página, puede perder su atractivo profesional. Si se necesitan muchas imágenes, lo mejor es ajustarlas a un tamaño pequeño y luego vincularlas a la representación más grande.

9

Utilice los colores y la tipografía de página apropiados para su público objetivo, al tiempo que se asegura

de que todos puedan leer la copia proporcionando un buen contraste entre el color de la imagen y su fondo. Más sobre esto en nuestra página de tipografía y colores.

Hechizo y Gramática verifican toda la copia de su página. Esto es importante no solo para que sus páginas

web se perciban como profesionales, sino que se sabe que los motores de búsqueda reducirán la clasificación de un sitio que contiene muchos errores.

La maquetación, también llamada a veces diagramación, es un oficio del diseño editorial que se encarga de organizar en un espacio, contenidos escritos, visuales y en algunos casos audiovisuales (multimedia) en medios impresos y electrónicos, como libros, diarios y revistas. Estrictamente, el acto de maquetar tan solo se relaciona con la distribución de los elementos en un espacio determinado de la página, mientras que el diseño editorial incluye fases más amplias del proceso, desde el proyecto gráfico, hasta los procesos de producción denominados pre-prensa (preparación para impresión), prensa (impresión) y post-prensa (acabados). Sin embargo, usualmente todo el aspecto gráfico de la actividad editorial y periodística se conoce por el término maquetación. En el caso de un diario, la maquetación sigue los objetivos y líneas gráficas y editoriales de ese impreso. Las principales líneas editoriales para la maquetación de un diario incluyen la jerarquización de los artículos por orden de importancia. Las consideraciones gráficas incluyen legibilidad e incorporación balanceada y no-obstructiva de los anuncios publicitarios. La edición incorpora principios del diseño gráfico que, a su vez, es una profesión independiente o presente en licenciaturas relacionadas con el diseño, más allá de ser una disciplina que hace parte del currículo de profesiones como el periodismo, la publicidad y algunos cursos de arquitectura en universidades y facultades. Otros términos que sirven para referirse al proceso de maquetación son: layout, makeup o pasteup. EJEMPLOS DE DIAGRAMADO

10

RESUMEN Para la diagramación hay que tener en cuenta, el producto a elaborar, ya sean libros, revistas, folletos y la temática a desarrollar, informativo, ventas, música, para elaborar un producto acorde y llamativo, de ahí la recomendación de las 7 reglar de diagramación. La mejor forma de aprender a diagramar, es observando y emulando otras empresas tales como revistas, diarios, plegables, etc. Pero existen 7 reglas de oro que se deben tomar en cuenta al diseñar sus documentos. 1. Tenga presente el número de columnas a usar para que planifique la cantidad de texto. 2. Una vez ubicado los textos, no olvide dejar espacios para los elementos gráficos. 3. No recargue la página con textos imágenes o blancos sea conciso para no distraer del tema central. 4. Los espacios pequeños en blanco ayudan a descansar la vista. 5. Cuando diagrama una doble página deje un espacio prudente en el centro de ambas para evitar que las imágenes y el texto queden atrapados en el engrape o peque del lomo. 6. Se recomienda no utilizar más de 2 o 3 familias tipográficas por documento diagramado por títulos, subtítulos, y párrafos. 7. Si trabaja en equipo con un ilustrador, indíquele siempre en sus ordenadores los espacios y detalles de la ilustración que necesita con tinta roja o marcador destacable. RECOMENDACIONES Las fuentes manuscritas o script parecen cursivas o de caligrafía. En el diseño de una presentación digital, estas fuentes se reservan para acentuar el título principal, o la firma del autor, pues los trazos más finos pueden desaparecer, comprometiendo la legibilidad. La tipografía manuscrita se subdivide en: Brush, caligráfica, canciller, casual, formal, semi-formal, gráfico y mono línea, aunque también podría entrarse aquí el grafiti. Entre los ejemplos encontramos: Aelfa, Belphebe, Brush, Edwardian Script, English, Killigraphy, Medieval Victoriana y Vivaldi. Como parte de la tipografía manuscrita caligráfica podemos encontrar la tipografía Gótica o Blackletter. Fue el primer carácter de imprenta usado en Europa. Es un tipo de letra que imita la escritura a mano que llevaban a cabo los monjes con un plumín ancho. Este tipo generalmente tiene un aspecto oscuro y, por lo tanto, se conocen como Blackletter (letras oscuras) en los Estados Unidos. La tipografía Gótica incluye tipos de Frankfurt alemán y góticos. Se subclasifica en escritura gótica antigua e iniciales y escritura medieval. Se ha discutido sobre si la tipografía gótica, debería ser la primera en cualquier sistema de clasificación por ser la base y principio del desarrollo histórico del tipo. Manuscritas o Script. OTROS EJEMPLOS

11

Diagramado doble página, contraste de color, cambios de tonalidad que facilitan la lectura de la revista, hay una temática de continuidad del diseño que pasa de una hoja a otra. EJEMPLO 2 DOBLE PAGINA

Este diseño se basa más en componentes fotográficos, cambios de tono blanco y negro muy conveniente para ahorro de precio sin perder el interés en el lector.

Diseño compuesto, fotografía en marcos redondos o cuadrados, recorte de imágenes sobre fondo, fotografía en escala de gris, predomina el blanco y negro, luce muy bien para revistas con buen papel brillante de buena calidad, malo si se utiliza papel mate.

12

Muy vistoso, llamativo, colores que resaltan, el producto, es el ejemplo para el diagramado de productos para la venta, en su mayoría fotografías retocadas, saturando la coloración original.

Lee y analiza la información anterior, para que pueda desarrollar las actividades correspondientes a la temática tratada.

ACTIVIDAD 2. SISTEMATIZACIÓN Y TRANSFERENCIA DEL CONOCIMIENTO. SISTEMATIZACIÓN

Realiza una maquetación en ilustrador en donde los elementos de la página queden equilibrados. Escoge un tema e inicia a definir los elementos que lo acompañaran, recuerda utilizar la paleta de colores según el tema y los tipos de fuente legibles.

TRANSFERENCIA

Define los textos que se van a incluir junto a las fotografías y demás elementos gráficos que se van a presentar en el proyecto final.

13

II. DESARROLLO CONTEXTUAL

POSICIONES DE LAS CAJAS Estática La posición estática ("static") es la posición que tienen por defecto todas las cajas en HTML. Significa que su colocación en la pantalla será la que indique el flujo del documento, es decir, donde le corresponda estar en el momento que aparece en el código, que en general vendrá determinado por los elementos que le preceden. Si ninguna otra propiedad altera este estado (como los márgenes, por ejemplo), la caja ocupará sencillamente el lugar que le corresponde en el flujo del código.

Relativa La posición relativa de una caja, que se asigna en la hoja de estilo mediante la propiedad "position: relative", nos permitirá entre otras cosas desplazar esa caja con arreglo a cuatro parámetros: top, right, bottom y left (arriba, derecha, abajo e izquierda).

Absoluta La segunda manera de colocar cosas a nuestro antojo en la página sería mediante la posición absoluta (position: absolute). La posición absoluta también es colocada con arreglo a los cuatro parámetros descritos antes (arriba, derecha, abajo e izquierda), pero en este caso no serán desplazamientos con respecto a su posición natural, sino a las cuatro coordenadas de la página.

Fija La posición fija (position: fixed) sirve para colocar una caja en la ventana y que no se mueva de su pocisión al hacer scroll, al estilo de los "frames". Funciona como la posición absoluta, en cuanto a que se indica su colocación mediante las coordenadas top, right, bottom y left, pero a diferencia de la absoluta, siempre sus coordenadas corresponderán al area de visión (la pantalla completa), nunca a una caja que la contenga.

Responde:

¿Qué tienen en común todas las posiciones de las cajas? ¿Qué es el flujo del documento? ¿Por qué en la caja Absoluta no se hacen desplazamientos de su posición natural? ¿Para qué se utiliza la caja fija? ¿Para qué sirven las cajas en programación?

ACTIVIDAD 1. INTERIORIZACIÓN, REFLEXIÓN DEL SABER. Un navegador web o browser, a través de su agente de usuario, lleva a cabo la lectura del código HTML de una dirección web o url solicitada; la lectura de dicha página es secuencial (de arriba a abajo) y la disposición de los componentes en pantalla dependerá del tipo de elemento que se trate:

elementos en línea (span, img, a y otros): ocupan solo el espacio necesario para mostrar el contenido interno de los mismos,

elementos de bloque (p, div, h1, h2, fieldset y otros): siempre empiezan en una nueva línea y ocupan todo el espacio disponible en pantalla, o dentro de su contenedor, hasta el final de la línea, aunque sus contenidos no tengan tanto tamaño.

Todos se disponen de izquierda a derecha en pantalla, ocupan un espacio rectangular y, por defecto, en función del contenido de los mismos y solo se dispondrá un elemento en una nueva línea cuando sea un elemento de bloque.

Tan importante es conocer esto como saber que los estilos y, como consecuencia, las posiciones de los componentes en pantalla se pueden modificar aplicando hojas de estilos CSS.

Tanto HTML como CSS tienen una serie de versiones, la de CSS depende de la versión de HTML con la que estemos trabajando y depende del navegador soportará hasta una versión de HTML y CSS concretas.

Además, los navegadores aplican una versión de HTML por defecto cuando, dentro del contenido del documento, no se hace una mención explícita a la misma. Por eso, es de suma importancia que especifiquemos cuál es la versión de HTML y, como consecuencia de CSS, con la que estamos trabajando. Para ello en la cabecera de todos nuestros documentos HTML debemos incorporar la directiva <!DOCTYPE, por ejemplo:

Para XHTML 1.0 transsitional:

14

Para HTML 5:

La ausencia de DOCTYPE es la principal raíz de los problemas de disparidad de visualización entre navegadores.

A continuación, un ejemplo de mezcla de elementos de línea y de bloque:

Se visualizará así:

style=”display”.

El atributo más básico a nivel de estilos es display y en función del tipo de elemento tiene un valor por defecto:

inline: en línea, por defecto para los elementos en línea, block: de bloque, por defecto para los elementos de bloque, none: para ocultar la visualización de un componente sin ocupar espacio en pantalla.

Hay más posibles valores, podéis consultar una referencia rápida aquí. https://www.w3schools.com/cssref/pr_class_display.asp

15

Si, por ejemplo, en el html anterior incluimos un selector css del siguiente modo:

Modificaremos la disposición en pantalla del párrafo y, con ello, de todos los componentes posteriores a él.

style=”float”.

El segundo modificador del que vamos a hablar es float que permite flotar un componente a derecha o izquierda, rompiendo con esa disposición secuencial de los elementos dentro del HTML. Es importante conocer que, si flotamos un elemento, los posteriores se verán afectados puesto que se comportará como un elemento en línea:

Tendremos la siguiente disposición en pantalla:

16

Para romper la aplicación del modificador float a los siguientes elementos podemos usar el modificador clear:both. En el siguiente ejemplo vemos como flotar a izquierda y derecha y romper el float en la siguiente capa.

Con ello la disposición en pantalla cambia como sigue:

style=”position”.

El último modificador es el de la posición que puede adoptar los siguiente valores:

static: la de por defecto para todos, absolute: se posiciona respecto al último elemento en la jerarquía no marcado como estático; si no

existe en la jerarquía de padres o contenedores un elemento marcado como no estático se posiciona como fixed, esto es, respecto a la ventana,

fixed: su posición será relativa respecto a la posición de la ventana, relative: su posición será relativa respecto a su posición normal.

Imaginemos que tenemos un gráfico que describe el flujo de trabajo en fases dentro de una cadena de negocio, un workflow y queremos visualizar, de forma dinámica, el número de actividades abiertas dentro de cada fase en una página web, con HTML. Empezaremos por tener, por ejemplo, una imagen con el gráfico sin descripciones.

17

La descripción de cada puesto de trabajo la queremos internacionalizada y mostrará el número de actividades abiertas en el mismo, a modo de cuadro de mando.

Lo primero es crearnos un elemento complejo para cada puesto:

El objetivo es, teniendo la imagen de fondo del flujo, posicionar las capas sobre su correpondiente tarea.

Si usamos posiciones absolutas el problema será que, en función del contenido y tamaño de los componentes que posicionemos encima del gráfico, pueden variar la suya puesto que se posicionan respecto a la ventana.

La solución es establecer la imagen como fondo de una capa dispuesta de forma relativa en la página (rompiendo el position=static) y, dentro de la misma, posicionar todas las capas correspondientes a las tareas de forma absoluta. Las posiciones de las capas serán absolutas a la capa de la imagen, con lo que no cambiará su posición debido a redimensionamientos.

Los estilos podrían ser los siguientes:

Y la información de las distintas fases quedarían cuadradas dentro de cada capa como se muestra a continuación.

18

Luego está la tarea de internacionalizar el texto de los nodos de decisión.

Lee y analiza la información anterior, para que pueda desarrollar las actividades correspondientes a la temática tratada.

ACTIVIDAD 2. SISTEMATIZACIÓN Y TRANSFERENCIA DEL CONOCIMIENTO. SISTEMATIZACIÓN

Observa los siguientes videos para reforzar el tema del posicionamiento en html.

https://www.youtube.com/watch?v=sOyA84uhoCQ

https://www.youtube.com/watch?v=ODNXVYtsfMk

https://www.youtube.com/watch?v=v87DEhpsT4U

TRANSFERENCIA

Realizar la estructura básica del código en html de la maquetación de nuestra página web, teniendo en cuenta el posicionamiento.

ACTIVIDAD 3. RETROALIMENTACION DEL CONOCIMIENTO. 1. ¿Qué atributo de HTML se emplea para definir los estilos en línea?

a) class

b) css

c) font

d) style

2. ¿Qué etiqueta no ha existido nunca en la especificación de HTML?

a) <blink>

b) <font>

c) <strike>

d) Las anteriores respuestas no son correctas

3. ¿Qué etiqueta está desaconsejada en XHTML 1.0?

a) <font>

b) <dl>

c) <dt>

d) Las anteriores respuestas no son correctas

4. En HTML, el atributo alt se emplea para

19

a) Indicar la URL de una página web donde se proporciona una descripción larga de una

imagen

b) Proporcionar el texto alternativo de una imagen

c) Indicar la URL de una imagen en un formato alternativo

d) Las anteriores respuestas no son correctas

5. En HTML, para incluir código de script que se encuentra en un fichero externo se emplea

a) <script src="fichero.js">

b) <script file="fichero.js">

c) <script code="fichero.js">

d) Las anteriores respuestas no son correctas

6. En HTML, para definir una línea horizontal de separación se emplea

a) <dd>

b) <hr>

c) <pre>

d) <xmp>

7. En HTML, para indicar que una celda de una tabla es un encabezado se emplea la etiqueta

a) <tr>

b) <th>

c) <td>

d) Las anteriores respuestas no son correctas

8. En HTML, cuál de las siguientes afirmaciones es cierta

a) La etiqueta <ol> debe ir anidada dentro de la etiqueta <li>

b) La etiqueta <p> debe ir anidada dentro de la etiqueta <strong>

c) La etiqueta <li> debe ir anidada dentro de la etiqueta <ul>

d) La etiqueta <html> debe ir anidada dentro de la etiqueta <body>

9. En HTML, para definir que el idioma principal de una página es el español se emplea

a) <html lang="es">

b) <html id="es">

c) <head lang="es">

d) <head id="es">

10. En HTML, rowspan y colspan son atributos de la etiqueta

a) <div>

b) <p>

c) <table>

20

d) Las anteriores respuestas no son correctas

IV. CONCEPTOS TÉRMINO / CONCEPTO SIGNIFICADO

HTML

MAQUETAS

POSICIONAMIENTO

V. AUTOEVALUACIÓN Y MEJORA

AUTOEVALUACIÓN DEL PROCESO DE FORMACIÓN

A continuación, encontrarás una lista de ítems desarrollados durante la unidad. Debes decir si cumples o no cada uno de ellos. Lo importante no es obtener una calificación, sino reflexionar sobre lo que haces. Analiza y responde muy sinceramente.

ITEMS SI NO

1. Soy puntual en mi llegada al salón de clases.

2. Cumplo responsablemente con la presentación de tareas, talleres y trabajos de la asignatura.

3. Preparo adecuadamente, parciales, quices, exposiciones y evaluaciones acumulativas.

4. Contribuyo a la construcción de conocimiento asumiendo una actitud de escucha, respeto y reconocimiento de las opiniones de mis compañeros y profesores.

5. Cumplo con el manual de convivencia y practico los valores Rosaristas en el salón de clase.

NOTA DEFINITIVA DE LA AUTOEVALUACIÓN.

COMPROMISO DE MEJORA

VI. FUENTES DE CONSULTA

Referencias AMADOR MONTAÑO, José Francisco (2005); Keypoint 1- 2- 3, Editorial Educativa Bogotá –

Colombia. Páginas Web www.dagabot.com http://windows.microsoft.com/es-cl/windows/using-mouse#1TC=windows-7 https://sites.google.com/site/informaticaprimariaespamix/home/El-teclado

http://es.slideshare.net/cvbonilla1/el-teclado-8718564