Editores de texto para desarrolladores

Posted on septiembre 23, 2014 por Tecnología Gráfica 1

Como dijimos en clase, los profesionales y especialistas en diseño y desarrollo web utilizan editores de texto para su trabajo diario.

Podrían utilizar tranquilamente el Bloc de Notas (Notepad, en inglés) de Windows, o el TextEdit de Mac OS X —cualquier editor de texto que genere archivos de texto plano—; pero por lo general se utilizan editores de texto especialmente creados para escribir código. Estos programas ayudan a los desarrolladores marcando con colores las diferentes partes del código y escribiendo automáticamente ciertas partes.

Linux:

Sublime Text 2
Gedit
Muchos más… recomiendo googlear e investigar.

Windows:

Mac OS X:

Por último, no nos olvidemos del archiconocido, pero no recomendable, Adobe Dreamweaver. En su gran mayoría, los desarrolladores web profesionales no lo utilizan por su pobre funcionalidad, el retraso en la aplicación de los últimos estándares web, y su precio.

Diferentes versiones de HTML

Posted on septiembre 23, 2014 por Tecnología Gráfica 1

Responder

Como con la mayoría de los formatos de archivos de computadora, existen diferentes versiones del formato HTML. Por lo general —si la página web está bien hecha— el archivo HTML contiene, en el primer renglón, la indicación de qué versión se trata. Este primer renglón se llama Doctype, y aquí listo algunos ejemplos:

Doctype del HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype del XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Y el doctype más sencillo, del estándar en proceso HTML5:

<!DOCTYPE html>

Curioso, verdad? El doctype del boceto de estándar llamado HTML5 no indica por ningún lado el número 5. Si tenemos un ratito hablaremos de esto en alguna clase.

Ejemplos de Doctypes colocados en archivos HTML:

Ejemplo de archivo HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Título general</title>
  </head>
  <body>
    <h1>Blog de CompuGraf3</h1>
    <p>Aquí algunas anotaciones.</p>
  </body>
</html>

Ejemplo de archivo XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Título general</title>
  </head>
  <body>
    <h1>Blog de CompuGraf3</h1>
    <p>Aquí algunas anotaciones.</p>
  </body>
</html>

Ejemplo del archivo basado en la situación actual de la especificación en proceso de HTML5:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Título general</title>
  </head>
  <body>
    <h1>Blog de CompuGraf3</h1>
    <p>Aquí algunas anotaciones.</p>
  </body>
</html>

Curioso, verdad? El doctype del boceto de estándar llamado HTML5 no indica por ningún lado el número 5.

Formatos

Posted on septiembre 23, 2014 por Tecnología Gráfica 1

Responder

En el la disciplina del Desarrollo Web front-end se utilizan principalmente tres formatos de archivos (hay más, pero éstos son los más importantes):

HTML: contenido de una página web, estructurado semánticamente. Se trata de un lenguaje de marcado.
CSS: presentación de una página web (el diseño de la página). Es un lenguaje de presentación.
JavaScript: el comportamiento de los elementos de una página web. Éste es el único de los tres que efectivamente es un lenguaje de programación.

Cuando el desarrollo de un sitio web está bien hecho, éstas tres cuestiones van por carriles separados. El contenido, el diseño y el comportamiento de una web nunca deben mezclarse.

El archivo más importante de la Web: el HTML

Posted on septiembre 17, 2014 por Tecnología Gráfica 1

Responder

Como se habrán dado cuenta, el formato de archivo más importante de la World Wide Web es el HTML. Cada vez que tocamos un link o escribimos una dirección en nuestro navegador, hacemos que nuestra computadora cargue una nueva página web, cuyo contenido se encuentra definido en un archivo HTML.

¿HTML WTF?

HTML es una sigla: HyperText Markup Language. Dicho en español significa algo así como Lenguage de Marcado de HíperTextos.

Un lenguaje

Decimos que es un lenguaje porque tiene una particular forma de escritura: una sintaxis y una grámatica; una serie de signos que le son propios.

De marcado

La función principal de este lenguaje es marcar. Esto quiere decir que —como cuando uno estudia un texto para la facultad, y va resaltando partes o haciendo notas en los márgenes— estos archivos marcan en contenido de una página web, pero lo hacen de una forma muy especial: de forma estándar y sistemática, al punto que una máquina (Google por ejemplo) pueda entender las relaciones entre las diferentes partes de este contenido.

Se dice que se trata de un marcado semántico: porque se debe hacer habiendo leído e interpretado el texto. Títulos, subtítulos, párrafos, listas, etc., deben marcarse de acuerdo a la función real que cumplen en el texto. Este trabajo de edición —al menos por el momento— sólo lo puede hacer un ser humano.

De híper textos

Se conoce como hípertexto a esta idea de textos que remiten a otros textos, que a su vez remiten a otros y así sucesivamente. La idea del hípertexto es previa a la Web, un concepto filosófico con respecto al texto y a la función del lector.

La sintaxis del HTML

El HTML tiene una sintaxis particular, y lo más importante es recordar cómo se escriben las etiquetas y los atributos. Las etiquetas se abren y se cierran, como se ve a continuación. Por ejemplo, la etiqueta <p> marca un párrafo:

<p>Esto es un párrafo</p>

Algunas etiquetas llevan atributos, aquí el ejemplo de la etiqueta <a>, que se encarga de marcar links, y su atributo href:

<a href="http://www.google.com">Esto es un link a Google</a>

Algunas etiquetas básicas que deben estar:

<html>
  <head>
    Aqui informacion acerca de la pagina.
  </head>
  <body>
    Aqui el contenido de la pagina.
  <body>
</html>

