50% encontró este documento útil (2 votos)

3K vistas74 páginas

Dise o y Desarrollo Web 2bgu PDF

El documento habla sobre el soporte técnico. Explica que el soporte técnico es la asistencia que brindan las empresas a sus clientes para que puedan usar sus productos y servicios. El objetivo del soporte técnico es ayudar a los usuarios a resolver problemas. Por lo general, las empresas de informática ofrecen soporte técnico a sus clientes a través de teléfono, internet o visitas a domicilio.

Cargado por

maac.anchun

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

50% encontró este documento útil (2 votos)

3K vistas74 páginas

Dise o y Desarrollo Web 2bgu PDF

Cargado por

maac.anchun

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 74

Diseño y Desarrollo Web 2Bgu Página 1

Presentación

La noción de soporte se utiliza para nombrar a algo que brinda un respaldo, que
puede ser físico o simbólico. Lo técnico, por otra parte, se asocia a aquello que se
aplica en la ciencia o una disciplina artística.

El soporte técnico, por lo tanto, es una asistencia que brindan las empresas para
que sus clientes puedan hacer uso de sus productos o servicios. La finalidad del
soporte técnico es ayudar a los usuarios para que puedan resolver ciertos
problemas.

Por lo general, las empresas de informática cuentan con soporte técnico a

disposición de sus usuarios. La atención se brinda por teléfono, a través de Internet
o, en algunos casos, mediante visitas del personal al domicilio del cliente. El soporte
técnico puede contribuir a resolver a distancia un error de programación en un
software o una instalación defectuosa de un hardware, por citar dos posibilidades.

Diseño y Desarrollo Web 2Bgu Página 2

Conceptos
básicos de Web

Diseño y Desarrollo Web 2Bgu Página 3

HTML

HTML es el lenguaje de programación* web más básico que hay, tanto por su
propósitos, como porque sirve de anclaje para el resto de lenguajes de
programación.

* Algunas personas no consideran HTML como un lenguaje de programación sino

como un lenguaje de etiquetas.

Cuando desarrollamos u observamos

cualquier página, debemos tener la
seguridad, de que su estructura,
forma y contenido, han sido
desarrollados, directa o
indirectamente, a través de este
lenguaje.

Si nos servimos del cuerpo humano

como alegoría, HTML sería el
esqueleto de cualquier site: Da forma al cuerpo y sirve de anclaje para el resto de
componentes. Siguiendo este ejemplo, nuestra piel y complementos, es decir,
nuestra imagen, estarían a cargo de las llamadas hojas de estilo o CSS. Y,
finalmente, nuestras acciones estarían definidas por otros lenguajes de
programación; El más popular es Java Script.

Diseño y Desarrollo Web 2Bgu Página 4

El nombre HTML proviene de las siglas en inglés de HyperText Markup
Language (lenguaje de marcas de hipertexto), y ese curioso nombre describe el
funcionamiento del propio lenguaje: Su funcionamiento se basa en describir, a
través de etiquetas de apertura y cierre, qué es lo que queremos mostrar en
una web. Siendo las etiquetas <head> y <body>, las que marcan su estructura
fundamental.

Así pues, una web totalmente vacía, tendría tras ella el siguiente código HTML:

En el interior de las
etiquetas <head></head> se
escribirán las líneas de código
que definan el propio documento
(Nombre, idioma, propósito de la
web, llamadas a hojas de estilo y
otros lenguajes…).

En el interior de las
etiquetas <body></body> se
escribirán las líneas que
definan su estructura y
contenido: Tablas, párrafos,
imágenes, vídeos…

Este código mostraría la siguiente web:

Diseño y Desarrollo Web 2Bgu Página 5

De donde:

Sí, pero… ¿dónde se escribe ese código?

El código HTML puede ser escrito en cualquier editor de texto básico como
el Bloc de notasde Windows, Gedit de Linux… O en cualquier otro editor que admita
texto sin formato como GNU Emacs, Microsoft
Wordpad, TextPad, Vim, Notepad++…

Será suficiente con abrirlos, escribir el código y guardar el documento con la

extensión .htm o .html.

Esto generará una página web que abrirá nuestro navegador cuando la ejecutemos.

Naturalmente, existen editores mucho más complejos

como DreamWeaver, FrontPage, etc… Que nos permiten crear una web tanto
a través de código como a través de una interfaz gráfica.

Y como principales ventajas, colorean los diferentes elementos para que sea más
sencillo distinguir las distintas partes de una web, y nos muestran errores cuando
parte del código ha sido mal escrito.

Diseño y Desarrollo Web 2Bgu Página 6

A continuación ponemos algunos enlaces de distintos programas de software
libre especializados en crear y editar código HTML:

 Notepad++
 Aptana Studio
 WebStorm
 Visual Studio Express

¿Cuándo y cómo nació el lenguaje HTML?

Corría el año 1989 y un joven Tim

Berners (34) se disponía a crear la
web tal y como la conocemos hoy
día.

La primera red interconectada había

sido creada hacía 20 años uniendo las
universidades de Stanford y UCLA
bajo el nombre de Arpanet, y desde

Diseño y Desarrollo Web 2Bgu Página 7

entonces no había hecho más que aumentar sus interconexiones.

En 1989, el CERN era el nodo de internet más grande de Europa, pero internet era,
en esencia, un sistema para enviar y recibir emails. No había páginas webs, no
había buscadores, no había, en definitiva, hipertexto (hipervínculos).

Así pues un equipo de físicos liderados por Tim Berners se propuso unir ambas
tecnologías (el hipertexto y Arpanet), y para ello, nada mejor que usar la gran red
del CERN.

Basándose en un lenguaje de hipertexto llamado SGML, consiguieron crear

un sistema a partir del cual podía accederse a los ficheros almacenados en
los ordenadores que estuviesen en red. Esa mejora del sistema SGML, fue
conocida como HTML y, tan sólo un año más tarde, ese mismo equipo creaba el
WWW (Word Wide Web), el primer servidor y el primer navegador web.

Había nacido la web, y Tim Berners sería considerado como el padre de la misma.

Elementos HTML

Los elementos son la estructura básica del HTML. Cada elemento configura una
parte fundamental de la arquitectura de una web.

Casi la totalidad de los elementos en HTML, deben venir definidos por una etiqueta
de apertura y una de cierre.

Algunos ejemplos de elementos son:

Los elementos pueden anidarse unos dentro de otros y, cuando se anidan, suelen
tabularse para una mayor claridad:

Diseño y Desarrollo Web 2Bgu Página 8

Elemento tabla

Cada elemento tiene dos partes esenciales: Atributo y propiedades.

El atributo define al elemento pudiéndole asignar propiedades.
Por ejemplo:

Al elemento <span> se le ha asignado un texto, “Hola”, dos atributos (id y class), y

dos propiedades; una a cada atributo.
Podemos dividir los elementos en 3 tipos:
Marcado estructural:
Describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf»
como un encabezamiento de segundo nivel.
El marcado estructural no tiene asignado un estilo por defecto, si bien la mayor
parte de los navegadores le asignan uno de base, que puede ser editado a través
de atributos y propiedades.
Ejemplo:

Marcado presentacional:
Describe la apariencia del texto, sin importar su función.
Ejemplos:

Diseño y Desarrollo Web 2Bgu Página 9

Marcado hipertextual:
Se utiliza para enlazar partes del documento con otros documentos o con otras
partes del mismo. Para crear un enlace es necesario utilizar la etiqueta de ancla
<a> junto con el atributo href, que establecerá la dirección URL a la que apunta el
enlace.
Ejemplo:

¿Cómo puedo ver el código de una página web?

No hay mejor manera de aprender que ver lo que han hecho otros con más
experiencia y, especialmente, ver cómo lo han hecho.
Si algo muy ventajoso tiene el mundo web, es precisamente la libertad de ver
cualquier código en cualquier momento. Si te gusta el efecto que le han puesto a un
botón, puedes ver cómo se ha conseguido ese efecto. Si te gusta la manera en la
que se verifica la corrección de un formulario, ves el código, lo copias, aprendes y
lo mejoras.
¿Y cómo veo el código? Muy sencillo, basta con pulsar la combinación de teclas
Control+U. Lo que se te mostrará es lo que conocemos como código fuente es decir,
todo el código del lado del cliente, que hace posible que esa web funcione tal y
como lo hace. O dicho de otra forma, el código HTML y las capas superiores de
código que tenga embebidas (CSS, JavaScript…).
Otra forma de mostrar el código fuente es:
En Internet Explorer:
Ver –> Fuente
En Chrome:
Menú (3 líneas horizontales en la parte superior izquierda) –> Más herramientas –
> Ver código
En Firefox:
Herramientas –> Desarrollo web –> Código de página
En Safari:
Ver –> Ver fuente

Diseño y Desarrollo Web 2Bgu Página 10

Ya pero… ¿Y si quiero ver el funcionamiento de algo muy concreto? ¿Tengo
que buscar en todo el código fuente de la página?
Chrome, Firefox y la última versión de Internet Explorer (Microsoft Edge), tienen una
herramienta llamada “Inspeccionar elemento“, que permite ver el código tras un
elemento en particular, en el contexto de toda la web.
Para utilizar dicha herramienta, basta con hacer clic con el botón derecho en la parte
concreta cuyo código queramos conocer, y pulsar en Inspeccionar.

Actividades – HTML

1. Escriba una V si es verdadero o una F si es falso en

cada una de las siguientes afirmaciones.
a. HTML es el lenguaje de programación* web más
básico que hay, tanto por su propósitos ( )
b. El nombre HTML proviene de las siglas en inglés de HyperText
Markup Language (lenguaje de marcas de hipertexto) ( )
c. El código HTML puede ser escrito en cualquier editor de texto
básico como el Bloc de notasde Windows, Gedit de Linux ( )
d. No hay mejor manera de aprender que ver lo que han hecho otros con
más experiencia y, especialmente, ver cómo lo han hecho. ( )
e. Algunas personas no consideran HTML como un lenguaje de programación
sino como un lenguaje de etiquetas. ( )
f. Si nos servimos del cuerpo humano como alegoría, HTML sería el
esqueleto de cualquier site ( )

2. Responda las siguientes preguntas.

a. ¿En qué se basa el funcionamiento de HTML?

____________________________________________________
____________________________________________________

b. ¿Qué se escribe en el interior de las etiquetas <head></head>?

___________________________________________________
___________________________________________________

c. ¿Qué se escribe en el interior de las etiquetas <body></body>?

___________________________________________________
___________________________________________________

Diseño y Desarrollo Web 2Bgu Página 11

d. ¿Quién fue Tim Berners y cuál fue su aporte a la informática?
___________________________________________________
___________________________________________________
___________________________________________________

3. Complete el siguiente organizador gráfico. Tipos de elementos HTML

Elementos

Mercado Mercado Mercado

Estructural Presentacional Hipertextual

Diseño y Desarrollo Web 2Bgu Página 12

Definición de Página Web
Una Página Web es conocida como un documento de tipo electrónico, el cual
contiene información digital, la cual puede venir dada por datos visuales y/o
sonoros, o una mezcla de ambos, a través de textos, imágenes, gráficos, audio o
vídeos y otros tantos materiales dinámicos o estáticos. Toda esta información se ha
configurado para adaptarse a la red informática mundial, también conocida
como World Wide Web.

Las páginas web o como también son conocidas las web page por su nombre en
inglés se encuentran contenidas dentro de los sitios web o websites, que son mejor
conocidos por los desarrolladores con el nombre de dominios, que almacenan o
alojan el contenido que se desarrollan para ser visualizados o usados por
el usuario.
Todo lo mencionado anteriormente se trata de datos virtuales, pero el sitio físico
donde se almacenan todos esos documentos se le denomina servidores o hosting,
que se puede definir como un ordenador conectado constante
a Internet para poder acceder a las páginas web a cualquier hora y desde cualquier
lugar. A las páginas web se puede ingresar a través de navegadores o buscadores,
entre los más famosos están Chrome, Mozilla e Internet Explorer.
El lenguaje bajo el cual funcionan las ciber páginas se llama HTML, un formato de
programación que permite tener acceso a diferentes páginas web a través de
enlaces de hipertexto, los cuales también son conocidos como links, es decir, dentro
de un documento electrónico puede estar contenido otro, que de acceso bien sea

Diseño y Desarrollo Web 2Bgu Página 13

