*NOTA:
Todas las palabras subrayadas, se explican en el documento.
CONCEPTOS BÁSICOS PARA EL DESARROLLO DE SITIOS WEB.
- Tejido a base de “links” > enlaces
- Programas
para maquetar> Word, Front Page, Dream weaver, nero....
- Editores de imágenes y formatos>>>
Photo shop, Image forge>> jpg y gif
- Programas de transferencia de archivos FTP>
Cut FTP
- LENGUAJES EN LA RED: Hipertexto nociones
básicas.
*******************************************************************************************
- Tejido a base de “links” > enlaces > TELA
DE ARAÑA
> PRINCIPAL/ PORTADA (index.htm)
> SECCIONES; (firmas.htm,
articulos.htm, actividades.htm, foros)
> SUB SECCIONES; (manifiesto.htm,
ochodemarzo.htm...)
Un dominio, es un nombre que
se adquiere en la red, lo que seria, como si tienes una estantería en una
biblioteca publica, seria el nombre, el color o el numero con el que esta se
diferenciaría de las demás.
Nuestro dominio o estantería
principal es :
http://www.eskalerakarakola.org
Que como lo tenemos alojado
en los servidores de sindominio, este nombre publico apunta a una librería en
dentro de su biblioteca que seria:
http://www.sindominio.net/karakola/
Con lo que la dirección de
arriba y esta segunda son lo mismo, pero con la diferencia que la 1º es
fácilmente reconocible por buscadores.... y publica en la red.
Dentro de nuestra librería ,
que a su vez pertenece a sindomnio, que a su vez funciona dentro de la gran
biblioteca internacional y publica de la WWW
Bueno para ir adelantando en
un nombre en internet de hipertexto :
http:// > le Indica al navegador que tipo de lenguaje se
utiliza, para que asi lo pueda interpretar.
www. > le indica el tipo de pagina
eskalerakarakola.org > es el nombre de dominio, donde .org indica que es una organización.
Cada barra “ / “ ó slash
, nos indica directorios, y subdirectorios dentro de los mismos hasta....
http://www.sindominio.net/karakola/ = http://www.sindominio.net/karakola/index.htm
en el nombre de arriba, al q
apunta nuestro dominio, le explica al navegador, que la pagina inicial de la
karakola, (index.htm), es un subdominio, dentro del servidor
principal que es sindominio. Lo que viene a decir que cuando desde
cualquier ordenador conectado a la red, a través de un programa de FTP,
( transferencia de archivos), conectamos con nuestro usuario y contraseña, a la
biblioteca central de sindominio, entramos virtualmente a manejar nuestras
carpetas. Por un acceso remoto.
Los subdirectorios de la
pagina de la karakola serian los siguientes, o como se llama normalmente mapa
web, que es igual que una tela de araña.
Index = |
||||||||||||
SECCIONES
Sub secciones o subdirectorios
|
Lo ideal seria que para artículos,
se creara un subdirectorio, y todas los artículos tuvieran su
ubicación web:
Artículos = http://www.sindominio.net/karakola/articulos/telefonica.htm
Pero por ahora cuando entras
a nuestra carpeta, librería en sindominio, veras una carpeta con el nombre de public html , y
todas las paginas arriba mencionadas y otras nuevas tienen que ser albergadas,
guardadas, subidas ... en ese carpeta, para que sean visibles en la red. Pues
es así como el servidor de sin dominio lo tiene organizado. Cada servidor tiene
un procedimiento distinto.
Las imágenes, también están albergadas en la misma carpeta,
aunque lo IDEAL es crear dentro de la Carpeta de Public html otra con el
nombre de Imágenes. (Pero ya lo haremos).
- Programas para maquetar> Word, Front Page,
Dream weaver, nero....
Word del MS Office 2000
Microsoft, en su versión del
Office 2000, ya incluye en el procesador de textos Word, la facilidad de
guardar los archivos con extensión .htm
o .html , cuando vas a
archivo y le das guardar como web. Sin
embargo hay que conocer un poco del esqueleto interno de los documentos escrito
en HTML, para saber o conocer porque a
veces la publicación sale con errores.
Todos los procesadores de
texto tienen una codificación interna, que en principio nos es desconocida,
gracias a esta codificación, podemos elegir, el formato de la letra, los
subrayados, la alineación, la creación de tablas... y mil opciones mas... que
como lo ves con dibujitos no les das la mayor importancia, pulsas la “N”
en negrita, cuando quieres negrita //// la “K”, cuando
quieres cursiva //// la “S”
cuando quieres subrayado.
En html, se hace lo mismo
antes de escribir algo se indica, todo lo que esperas del texto, no va por
dibujitos, sino que tienes que detallarle a través de tags, por ejemplo:
<span style='font-size:10 ;font-family :"Courier New"; color:#FF6600'>
Font size> tamaño
fuente font family > tipo de letra color el código de color.
Con las barras de dibujo del
Word, y con el Internet Explorer, para empezar a trabajar y no
saber mucho html o xml, se pueden hacer muchas cosas. Sobre todo a nivel
de dar información en la red, donde el objetivo primordial es la comunicación e
información, y no una estética espectacular.... de otro tipo de sitios....
Me centro sobre todo en el word,
porque el ms office es un programa oficialmente distribuido, que esta instalado
en prácticamente todos los ordenadores, y de ahí, que su uso, para beneficio de
Billy sea universal. En cualquier ciber café, ordenador nuevo... puedes editar
un documento guardarlo como pagina web y publicarlo, exactamente igual como lo
escribes.
Cuando quieres cambiar el código
fuente en un documento realizado con el procesador de textos, esto es lo único
complicado, como el titulo dentro de las etiquetas HTML, o ubicar directorios
de fotos....
Tendrías que hacerlo en 2
pasos:
1º guardar el
documento: nombres.htm
2º abrirlo con el bloc de
notas, que suele estar en accesorios,
para abrir el CODIGO FUENTE, o
lo que es lo mismo, el documento en formato html. Y se hacen los cambios.
2º La otra forma es abrirlo
desde el navegador- Internet Explorer > Barra de herramientas > ver > código
fuente> hacer cambios y guardar.
Front Page MS Office 2000, Dream weaver, nero....
( y posteriores versiones)
Funcionan parecido al word, solo
que tienen su propio diccionario, tutoriales de html y diseño web.... y lo
mejor de todo siempre constan de tres pestañas:
1.- Es en la que trabajas,
haces tablas, ordenas imágenes, cuadros de texto....
2.- Esta todo el código
fuente de la pagina en html, lo cual es muy cómodo por que puedes corregir y
puedes publicar y subir carpetas.
3.- En la tercera pestaña, normalmente
en todos los editores web puedes ver como quedara la pagina vista en el
navegador una vez publicada, así si hay algo que no te gusta lo cambias.
- Editores de imágenes
y formatos>>> Photo shop, Image forge>> jpg y gif
El mejor y mas extendido es
el Photo shop, pero si no tienes este programa, porque no tienes licencia, o no
te lo ha pasado nadie, o no lo sabes manejar
y quieres empezar por algo mas sencillo. Yo recomiendo usar dos
programas que una de dos te vienen con el ordenador siempre o ocupan poco espacio
en el disco duro, son muy útiles y de tienen muestras de distribución gratuita
o freeware:
Paint > viene siempre en casi todos los sistemas operativos,
puedes abrir imágenes, reducirlas, cambiarlas, y guardarlas con formato .JPG
o .GIF, para que no ocupen mas de 50-125k por imagen pues de ser así,
relentizas la navegación, y puede ser q si alguien quiere entrar en tu pagina, y tiene que esperar mucho a que se la
cargue el ordenador... pues termina pasando y se va a otra cosa...
Image Forge > www.cursorarts.com, se puede descargar,
pues lo mismo.... con mas aplicaciones que el paint, esta a medio camino entre
el paint y el photo shop. Para lo mismo de arriba.
- Programas de
transferencia de archivos FTP> Cut FTP
Los programas de transferencia de archivos, sirven para que un ordenador que esta por ejemplo en china, con un usuario y una password, pueda acceder un usuario que este en España. Por ejemplo pasar carpetas, programas, imágenes en el tiempo que tarde en cargarlos o copiarlos en el archivo de destino, desde el archivo emisor. Que mas o menos va de unos minutos, si el archivo es pequeños a horas si es un programa de 20 megas.
Como utilizar los programas de transferencia de archivos orientados a la publicación web, es similar en todos con la denominación de FTP , copio abajo las intrusiones aparecidas en la pagina:
************************************************************************************************************************
http://www.cnice.mecd.es/Aldea_Digital/materiales/curso_internet/ftp/cuteftp/configftp.htm
Configuración del CuteFTP
Una vez tengas instalado el CuteFTP en tu
ordenador, al ejecutarlo te encontrarás com una ventana como esta:
|
|
Esta es la ventana del CuteFTP, a su vez se divide en tres
ventanas:
Más adelante veremos como movernos por los directorios locales y remotos. |
Como conectarse a un servidor FTP
Como dijimos antes, para conectarse a un servidor necesitamos su dirección y
un nombre de usuario con password.
Para conectarnos pincharemos en el botón del 'rayo' que está en la barra de
botones.
|
|
==> |
|
1.- El nombre del servidor al que deseas conectarte.
2.- Tu nombre de usuario. No es necesario si el servidor permite usuarios Anonymous (anónimos).
3.- Tu password de acceso. Junto con el nombre es usada para identificarte
como usuario autorizado del servidor. No es necesario si el servidor permite
usuarios Anonymous
(anónimos).
4.- Tipo de Login (forma de identificarse ante el servidor). Lo haremos de
dos formas diferentes:
- Normal. Usando un nombre de usuario y
una password. Usado comúnmente para acceder a servidores FTP privados o a
partes privadas de servidores públicos. Por ejemplo cuando subes tu página
web a tu servidor, lo haces usando tu nombre de usuario y password.
- Anonymous. De esta manera se accede a
servidores públicos (la mayoría) que no requieren de usuarios autorizados.
Consiste en enviar como usuario: Anonymous y como
password tu e-mail. Pero esto lo hará el CuteFTP por ti, asi que cuando
accedas a un servidor público, no hace falta que rellenes los campos
nombre de usuario y password.
5.- Directorio Remoto Inicial. Es el directorio en el que se situará el
CuteFTP nada más conectarse al servidor. Debe existir, de lo contrario, el directorio
inicial será el raiz. Solo se usaría cuando se supiese con certeza el
directorio al que vamos.
6.- Directorio Local. Es el directorio en el que se situa el CuteFTP en
nuestro ordenador, y por tanto donde dejará los archivos que bajemos de
Internet, y de donde tomaremos los archivos que vayamos a subir. Al igual que
el directorio remoto, podrá cambiarse en el transcurso de la conexión, asi que
no os preocupeis si quereis usar dos directorios diferentes (una para bajar y
otro para subir) en una misma conexion.
Una vez conectado
Una vez conectado al servidor, aparecerá el Cute FTP tendrá un aspecto como
el siguiente:
En la barra superior de la
ventana, se verá el nombre del servidor FTP.
La ventana de estado, mostrará los mensajes del proceso de coñexión y
posteriores.
En las ventanas de los directorios (tanto locales como remotos) aparecerá la
localización donde nos encontramos.
Para cambiar de directorio (local o remoto) haremos doble clic sobre el
directorio al que queramos entrar. Asi iremos desplazándonos por los
directorios hasta llegar al que deseemos.
Una vez en el directorio de nuestra elección, si deseamos bajar un fichero,
pulsaremos dos veces sobre él. El cuteFTP empezará a bajarlo al directorio
local donde nos encontremos situados.
De la misma forma, si lo que queremos es subir un fichero al servidor, nos
colocaremos en los directorios correctos y haremos doble-clic sobre el fichero
que deseamos subir.
Otra forma más gráfica para subir y bajar ficheros además de la del
doble-clic es la de 'coger' el fichero (pulsando con el ratón y sin soltarlo)
de cualquiera de las dos ventanas de directorios, y llevarlo a la otra, de la
misma forma que se haría en Windows.
Una vez se empieze la transferencia, se mostrará en la parte inferior de la
ventana del CuteFTP la velocidad de la transferencia, el tiempo restante y la
cantidad recibida.
1.- Tiempo transcurrido desde el comienzo de
la transferencia.
2.- Tiempo restante (estimado) para la
finalización de la transferencia.
3.- Porcentaje, sobre el total del fichero,
ya recibido.
4.- Tamaño en bytes del fichero.
5.- Velocidad (estimada) a la que se esta
realizando la transferencia.
La gran utilidad del CuteFTP
Y por último, la gran utilidad del CuteFTP!!! La posibilidad de retomar una
conexión interrumpida.!!
Esta caracteristica hace que CuteFTP sea algo obligatorio de tener para
usuarios que se ven afectados por múltiples interrupciones en sus conexiones,
gente que no se puede conectar durante largos periodos de tiempo, y que de esta
forma pueden bajarse los ficheros 'a plazos' :-) y los aficionados a grandes
ficheros, que a falta de 50k para acabar de bajar la última versión del XXXXXX
que ocupa 10 Megas sufre de la incompetencia del hermano que descuelga el
teléfono y le 'jode' dos horas de conexión. :-D
El uso de esta caracteristica es de lo más fácil. No hay más que situarse en
el directorio local donde ya se tiene un 'cacho' del fichero. Conectarse al
servidor FTP, al empezar a bajar de nuevo el fichero el CuteFTP nos preguntará:
Overwrite(Sobreescribir), Resume(Reanudar), Rename(Renonbrar)
y Cancel(Cancelar).
Si elegimos la opción Resume(Reanudar) el
CuteFTP empezará a bajar el fichero desde el punto en donde lo dejamos.
Nota: La posibilidad de uso de esta opción depende del servidor. No todos la
soportan, pero si la mayoría.
**************************************************************************************************************************
- LENGUAJES EN
LA RED: Hipertexto nociones básicas
Todos los documentos escritos en HTML, se escriben a base de tags , que son instrucciones, que están dentro de estos signos “<” para abrir un tag y “>”, para cerrarlo.
Cuando iniciamos un documento en html escribimos:
<html> inicio del documento
< /html> fin del documento
Les copio la cabecera del código fuente de la pagina portada del site de la karakola, o index.htm
Hay muchas mas etiquetas, pero les explico las mas importantes a la hora de modificar un documento, hecho con un editor, ya sea word u otro.
|
<html> |
<html>
: Indica el inicio del hipertexto. </html>
fin |
|
|
<head> |
||
|
<head>
: Indica el inicio de la cabecera o definición del documento, lo que lo define en la red, esta parte es
importante porque es la que rastrean las arañas de los buscadores. Es
la identidad del documento, pero no pueden ir tampoco mas de 130 caracteres. </head>
fin de la cabecera. |
||
|
<title>Por Un EsPaCiO pOr Y pArA mUjErEs>>InvestigandO>>CreandO>> BailandO>>ComunicandO>>ExpresandO___________</title> |
<title> título </title> |
|
|
<o:Author>Quien lo hace </o:Author> |
||
|
<o:DocumentProperties> <o:Author>Eskalera karakola</o:Author> |
||
|
<meta
name=description content=" .... ”> definición del sitio, o algún texto
relacionado. |
||
|
<meta
name=description content= "
KARAKOLA
MANIFESTO & ULTIMAS NOTICIAS.“ Siendo
la vida en esta sociedad, en el mejor de los casos, un aburrimiento total, y
en modo
alguno relevante a las mujeres, a
las mujeres de actitud cívica, responsable
y descarada no
nos resta sino derribar el gobierno, eliminar el sistema monetario,instaurar la
automatización completa y acabar con la heterosexualidad compulsiva”> |
||
|
<META
NAME=keywords= ” rehabilitacion,lavapies, diferencias,mujeres, espacios, lesbianas, mujer,
arte, dibujos, animaciones, informacion, textos, enlaces femeninos,feministas,
cine, poesia, literatura, musica, ocio, ideas, creatividad,
alternativa, posmodernismo feminista, iconoclasta, memoria colectiva,identidad,femenina, genero,
internet, tecnologia, redes,woman , art, drawings, animations, information, texts,
feminine links , feminist , cinema, poetry , Literature, musica, leisure, ideas,
creativity, alternative, memory, collective, identity feminine”> |
<META NAME=keywords= ”.....”> por estas plabras que se
llaman META TAGS, podria aparecer la pagina de la casa en los
buscadores que pusieran algunas de ellas. Para
eso hay que dar la pagina de alta en los buscadores, rellenando un formulario. El pasado verano, las di de alta en los
mas importantes, como goegle, lycos, terra... pero no viene de mas volverlo hacer de vez en cuando. |
|
|
</head> |
Indica
el fin de la cabecera, descripción, definición del documento |
|
|
<body bgcolor=white
background="fondo.gif" lang=ES link=blue vlink=purple
> |
<body
bgcolor=white indica el
color de fondo background="fondo.gif" indica que la foto que hace de fondo
de
pagina se llama fondo.gif y q
si no lo ponemos cuando se modifica la pagina antes de subirla por ftp el
fondo aparecería vacío. |
MANUALES EN LA RED
PARA APRENDER MAS Y PROFUNDIZAR:
En el desarrollo de sitios
web y para aprender mas, lo mejor, en mi opinión es hacerlo de una forma
autodidacta, porque la mayoría de cursos, son muy caros y van muy lentos. A no ser que esten especializados en un
programa: dreamweaver.
Por eso les copio varios
sitios donde ampliar, mejorar, para dudas.... no en vano, personalmente todo lo
he aprendido de esta forma, no soy una experta, pero me defiendo.
|
Internet |
|
|
http://www.maestrosdelweb.com/ |
Manuales de Flash en castellano http://www.flash-es.net/ |
|
Tanto si
empiezas ahora como que si eres un expert@ , ellos te dan noticias
actualizadas sobre el diseño y creación de páginas web. |
Flash el
programa de Macromedia con el que puedes hacer desde paginas web visualmente
impactantes hasta cortos. |
|
http://www.tejedoresdelweb.com/
|
http://hotwired.lycos.com/webmonkey/98/25/index2a.html
|
|
Un
manual muy completo de html y java en español. |
Webmonkey,
es un portal con muchas herramientas para Internet, diseño, Windows...Manual |
|
http://www.radiointernet.fm/ |
http://personal.redestb.es/siena/index.htm
|
|
Pagina
web de esta emisora que por ahora se puede escuchar en la FM de Madrid o
directamente en Internet. |
Todos
los tags y explicaciones sencillas para empezar con el HTML |
|
PAGINA DE DOCUMENTACIÓN DE MULTIMEDIA DE LA UCM http://www.ucm.es/info/multidoc/multidoc/ |
http://www.arrakis.es/~carlosbg/algrano/_tutoriales_09.htm |
|
Servicio
de Documentación Multimedia de la Universidad Complutense de Madrid. |
Herramientas
para webmasters, HTML, DHTML, VRML, XML, JAVA, FRAMES... |
|
DESENREDADA http://www.civila.com/desenredada/index.htm |
http://www.ramon.org/
|
|
El mejor manual en castellano para entender la red de redes |
Mucha
información sobre Internet, lenguajes de programación y diseño. |
|
|
Música Midi para tu web http://www.andy21.com/midi/ |
|
|
Biblioteca
de archivos midi |