hacker


Ingresar con nombre de usuario, contraseña y duración de la sesión
| Portal Hacker | Editorial | Descargas | Ezine |
Inicio Ayuda Ingresar Registrarse
18 de Noviembre de 2008, 11:57:20
Noticias: ¿Quieres aprender a programar en C/C++?
Para ver este enlace Registrate o Inicia Sesion
> lee aquí

+  Foros pOrtal Hacker
|-+  Programacion
| |-+  Desarrollo Web (Moderadores: DarkAngel, carlmycol, shevchenko)
| | |-+  Elaborar Pagina Web en Gnu/LInux con Kompozer
0 Usuarios y 1 Visitante están viendo este tema. « anterior próximo »
Páginas: [1] Ir Abajo Imprimir
Autor Tema: Elaborar Pagina Web en Gnu/LInux con Kompozer  (Leído 441 veces)
craker13
NZ4
****
Desconectado Desconectado

Mensajes: 1,248


No seas egoista, comparte la informacion


Ver Perfil WWW
« : 08 de Julio de 2008, 09:23:33 »

Aprendiendo a crear páginas web con Kompozer en Linux .

Quieres tener página web. Y piensas "si tanta gente tiene una no debe ser difícil".
Pero cuando empiezas a investigar te pierdes. Todo el mundo te habla de "HTML" "Frontpage" "PHP" "XHTML" "Dreamweaver" "Javascript"... en definitiva, que quieres empezar y no sabes por dónde.

Vale, pues menos stress y a lo básico.

¿Qué se necesita para crear una página web?

Ahora todo el mundo gritará ¡"Dreamweaver"!¡"Frontpage"!.... nah, con el bloc de notas basta y sobra. (En serio)

Pero no voy a ser tan cruel de enseñaros el HTML (Lenguaje de programación básico en las páginas web) entero con el bloc de notas, de hecho sólo veremos lo justo de programación para que se entienda y poco mas.
Para esta serie de tutos usaremos uno de los MUCHÍSIMOS programas que hay para eso. Y encima freeware: Kompozer.
Lo bueno de este programa es que te da la oportunidad de poder ir haciendo tu página sin preocuparte demasiado por la programación... pero también te permite lo contrario, a un sólo click de distancia.

Pero poco a poco. Lo primero es entender cómo va esto de las páginas web por dentro, y para eso hay que tener nociones básicas de HTML. (Pero sin pasarse, no tengais miedo)

Abrid el bloc de notas y poned lo que hay dentro de esto (Tranquilos, no es complicado; mas tarde lo explicaré pasito a pasito, pero primero quiero que lo veais funcionar):

Código:
<HTML>
  <HEAD>
   <Title>Mi primera web</title>
  </HEAD>

  <BODY>
   A que molaaaaaa?????
  </BODY>
</HTML>

Guardad esto como prueba.htm y abridlo con vuestro navegador (Internet Explorer, Firefox...)

Ya teneis una web básica.

Ahora la explicación:
HTML es un lenguaje de etiquetas. Las etiquetas son instrucciones que van entre < >. Cuando un navegador encuentra una, la considera una orden y la aplica al texto que pongamos después.
¿Y cómo hacer que pare? Pues cerrándola. Y eso se hace escribiendo la misma instrucción con un signo / delante, así </etiqueta>

Una página web es sólo eso: un texto y unas cuantas órdenes para que el navegador lo muestre a nuestro gusto.

Ahora veamos las órdenes que dimos en nuestra mini-web.

Código:
<html></html>

La página empieza y termina con estas etiquetas. Indica al navegador que esto es HTML.

Código:
<head></head> <body></body>

Una página web se compone de dos partes: la cabecera (lo que hay entre los "head") y el cuerpo (lo de entre los "body").
Estas etiquetas indican dónde empiezan y terminan estas partes.

En la cabecera suelen ir informaciones del tipo "Título del documento", palabras clave para que el Google descubra nuestra existencia, el programa que se usó para hacer la web... aquí sólo hemos puesto un título a la página, las etiquetas

Código:
<title></title>

Si os fijais en la mini-web, lo que hay entre ellas es lo que se vé arriba del todo, en la barra del navegador.

En el cuerpo va todo lo que será el contenido de la web. Lo que escribas ahí es lo que se vé.