a otra parte de la misma página web o simplemente a otra página, su objetivo básico
es facilitar la investigación por medio de la navegación de distintos contenidos.
Página Web estática
Es la típica web corporativa
en la que se presenta una
empresa, un producto o un
servicio concreto. Son
funcionalmente muy
básicas y con poca
programación salvo, quizá,
algún formulario de
contacto. Están
programadas
principalmente en
lenguajes como HTML,
CSS o Javascript, aunque
también se pueden utilizar plataformas CMS para crearlas. De hecho, un post es
una página estática, actualizable pero estática.
Las que se crean en HTML, no conllevan casi ningún desarrollo en el servidor, ya
que no requieren ni base de datos, ni un procesador de lenguajes de servidor, tipo
PHP o Java. Simplemente, se suben los ficheros al servidor y la página web
funciona tal cual se ha diseñado y maquetado.
El concepto estático es propio de un sitio web que no se actualiza con frecuencia.
Y si lo hace, es con una periodicidad bastante extensa.
Página Web dinámica
Se trata de la evolución de la web estática en la que los usuarios dejan de ser
pasivos para convertirse en activos. Así, participan y contribuyen siendo capaces
de crear, dar soporte y formar parte de sociedades y/o comunidades tanto a nivel
local como global, que se informan, comunican y generan conocimiento y contenido.
Este tipo de páginas web están
basadas en un sistema CMS
(Content Management System
o Sistema de Gestión de
Contenidos). El lenguaje más
usado en este tipo de
plataformas es PHP y la base
de datos más usada, aunque
no la única, es MySQL.

Diseño y Desarrollo Web 2Bgu Página 14

En cuanto al servidor tiene que estar preparado para funcionar con bases de datos
y un procesador de PHP. Además de varios niveles de caché para optimizar el envío
de las páginas web desde el servidor.
Web estática vs dinámica
En realidad, el HTML es el lenguaje de programación que tiene como objeto el
desarrollo de la estructura de la web y dar formato al texto y las imágenes que
quieres que se visualicen en el navegador.
Con este lenguaje se pueden introducir enlaces, cambiar el tamaño y las fuentes de
los textos, insertar imágenes, etc. Pero no se puede, por ejemplo, crear un
formulario de contacto o gestionar una base de datos.
Resulta bastante limitado a la hora de concebir grandes sitios o portales. Por eso,
ha sido necesario implementar otro tipo de lenguajes que respondan a las
demandas de los distintos navegadores. Y que permiten la automatización de las
distintas tareas que ofrecen las páginas dinámicas.
Con este lenguaje podrás crear desde una simple web informativa con los datos de
tu empresa hasta un complejo portal con todo tipo de funciones, un blog, una tienda
online o una central de reservas. Guardarás los registros históricos de los clientes,
mandarás emails inteligentes, etc.
Además, te permitirá la interacción con los usuarios, lo cual favorece enormemente
la eficacia de la página para atraer clientes.

Diseño y Desarrollo Web 2Bgu Página 15

El protocolo IP
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta
datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en
datagramas. Durante su transmisión se puede partir un datagrama en fragmentos
que se montan de nuevo en el destino. Las principales características de este
protocolo son:
Protocolo orientado a no conexión.
Fragmenta paquetes si es necesario.
Direccionamiento mediante direcciones lógicas IP de
32 bits.
Si un paquete no es recibido, este permanecerá en
la red durante un tiempo finito.
Realiza el "mejor esfuerzo" para la distribución de
paquetes.
Tamaño máximo del paquete de 65635 bytes.
Sólo ser realiza verificación por suma al encabezado del paquete, no a los datos
éste que contiene.
El Protocolo Internet proporciona un servicio de distribución de paquetes de
información orientado a no conexión de manera no fiable. La orientación a no
conexión significa que los paquetes de información, que será emitido a la red, son
tratados independientemente, pudiendo viajar por diferentes trayectorias para llegar
a su destino. El Protocolo Internet proporciona un servicio de distribución de
paquetes de información orientado a no conexión de manera no fiable.
La unidad de información intercambiada por IP es denominada datagrama.
Tomando como analogía los marcos intercambiados por una red física los
datagramas contienen un encabezado y una área de datos. IP no especifica el
contenido del área de datos, ésta será utilizada arbitrariamente por el protocolo de
transporte.
Direcciones IP
Para que en una red dos computadoras puedan comunicarse entre sí ellas deben
estar identificadas con precisión Este identificador puede estar definido en niveles
bajos (identificador físico) o en niveles altos (identificador lógico) de pendiendo del
protocolo utilizado. TCP/IP utiliza un identificador denominado dirección internet o
dirección IP, cuya longitud es de 32 bites. La dirección IP identifica tanto a la red a
la que pertenece una computadora como a ella misma dentro de dicha red.

Diseño y Desarrollo Web 2Bgu Página 16

Tomando tal cual está definida una dirección IP podría surgir la duda de cómo
identificar qué parte de la dirección identifica a la red y qué parte al nodo en dicha
red. Lo anterior se resuelve mediante la definición de las "Clases de Direcciones
IP". Para clarificar lo anterior veamos que una red con dirección clase A queda
precisamente definida con el primer octeto de la dirección, la clase B con los dos
primeros y la C con los tres primeros octetos. Los octetos restantes definen los
nodos en la red específica.
Principales Navegadores

Para mucha gente pueden llegar a pasar desapercibidos, pero los navegadores
web son esenciales para el acceso y circulación por Internet, son el vehículo
mediante el cual navegamos a través de la infinita red. Si nos fijamos en la definición
que nos da la Wikipedia, “un navegador o, en inglés, un browser, es un software
que permite el acceso a Internet, interpretando la información de los sitios web para
que éstos puedan ser leídos”. Y prosigue: “La funcionalidad básica es
permitir visitar páginas web y hacer actividades en ellas“.
Hoy en día sabemos que existe una gran variedad de navegadores.

Diseño y Desarrollo Web 2Bgu Página 17

La utilización de uno u otro es muy subjetiva, depende de cada persona y de la
comodidad que tenga con cada uno de ellos, porque las diferencias entre los más
populares son bastante reducidas si lo vemos desde la perspectiva de un usuario
corriente, no el de un profesional de la informática.
Google Chrome
Es uno de los más conocidos y más usados,
básicamente porque es el que asegura una velocidad
mayor. Saltó al escenario a principios de 2008. Desde
entonces ha conseguido pasar de una cuota de
mercado del 0% al actual 25% del mes pasado. Se
inicia rápidamente desde el escritorio, carga las
páginas de forma instantánea y ejecuta aplicaciones
web complejas a gran velocidad. Su gran ventaja
respecto a su competencia es también su principal
inconveniente: Google.
Google le asegura financiación permanente y estar siempre a la última en cuanto a
mejoras y novedades; sin embargo, también es una de las empresas
multinacionales más influyentes y con más beneficios del mundo, y como tal, su
objetivo final es el ánimo de lucro, y no todo el mundo se siente cómodo dejándoles
sus datos, tanto personales como no personales.
A parte de esto, la ventana del navegador de Chrome es intuitiva y sencilla. Está
diseñado para ofrecer una mayor seguridad en la web, al actualizarse
automáticamente para que siempre tengamos las últimas mejoras en este campo.
Si es tu navegador preferido para el PC, Google Chrome será también el favorito
para hacerlo a través de la tableta, al presentar versiones igual de potentes tanto
en Android como en iOS.
Mozilla Firefox
Para mucha gente es el navegador que le transmite
más confianza, seguramente porque, aparte de ser
uno de los más veteranos (salió en el año 2003)
es sólido, estable y presenta muy pocos errores.
Firefox, el segundo navegador más utilizado en
Internet, se caracteriza por ser un programa
independiente, y para muchos es su favorito porque
no tiene ánimo de lucro.
Ha sido desarrollado a lo largo de los años por
decenas de programadores que lo van mejorando en
cada actualización.

Diseño y Desarrollo Web 2Bgu Página 18

Además, es un navegador altamente personalizable, ya que cuenta con un amplio
abanico de temas y complementos. Pero lo mejor de todo son las extensiones,
pequeñas adiciones gratuitas elaboradas por cientos de desarrolladores alrededor
del mundo que cumplen todas las labores y funciones imaginables.
Opera
Es el navegador web alternativo por excelencia. Es
también uno de los más veteranos y, durante muchos
años, ha sido de los más utilizados en los teléfonos
móviles, hasta la popularización de los smartphones.
Está desarrollado por una compañía noruega y, al
igual que Firefox, no tiene ánimo de lucro.
Su última versión, el Opera 15, usa el mismo motor
que Google Chrome, por lo que se pueden utilizar en
él las mismas extensionse disponibles para el
navegador de Google. Además, incorpora una
novedad muy interesante, lo que ellos llaman el “Estante“, una reinvención de los
marcadores o favoritos que permite ir guardando páginas que interesan para leerlas
posteriormente.
Opera es también altamente personalizable; contiene una amplia variedad de temas
y su velocidad no tiene nada que envidiar a los más populares Chrome o Firefox.
Safari
Safari sigue siendo un navegador web asociado a
los Macsde Apple, a pesar de que en 2008 saltase
también a la plataforma de Microsoft, con sus
sistemas Windows. A pesar de que es el cuarto
navegador más utilizado de Internet, manteniendo
una cuota de mercado que está entre el 5 y el 8%, su
crecimiento es muy lento, sobre todo por el hecho de
que su versión para PCs no tiene nada de destacable
en prácticamente ningún aspecto. Además, hace más
de un año que no la actualizan, con las brechas de
seguridad que esto puede ocasionar.
La versión de Safari para Apple es otra cosa; ofrece un buen rendimiento y es el
preferido por sus usuarios, ya que se beneficia de que su sistema operativo está
desarrollado internamente por la misma compañía.
Además, Safari cuenta con algunas opciones interesantes; una de las más
relevantes es su modo “Lector“, a través de la cual se difumina parte de la pantalla

Diseño y Desarrollo Web 2Bgu Página 19

y el texto central pasa a mostrarse destacado en negro sobre blanco, lo cual resulta
ideal para la lectura de publicaciones online.
Safari no es el navegador más rápido de todos los que existen, pero es estable y
eficiente, con un aspecto muy sencillo destinado a un tipo de usuario con
conocimientos informáticos básicos. Eso sí, en cuanto a oferta de funcionalidades
y extensiones, se ve superado por su competencia.
Internet Explorer
Explorer mantiene su amplia cuota de mercado
(alrededor del 60-65%) gracias a que fue el primero
en salir y también que viene predeterminado en
todos los PCs de Microsoft, pero no está actualmente
a la altura de los otros grandes, básicamente por la
gran cantidad de fallos que arrastra.
Los distintos desarrolladores de Internet Explorer no
han sabido estar a la altura de la competencia; no
obstante, parece ser que Microsoft actualmente está
poniéndose las pilas de nuevo para volver a
considerar a Explorer una prioridad en su estrategia de actuación.
Hoy por hoy, Internet Explorer no se caracteriza por su especial velocidad y es el
navegador que presenta más problemas de seguridad de todos los candidatos.
Las restricciones innecesarias que pone Windows a sus actualizaciones en
sistemas operativos viejos tampoco son un aliciente para optar por esta opción.

Actividades – Definición de Página Web

1. Escriba una V si es verdadero o una F si es falso en

cada una de las siguientes afirmaciones.
a. El protocolo de IP es la base fundamental de la
Internet. Porta datagramas de la fuente al destino ( )
b. El Protocolo Internet proporciona un servicio de distribución de
paquetes de información orientado a no conexión de manera no fiable.
( )
c. La unidad de información intercambiada por IP es denominada
datagrama. ( )
d. La dirección IP identifica tanto a la red a la que pertenece una
computadora como a ella misma dentro de dicha red. ( )
e. IP no especifica el contenido del área de datos, ésta será utilizada
arbitrariamente por el protocolo de transporte. ( )

Diseño y Desarrollo Web 2Bgu Página 20

2. Responda las siguientes preguntas.
a. ¿De quién depende la utilización de un navegador u otro y por qué?
____________________________________________________
____________________________________________________

b. ¿Cómo se llama el lenguaje bajo el cual funcionan las ciber páginas

y en qué consiste ese formato?
___________________________________________________
___________________________________________________
___________________________________________________

c. ¿Cuál es el objetivo de lenguaje de programación HTML?

___________________________________________________
___________________________________________________
___________________________________________________

d. Escriba tres características del Protocolo de internet (IP)

_________________________________
_________________________________
_________________________________

3. Escriba las características de las Páginas web estáticas y dinámicas.

Páginas Web Estáticas

Páginas Web Dinámicas

Diseño y Desarrollo Web 2Bgu Página 21

4. Escriba las principales características de los siguientes navegadores.

Navegadores

Internet Mozilla Google

Explorer Firefox Chrome

Diseño y Desarrollo Web 2Bgu Página 22