Cuando se hace un HTML así de básico, conviene no utilizar tildes, eñes, u otros caracteres extraños a la lengua inglesa. En realidad, lo que falta es definir el encoding con el que se encuentra codificado este archivo.

¡A practicar!

Internet y la Web

Posted on septiembre 17, 2014 por Tecnología Gráfica 1

Responder

Como dijimos en clase, Internet y la Web no son sinónimos.

Internet

En resumidas cuentas, Internet es una red de computadoras conectadas —principalmente— por cables. Internet es algo tangible: podemos tocar las computadoras y los cables (también requiere software, porque dichas computadoras deben saber cómo comunicarse entre sí).

Incluso hay cables que cruzan los océanos!

La Web

La World Wide Web es algo así como una red de archivos, interconectados por medio de lo que llamamos links. La Web es algo virtual, construida a base de puro software.

La Web funciona de la siguiente manera: cada vez que un usuario quiere acceder a una página web, tipea en su navegador una URL o hace click sobre algún link. En ese momento, su computadora hace un pedido —a través de los cables que hacen a la Internet— a la otra computadora que tiene los archivos que construyen dicha página web.

Llamamos «servidores» a las computadoras que responden a este tipo de pedidos, enviando los archivos correspondientes.

En respuesta a este tipo de pedidos, los servidores envían —por lo general— los archivos que le sirven a la computadora cliente para reconstruir la página web y poder mostrársela al usuario.

¿Qué es el Desarrollo Web?

Posted on septiembre 17, 2014 por Tecnología Gráfica 1

Responder

Luego del proceso de diseño de una web, viene la etapa de desarrollo. Lo que llamamos Desarrollo Web es, en realidad, el proceso productivo de creación de un sitio web. Es cuando el diseño deja de ser un mero prototipo y efectivamente se construye un sitio web funcional, que puede ser utilizado por usuarios navegantes.

Variables de la autotipía

Posted on septiembre 10, 2014 por Tecnología Gráfica 1

Responder

En el caso de la autotipía tradicional (AM), hay tres variables que es importante identificar.

Valor tonal

Básicamente, es lo que hace que cierta zona del impreso se vea más oscura o más clara. Se mide en porcentaje (de 0% a 100%) y suele decidirse desde los programas de diseño.

Ángulo de trama

Por lo general, varía entre las tramas de las diferentes tintas de un impreso, para evitar el famoso efecto Moirè.

Lineatura de trama

Aquí arriba ^ tenemos un ejemplo con dos tramas que tienen un mismo valor tonal, mismo ángulo pero diferente lineatura de trama. Cuidado! Aunque los puntos sean más grandes, se trata del mismo valor tonal porque al estar más alejados entre sí, hay que agrandarlos para que sigan cubriendo el mismo porcentaje de superficie.

La lineatura de trama sirve para medir cuántos puntos entrar en cierto recorrido. Se mide en Lpi (Lines per inch / Líneas por pulgada).

La trama tradicional está ordenada a través de una grilla imaginaria en forma de cuadrícula. Esa cuadrícula tiene líneas (horizontales y verticales). Lpi se refiere a la cantidad de dichas líneas, que pueden entrar en una pulgada.

En términos ideales y abstractos podemos decir que a una mayor lineatura de trama, la imagen tiene mayor definición (porque hay más puntos, de menor tamaño, en una pulgada). A lineatura más alta, puntos más pequeños, mayor y mejor definición. A lineatura más baja, puntos más grandes, menor y peor definición.
Esto es así en teoría, pero al tomar en cuenta el tipo de tinta, el tipo de impresión y sobre todo el soporte, no es tan sencillo. Por ejemplo: si se utiliza papel prensa, una lineatura cerrada no funcionará bien porque dicho soporte es altamente absorvente, los puntos de tinta se agrandarán por la capilaridad del papel y el valor tonal se incrementará, empastando la imagen. Para ese tipo de soportes, conviene utilizar una lineatura menor (más abierta).

Trama / Autotipía

Posted on septiembre 10, 2014 por Tecnología Gráfica 1

Responder

En casi todos los sistemas de impresión, las tintas funcionan siempre con la misma intensidad, es decir: no se puede aplicar una misma tinta de forma más clara o más oscura. El proceso es binario: se aplica, o no se aplica tinta, sobre cierta superficie.

Es por esto que solemos decir que las formas impresoras tienen zonas impresoras y zonas no impresoras.

Mientras se realicen trabajos con elementos llamados “pluma”, en la jerga del trabajo gráfico, no hay ningún inconveniente con esto. Texto, imágenes con líneas plenas y definidas, fondos de color pleno, etc. Sin embargo, la incógnita es ¿cómo se logran los medios tonos, entonces?

La autotipía

Por medio de un grafismo, una trama, logramos dar la sensación de cambio en el valor tonal. De ahí que cuando uno elige tinta negra al 50%, o cian al 30% —por ejemplo—, la computadora le indicará al CTP que en la forma impresora debe generar una trama donde cubra el 50% ó el 30% de la superficie.

CMYK

Cuando se suman más tintas (más colores) el asunto se complica, porque la superposición de tramas por lo general hace aparecer un efecto no deseado, llamado efecto Moirè.

Tramas y comic, por Juanjo Mejías – algunos datos extra en relación a la industria del comic

La solución a este inconveniente es variar los ángulos de las diferentes tintas, de forma tal que ninguna tenga el mismo ángulo que la otra.

A continuación se pueden ver unas pruebas con las cuatro tintas al 50%. En la fila superior los colores no se encuentran tramados (como se vería en una computadora), en la segunda fila ya están tramados, como pasarían a una forma impresora de offset, por ejemplo.