Las tablas sirven para encolumnar y estructurar el texto y las imágenes con más precisión.
Marcas que se utilizarán:
<TABLE> </TABLE> Al inicio y al final
<TR> </TR> Definen las filas
<TD> </TD> Definen las columnas
Ejemplo:
<table border="1">
<tr>
<td>texto 1</td>
<td>Texto 2</td>
<td>Otra columna</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Aplicaciones Informáticas
miércoles, 7 de septiembre de 2016
miércoles, 10 de agosto de 2016
Listas ordenadas y desordenadas en HTML
CREACIÓN DE LISTAS
Listas no ordenadas
<ul>
<li>
</ul>
Listas ordenadas
<ol>
<li>
</ol>
Podemos usar diferentes iconos al principio de las listas.
ACTIVIDAD:
Busca ejemplos de ambas listas donde se visualice las etiquetas, su aplicación y el formado para los iconos.
---------------------------------------------------------------------------------------------------------------
LISTA NO ORDENADA ↓
Los círculos sólidos de la lista anterior se obtienen con disc:
<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>El atributo circle imposta circunferencias:
<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>El atributo square imposta listas definidas por cuadrados sólidos:
<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
LISTA ORDENADA ↓
Ordenación con letras mayúsculas:
<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>Ordenación con letras minúsculas:
<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>Ordenación con números romanos en mayúscula:
<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>Ordenación con números romanos en minúscula (romanitos):
<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
ACTIVIDAD 2
Realiza una página web de tu curso donde tengas una lista desordenada de los alumnos y una ordenada de las materias.
Agrega imagen con bordes y epígrafe de los alumnos.
Listas no ordenadas
<ul>
<li>
</ul>
Listas ordenadas
<ol>
<li>
</ol>
Podemos usar diferentes iconos al principio de las listas.
ACTIVIDAD:
Busca ejemplos de ambas listas donde se visualice las etiquetas, su aplicación y el formado para los iconos.
---------------------------------------------------------------------------------------------------------------
LISTA NO ORDENADA ↓
Los círculos sólidos de la lista anterior se obtienen con disc:
<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>El atributo circle imposta circunferencias:
<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>El atributo square imposta listas definidas por cuadrados sólidos:
<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
LISTA ORDENADA ↓
Ordenación con letras mayúsculas:
<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>Ordenación con letras minúsculas:
<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>Ordenación con números romanos en mayúscula:
<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>Ordenación con números romanos en minúscula (romanitos):
<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
ACTIVIDAD 2
Realiza una página web de tu curso donde tengas una lista desordenada de los alumnos y una ordenada de las materias.
Agrega imagen con bordes y epígrafe de los alumnos.
viernes, 1 de julio de 2016
HTML: Etiquetas para imágenes
SRC
<IMG SRC="immagine.gif">
ALIGN
ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.
ALT
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
WIDTH Y HEIGHT
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
BORDER
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
BORDER
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
viernes, 6 de mayo de 2016
HTML
Características generales
•HTML: HyperText Markup Language
*Basado en etiquetas ("marcas", "tags")
*Combina potencia y simplicidad
-Hipertexto e hipermedia
-Documentos HTML: fichero de texto (ASCII)
-HTML es un lenguaje interpretado: muy "portable"
Las etiquetas
•El formato general a seguir:
*<etiqueta>contenido</etiqueta>
•La inclusión de comentarios que no se ven:
*<|comentarios>
•Las etiquetas que nunca deben faltar:
*<HTML> </HTML> *<HEAD> </HEAD>
*<BODY> </BODY>
Formateo elemental de textos
•Encabezamiento
*<H1> </H1>............<H6></H6>
•Salto de párrafo
*<P> >/P>
•Negrita y cursiva
*<B> </B>
*<I> </I>
HR
Otras etiquetas:
•Subrayado
*<u> </u>
•Tachado
*<s> </s>
•Espaciado
*<tt> </tt>
•Superíndice
*<sup> </sup>
•Subíndice
*<sub> </sub>
•Palabra más pequeña
*<small> </small>
•Palabra más grande
*<big> </big>
•Ambos cursiva
*<i> </i> = <em> </em>
•Ambos negrita
*<b> </b> = <strong> </strong>
Párrafo y saltos de líneas
•Crea un salto de línea (donde se menciona, no se cierra)
*<br>
•Crea un salto de párrafo
*<p> </p>
•Mantiene el texto original (respeta espacios, saltos de línea, tabuladores, letra espaciada)
*<pre> </pre>
Tamaño de letra, color y estilo
•Tamaño
*<FONT SIZE=3> </FONTSIZE>
•Color de las fuentes (letras) VER CÓDIGO DE COLORES EN HTML
*<FONT COLOR="RED"> </FONT COLOR>
*<FONT COLOR="FA0356"> </FONT COLOR>
•Estilo
*<FONT FACE="ARIAL"> <FONT FACE>
BASE DE LETRA:
Define el tamaño, color y estilo en general!!!
<BASEFONT SIZE:3> </BASEFONT SIZE>
EJEMPLO:
♦<FONT SIZE=5, COLOR="FA0356", FACE="ARIAL"> </FONT>
Etiqueta para acentos y signos:
<meta charset="utf-8">
Se coloca al principio de las etiquetas y no es necesario que se cierre.
•HTML: HyperText Markup Language
*Basado en etiquetas ("marcas", "tags")
*Combina potencia y simplicidad
-Hipertexto e hipermedia
-Documentos HTML: fichero de texto (ASCII)
-HTML es un lenguaje interpretado: muy "portable"
Las etiquetas
•El formato general a seguir:
*<etiqueta>contenido</etiqueta>
•La inclusión de comentarios que no se ven:
*<|comentarios>
•Las etiquetas que nunca deben faltar:
*<HTML> </HTML> *<HEAD> </HEAD>
*<BODY> </BODY>
Formateo elemental de textos
•Encabezamiento
*<H1> </H1>............<H6></H6>
•Salto de párrafo
*<P> >/P>
•Negrita y cursiva
*<B> </B>
*<I> </I>
HR
Otras etiquetas:
•Subrayado
*<u> </u>
•Tachado
*<s> </s>
•Espaciado
*<tt> </tt>
•Superíndice
*<sup> </sup>
•Subíndice
*<sub> </sub>
•Palabra más pequeña
*<small> </small>
•Palabra más grande
*<big> </big>
•Ambos cursiva
*<i> </i> = <em> </em>
•Ambos negrita
*<b> </b> = <strong> </strong>
Párrafo y saltos de líneas
•Crea un salto de línea (donde se menciona, no se cierra)
*<br>
•Crea un salto de párrafo
*<p> </p>
•Mantiene el texto original (respeta espacios, saltos de línea, tabuladores, letra espaciada)
*<pre> </pre>
Tamaño de letra, color y estilo
•Tamaño
*<FONT SIZE=3> </FONTSIZE>
•Color de las fuentes (letras) VER CÓDIGO DE COLORES EN HTML
*<FONT COLOR="RED"> </FONT COLOR>
*<FONT COLOR="FA0356"> </FONT COLOR>
•Estilo
*<FONT FACE="ARIAL"> <FONT FACE>
BASE DE LETRA:
Define el tamaño, color y estilo en general!!!
<BASEFONT SIZE:3> </BASEFONT SIZE>
EJEMPLO:
♦<FONT SIZE=5, COLOR="FA0356", FACE="ARIAL"> </FONT>
Etiqueta para acentos y signos:
<meta charset="utf-8">
Se coloca al principio de las etiquetas y no es necesario que se cierre.
viernes, 8 de abril de 2016
Arquitectura Web
¿Qué es la
arquitectura de sitios web?
El término arquitectura web se utiliza para definir
una tarea que requiere conocimientos técnicos de construcción, funciones y de
diseño para sitios o páginas web.
Alojamiento,
publicación, dominio y promoción de una página web
Se deben tomar varias decisiones cuando comenzamos a crear
una página web: ¿Dónde alojaremos la página? ¿Qué elementos tendrán disponibles
los usuarios? ¿Qué recursos necesito?
Se recomienda comenzar por evaluar las decisiones estructurales que pueden hacer viable, o no, su proyecto. Las tres decisiones primordiales en el proceso de construcción de una página web son: dónde alojaremos el sitio, qué nombre de dominio daremos al sitio y cómo lo promocionaremos.
Se recomienda comenzar por evaluar las decisiones estructurales que pueden hacer viable, o no, su proyecto. Las tres decisiones primordiales en el proceso de construcción de una página web son: dónde alojaremos el sitio, qué nombre de dominio daremos al sitio y cómo lo promocionaremos.
¿Dónde
alojar y cómo publicar una página web?
Toda página web está alojada en un servidor. Quien administra la página tiene acceso remoto a dicho servidor, de modo que puede modificar los archivos o cargar nueva información.
Una página web alojada en un servidor nos permite tener nuestro propio dominio, es decir, la dirección web o URL (sigla en inglés de Uniform Resource Locator, o localizador uniforme de recursos) que los usuarios utilizarán para acceder a nuestra página.
Para seleccionar el servicio de alojamiento más adecuado a las necesidades de nuestro proyecto debemos tener en cuenta las siguientes dimensiones:
1. Presupuesto
Existen servicios de alojamiento gratuito que a cambio del servicio ponen publicidad en la página web que desarrollamos. También existen servicios de alojamiento pagos; su valor varía de acuerdo con los servicios que ofrecen, aunque cada vez son más accesibles.
2. Transferencia y espacio del servidor
Cada servicio de alojamiento, de acuerdo con el servidor con que cuenta, tiene características de transferencia de datos diferentes. La transferencia de datos es la información que se intercambia entre el servidor y la computadora del usuario de una página web. Esta decisión deberá tomarse teniendo en cuenta las características de nuestra página, ya que los recursos que utilicemos en ella la harán más o menos pesada. Es una decisión muy importante, en tanto la velocidad de descarga y funcionamiento hará que el usuario tenga una buena experiencia cuando visite nuestra página.
3. El modo de acceder al producto
Los servidores ofrecen diferentes propuestas para que el administrador acceda al sitio, que en general es un servicio de FTP. Debemos conocer las características del servidor para decidir si es apropiado a nuestras necesidades y conocimientos.
La sigla FTP significa en inglés File Transfer Protocol, es decir protocolo de transferencia de archivos. Esto es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red, basado en la arquitectura cliente-servidor.
4. El tipo de dominio que ofrecen
Los servicios de alojamiento gratuito ofrecen dominios que incluyen en su dirección el nombre del alojamiento. Por eso, siempre que sea económicamente viable, se recomienda obtener un dominio propio que facilitará que los usuarios recuerden la dirección web de la página y permitirá cambiar de servicio de alojamiento sin que se modifique la dirección.
¿Qué es el dominio de una página?
El dominio es la dirección web de nuestra página: es una dirección única e irrepetible y por eso existen entes que las organizan y distribuyen. La elección del nombre de dominio es una decisión fundamental en tanto:
1. Es la dirección que los usuarios deben recordar para acceder a nuestra página.
2. Es uno de los factores principales por medio del cual los motores de búsqueda encuentran nuestro sitio.
3. Da identidad a la página y de algún modo describe los contenidos que hay en ella.
Los dominios poseen una estructura y una sintaxis propia. Las partes estructurales de un dominio están separadas por un punto. Veamos estas características a través de un ejemplo:
El país es una parte opcional del dominio que identifica el país de origen del mismo. Algunas extensiones de este tipo son:
Una página web alojada en un servidor nos permite tener nuestro propio dominio, es decir, la dirección web o URL (sigla en inglés de Uniform Resource Locator, o localizador uniforme de recursos) que los usuarios utilizarán para acceder a nuestra página.
Para seleccionar el servicio de alojamiento más adecuado a las necesidades de nuestro proyecto debemos tener en cuenta las siguientes dimensiones:
1. Presupuesto
Existen servicios de alojamiento gratuito que a cambio del servicio ponen publicidad en la página web que desarrollamos. También existen servicios de alojamiento pagos; su valor varía de acuerdo con los servicios que ofrecen, aunque cada vez son más accesibles.
2. Transferencia y espacio del servidor
Cada servicio de alojamiento, de acuerdo con el servidor con que cuenta, tiene características de transferencia de datos diferentes. La transferencia de datos es la información que se intercambia entre el servidor y la computadora del usuario de una página web. Esta decisión deberá tomarse teniendo en cuenta las características de nuestra página, ya que los recursos que utilicemos en ella la harán más o menos pesada. Es una decisión muy importante, en tanto la velocidad de descarga y funcionamiento hará que el usuario tenga una buena experiencia cuando visite nuestra página.
3. El modo de acceder al producto
Los servidores ofrecen diferentes propuestas para que el administrador acceda al sitio, que en general es un servicio de FTP. Debemos conocer las características del servidor para decidir si es apropiado a nuestras necesidades y conocimientos.
La sigla FTP significa en inglés File Transfer Protocol, es decir protocolo de transferencia de archivos. Esto es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red, basado en la arquitectura cliente-servidor.
4. El tipo de dominio que ofrecen
Los servicios de alojamiento gratuito ofrecen dominios que incluyen en su dirección el nombre del alojamiento. Por eso, siempre que sea económicamente viable, se recomienda obtener un dominio propio que facilitará que los usuarios recuerden la dirección web de la página y permitirá cambiar de servicio de alojamiento sin que se modifique la dirección.
¿Qué es el dominio de una página?
El dominio es la dirección web de nuestra página: es una dirección única e irrepetible y por eso existen entes que las organizan y distribuyen. La elección del nombre de dominio es una decisión fundamental en tanto:
1. Es la dirección que los usuarios deben recordar para acceder a nuestra página.
2. Es uno de los factores principales por medio del cual los motores de búsqueda encuentran nuestro sitio.
3. Da identidad a la página y de algún modo describe los contenidos que hay en ella.
Los dominios poseen una estructura y una sintaxis propia. Las partes estructurales de un dominio están separadas por un punto. Veamos estas características a través de un ejemplo:
El prefijo www no es en realidad parte del dominio sino que es la clave que le indica al navegador que visitaremos una página web.
El nombre es el cuerpo principal del dominio, o sea la palabra que denomina nues-
tra página web.
El tipo identifica la finalidad del sitio, existen muchos pero los más comunes son:
- com: identifica páginas comerciales.
- gov: identifica páginas gubernamentales.
- org: identifica páginas de organizaciones no gubernamentales.
- edu: identifica páginas con fines educativos.
- net: identifica páginas relacionadas con internet y telecomunicaciones.
El país es una parte opcional del dominio que identifica el país de origen del mismo. Algunas extensiones de este tipo son:
- ar: Argentina
- mx: México
- br: Brasil
- ve: Venezuela
Como hemos dicho, los dominios poseen, además de una estructura, una sintaxis propia en la que se aceptan números, letras y guiones. Sin embargo, en un dominio no se aceptan tildes, espacios en blanco, puntos (aparte de los que organizan la estructura del dominio) ni ningún otro tipo de símbolos. La cantidad máxima de caracteres permitidos es diecinueve (19).
Es importante tener en cuenta que los dominios .com son pagos, mientras que los dominios .ar son gratuitos y deben renovarse cada año.Usualmente quienes ofrecen el servicio de alojamiento también se ocupan de gestionar los dominios de sus clientes, simplificando así la tarea de quien decide construir una página web.
Sin embargo, sea cual fuere la opción que elijan, siempre recuerden:
1. Comprobar que el dominio que se ha seleccionado esté disponible y libre de disputas legales.
2. Que quien figure como registrante y contacto técnico del dominio sea el propietario de la página web, ya que solo el titular puede renovar el dominio o realizar cualquier modificación.
¿Cómo promocionar una página web?
martes, 5 de abril de 2016
Diseño web
Diseño de un sitio web
Recomendaciones para el diseño según expertos:
- El espacio que se usa, incluso el espacio en blanco, comunica sentidos: la distribución de información, imágenes y espacios es una estrategia comunicacional que habla de la calidad del diseño. No hace falta mostrar todo, el usuario debe poder imaginar lo suficiente como para sentir curiosidad y explorar más.
- Se puede jugar, tanto con lo literal como con la metáfora: Para las páginas web se puede idear una impronta propia: un objeto, una fotografía, una frase: hay muchos elementos que permitirían al navegante anticipar intuitivamente el contenido de la página. Este es el gran desafío para quien diseñe su página web: alcanzar la distinción y un sello propio.
- Jerarquizar los contenidos es decidir sobre su importancia: Es fundamental destacar con letras grandes y al principio lo que es más importante. Lo secundario va después y en letra pequeña.
- La letra, por la vista entra: Lo más recomendable es utilizar fuentes fácilmente legibles, sin sombras ni curvaturas complicadas que pudieran estorbar o cansar la vista del usuario.
Plantillas
Para el trabajo de diseño web existen páginas pre-diseñadas que facilitan al usuario el trabajo de planificación, diseño y desarrollo de su página web.
Se trata de las plantillas o páginas web prefabricadas. Algunas de ellas traen incorporadas imágenes y están desarrolladas con el código HTML, lo cual permite al usuario modificarlas en función de sus intereses personales, profesionales, etc.
Elección de fuentes
La fuente es un componente del diseño sobre el que debemos estar atentos: la correspondencia entre el estilo de la fuente y el mensaje, al igual que los espacios del sitio, los colores y las imágenes, también comunica sentidos.
Imaginemos el titular principal de un boletín informativo digital. Considerando el contenido del mensaje, ¿qué estilo de letra parece el más apropiado para comunicar la noticia?
Hay que tener en cuenta que no todos los sistemas operativos que conocemos poseen o tienen instalados los mismos tipos de fuente. Esta es una de las cosas que recomendamos chequear antes de habilitar un sitio web.
Asimismo, existen algunas diferencias entre navegadores a la hora de reconocer fuen-
tes. Por ejemplo, la fuente Times no es reconocida por el navegador Explorer en un sistema Windows, pero sí es reconocida en un navegador Mozilla con el mismo sistema.
Utilización de colores
Muchas veces el éxito de un sitio depende más de la originalidad del diseñador y la calidad de los contenidos que de la puesta en escena de un crisol de tonos.
Lo cierto es que los diseñadores dependen de los programas que cada navegador o browser contienen. Los programas reciben desde el servidor según el protocolo HTTP, los contenidos de cada sitio web y le permiten al usuario acceder a ellos.
Esos programas tienen diferentes esquemas de funcionamiento, y además interactúan con el sistema operativo que posee cada ordenador o computadora, con lo cual es posible que una persona, si consulta la misma página en dos PC diferentes, las visualice de manera distinta.
¿Cómo se arman los colores en la PC?
Cada sistema operativo reconoce tres colores elementales, a partir de los cuales construye los demás. Esa construcción se da por un proceso de mezcla por unidades de pantalla o píxeles.
La capacidad de definir muchos colores a partir de estos tres, está dada por los bits de profundidad: a mayor cantidad de bits, más precisiones podrán hacerse sobre estos tres colores elementales.
Por ejemplo:
Inicialmente, todos los monitores cubrían prestaciones gráficas con 8 bits. Hoy en día, gracias a los avances tecnológicos, los ordenadores mejoraron su calidad y es cada vez más habitual encontrar profundidades de color de 16 bits en adelante (incluso de 24 y 32).
El uso de imágenes
el uso excesivo de imágenes puede entorpecer la navegabilidad. El usuario, frente a una página que tarde demasiado tiempo en cargarse o en mostrar un contenido, probablemente abandone la búsqueda y decida visitar otro sitio.
Esta dificultad puede sortearse si aprendemos a reducir el lugar que ocupan las imágenes: no nos referimos a su apariencia, sino al peso que generan como archivo. Si las imágenes son de alta definición, tardan mucho más tiempo en ser trasferidas.
Para optimizar los ficheros gráficos, es recomendable hacer lo siguiente:
- Con los archivos de extensión .gif se puede reducir el número de colores disponibles en la paleta. Es posible hacerlo con el editor gráfico, o incluso al guardar el archivo en algún sitio del disco.
- Con los archivos de extensión .jpg es posible reducir la calidad de la imagen sin que esta reduzca o pierda el sentido visual en su resolución final.
Programas a imágenes y sin semejanza
Existen varios programas de edición gráfica especializados para el tratamiento de imágenes. PhotoShop 5.5 o PhotoShop 6 permiten al usuario configurar una imagen de manera sencilla. Desde la opción de Guardar para el Web, es posible definir la calidad del jpg, los colores del gif y otras opciones, en varias muestras de la imagen a la vez.
Suscribirse a:
Entradas (Atom)