Hojas de estilo
¿Qué es una hoja de estilo?
Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets
= Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño,
color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman
una página *.HTML.
Su principal ventaja es definir un mismo aspecto para todas las páginas de un sitio
web. Se crea una hoja de estilo y se vinculan todas las páginas del sitio web a este
archivo. Cualquier cambio efectuado en la hoja de estilo afecta instantáneamente al
formato de todas las páginas vinculadas a la misma.
Cuando desde el editor HTML visual se asocia un formato a un fragmento de texto
o bien se convierte en un enlace lo que realmente se está haciendo es situar ese
texto entre etiquetas HTML para que el navegador lo interprete y visualice
adecuadamente.
Ejemplo: Si desde Kompozer seleccionas el texto titular de una página web y a
continuación despliegas la lista de formatos para seleccionar Título 1 (de forma
similar a lo propuesto en las actividades anteriores de este curso), realmente el
fragmento de texto se ha “etiquetado” como <h1> Texto seleccionado … </h1>. Si
hubieramos elegido Título 2 se habría etiquetado con <h2> … </h2>, etc.

Algunas etiquetas HTML son:

 <body> … </body> . Contienen todos los caracteres que forman la página
web.
 <h1> … </h1>, …, <h6> …</h6>. Permiten definir títulos de distintos
tamaños (hasta 6).
 <p> … </p>. Contienen el texto de un párrafo.
 <a href=”http://...”>Texto del enlace</a>. Se utiliza para crear enlaces.

Diseño y Desarrollo Web 2Bgu Página 23