La programación de una web es básicamente ir escribiendo en el cuerpo (body) el texto e ir definiendo su aspecto metiendo órdenes (etiquetas) en medio.
Con que hayais pillado la idea vale, no hace falta sabérselo de memoria.
En línea



craker13
NZ4
****
Desconectado Desconectado

Mensajes: 1,248


No seas egoista, comparte la informacion


Ver Perfil WWW
« Respuesta #1 : 08 de Julio de 2008, 09:24:07 »

Instalando Kompozer


La versión que vamos a usar es la portable, de modo que se puede usar en cualquier sitio sin necesidad de instalar nada. Bajadla de aquí:


Para ver este enlace Registrate o Inicia Sesion
:descarga:


La "instalación" es simple: doble-click en el fichero, elegís el lugar donde se descomprimirá y aceptar.
Creará una carpeta. Y dentro de ella está el ejecutable. Doble-click en él y ya estás dentro. Por cuestiones de comodidad sugiero hacer un acceso directo a ese ejecutable en el escritorio.

Primeros pasos en Kompozer

Al entrar por primera vez esto es lo que vemos:



No parece muy impresionante, pero es perfecto para empezar. Lo suficientement e potente para hacer una buena web y lo suficientement e sencillo para ir cogiendo una buena base sin asustarse de "2000 botones y ventanas en todas partes". Encima, gratis sin piratear.
Para cosas profesionales suele recomendarse Dreamweaver. Sin embargo, de momento con este nos basta y nos sobra.

KompoZer es un editor WYSIWYG, que viene a significar "Tienes lo que ves". Eso te permite ir construyendo tu web sin preocuparte demasiado de la programación.

Vamos a hacer con KompoZer la misma web de antes:
Lo primero es escribir el texto del cuerpo, que va a ser el contenido de nuestra web.

En línea



craker13
NZ4
****
Desconectado Desconectado

Mensajes: 1,248


No seas egoista, comparte la informacion


Ver Perfil WWW
« Respuesta #2 : 08 de Julio de 2008, 09:24:37 »

¿Y el título? ¿Ves un botoncito que tiene dibujado un diskette y pone "guardar"? Ahí es donde se tiene que escribir el título, lo que se verá en la barra de arriba del navegador.



A continuación te pregunta dónde guarda la web.

Ya está. Has hecho lo mismo que la otra vez sin programar. Echemos un vistazo al código fuente de nuestra página:
Debajo hay cuatro pestañas para tener distintas vistas de nuestra web. Normalmente trabajaremos la vista "Normal", pero no viene mal echarle un vistazo a la pestañita marcada en rojo:




Y vemos... casi lo que teníamos con el bloc de notas, pero aparecen mas etiquetas generadas de forma automática. No te asustes, lo de mas arriba indica qué estándar sigue la programación de tu web y lo otro básicamente, y sin entrar en explicaciones técnicas no necesarias, indica que esto es un texto html y el juego de caracteres que usamos.

Ahora vamos a ir enriqueciendo la página un poquito mas. Lo de escribir está bien, pero con eso no basta. Por lo menos el texto debería ir mas adornado.

Volved a la vista "Normal", seleccionad la última palabra y dadle a la "B" que hay un poquito mas arriba. Se ha puesto en negrita. Como se puede observar, en esa zona hay herramientas típicas de cualquier procesador de textos, como "Negrita","Itálica","Subrayado", formas de centrar el texto...vamos, lo típico.

Por ahora nos conformamos con esto:




Sólo por curiosidad, vamos a ver cómo ha cambiado la programación de nuestra web con eso. (Pestaña "Código fuente" por ahí abajo)

Se puede ver claramente que antes y después de la palabra han aparecido etiquetas. No vamos a entrar en su significado (de momento), nos basta con saber que la palabra se ha puesto en negrita.

Ahora es cuando debería hablar de todos los menús, opciones y herramientas. (*gran rollazo que todo el mundo se salta porque basta con acercar el ratón a cualquier opción o desplegable y te dice de qué va*)

Vamos a darle a intro y escribir un párrafo algo mas grande. Pero sed generosos, que dure varias líneas. Vamos a usarlo para familiarizarno s con algunas de las herramientas de edición.
En línea



craker13
NZ4
****
Desconectado Desconectado

Mensajes: 1,248


No seas egoista, comparte la informacion