Existen muchas más etiquetas pero en esta práctica sólo vamos a modificar el
formato (color, tipo, tamaño, efecto, etc) de los textos etiquetados con las que se
citan.
En esta práctica vamos a crear una hoja de estilo y se vinculará a una página.
Tablas en HTML

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas.
Este concepto ha estado presente en nuestra sociedad por un largo período de
tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de
transmitir información que, de otro modo, no sería comprendida tan fácilmente.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando
elementos. En particular, una tabla básica puede ser declarada usando tres
elementos, a saber, table (el contenedor principal), tr(representando a las filas
contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro
con un ejemplo:

Diseño y Desarrollo Web 2Bgu Página 24

Ten en cuenta que a esta tabla se le han aplicado estilos mediante CSS para
mejorar su comprensión y legibilidad. No se deberían esperar estos resultados en
tablas sin atributos presentacionales asignados.

Puedes ver claramente en el ejemplo

anterior, el concepto de filas conteniendo
columnas del que hablamos previamente.
Aquí se hace evidente como las celdas,
que han sido numeradas de acuerdo a su
aparición en el código, siguen una
secuencia en la representación que va de
izquierda a derecha, una fila por vez. Esto
tendrá implicaciones futuras,
especialmente cuando se trate el tema de
unificación de celdas y agrupamiento.

Celdas de encabezado

Ahora que ya hemos tratado la estructura

básica de una tabla, es hora de comenzar
a crear tablas más útiles.

Una celda de encabezado es un tipo

especial de celda utilizada para organizar
y categorizar otras celdas en la tabla.
Dicho esto, es difícil imaginar una tabla
donde una celda de encabezado no tenga
utilidad. Casi cualquier tabla puede
beneficiarse de un grupo de celdas de
encabezado bien ubicado.

En el siguiente ejemplo,
construiremos una tabla
para mostrar información
acerca del clima en los
próximos días. Aquí, las
celdas de encabezado,
representadas por
el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas
comunes.

Diseño y Desarrollo Web 2Bgu Página 25

Es fácil ver aquí cómo cada celda de encabezado en la tabla, provee información
para el resto de las celdas en la columna a la que pertenece. Algunos agentes,
como los navegadores de voz, hacen el mismo análisis cuando deben informar al
usuario qué celda de encabezado está
asociada a una celda en particular. Pero en
algunos casos, las ambigüedades
necesitan ser evitadas y es por este motivo
que HTML provee algunos atributos como
scope.
El Atributo Scope
El atributo scope provee un mecanismo
para indicar explícitamente a qué celdas
afecta una celda de encabezado. Este
atributo solo puede ser declarado en una
celda de encabezado y tomar los valores
"col", "row", "colgroup" y "rowgroup". Los
valores "col" y "row" indican que la celda de
encabezado provee información para el
resto de las celdas en la columna o fila
(respectivamente) en que está presente.
Los otros dos valores tendrán sentido más
adelante en este tutorial.
En el siguiente ejemplo, la tabla
presentada anteriormente ha sido
mejorada con más celdas de encabezado,
con el fin de aumentar la legibilidad. Aquí,
la celda en la esquina superior izquierda de
la tabla, proveería información ambigua si
el atributo scope no estuviera presente. En
otras palabras, afectaría a las celdas en su
columna, así como a las celdas en su fila.
La presencia del atributo scope ha dejado
en claro que las celdas afectadas por este
encabezado son aquellas en la misma fila.

Diseño y Desarrollo Web 2Bgu Página 26

Plantillas
¿Qué es una plantilla? Cada vez vemos con mayor frecuencia que la palabra
“template o theme o plantilla” está siendo más incorporada en el diseño web y
empieza a tomar un papel importante en este ámbito. Primero definamos bien que
es y para qué sirve, una plantilla, también conocida como template o theme, es la
parte visible de un sitio web.
Todos los elementos que se
visualizan en un sitio (botones,
disposición de las fotos,
tipografías, diagramación del
sitio, etc.) es habitual que se
establezcan mediante una
plantilla, ya sea diseñada para
el sitio concreto o adquirido
gratis como software libre o
puramente comerciales con un
rango de precios muy amplio.
Una plantilla dispositivo o de
interfase, que suele
proporcionar una separación entre la forma o estructura y el contenido. Es un medio
o aparato o sistema, que permite guiar, portar, o construir, un diseño o esquema
predefinido.
Ventajas y desventajas de las plantillas
De forma resumida se comentan las ventajas y desventajas de usar plantillas:
Ventajas
Acortan los tiempos de realización de una página
Se obtiene una página profesional y editable de forma razonable
Los desarrolladores de plantillas frecuentemente mejoran su producto
Para cambiar de un diseño a otro, no se requiere de múltiples pasos.
Suelen tener una gran comunidad detrás, ante problemas, es fácil conseguir una
respuesta de alguna de las miles de personas que viven aportando diariamente
novedades sobre el tema.

Diseño y Desarrollo Web 2Bgu Página 27

Desventajas
La diagramación del diseño del sitio no es exclusiva. Puede ser que lo veas en
alguna otra página, (si se desea se puede pagar la exclusividad del diseño, pero
esto costará mucho)

Hipervínculos locales y externos

Es fácil generar links, oficialmente llamados hipervínculos, entre páginas. De hecho
sólo se necesita un elemento HTML: el ancla (anchor). Una vez dominado se podrá
comenzar a organizar las páginas en carpetas separadas y transformar una
colección de documentos independientes en un sitio con todas las de la ley.
Creando enlaces, concepto de ancla
En HTML se utiliza el elemento ancla <a> para crear un enlace. Cuando un visitante
hace clic en él, el navegador abre otra página. El elemento ancla es un elemento
contenedor y su aspecto es el siguiente:
<a>...</a>
El contenido sobre el que pulsa el visitante se coloca dentro del elemento ancla:
<a>Enlace a otra página</a>
El problema del enlace de anterior es que no apunta a ningún sitio. Para convertirlo
en un enlace que funcione debe aportar la URL de la página de destino mediante el
tributo href (que significa referencia de hipervínculo).
Por ejemplo, si quiere un enlace para llevar al lector a una página llamada
enlacepagina.html, debe utilizar el siguiente código de HTML:
<a href="enlacepagina.html">Enlace a otra página</a>
Para que este vínculo funcione, el archivo enlacepagina.html debe estar en la
misma carpeta de la página Web que lo contiene. Veremos cómo organizar mejor
el sitio clasificando páginas en distintas subcarpetas.
El tag ancla es un elemento de línea (inline): se introduce dentro de cualquier otro
elemento bloque. Eso quiere decir que es completamente aceptable crear un enlace
de varias palabras en un párrafo normal.
<p>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in,
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.
<a href="enlacepagina.html">Enlace a otra página</a>
</p>

Diseño y Desarrollo Web 2Bgu Página 28

La siguiente figura muestra el ejemplo anterior.

Si no se personaliza un elemento ancla, el texto aparecerá en el navegador con el

conocido subrayado y letras azules.
Cuando se pasa el ratón por encima de un enlace, el puntero se convierte en una
mano. No puede saberse si funciona o no, ya que si apunta a una página que no
existe sólo obtendrá un error después de haber hecho clic.
Sin embargo, conviene recordar que el texto de un enlace, el incluido en el elemento
<a>, es importante, sobre todo para los motores de búsqueda. Si es los enlaces se
encuentran bien definidos y funcionando aumenta la posibilidad de que su sitio
aparezca en el resultado de una búsqueda y atraiga a nuevos visitantes.
Enlaces Internos y Externos
Los enlaces pueden llevarle rápidamente a una página a otra dentro del mismo sitio
Web o transportarle a una ubicación diferente en un servidor lejano. En cada caso
se utilizan distintos tipos:
Los enlaces internos apuntan a otras páginas del sitio Web. También pueden
señalar a otros tipos de recursos multimedia de su sitio.
Los enlaces externos apuntan a páginas (o recursos) de otros sitios Web.
Por ejemplo, digamos que tiene dos archivos en su sitio, una página bibliográfica y
una de dirección. Si quiere que sus visitantes vayan de la primera
(mibibliografia.html) a la segunda (contactame.html), creará un enlace interno.
Tanto si almacena ambos archivos en la misma carpeta o en diferentes, son parte
del mismo sitio Web en el mismo servidor, por lo que la forma de hacerlo es con un
enlace interno.
Por otro lado, si quiere que sus visitantes vayan desde su página de libros favoritos
(librosfavoritos.html) a la de Amazon (www.amazon.com) Necesita un enlace
externo. Al hacer clic sobre él, el lector es transportado fuera del sitio Web a un
nuevo emplazamiento, ubicado en otro lugar de la red.

Diseño y Desarrollo Web 2Bgu Página 29

Cuando se crea un enlace interno siempre debe utilizar una URL relativa, la cual le
dice a los navegadores la ubicación de la página objetivo relativa a la carpeta actual.
En otras palabras: se le dan instrucciones sobre cómo encontrar una nueva carpeta,
diciéndole que suba o baje dentro de la carpeta actual (moverse "hacia abajo"
significa desplazarse de la carpeta actual a una subcarpeta; moverse "hacia arriba"
referencia lo contrario, se va de una subcarpeta a una carpeta padre, la que contiene
la subcarpeta actual).

Actividades – Definición de Página Web

1. Responda las siguientes preguntas.

a. ¿Qué es una hoja de estilo?
____________________________________________________
____________________________________________________

b. ¿Mencione una ventaja de las hojas de estilo?

___________________________________________________
___________________________________________________

c. ¿Qué es una tabla?

___________________________________________________
___________________________________________________

d. ¿Cuál es el elemento que se utiliza para asignar un encabezado a

una tabla? Escriba un ejemplo.
_________________________________
_________________________________
_________________________________
_________________________________

e. Explique, ¿Qué es una plantilla?

______________________________________________________
______________________________________________________

f. Explique el significado de:

Enlaces internos: _______________________________________
_____________________________________________________
Enlaces externos: ______________________________________
_____________________________________________________

Diseño y Desarrollo Web 2Bgu Página 30

2. Escriba tres ventajas y tres desventajas de la utilización de las
plantillas

Ventajas

Desventajas

Diseño y Desarrollo Web 2Bgu Página 31

Software de edición de sitios Web
Editores WYSIWYG (What You See Is What You Get) para Crear Páginas Web
Adobe Dreamweaver

Seguramente esta es una de las herramientas que conoces o que almenos haz
escuchado mencionar desde hace tiempo. Se trata de un editor para crear páginas
web.
Si hablamos de ofrecernos posibilidades para armar algo de calidad, sin
duda Dreamweaver se lleva a todos de gane.
Sin embargo que crees, para poder sacarle el máximo provecho a esta herramienta,
deberás contar con alguna buena cantidad de conocimientos en el desarrollo de
página web o lenguajes de programación en web, tales como HTML o el mismísimo
Javascript.

Diseño y Desarrollo Web 2Bgu Página 32

WebSite X5 Evolution

Ahora bien. Si Dreamweaver se nos complica, por lo que mencioné acerca del
conocimiento en dos lenguajes indispensables, entonces posiblemente WebSite
X5 Evolution sea la alternativa que necesitas para Crear Páginas Web.
Pues no solamente se trata de una herramienta más económica, sino que cuenta
con muchas ventajas por encima de Dreamweaver.
Aunque obviamente esto va de acuerdo a las necesidades de cada quien, pues te
aseguro que un programador como tal, seguirá dándole preferencia a su
herramienta por encima de cualquier cosa.
Características de WebSite X5 Evolution
 Cuenta con versión económica y Cara
 Cuenta con diseño responsive
 Se adapta a cualquier dispositivo
 Diseño de Plantillas incluido
 Permite subir tu sitio a internet

Diseño y Desarrollo Web 2Bgu Página 33

Avanquest WebEasy Professional

Para continuar con

las herramientas WYSIWYG
para Crear Páginas Web y
no variarle aún, tenemos
a Avanquest WebEasy
Professional. Posiblemente
la carta principal de este
programa, e la posibilidad de
tener a la mano más de mil
combinaciones de plantillas
posibles.
Considerando que en total
cuenta con unas 600
plantillas para personalizar
tus diseños, sin duda se
vuelve una herramienta
indispensable para quienes
buscan algo más visual y
sencillo, aunque nuevamente,
con conocimientos para
trabajar con una herramienta
WYSIWYG.
Como puntos favorables de Avanquest, podemos mencionar la facilidad de uso,
que sin duda es relativo por el conocimiento que puedas tener, pero además de eso,
es mucho más barato que las herramientas anteriores, por lo que las ventajas se
suman considerablemente.
Así que vamos a ver las características de Avanquest, para ver que más nos ofrece.
Características de Avanquest WebEasy Professional.
 Editor WYSIWYG.
 Precio más económico pero no tanto.
 No es recomendable para usuarios avanzados.
 No necesita saber programar.
 Cuenta con Módulos para redes sociales.

Diseño y Desarrollo Web 2Bgu Página 34

Publicador de Sitios Web
¿Qué es publicar un sitio web?
La práctica habitual es diseñar las páginas web de nuestro sitio web en el disco duro
del equipo para luego enviarlos al servidor web junto con los archivos multimedia
referenciados (imágenes, animaciones, audios, etc).
A este proceso se le llama
publicación web. Mediante este
procedimiento se pone a
disposición de cualquier usuario
con acceso a Internet las páginas
web del centro o proyecto al pasar
a estar alojadas físicamente en un
ordenador servidor con acceso
permanente desde Internet.
La subida de archivos desde el
equipo local al servidor se puede realizar mediante un programa que utiliza el
protocolo FTP (File Transfer Protocol = Protocolo de Transmisión de Archivos). Esta
transferencia de archivos se realiza en modo autentificado, es decir, introduciendo
un nombre de usuario y contraseña para evitar que otras personas puedan publicar
en nuestro espacio web.
En consecuencia antes de afrontar la tarea de publicación será necesario obtener
los siguientes datos del administrador del servidor web:
 Dirección del servidor FTP: Es la URL del servidor que atiende peticiones
de conexión por FTP para la subida de archivos. Si el servidor web es del
CNICE puede ser uno de estos: roble.pntic.mec.es, ficus.pntic.mec.es,
centros5.pntic.mec.es, etc. Si es Yahoo será: ftp.es.geocities.com
 Usuario y Contraseña: Son los datos de la cuenta que es necesario
introducir para realizar una subida autentificada de recursos y que estos
recursos se alojen en la ubicación correcta del servidor.
 Dirección del servidor HTTP: Es la URL del servidor web que nos permitirá
acceder a nuestras páginas usando el navegador web. Ejemplo:
http://roble.pntic.mec.es/usuario/
A continuación se explican los detalles de cómo utilizar un programa como Filezilla
tanto en Windows como en Linux, para subir contenidos por FTP a un servidor.

Diseño y Desarrollo Web 2Bgu Página 35

Servidor
Servidor Web. Es un programa que gestiona cualquier aplicación en el lado del
servidor realizando conexiones bidireccionales y/o unidireccionales y síncronas o
asíncronas con el cliente generando una respuesta en cualquier lenguaje o
aplicación en el lado del cliente.
El código recibido por el cliente suele
ser compilado y ejecutado por un
Navegador Web. Para la transmisión
de todos estos datos se utiliza algún
protocolo. Generalmente se utiliza el
protocolo HTTP para estas
comunicaciones, perteneciente a la
capa de aplicación del Modelo OSI. El
término también se emplea para
referirse al ordenador que ejecuta el
programa.
Protocolos del Servidor Web
Un servidor web es un programa que sirve datos en forma de Páginas Web,
hipertextos o páginas HTML (HyperText Markup Language): textos complejos con
enlaces, figuras, formularios, botones y objetos incrustados como animaciones o
reproductores de sonidos.
La comunicación de estos datos entre cliente y servidor se hace por medio un
protocolo, concretamente del protocolo Http. Con esto, un servidor Web se mantiene
a la espera de peticiones HTTP, que son ejecutadas por un cliente HTTP; lo que
solemos conocer como un Navegador Web. A modo de ejemplo: al teclear
(http://www.cnice.mec.es) en un navegador, éste realizará una petición HTTP al
servidor que tiene asociada dicha URL.
Servidor Web Local
Tener un servidor Web local debería ser fundamental para todas aquellas personas
que no disponen de un Sitio Web online. ¿Por qué? La respuesta es muy sencilla.
El Servidor local nos va a permitir comprobar que todas las modificaciones que se
van a realizar en nuestro diseños Web, no provoquen algún error que pueda afectar
a todos aquellos usuarios que naveguen por la red.
Otro aspecto positivo de un Servidor local, es que no hará falta tener que subir
ficheros al servidor Ftp para hacer nuestras pruebas con lo cual, la espera se hace
más corta.

Diseño y Desarrollo Web 2Bgu Página 36

Como es de suponer, también se permite el acceso a nuestro servidor a cualquier
usuario de Internet. Para ello, se configura correctamente el Router y sería de
mucha ayuda tener una dirección IP estática, mediante la cual cualquier usuario
podría conectarse a nuestro servidor desde un navegador.
Protocolo: Conjunto de reglas que gobiernan el intercambio de datos entre
entidades dentro de una red. Es el lenguaje común “que utilizan” los ordenadores
para “hablar” y entenderse entre sí. Existen muchos tipos de protocolos cada uno
con sus reglas bien definidas, como por ejemplo: FTP, POP3, SMTP, ICMP, etc.
Protocolo HTTP: Protocolo de transferencia de hipertexto (en inglés:
Hypertext Transfer Protocol o HTTP) Una de las características del Protocolo Http
es que no es permanente, es decir, cada operación HTTP implica una conexión con
el servidor, que es liberada al término de la misma. Por ejemplo, un documento
HTML con 10 imágenes son necesarias 11 conexiones distintas (10 imágenes más
la página HTML en sí).
Servidores de aplicaciones
Un Servidor de Aplicaciones
no es más que un cambio de
nombre, para algunos
Servidores Web de nueva
generación que
proporcionan la lógica de
negocio sobre la que
construir aplicaciones.
Suelen asociarse con
servidores de alto
rendimiento pensados para
dar servicio a sitios Web
(Web Sites) con grandes necesidades: afluencia de visitas, movimiento de datos,
atención de transacciones hacia bases de datos, etc.
Generalmente los fabricantes del sector tienen a disposición del público un servidor
Web básico y otro con multitud de extensiones fuertemente integradas al que llaman
Servidor de Aplicaciones.
Dominio
Un dominio es el nombre único y exclusivo que se le da a un sitio web en Internet
para que cualquiera pueda visitarlo.
Los navegadores web en verdad acceden a los sitios en Internet (que están ellos
tan ricamente almacenados en sus hosting) a través de una dirección IP (Internet

Diseño y Desarrollo Web 2Bgu Página 37

Protocol), un numerito muy largo del tipo 104.28.13.62 que ayuda a saber en qué
servidor se encuentran.
Esto lógicamente tiene 3 ventajas principales muy claras:
1. El dominio de un sitio es mucho más fácil de recordar que su IP (imagínate
llamar a tus amigos por sus direcciones postales en vez de por su nombre).

2. Permite tener muchos más sitios en

Internet, porque hoy en día muchos
dominios web pueden compartir por
ejemplo la misma IP del servidor web
donde están alojados (luego
internamente el servidor sabe a qué
dominio se está accediendo).

3. Es mucho más flexible por ejemplo a la

hora de cambiar tu sitio de un
alojamiento web a otro, porque la IP
puede cambiar pero el dominio seguirá siendo el mismo (imagínate avisar a
todo el mundo de que has cambiado de IP).

¿Cómo funciona?
Conoces el dominio del sitio que quieres visitar y sólo te hace falta un sistema que
se encargue de “traducir” ese dominio en una IP que pueda entender tu navegador
web. Y eso es precisamente lo que hace el DNS o Domain Name System (sistema
de nombres de dominio).
Así que el servidor DNS, vendría a
ser la “guía telefónica” que usan
los navegadores web para saber
dónde está el sitio que estás
buscando por su nombre de
dominio.
Sistema de nombres de dominio
- DNS
En verdad el sistema es más
complejo, pero lo he simplificado
para que se entienda mejor.
En definitiva, el dominio en verdad es una “envoltura” que nos ayuda a navegar por
Internet de una forma mucho más cómoda y “humanizada”.

Diseño y Desarrollo Web 2Bgu Página 38

Plataforma Web
Cuando desarrollamos un
programa, lo desarrollamos para
que funcione en una plataforma
específica. Esto se refiere a que el
programa va a funcionar en un
determinado sistema operativo.
Normalmente, hay versiones para
Windows, MacOs, Linux, etc. Pero
cuando nos referimos a una
plataforma web, estamos diciendo
que nuestro sistema funcionará
desde un navegador web,
independientemente del sistema operativo (SO) que se esté utilizando.
Esto tiene la ventaja de que no es necesario crear el mismo software para cada tipo
de SO. Pero tiene desventajas en el sentido de que no puede ser tan potente como
un sistema que funciona usando los recursos del SO.
Por ejemplo, plataforma web podría estar haciendo referencia a un sistema que
permita crear y administrar un sitio web. Es el caso de Blogspot, MySpace o
cualquier otra plataforma web que permite crear un blog, empleando un sistema
web donde se pueda subir artículos, crear categorías, administrar los usuarios que
se suscriban al blog, etc.
Pero, en otro contexto, plataforma web podría hacer referencia al conjunto de
programas y sistemas que hacen que un sitio web esté en funcionamiento: el
servidor web, la base de datos, el intérprete de programación, etc.

Diseño y Desarrollo Web 2Bgu Página 39

Actividades – Software de edición de sitios web

1. Responda las siguientes preguntas.

a. Explique el significado de WYSIWYG (What You See Is What You
Get)
____________________________________________________
____________________________________________________

b. ¿Cuál es la función de Adobe Dreamweaver?

___________________________________________________
___________________________________________________

c. ¿Cuáles son los datos que se necesitan tener del administrador del
servidor web para publicar una página web?
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________

d. ¿Qué es un servidor web?

___________________________________________________
___________________________________________________

e. ¿Qué es un dominio y cómo funciona?

______________________________________________________
______________________________________________________

f. ¿Cuál es la función de un servidor local?

_____________________________________________________
_____________________________________________________
_____________________________________________________
_____________________________________________________

Diseño y Desarrollo Web 2Bgu Página 40

2. Escriba las características de un protocolo y un protocolo HTTP

Protocolo

Protocolo HTTP

Diseño y Desarrollo Web 2Bgu Página 41

Herramientas
Multimedia

Diseño y Desarrollo Web 2Bgu Página 42

Herramientas de Pintura y Dibujo
Hace unos días veíamos cómo la profesión de diseñador está en alza en la industria
digital y ahora, para aquellos diseñadores que quieran sumarse a esta revolución
digital bien armados, hemos recopilado estas 10 herramientas que no pueden
faltarle a un diseñador de contenidos digitales.
Y si, tras echarles un ojo, te apetece seguir ahondando en este mundo para formarte
como diseñador digital, no dudes en consultar el Grado en Diseño Visual de
Contenidos Digitales de U-tad.
Fontself Maker

La idea de crear Fontself Maker surgió en 2006 cuando un par de amigos (Franz
Hoffman y Joël Galeran) decidieron unir fuerzas para alcanzar un mismo objetivo:
crear una herramienta amigable de creación de tipografías.
Con Fontself Maker el usuario puede dar vida a sus tipografías dibujadas, pintadas,
bocetadas, fotografiadas o escaneadas mediante Photoshop e Illustrator, creando
un alfabeto que puede emplear digitalmente para crear textos.

Diseño y Desarrollo Web 2Bgu Página 43

El software transforma cualquier elemento, ya sea lettering o iconos, en tipografía
vectorial Open Type. En versiones futuras también convertirá colores, texturas, etc.
en tipografía funcional.
Adobe Experience Design CC

Otra de las herramientas para el diseñador digital que no pueden faltarle a la hora
de crear contenidos digitales es Adobe XD, que ayuda a los diseñadores a llevar la
experiencia de usuario a un nivel superior con el diseño de prototipos.
Adobe Experience Design CC ha sido creado para que de un modo fácil, fluido y
veloz se pueda modificar tanto el esquema de página, como el diseño de los
elementos visuales y el diseño de interacción. Ha sido ideado con la intención de
que resulte sencilla la creación de prototipos, su previsualización y para que el
proyecto pueda compartirse, todo en una sola herramienta.
Entre las principales características de Adobe Experience Design CC destaca la
posibilidad de que el diseñador pueda acelerar su proceso de creación gracias a
herramientas intuitivas que permiten dibujar, reutilizar y mezclar elementos para
crear wireframes, el diseño visual, los prototipos interactivos y los recursos
necesarios para la producción final. También es posible alternar el diseño en el que
se está trabajando con la previsualización del mismo, pudiendo añadir –sin salir de
éste– interacciones y animaciones para comprobar con exactitud cómo los usuarios
experimentarían el producto final. Incluso es posible compartir el proyecto a otros
miembros del equipo para conseguir el feedback necesario para seguir
desarrollándolo.

Diseño y Desarrollo Web 2Bgu Página 44

Adobe Animate CC

Adobe Animate CC es el nombre con el que se ha bautizado lo que antes era Adobe
Flash Professional. Con esta versión actualizada, el software ahora es compatible
con la evolución de los estándares web de serie.
Con Adobe Animate CC el diseñador, además de poder desarrollar contenido
HTML5, podrá dar vida a animaciones interactivas con diversas herramientas de
dibujo vectorial, e incluso publicarlas en plataformas como Flash/Adobe AIR,
HTML5 Canvas, WebGL o plataformas personalizadas.
El contenido que se cree con este software podrá ser visualizado en cualquier
plataforma ya sean dispositivos móviles o pantallas de altas resoluciones.
Mischief

Diseño y Desarrollo Web 2Bgu Página 45

Mischief es una herramienta de dibujo digital para usar en tabletas dibujando
directamente sobre la pantalla con lápiz –aunque existe versión para desktop (Mac
OS 10.8 – Windows 7) que permite hacerlo con ratón, trackpad o lápiz en la tableta
tradicional–.
Una de sus características más curiosas es que tiene un escritorio infinito. También
es una herramienta basada en vectores lo que permite ampliaciones increíbles.
Tiene 6 pinceles básicos (con multitud de opciones pero sin texturas), todo funciona
por capas transparentes y es fácil de utilizar si se está familiarizado con las
herramientas de edición digital tradicionales. Exporta a formatos conocidos (JPEG,
PNG y PSD) para poder editar o trabajar en otros programas.
Se trata de una aplicación para aquellos que les gusta hacer bocetos, escribir, etc.
Pixate

Pixate es una aplicación con la que el diseñador podrá hacer prototipos de

interfaces de apps y webs. No requiere de ningún conocimiento de código o
programación. Es casi una aplicación de diseño con elementos preconfigurados
para hacernos la tarea más fácil. Se trata de poder presentar la interacción de una
app o web en formato digital real como si de la misma app acabada se tratara.
Pixate permite: crear un editor visual para navegador o escritorio; probar 100%
aplicaciones nativas directamente en el dispositivo en tiempo real; desarrollar
prototipos en pocos minutos; ver diseños dentro de los equipos en varios

Diseño y Desarrollo Web 2Bgu Página 46

dispositivos simultáneamente; desarrollar ideas para animaciones e interacciones
sin tener que escribir código; funciona en navegador, Mac, iOs, Android.
Adobe Generator

Adobe Generator es una tecnología que cambia el modo en que los usuarios
trabajan con Photoshop para diseño web u para la pantalla. Se trata de una
plataforma que permite mayor interoperatividad entre Adobe Photoshop CC, Adobe
Creative Cloud y aplicaciones de terceros.
También dispone de una interfaz de programación de aplicaciones (API, por sus
siglas en inglés) Java Script fácil de usar, lo que facilita a los desarrolladores de
apps y servicios de terceros la creación de herramientas similares que se integran
con Photoshop CC.
Aplicaciones FTP
Las aplicaciones FTP (File Transfer protocol) son programas que facilitan la
transmisión de archivos desde el ordenador a un servidor o disco duro remoto para
gestionar webs o cualquier tipo de archivo. Suelen estar incluidos en programas de
diseño web como Dreamweaver, pero existen opciones muy útiles para gestionar
cualquier archivo, ya que las aplicaciones FTP no solo se usan para subir webs a

Diseño y Desarrollo Web 2Bgu Página 47

servidores; el usuario puede gestionar archivos en discos duros externos y en la
nube. Ejemplo de ello son aplicaciones FTP como Flow, Transmit o Cyberduck.
Pinnacle Studio para iPad

Pinnacle Studio para iPad es una herramienta dedicada a la edición de vídeo que
antes se llamaba Avid Studio para iPad. No solo se modificó el nombre sino que el
software fue actualizado con cambios y extras. Básicamente se trata de un software
condensado en una aplicación fácil de usar para editar vídeo audio y foto, que
permite organizar clips en la secuencia de viñetas con gran agilidad, editar con
precisión en la línea de tiempo, añadir numerosos efectos, transiciones, y por
supuesto, editar música.
el seguimiento de un objeto en movimiento en un clip de vídeo con la función de
seguimiento de punto y copia de movimiento; eliminar temblores de cámara con
SmoothCam.
Con Ceros, el diseñador podrá crear contenidos interactivos ya que es una
herramienta pensada especialmente para diseñadores digitales. De forma fácil e
intuitiva con esta plataforma es posible crear contenido interactivo y atractivo
destinado a ebooks, microwebs, revistas digitales, banners, etc.
Con Ceros se pueden llevar a cabo –sin necesidad de tener nociones de
programación– experiencias interactivas a través de infografías, (elaboradas tras
volcar en el software la información necesaria), libros electrónicos en los que el

Diseño y Desarrollo Web 2Bgu Página 48

lector pueda interactuar con el contenido, microwebs
personalizadas, así como catálogos y revistas digitales
atractivas y dinámicas.

Actividades – Herramientas de pintura y diseño

1. Responda las siguientes preguntas.

a. ¿Cuándo nació la idea de crear Fontself Maker?
____________________________________________________
____________________________________________________

b. ¿Cuál es la función del software Fontself Maker?

___________________________________________________
___________________________________________________

c. ¿Cuál es la función de Adobe Animate CC?

___________________________________________________
___________________________________________________
___________________________________________________

d. ¿En qué consiste la herramienta Mischiet?

___________________________________________________
___________________________________________________

e. ¿Cuál es el objetivo de las aplicaciones FTP?

______________________________________________________
______________________________________________________

f. ¿Cuál es la función de Pinnacle?

_____________________________________________________
_____________________________________________________

g. ¿Qué permite el software Pixate al usuario?

_____________________________________________________
_____________________________________________________

h. ¿Qué es adobe Generator?

_____________________________________________________
_____________________________________________________

Diseño y Desarrollo Web 2Bgu Página 49

Mapas de Bits
Un mapa de bits es una matriz de bits que especifica el color de cada píxel de una
matriz rectangular de píxeles. El número de bits asignado a un píxel individual
determina el número de colores que se pueden asignar a dicho píxel. Por ejemplo,
si cada píxel se representa con 4 bits, a un píxel determinado se le podrá asignar
uno entre los 16 colores distintos (2^4 = 16).
A las imágenes en mapa de bits se
las suele definir por su altura y
anchura (en píxeles) y por su
profundidad de color (en bits por
píxel), que determina el número de
colores distintos que se pueden
almacenar en cada punto individual,
y por lo tanto, en gran medida, la
calidad del color de la imagen.
Los gráficos en mapa de bits se
distinguen de los gráficos
vectoriales en que estos últimos
representan una imagen a través del
uso de objetos geométricos como
curvas de Bézier y polígonos, no del
simple almacenamiento del color de
cada punto en la matriz.
Un mapa de bits es una matriz de bits que especifica el color de cada píxel de una
matriz rectangular de píxeles.. Para su obtención se usan dispositivos de conversión
analógica-digital, tales como escáneres y cámaras digitales.
Color
Cada punto representado en la imagen debe contener información de color,
representada en canales separados que representan los componentes primarios del
color que se pretende representar, en cualquier modelo de color, bien sea RGB,
CMYK, LAB o cualquier otro disponible para su representación.
A esta información, se puede sumar otro canal que representa la transparencia
respecto al fondo de la imagen. En algunos casos, (GIF) el canal de transparencia
tiene un solo bit de información, es decir, se puede representar como totalmente
opaco o como totalmente transparente; en los más avanzados (PNG, TIFF), el canal
de transparencia es un canal con la misma profundidad del resto de canales de

Diseño y Desarrollo Web 2Bgu Página 50

color, con lo cual se pueden obtener centenares, miles o incluso millones de niveles
de transparencia distintos.

La transformación de un mapa de bits a un formato vectorial se llama vectorización.

Este proceso normalmente se lleva a cabo o bien manualmente (calcando el mapa
de bits con curvas de Bézier o polígonos vectoriales en programas como Adobe
Illustrator) o automáticamente con Corel PowerTrace o Inkscape.
El proceso inverso, convertir una imagen vectorial en una imagen de mapa de bits,
es mucho más sencillo y se llama rasterización.

Diseño y Desarrollo Web 2Bgu Página 51

Dibujos vectoriales
Qué es una imagen vectorial: Principales características
La imagen vectorial se basa en fórmulas matemáticas, y no se dividen en unidades
mínimas de información como los píxeles, sino en manchas de color y líneas. Se
construyen a partir de vectores, que son objetos definidos por una serie de puntos
que pueden modificarse para dar una u otra forma a la imagen final.
Al no depender de una retícula de
píxeles, las imágenes vectoriales son
independientes de la resolución y por
tanto mantienen la nitidez y la
definición aunque se amplíen
totalmente: no pierden calidad.
Precisamente por ello, también son
capaces de adaptarse a cualquier
forma, por lo que son especialmente
utilizadas para la creación de logotipos
o iconos.
Otras características que nos ayudan a
perfilar mejor lo que es una imagen vectorial son las siguientes:
 Los distintos objetos que componen una imagen vectorial pueden escalarse,
cambiar de forma, color o posición independientemente del resto. Cada
objeto o vector tiene sus propias fórmulas matemáticas.
 Los objetos de un gráfico vectorial pueden fusionarse entre sí y crear formas
intermedias. Del mismo modo, cada parte puede relacionarse de distintas
formas con el resto de vectores: agruparse, separarse, formar intersecciones,
etc.
 Cada parte de una imagen vectorial puede reutilizarse en otras imágenes.
Bastará con copiar y pegar en el otro archivo.
 El dibujo vectorial es siempre editable. A diferencia de las imágenes de mapa
de bits, las vectoriales pueden rectificar su color u otras propiedades en
cualquier momento de su edición.
 Permiten hacer juegos con la tipografía, de una forma más avanzada que las
imágenes pixeladas.
Trabajando con imágenes vectoriales
Los principales programas informáticos con los que trabajar y crear una imagen
vectorial son Corel Draw y Adobe Illustrator. Este último, más profesional, permite
guardar y editar las imágenes también en pdf.

Diseño y Desarrollo Web 2Bgu Página 52

No obstante, ambas, imágenes vectoriales y de mapa de
bits, pueden combinarse. Es decir, una imagen vectorial
puede exportarse a una imagen de mapa de bits (como
puede ser un jpg o un gif). Asimismo, una imagen
pixelada puede incluirse en formatos vectoriales, ya sea
como textura o para formar parte de la composición.
Actualmente, las posibilidades creativas de ambos tipos de imágenes son infinitas

Animaciones en 2D y 3D
La animación 2D tiene su origen en el siglo XIX cuando se creó el folioscopio y los
libros de imágenes animadas (llamados “flipbooks”).
Estas imágenes varían gradualmente de una página a la siguiente y así cuando
las pasas rápidamente, parecen animarse simulando un movimiento.
La persistencia retiniana crea la ilusión de movimiento cuando se fija la vista en
una imagen mientras se voltean las imágenes.
Walt Disney, el gran productor, director, guionista y animador
estadounidense, refinó está técnica y creo las primeras animaciones 2D como
Mickey Mouse.
En las animaciones 2D los objetos
solo se pueden mover
horizontalmente (en el eje X), si
queremos simular movimientos
hacia adelante o haca atrás, y
verticalmente (en el eje Y) si
queremos que se muevan hacia
arriba o hacia abajo.
En las animaciones 3D los objetos
también se pueden mover a lo largo
del eje Z y que la persona lo vea
más cerca o más lejos. Si
queremos este efecto en la animación 2D debemos hacer el objeto más grande o
más pequeño.

Diseño y Desarrollo Web 2Bgu Página 53

Los términos 2D y 3D se utilizan para indicar dimensiones.
El termino 2D significa Dos-Dimensiones y el 3D significa
Tres-Dimensiones. El 2D representa un objeto en dos dimensiones mientras que el
3D lo representa en tres dimensiones.

Los objetos en una animación 2D son meramente planos, como puede ser por
ejemplo un cuadro o una fotografía.
En la animación 3D los objetos son como esculturas ya que tienen una parte frontal,
posterior, superior e inferior. Las puedes rodear y verlas desde cualquier ángulo.

Diseño y Desarrollo Web 2Bgu Página 54

¿Vídeo en 2D o 3D?
Para seleccionar qué tipo de animación usar para nuestro vídeo corporativo o vídeo
explicativo debemos tener en cuenta los siguientes factores:
Target o público objetivo:
Si el vídeo va destinado a grandes públicos es mejor realizar un vídeo explicativo
en 2D ya que los dibujos animados son más simpático y amenos.
Si el vídeo lo verán profesionales de un sector determinado que necesitan una
información precisa y muy técnica entonces es mejor usar un vídeo en 3D.
Como por ejemplo si tenemos que explicar mediante un vídeo 3D una
operación quirúrgica.

Diseño y Desarrollo Web 2Bgu Página 55

Precio:
El vídeo 2D suele tener un precio mucho más asequible que el vídeo 3D. La
dificultad técnica es mucho mayor en 3D y el proceso es más lento. En este artículo
de Gonzzo.com puedes ver cómo se hace y como trabajan en Pixar
Software:
El software de la animación 2D suele ser el After Effects, Photoshop y el Adobe
Animate.
En cambio para la animación 3D podríamos utilizar el Cinema
4D, el Houdini, Autodesk 3Ds Max o Maya.

Actividades – Mapa de Bits

1. Escriba verdadero o falso según corresponda.

a. Un mapa de bits es una matriz de bits que especifica el color de
cada píxel de una matriz rectangular de píxeles. ( )
b. Un mapa de bits es una matriz de bits que especifica el color de
cada píxel de una matriz rectangular de píxeles. ( )
c. La transformación de un mapa de bits a un formato vectorial se llama
vectorización ( )
d. Los distintos objetos que componen una imagen vectorial no pueden
escalarse, cambiar de forma, color o posición independientemente
del resto. ( )
e. Los objetos de un gráfico vectorial no pueden fusionarse entre sí y
crear formas intermedias. ( )
f. Cada parte de una imagen vectorial puede reutilizarse en otras
imágenes. Bastará con copiar y pegar en el otro archivo. ( )

2. Responda las siguientes preguntas.

a. ¿Bajo qué parámetros se suele definir a las imágenes en mapa de
bits?
____________________________________________________
____________________________________________________

b. ¿Cuál es la relación de Walt Disney y la técnica de la Persistencia

Retiniana?
___________________________________________________
___________________________________________________
___________________________________________________

Diseño y Desarrollo Web 2Bgu Página 56

c. ¿Cómo son los objetos en las animaciones 2D?
___________________________________________________
___________________________________________________
___________________________________________________

d. ¿Cuáles son las características de los objetos en las animaciones

3D?
___________________________________________________
___________________________________________________

e. ¿Qué aspectos se deben tomar en cuenta para elegir el tipo de

animación?
______________________________________________________
______________________________________________________

3. Realice dos dibujos; uno bajo el formato 2D y el otro en formato 3D

Diseño y Desarrollo Web 2Bgu Página 57

Edición de Fotografía
Lightroom y Photoshop
Photoshop es un programa que permite hacer manipulaciones y correcciones
fotográficas con tanta complejidad y calidad como se pueda imaginar, es un
software en el que se trabajan imágenes de a una por vez. Hay dos diferencias
fundamentales con Lightroom: la primera es que Lightroom funciona como catálogo
y organizador de fotos.
Nos permite ordenar las fotos
en catálogos y hacer
selecciones dentro de los
mismos con estrellas
banderas y colores,
organizando y facilitando el
acceso a la información en
nuestras carpetas y discos
duros.
El Lightroom por otra parte no nos permite trabajar con layers (capas) ni mover
pixeles en una imagen, esta limitante no permite desarrollar proyectos de montaje
de imágenes combinadas o modificar partes de fotos.
Son dos herramientas concebidas para realizar tareas diferentes aunque comparten
un set de herramientas similares y en ambas se pueden hacer los mismos ajustes
básicos.
Definición de RAW y XMP
Raw, es un formato de archivo digital para fotografía, que conserva la información
tal cual fue capturada por el sensor de la cámara incluyendo información de
luminosidad y color así como metadatos.
Es un tipo de archivo que no acepta modificaciones, por lo que las configuraciones
(seteos) o ajustes que se realicen en el archivo Raw en Adobe
Camera Raw serán guardados en un archivo
complementario de extensión Xmp que se
guardará al lado de nuestro Raw en la carpeta en
el administrador de archivos de nuestra
computadora.
El Raw a diferencia de los otros archivos de imagen como pueden ser Tiff o Jpg
presenta una profundidad de color por pixel que permite hacer modificaciones en
sus variables sin pérdida de calidad.

Diseño y Desarrollo Web 2Bgu Página 58

Por ejemplo si hacemos una modificación de exposición es como si el sensor
hubiese guardado la información de varios pasos en la exposición y nosotros
decidimos cual de esos pasos usar sin recurrir a cálculos matemáticos para generar
información donde no existe.
A esta forma de modificar los archivos se la llama proceso no destructivo. El archivo
Xmp es un archivo que se produce por defecto cuando hacemos modificaciones a
los ajustes de nuestro Raw en Adobe Camera Raw.
Es un archivo del tipo txt con información de cómo son esas modificaciones, por
ejemplo exposición +5, las modificaciones realizadas no se guardan en el Raw sino
en estos archivos accesorios que se ejecutan cuando volvemos a abrir el Raw en el
Adobe Camera Raw, por este motivo siempre podremos volver a la imagen original.
Si eliminamos el Xmp las modificaciones realizadas se pierden.
Adobe Camera Raw 7.0
Ajustes básicos
Temperatura y Tinta (White Balance)
White Balance o Balance de Blancos es la adaptación del sensor de la cámara a las
distintas fuentes de luz en lo que refiere a su temperatura de color. El cerebro
humano adapta la percepción del blanco llevando una información de color neutra
independientemente del tipo de fuente de luz, por eso vemos una banana igual bajo
un tubo luz que a la luz del sol.
Sin embargo los sensores de las cámaras necesitan que indiquemos que
temperatura tiene nuestra fuente de luz a menos que estemos usándolas en la
opción balance de blancos automático. El slider WB en el software sirve para
corregir errores de balance de blancos capturados en toma.

Diseño y Desarrollo Web 2Bgu Página 59

Tinta es un controlador complementario que sirve para corregir sutiles aberraciones
de color resultantes de la corrección con White Balance hacia los magentas o los
verdes.

Exposure (Exposición)
Ajusta la luminosidad general de la imagen con pasos equivalentes a los valores de
apertura de diafragma de la cámara. Controla los tonos medios de la imagen por lo
que va a generar modificaciones en la zona media del histograma.
Contraste
Controla la diferencia de brillo entre las zonas de sombras y luces, afectando
principalmente los tonos medios, cuanto mayor sea el contraste mayor será la
diferencia. Cuando se incrementa el contraste las zonas del medio hacia las
sombras se vuelven mas oscuras y las zona del medio hacia las luces se vuelven
mas claras.
Highlights (Altas luces)
Controla la porción mas clara de la imagen, o las llamadas altas luces. Si se
trasladas el controlador hacia la izquierda se oscurecen estas zonas recuperando
información.
Shadows (Sombras)
Ajusta las zonas oscuras de la imagen, minimizando la perdida de información por
“clípeo” de los negros recuperando detalle en las sombras.

Diseño y Desarrollo Web 2Bgu Página 60

Whites
Se enfocan solo en el extremo derecho del histograma, la zona de las altas altas
luces.
Nos permite controlar la perdida de información por clípeo en las zonas de blancos
recuperando detalle.
Blacks
Se enfoca solo en el extremo izquierdo del histograma, en las zonas de sombras.
Controla “clípeos” recuperando detalle en los negros.
Clarity
Genera contraste en los tonos medios, resulta en un tipo de enfoque controlado.
Todos los procesos de sharpen o enfoque parten de procesos de microcontrastes.
Vibration
Aumenta la vibración de los colores dando resultados realistas.
Saturation
Satura y desatura el color sin límites.

Sistema de edición de video No lineal

Los software de edición que hoy en día conocemos tales como, Adobe Premiere,
Windows Movie Maker, iMovie, Pinnacle Studio,Sony Vegas Pro, Avid, Final Cut
Pro.etc son sistemas de edición No lineal.
Pero ¿qué es la edición lineal y porqué a estos
programas de edición se les denomina como No
lineales?
La edición lineal fue la primera que se realizó al salir los
sistemas de vídeo.
Esta forma de edición no permite cortar un fotograma de
forma libre sin ningún orden, se sigue de forma
secuencial la filmación. Es una edición totalmente
analógica también llamada edición máquina-máquina.
En ella se va avanzando de principio a fin porque se trabaja sobre una cinta.
En este tipo de edición siempre se utilizan como mínimo dos vídeos, en el que uno
trabaja de reproductor y el otro de grabador. Han de seleccionarse las imágenes
que se quieren en el video reproductor y grabarse en el grabador.

Diseño y Desarrollo Web 2Bgu Página 61

Para ediciones más profesionales se usan varios reproductores, los mezcladores
“Video Switcher” tienen diferentes entradas de vídeo y audio y su función es la de
poder elegir qué parte de video o audio de los distintos reproductores grabar.
Se necesita una Tituladora para ir añadiendo los títulos, generadores de efectos
para añadir transiciones y una consola de sonido para mezclar el audio.

La grabación se hacía en tiempo real, es decir si la toma dura 5 minutos, ese es el

tiempo que tarda la maquina en grabar la toma, durante esos 5 minutos todo debía
estar perfectamente coordinado, la mezcla de los videos, el añadir la transición, la
mezcla de audio etc, porque todo se va generando en tiempo real y no se puede
volver atrás una vez grabado.
Por ejemplo en este sistema si queríamos eliminar una parte de video que no se ha
grabado correctamente, era necesario cortar la cinta de video, eliminar el rollo de
cinta que queremos eliminar y volver a juntarlo. Esto conlleva una pérdida de tiempo
muy grande a la hora de editar un vídeo.
Con la mejora en la informática, los algoritmos de compresión y las grabaciones
digitales fueron apareciendo sucesivas generaciones de sistemas no lineales
basados primero en cintas de vídeo (MiniDV), después en discos láser (DVD) y más
tarde en distintas generaciones de discos magnéticos (Disco Duros) y tarjetas de
memoria.
Aparecen los software de edición no lineal y gracias a estos, en un sólo equipo
(Computadora) están todos los elementos necesarios para la edición, mezclado,

Diseño y Desarrollo Web 2Bgu Página 62

efectos de video, tituladores, consola de audio consiguiendo un ahorro de tiempo y
dinero considerable.

La edición No lineal permite realizar edición en cualquier orden, pudiéndose

empezar por el final, luego el principio etc y de ahí viene el nombre de No Lineal.
Software de edición gráfica
GIMP
Las imágenes poseen cada vez mayor relevancia dentro del marketing digital.
Lo visual tiene gran atractivo y es la manera más rápida de llegar e impactar en el
público objetivo.
Redes sociales como Pinterest o Instagram se fundamentan en este tipo de
contenidos y las fotografías empiezan a convertirse en elemento destacado dentro
de las estrategias de marketing de las empresas. Y en todo esto, Gimp te puede
ayudar.
La calidad de las fotografías se mima con esmero y es habitual el tratamiento de las
mismas con programas de edición. El más conocido es Photoshop, el cual usan
multitud de diseñadores y usuarios, pero si estás buscando una alternativa gratuita
para retocar tus imágenes de un modo algo más amateur, hoy te traemos una buena
alternativa: GIMP.

Diseño y Desarrollo Web 2Bgu Página 63

GIMP (GNU Image Manipulation Program) es una de estas aplicaciones de
edición de imágenes. Se trata de un software libre, englobado dentro del proyecto
GNU y disponible bajo esta licencia pública y la de GNU Lesser General Public
License.
¿Qué es Gimp y para qué sirve?
GIMP es un programa ideal para retocar, componer y editar imágenes. Muchas
pequeñas empresas lo utilizan para crear logotipos o gráficos de forma gratuita.
Algunas de sus prestaciones no tienen nada que envidiar a otras licencias
comerciales. De hecho, se ha convertido en alternativa a Photoshop en algunos
casos. La primera versión del programa se ideó para GNU/Linux. En la actualidad,
también existen adaptaciones propias para Windows y Mac OS X.
Este programa de software libre soporta la mayoría de ficheros gráficos, como jpg,
gif, png, tiff etc. Además, posee su propio formato de almacenamiento, el xcf. Es
capaz de importar archivos pdf o imágenes vectoriales svg.
Ahora que ya conoces qué es Gimp, a continuación, enumeramos algunas de las
prestaciones y herramientas más llamativas del programa:
 Permite seleccionar todo tipo de formas gracias a las herramientas de
selección (rectangular, esférica, varita mágica, lazo manual etc.).
 Tijeras inteligentes.
 Dispone de todo tipo de utensilios de pintado (brocha, aerógrafo, pincel,
textura, relleno…).
 Es posible modificar la escala o la inclinación.
 Brocha de curado para rectificar errores.
 Posee herramientas de inclinación, deformación, clonado en
perspectiva y manipulación de textos.
 Filtros para modificar el aspecto de las fotografías.
 Amplio catálogo de efectos y tratamientos de imágenes.
Primeros pasos con GIMP

Redimensionar una imagen

Es habitual obtener una fotografía o imagen en un tamaño que no siempre nos es

práctico, especialmente si es mayor al que necesitamos. De ahí que tengamos que
redimensionarlo.

En GIMP, redimensionar es tan fácil como abrir la imagen (File > Open / Archivo >
Abrir) e ir a Imagen > Escalar la imagen…

Diseño y Desarrollo Web 2Bgu Página 64

Se abrirá una ventana emergente donde podemos cambiar anchura y altura.

Por defecto, si alteras un valor, el otro cambiará automáticamente para mantener la

proporción. Además, puedes emplear píxeles u otras unidades de medida, como
porcentaje, milímetros o centímetros, entre otros.

Si no quieres mantener la proporción de la imagen, basta con hacer clic en el icono

en forma de cadena. Así, al cambiar anchura o altura, el otro valor seguirá igual.

Luego pulsamos en Escalar y se aplicarán los cambios. Para guardarlos tenemos

dos opciones: guardar (Archivo > Guardar como…) en el formato por defecto de
GIMP o exportar (Archivo > Exportar como…) a uno de los muchos formatos
compatibles.

Cambiar el tamaño de una imagen

Junto con la resolución, el tamaño del archivo de una imagen es otro aspecto con el
que trabajamos habitualmente.

Diseño y Desarrollo Web 2Bgu Página 65

Cuando guardamos una imagen retocada desde Archivo > Exportar como… y
elegimos un formato de compresión como JPEG o PNG, antes de guardar se
mostrará una ventana emergente donde podemos afinar el nivel de compresión. Ten
en cuenta que a mayor calidad, más espacio ocupará la imagen.

En el caso del formato JPEG, activando la opción “Mostrar vista previa” veremos el
tamaño final del archivo.

Recortar una imagen

Es frecuente que en una fotografía no todo sea aprovechable, y en muchos casos

suelen ser elementos de los bordes. Recortándolos, mejoraremos la imagen.

Tras abrir una imagen, con la herramienta Recorte, disponible en la Caja de

herramientas, podremos eliminar los bordes de una imagen. También podemos
activar esta función desde Herramientas > Herramientas de transformación >
Recortar.

Diseño y Desarrollo Web 2Bgu Página 66

Con el cursor sólo tenemos que dibujar un rectángulo que englobe aquella parte
de la imagen que queremos mantener. Luego podremos cambiar el tamaño de la
zona selecciona desde las esquinas.

Desde las Opciones de herramienta podemos afinar el recorte eliminando

solamente la capa seleccionada, si hay varias. También permite cambiar el tamaño
de la zona seleccionada alterando los valores de ancho y alto e incluso mantener una
proporción concreta desde Fijo > Proporción de aspecto.

Otra opción útil es la de Resaltado, con la que podemos ver líneas que nos indiquen
la regla de los tercios, la regla de los quintos, la proporción áurea o líneas
diagonales.

Usando una de estas posibilidades nos será más fácil recortar manteniendo la
composición.

Para eliminar los bordes o laterales de una imagen también podemos emplear otras
herramientas, como Selección rectangular o Selección elíptica para quedarnos
con un rectángulo o un círculo.

Diseño y Desarrollo Web 2Bgu Página 67

Y para los más avezados, GIMP cuenta con las conocidas herramientas de selección
libre y selección difusa para dibujar el área que queremos mantener libremente y/o
probar suerte con zonas que comparten el mismo color.

Girar o inclinar una imagen

Al tomar una fotografía, es posible que el sentido no sea el más adecuado. Pero con
GIMP es posible girar la imagen hacia un lado u otro.

Desde Imagen > Transformar puedes girar una imagen 90º hacia un lado u otro e
incluso girarla 180º.

Y si quieres que la inclinación sea distinta a estos valores, con la herramienta Rotar
puedes definir un ángulo específico o inclinar la imagen a placer.

Invertir una imagen

Hay ocasiones en las que una composición queda mejor si la invertimos, como en un
espejo, es decir, si el elemento que hay a la izquierda de la imagen lo colocamos a la
derecha y viceversa.

GIMP permite hacer esto desde Imagen > Transformar y, desde ahí, invertir de
arriba abajo (Voltear verticalmente) o hacia los lados (Voltear horizontalmente).

Diseño y Desarrollo Web 2Bgu Página 68

Estas son sólo cinco tareas básicas que puedes hacer con GIMP, pero hay muchas
más. Échale un vistazo y verás cómo, con el tiempo, te resulta tan práctica como
Photoshop para la mayoría de tareas habituales.

Software de Edición de Sonido

Adobe Audition. Es un programa para edición y grabación de música digital, con

el cual puedes obtener una gran variedad de
opciones, y puedas obtener y realizar un
trabajo de calidad y obtener un buen
producto. Diseñado para los profesionales
de audio y video más exigentes, ofrece
funciones avanzadas de mezcla, edición y
efectos de sonido.

Descripción

Conocido anteriormente como Cool Edit Pro

es un software en forma de estudio de sonido
desarrollado para la edición de audio digital
de Adobe Systems Incorporated que permite
tanto un entorno de edición mezclado multipista.

Grabación, mezcla, edición y masterización: el software Adobe Audition 3 es el

conjunto de herramientas completo para la producción profesional de sonido.

Adobe Audition es un editor digital de audio que forma parte de la gama de productos
que ofrece la empresa de software Adobe Systems.

Adobe se ha esmerado en mejorar esta aplicación para que se pueda editar y mezclar
varios archivos de sonido en la consola, añadir varios efectos a la pista de audio
como: retraso analógico, reverberación por circunvolución, herramienta de
masterización, suite de guitarra, entre otros.

Además, es muy versátil ya que combina potentes herramientas para la producción

profesional de sonido y una extremada sencillez en su utilización.

Adobe Audition en si es bastante completo, con una infinidad de opciones que son
difícil de explicar, aun así no es difícil de aprender a utilizarlo, todo esta en ir revisando
cada una de las opciones y experimentar con algunos ejemplos de sonido.

Diseño y Desarrollo Web 2Bgu Página 69

Características

Audition está diseñado para dar a los profesionales del audio un paquete de
herramientas flexibles para la producción, grabación, mezcla, edición y
masterización.

Con amplio dominio y restauración, audition permite a profesionales crear música y

Spots así como restaurar grabaciones defectuosas con sofisticadas herramientas de
edición permitiendo así que también se destacan las siguientes características:

Compatibilidad de instrumentos virtuales VSTi Compatibilidad con una amplia

variedad de instrumentos virtuales. Añade pistas midi MIDI a su mezcla, se puede
elegir un instrumento y luego grabar un sonido nuevo en el Sequencer.

Edición multipista mejorada Ahorra tiempo y aumenta la precisión editando grupos de

clips. Utiliza las funciones de transición gradual automática con clips en vista
multipista; de este modo, se puede mezclar archivos de forma rápida.

Edición espectral mejorada Se puede seleccionar de forma libre en un intervalo de

frecuencias con la herramienta Pincel de efectos y aplicar estos efectos a la selección

Diseño y Desarrollo Web 2Bgu Página 70

en varios grados. Perfecciona un intervalo seleccionado y repara automáticamente
clics, ventanas emergentes y otros ruidos utilizando el pincel de corrección puntual.

Vistas de inicio/cola Muy útil para ajustar el inicio y el fin de un bucle o de otro archivo
de sonido. Las vistas de inicio y cola dan la posibilidad de ampliar hasta el comienzo
y el final de un archivo para añadir rápidamente transiciones precisas mientras
observa el resto del documento.

Nuevos efectos Este incluye nuevos efectos como Reverberación por circunvolución,
Retraso analógico, herramienta de masterización, Suite de guitarra y compresor a
válvulas.

Máximo rendimiento Con el programa se obtiene el máximo rendimiento y el máximo

partido de los nuevos procesadores multinúcleo. El motor de mezcla optimizado
permite utilizar más pistas y efectos en la misma máquina, lo que ofrece más variedad
y una mayor rapidez de procesamiento.

Funciones

Editar audio.

Aplicar efectos de sonido.

Mezclar audio.

Agregar filtros de ruido.

Utilizar multipista.

Crear música.

Compilar y editar una banda sonora.

Limpiar el audio de una película.

Grabar y mezclar proyectos.

Diseño y Desarrollo Web 2Bgu Página 71

Actividades – Edición de fotografías

1. Escriba verdadero o falso según corresponda.

a. Photoshop es un programa que permite hacer manipulaciones y
correcciones fotográficas con tanta complejidad y calidad como se
pueda imaginar ( )
b. El Lightroom por otra parte no nos permite trabajar con layers
(capas) ni mover pixeles en una imagen ( )
c. El Raw a diferencia de los otros archivos de imagen como pueden
ser Tiff o Jpg presenta una profundidad de color por pixel ( )
d. A esta forma de modificar los archivos se la llama proceso no
destructivo. El archivo Xmp es un archivo que se produce por
defecto cuando hacemos modificaciones a los ajustes de nuestro
Raw en Adobe Camera Raw. ( )
e. El archivo Xmp es un archivo que se produce por defecto cuando
hacemos modificaciones a los ajustes de nuestro Raw en Adobe
Camera Raw. ( )

2. Realice un organizador grafico sobre las características de Adobe

Camera Raw 7.0.

Diseño y Desarrollo Web 2Bgu Página 72

Diseño y Desarrollo Web 2Bgu Página 73
Bibliografía Web

https://www.loopeando.com/que-es-html-que-significa-cual-es-su-origen-y-como-
funciona/

http://conceptodefinicion.de/pagina-web/

http://neo.lcc.uma.es/evirtual/cdd/tutorial/red/ip.html

http://tublogtecnologico.com/navegadores-web/

http://www.ite.educacion.es/formacion/materiales/107/cd/html/html0701.html

http://www.htmlquick.com/es/tutorials/tables.html

http://www.um.es/docencia/barzana/DAWEB/Desarrollo-de-aplicaciones-web-
templates.html

https://disenowebakus.net/enlaces-hipervinculos-tag-ancla-html.php

https://okhosting.com/blog/los-mejores-programas-para-crear-paginas-web-2016/

http://www.ite.educacion.es/formacion/materiales/107/cd/html/html1501.html

https://www.ecured.cu/Servidor_Web

https://miposicionamientoweb.es/que-es-un-dominio/

http://dro2754.blogspot.com/2010/03/diferencia-entre-plataforma-y-pagina.html

https://graffica.info/herramientas-para-el-disenador-digital/

https://marketing4ecommerce.net/que-es-una-imagen-vectorial-y-como-reconocerla/

http://www.comunicacion.edu.uy/sites/default/files/PROGRAMA%20COMPLETO_
REVELADO%20Y%20EDICI%C3%93N%20DE%20FOTOGRAF%C3%8DA%20DI
GITAL_Ximena%20Clavelli.pdf

https://editalo.pro/2016/11/09/sistema-de-edicion-no-lineal/

https://www.websa100.com/blog/que-es-gimp-y-para-que-sirve/

https://hipertextual.com/2017/12/archivo-stories-instagram

Diseño y Desarrollo Web 2Bgu Página 74

También podría gustarte

Modulo Soporte Tecnico
80% (5)
Modulo Soporte Tecnico
31 páginas
Modulo de Programación y Base de Datos
Aún no hay calificaciones
Modulo de Programación y Base de Datos
20 páginas
Manual de Autodefensa Digital
100% (1)
Manual de Autodefensa Digital
34 páginas
PROGRAMACIÓN Y BASES DE DATOS 1ero
100% (1)
PROGRAMACIÓN Y BASES DE DATOS 1ero
71 páginas
Aplic Ofimaticas Locales y en Linea 1 PDF
Aún no hay calificaciones
Aplic Ofimaticas Locales y en Linea 1 PDF
118 páginas
Modulo Sistemas Operativos Y Redes PRIMERO BACHILLERTO
100% (1)
Modulo Sistemas Operativos Y Redes PRIMERO BACHILLERTO
47 páginas
Propuesta Comercial GCP - 2018 G1924 SETSA
100% (1)
Propuesta Comercial GCP - 2018 G1924 SETSA
9 páginas
PUD Aplicaciones Ofimáticas Locales y El Línea 1ro
0% (1)
PUD Aplicaciones Ofimáticas Locales y El Línea 1ro
13 páginas
Um3 - Command - Instructions (Uc500) - Es
Aún no hay calificaciones
Um3 - Command - Instructions (Uc500) - Es
33 páginas
Creación de Paginas Web
100% (1)
Creación de Paginas Web
60 páginas
Pca 3bt Diseño y Desarrollo Web
100% (5)
Pca 3bt Diseño y Desarrollo Web
7 páginas
Primero Bachillerato Aplicaciones Ofimaticas
100% (1)
Primero Bachillerato Aplicaciones Ofimaticas
18 páginas
Modulo de Soporte Tecnico
Aún no hay calificaciones
Modulo de Soporte Tecnico
39 páginas
UNIDA N. - 4 Prog. y Base de Datos 1ro Bachiller Corregido
Aún no hay calificaciones
UNIDA N. - 4 Prog. y Base de Datos 1ro Bachiller Corregido
6 páginas
Certificado Feria de Proyectos Participación
Aún no hay calificaciones
Certificado Feria de Proyectos Participación
10 páginas
Programacion y Base de Datos II
100% (1)
Programacion y Base de Datos II
52 páginas
Sistemas Operativos y Redes
75% (4)
Sistemas Operativos y Redes
6 páginas
Trabajo Ken
Aún no hay calificaciones
Trabajo Ken
17 páginas
PLAN MICROCURRICULAR BACHILLERATO TECNICO 1ero B Programacion-Signed
100% (1)
PLAN MICROCURRICULAR BACHILLERATO TECNICO 1ero B Programacion-Signed
3 páginas
Manual de Usuario Siup PDF
Aún no hay calificaciones
Manual de Usuario Siup PDF
269 páginas
Formato Pósters y Ponencias - Segundo Congreso de Investigación Teinnova
Aún no hay calificaciones
Formato Pósters y Ponencias - Segundo Congreso de Investigación Teinnova
10 páginas
2H Diseño Web
Aún no hay calificaciones
2H Diseño Web
39 páginas
Soporte Tecnico - Segundo Bachillerato - Segundo Semana
100% (2)
Soporte Tecnico - Segundo Bachillerato - Segundo Semana
2 páginas
Desarrollo de Aplicaciones Distribuidas: Tema 4: Paradigmas de Computación Distribuida
Aún no hay calificaciones
Desarrollo de Aplicaciones Distribuidas: Tema 4: Paradigmas de Computación Distribuida
13 páginas
Entorno de Programación
Aún no hay calificaciones
Entorno de Programación
3 páginas
Qu - Ax - Búsqueda
Aún no hay calificaciones
Qu - Ax - Búsqueda
3 páginas
Original PDF
100% (1)
Original PDF
373 páginas
Daylam
Aún no hay calificaciones
Daylam
2 páginas
Diseño Web Unidades
Aún no hay calificaciones
Diseño Web Unidades
25 páginas
Planificación Microcurricular Sistemas Operativos y Redes
100% (2)
Planificación Microcurricular Sistemas Operativos y Redes
14 páginas
Programacion y Base de Datos Segundo
Aún no hay calificaciones
Programacion y Base de Datos Segundo
2 páginas
Ciber Seguridad 1.4
Aún no hay calificaciones
Ciber Seguridad 1.4
17 páginas
Plan Anual Diseño y Desarrollo Web
78% (9)
Plan Anual Diseño y Desarrollo Web
5 páginas
PUD Aplicaciones Ofimaticas Locales y El Linea 1ro
100% (2)
PUD Aplicaciones Ofimaticas Locales y El Linea 1ro
13 páginas
Manual Configuracion Unifi 2
Aún no hay calificaciones
Manual Configuracion Unifi 2
23 páginas
5 - Tramitación de Correspondencia y Paquetería
100% (1)
5 - Tramitación de Correspondencia y Paquetería
20 páginas
Convo Catori A Veracruz
Aún no hay calificaciones
Convo Catori A Veracruz
26 páginas
Diferencia Entre Sistema Operativo Monousuarios y Sistema Operativo Multiusuarios
Aún no hay calificaciones
Diferencia Entre Sistema Operativo Monousuarios y Sistema Operativo Multiusuarios
1 página
Pca 2bt Diseño y Desarrollo Web
Aún no hay calificaciones
Pca 2bt Diseño y Desarrollo Web
7 páginas
C13ses1t2lmalrss0201 - 1
Aún no hay calificaciones
C13ses1t2lmalrss0201 - 1
14 páginas
Servidor DHCP
Aún no hay calificaciones
Servidor DHCP
15 páginas
Trabajo Redes Corregido Sergi Fruitos y Edmond Grau Gs
Aún no hay calificaciones
Trabajo Redes Corregido Sergi Fruitos y Edmond Grau Gs
13 páginas
P.U.D.DISEÑO Y DESARROLLO WEB-3ero
Aún no hay calificaciones
P.U.D.DISEÑO Y DESARROLLO WEB-3ero
9 páginas
Manual de Instalación SAP GUI 770 Actualizado 2022
Aún no hay calificaciones
Manual de Instalación SAP GUI 770 Actualizado 2022
13 páginas
UNIDAN. - 1 Prog. y Base de Datos 1ro Bachiller
Aún no hay calificaciones
UNIDAN. - 1 Prog. y Base de Datos 1ro Bachiller
11 páginas
Plan Anual Programacion y Base de Datos 1 2 3
100% (1)
Plan Anual Programacion y Base de Datos 1 2 3
15 páginas
2do Bach Modulo Sistemas Operativos
71% (7)
2do Bach Modulo Sistemas Operativos
3 páginas
P.U.D.SISTEMAS OPERATIVOS Y REDES-2ndo.
100% (2)
P.U.D.SISTEMAS OPERATIVOS Y REDES-2ndo.
15 páginas
Manual para El Envio de Comprobantes Electrónicos A Sunat
Aún no hay calificaciones
Manual para El Envio de Comprobantes Electrónicos A Sunat
12 páginas
Mi Derecho A La Educacion Como Docente
Aún no hay calificaciones
Mi Derecho A La Educacion Como Docente
9 páginas
UNID N. - 3 Prog. y Base de Datos 1ro Bachiller Corregido
100% (2)
UNID N. - 3 Prog. y Base de Datos 1ro Bachiller Corregido
6 páginas
Notepad Trucos Esenciales
Aún no hay calificaciones
Notepad Trucos Esenciales
7 páginas
Aplicaciones Ofimaticas Locales y en Linea Entregado
0% (1)
Aplicaciones Ofimaticas Locales y en Linea Entregado
11 páginas
Temarios Comparados UMál. USal
Aún no hay calificaciones
Temarios Comparados UMál. USal
2 páginas
1 Introducción A HTML
Aún no hay calificaciones
1 Introducción A HTML
7 páginas
Tercero Programación S 21-30
Aún no hay calificaciones
Tercero Programación S 21-30
4 páginas
Producto Académico 2
Aún no hay calificaciones
Producto Académico 2
5 páginas
UNIDN. - 5 Prog. y Base de Datos 1ro Bachiller Corregido
100% (1)
UNIDN. - 5 Prog. y Base de Datos 1ro Bachiller Corregido
6 páginas
2 Pud 3BT Diseño y Desarrollo Web
Aún no hay calificaciones
2 Pud 3BT Diseño y Desarrollo Web
7 páginas
021 5
Aún no hay calificaciones
021 5
4 páginas
Pca Programacion y Base de Datos 3ro BT 2023-2024
100% (1)
Pca Programacion y Base de Datos 3ro BT 2023-2024
4 páginas
Actividad DAW
Aún no hay calificaciones
Actividad DAW
3 páginas
Put Programacion 2do
100% (1)
Put Programacion 2do
15 páginas
2° Programación y Bases de Datos
100% (1)
2° Programación y Bases de Datos
17 páginas
Acta de Entrega de Documentos - Vega Saltos Bryan
Aún no hay calificaciones
Acta de Entrega de Documentos - Vega Saltos Bryan
2 páginas
Glosario-Terminos7 Texto
Aún no hay calificaciones
Glosario-Terminos7 Texto
2 páginas
Resumen
Aún no hay calificaciones
Resumen
4 páginas
KYA Global Non-WUPSIL IQ
Aún no hay calificaciones
KYA Global Non-WUPSIL IQ
1 página
Taller 2
Aún no hay calificaciones
Taller 2
2 páginas
Renovación de Licencia - 231209 - 102910
Aún no hay calificaciones
Renovación de Licencia - 231209 - 102910
1 página
PLAN MICROCURRICULAR DE PROGRAMACIÓN Semana 3-4-5-6 25 23 de Mayo
100% (1)
PLAN MICROCURRICULAR DE PROGRAMACIÓN Semana 3-4-5-6 25 23 de Mayo
10 páginas
Poa Tutor
Aún no hay calificaciones
Poa Tutor
2 páginas
Plan Curricular Anual Programacion y Base de Datos Primero
100% (3)
Plan Curricular Anual Programacion y Base de Datos Primero
14 páginas
Atomic Design Spanish-7-10
Aún no hay calificaciones
Atomic Design Spanish-7-10
4 páginas
Pca 2bt Programacion y Base Datos
100% (1)
Pca 2bt Programacion y Base Datos
7 páginas
PCA-SOPORTE TECNICO 1ro
Aún no hay calificaciones
PCA-SOPORTE TECNICO 1ro
4 páginas
Cuestionario Programación Base de Datos
100% (1)
Cuestionario Programación Base de Datos
3 páginas
Pca - Sistemas Operativos y Redes
100% (1)
Pca - Sistemas Operativos y Redes
5 páginas
Evaluación Primer Quimestre
100% (1)
Evaluación Primer Quimestre
8 páginas
Planificacion Curricular Anual SoporteTecnico 1eros
100% (3)
Planificacion Curricular Anual SoporteTecnico 1eros
4 páginas
Pum 4 Programacion y Bases de Datos
Aún no hay calificaciones
Pum 4 Programacion y Bases de Datos
4 páginas
Primero de Bachillerato
Aún no hay calificaciones
Primero de Bachillerato
14 páginas
Planificacion de Bloques - Sistemas Informáticos
67% (3)
Planificacion de Bloques - Sistemas Informáticos
11 páginas
Plan Anual Aplicaciones
100% (1)
Plan Anual Aplicaciones
5 páginas
1 Pud 3BT Diseño y Desarrollo Web
Aún no hay calificaciones
1 Pud 3BT Diseño y Desarrollo Web
7 páginas
Sistemas Operativos Monousuarios
Aún no hay calificaciones
Sistemas Operativos Monousuarios
35 páginas
Planificación 1ro BGU Informatica
100% (1)
Planificación 1ro BGU Informatica
8 páginas
Pca Sistemas Operativos y Redes 1ro
Aún no hay calificaciones
Pca Sistemas Operativos y Redes 1ro
5 páginas
Examen de Soporte 2do Parcial Segundo de Bachillerato
Aún no hay calificaciones
Examen de Soporte 2do Parcial Segundo de Bachillerato
1 página
PCA, Aplicaciones Ofimáticas
Aún no hay calificaciones
PCA, Aplicaciones Ofimáticas
9 páginas
Programacion y Base de Datos 2
100% (2)
Programacion y Base de Datos 2
6 páginas
Actividades Sistemas Operativos Primero de Bachillerato
Aún no hay calificaciones
Actividades Sistemas Operativos Primero de Bachillerato
8 páginas
PCA PROGRAMACIÓN Y BASE DE DATOS 2020 - 2021 - Miguel Baque Arteaga
100% (2)
PCA PROGRAMACIÓN Y BASE DE DATOS 2020 - 2021 - Miguel Baque Arteaga
5 páginas
Pca Soporte Técnico 1 Bgu
100% (2)
Pca Soporte Técnico 1 Bgu
4 páginas
Programa Curricular Anual de Computacion 2do. BGU
100% (6)
Programa Curricular Anual de Computacion 2do. BGU
6 páginas