Ver Perfil WWW
« Respuesta #3 : 08 de Julio de 2008, 09:25:10 »

Como no me apetece escribir mas, he copiado de la Wikipedia y lo he pegado ahí:



Sí, bueno... todo ha quedado en negrita. ¿Cómo se quita? Se selecciona todo lo que no queremos en ese estilo y se le vuelve a dar a la "B". Lo dicho, como cualquier procesador de textos corriente. Supongo que no necesito explicaros cómo poner el texto en itálica, o cómo centrarlo o justificarlo.


Ahora vamos a situarnos (no hace falta seleccionarlo todo) en el título y usar uno de los estilos "predefinidos". Podéis verlo en la captura: Título 1



No hay mayor complicación para usar el resto... pero al fondo hay algo extraño "Contenedor genérico (DIV)". Ahora no os quiero liar con eso, es algo que veremos mas adelante. Pero para satisfacer vuestra curiosidad diré que tiene algo que ver con las hojas de estilo, también llamadas CSS. Un contenedor DIV es una forma de indicar una sección en la página; se usa para hacer divisiones dentro de ella.
Pero eso ya lo veremos mas adelante, el propósito de esta primera lección no es crear una web seria, sino familiarizarse un poco con el entorno.


Bueno; ya tenemos un título y un texto. Pero nos sabe a poco, así que vamos a insertar una imagen. Pulsad el botón cuadrado que pone "Imagen" y veréis algo así:


En línea



craker13
NZ4
****
Desconectado Desconectado

Mensajes: 1,248


No seas egoista, comparte la informacion


Ver Perfil WWW
« Respuesta #4 : 08 de Julio de 2008, 09:26:08 »

Al lado de la "ubicación de la imagen" hay una carpetita. Si la imagen está en vuestro equipo pulsadla para examinar el equipo en busca de la imagen (de momento estamos haciendo pruebas, no nos preocupa dónde esté)
Mas abajo, pone "Texto alternativo". Ahí se escribe una descripción de la imagen. Es importante rellenarlo; puede haber algún fallo que impida mostrarla en cierto momento, algún visitante de tu web puede tener desactivado el mostrar imágenes para navegar mas deprisa o simplemente puede ser ciego. Pulsa "Aceptar" y la imagen se insertará donde tenías puesto el cursor. Si no estaba donde querías puedes pincharla con el botón izquierdo del ratón y llevártela a donde la quieres.

Ahora que ya tenemos texto y una imagen, vamos a ver el tema de la "numeración y viñetas". Si os fijasteis en el texto que puse, había varias líneas con un "*" delante, pero queda poco "fino". Vamos a arreglarlo. Quitamos los * y lo dejamos así:



A continuación lo seleccionamos como habéis visto en la captura y se pulsan los botones marcados para ver "qué pasa".
Si se le da al que tiene numeritos, salen números. Y si se le da al otro, salen rombos. Pero no nos gustan los rombos, de modo que, pulsando el botón derecho del ratón sobre lo que tenemos seleccionado, veremos la que nos interesa al final: Propiedades de Lista. Si la pulsamos veremos ésto:



Y elegimos un circulito, por ejemplo. Hay opciones mas avanzadas, pero estamos empezando y no queremos complicarnos mas de la cuenta, todo se andará.

Ahora, vamos a insertar una línea entre el título y el texto. Pon el cursor antes de la primera letra del texto y dale aquí:



Si no te gusta el aspecto de la línea, haz doble-click sobre ella y juega un poco con sus propiedades.

Ahora vamos a colorear un poco el texto. Selecciona cualquier palabra (en este caso "versiones") y pulsa aquí. Hay dos colores, uno encima (para el texto) y otro abajo (el fondo). Dale al de arriba, elige un color y dale a "Aceptar".
Al quitarle la selección a tu texto, lo verás de ese color PERO si lo que estás pensando es "Y el de abajo lo voy a usar como un marcador de esos fluorescentes que uso para estudiar..." no funcionará así, lo que cambiará será el color de fondo de toda tu página. Para eso hay otra opción.



La opción para marcar el texto con un color de fondo sólo para él es esta, la que está justo al lado.


Ahora llega el turno de explicar estos botones:



Son "Énfasis" y "Gran Énfasis". Si seleccionas un texto y das al primero, la letra se pone en cursiva. Si le das al otro, en negrita. Parece una tontería, "se le da al correcto y esto no sirve de nada" pensaríamos normalmente. Pues no es una tontería y saberlo puede sernos muy útil en el desarrollo de una buena web.

Intentaré explicarlo de forma sencilla y sin palabras demasiado técnicas. Antes, en una web todo era como lo he explicado al principio: un texto y unas órdenes para definir su aspecto. Pero esa forma de trabajar no era muy eficiente para hacer cambios en una gran web. Imagina que quieres cambiar el color a todo lo que deseas resaltar; deberías ir por toda la página cambiando una a una las palabras. Un follón.

Ahora, la tendencia es programar separando el contenido del aspecto. En la página va el contenido, y el aspecto en la CSS.
Cuando marcas algo con "énfasis" significa que lo quieres resaltar. Y si es un "gran énfasis" mas todavía. Cuando veamos el tema de las CSS (hojas de estilo) veréis que se puede cambiar la forma de presentar el texto marcado de esta forma una sola vez y afectará a todo lo resaltado que haya en el documento. Es mas: esa misma hoja de estilo podrá usarse para otras páginas que hagas.
Hay una etiqueta relacionada con éstas muy útil que se les ha olvidado meter como opción: <acronym>.

Toca meternos en la pestaña del código fuente; buscad donde pone WYSIWYG (o cualquier palabra que os parezca) y escribid esto antes <acronym title="Lo que ves es lo que tienes"> y esto después </acronym>, como en la captura:



Ahora, id a la pestaña de "Vista preliminar". Al poner el ratón sobre esa palabra te muestra la definición. Es útil cuando se desea explicar alguna palabra.


Y con esto ya tenéis una idea básica de cómo definir el aspecto de vuestra web. Hay mas, mucho mas, pero paciencia: poco a poco lo iremos viendo en siguientes entregas.
 
bueno aqui tienen para aquellos que quieran elaborar paginas web en Gnu/Linux


Código:
http://www.terminalhacker.es/smf/index.php/topic,2198.msg10940/topicseen.html#msg10940
« Última modificación: 08 de Julio de 2008, 09:43:09 por craker13 » En línea



LokoD4rk
NZ4
****
Desconectado Desconectado

Mensajes: 1,092



Ver Perfil WWW
« Respuesta #5 : 08 de Julio de 2008, 09:31:21 »

yepa!

pero esto creo que va en desarrolo web..

por cierto...y la fuente?? (yo ya sé que no lo hiciste tu)

UPDATE. que bueno que ya pusiste la fuente Wink

Saludos!
« Última modificación: 08 de Julio de 2008, 05:15:15 por H3llsing » En línea



Para ver este enlace Registrate o Inicia Sesion
Elimina tus virus sin necesidad de programitas! =) (under construction)
carlmycol
Moderador
*****
Desconectado Desconectado

Mensajes: 1,102


¡Dame 10 Hackers y Dominare al Mundo!


Ver Perfil
« Respuesta #6 : 08 de Julio de 2008, 03:21:41 »

Si no mal recuerdo Kompozer es el que le sigue a NVU y es la mejor alternativa en GNU, aunque tambien puedes agarrar en gedit.

Como dice mi amigo H3llsing esto va para desarrollo web pero creo que aqui tambien encaja, si estubiera en desarrollo web lo pego un tiempo y/o lo pongo directo para las faqs

Felizitaciones esta quedando exelente!

Salu2
En línea

El ignorante afirma, el sabio piensa y reflexiona..




Para ver este enlace Registrate o Inicia Sesion
Faqs de Desarrollo Web
|
Para ver este enlace Registrate o Inicia Sesion
Guia de posicionamient o en la SEO
|
Para ver este enlace Registrate o Inicia Sesion
Como ser un Webmaster
|
Para ver este enlace Registrate o Inicia Sesion
Porque validar CSS y XHTML

 
Para ver este enlace Registrate o Inicia Sesion
Manual de HTML
|
Para ver este enlace Registrate o Inicia Sesion
Manual de PHP
Páginas: [1] Ir Arriba Imprimir 
« anterior próximo »
Ir a:  


Ingresar con nombre de usuario, contraseña y duración de la sesión

Powered by SMF 1.1.6 | SMF © 2006-2008, Simple Machines LLC hacker

Juegos gratis - Articulos PHP - Juegos - Trucos - Letras - Juegos - Juegos Online