Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Editores HTML en MaX: NVU y Bluefish

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 24 de enero de 2007 por EducaMadrid

2688 visualizaciones

Ponencia "Lliurex: Software libre en la Comunidad Valenciana" del 24 de Noviembre de 2004. En MaX contamos con varios editores HTML: Quanta, Bluefish y el más reciente, NVU, basado en Mozilla Componer. Con Raúl Luna y Eduardo Pla

Más información Transcripción

Descargar la transcripción

Bien, isto demuestra, entre outras cosas, a potencia do trabajo en equipo, porque eu non sei inglés, entón, 00:00:00
preferí que mi traducción, bueno, pues habrá habido que revisarla por algún sitio. 00:00:06
Bien, vamos a ver, aplicaciones, diseño, 00:00:12
y tenemos aquí el logotipo, moi brillante, moi colorido, 00:00:19
bien, mientras, bien, 00:00:23
cerrar, eh, dicho sea de paso, dentro da traducción, por exemplo, 00:00:29
los trucos estos, los consejos del inicio non están traducidos, eh, 00:00:33
acercamos, vale. 00:00:38
Bien, si alguén ha trabajado alguna vez con el entorno de Mozilla Composer, 00:00:41
pues aquí lo tenemos, 00:00:47
voy a cerrarle esta ventana al editor de sitios, 00:00:49
normal, etiqueta, HTML, código fuente, vista preliminar, 00:00:53
y si yo hablo con Poser, 00:00:56
lo podía ver abierto directamente, pero non. 00:01:01
Bueno, como veis, ya, el entorno, las mismas pestañas, 00:01:12
son muy similares y lo único que nos ha cambiado es la piel, 00:01:16
bueno, la piel y que hay alguna funcionalidad un poco más. 00:01:19
Bien, eh, forma de construir una página, 00:01:24
en principio tú empiezas en vista normal, 00:01:30
y primera cuestión, o sea, como pequeño truquillo, 00:01:33
esto, si tú empiezas a escribir, 00:01:35
como el texto que yo he insertado no entra como párrafo, 00:01:42
estamos acostumbrados a que la pulsación de la tecla intro suponga un salto de párrafo, 00:01:47
que nos viene no sólo por lo que suponga en cuanto al texto, 00:01:52
sino luego a la hora de decir etiquetas. 00:01:55
Yo pulso intro y lo que hace es un salto de renglón, 00:01:58
cosa que podría ver BR, un salto de renglón. 00:02:01
¿Por qué? Sencillamente porque yo no he empezado insertando un párrafo. 00:02:07
Entonces, a partir de ahora, cuando yo inserte, 00:02:13
creo que ahora si he insertado un párrafo, yo decía esto, 00:02:17
cuando inserte un intro, insertará un salto de párrafo, ¿vale? 00:02:20
Bien, comentábamos, 00:02:26
texto, doble clic, nos permite, 00:02:30
con un doble clic, ir especificando atributos, 00:02:35
hay que controlar efectivamente algo de HTML, 00:02:38
o bien podría ir utilizando los iconos, 00:02:45
por ejemplo, en este caso la alineación, 00:02:49
sería la edición básica. 00:02:51
Pero, y vamos a centrarnos, como hay muy poquito tiempo, 00:02:56
en las cuestiones así interesantes que he comentado antes. 00:02:59
Creación de formularios. 00:03:06
Definimos un formulario, 00:03:09
le damos un nombre, pues, prueba, 00:03:12
y lo que voy a hacer con este formulario es que, 00:03:17
voy a hacerlo, como no tengo ninguna otra cosa, 00:03:20
mailto a arroba b punto c, 00:03:22
método post. 00:03:28
Me crea un cuadrito para formulario y a partir de aquí 00:03:31
puedo ir metiendo un área de texto. 00:03:34
Antes de poner área de texto y tener ese área de texto que va a ir. 00:03:39
Dice, pues, dime tu nombre. 00:03:41
Estoy haciendo un diseño, 00:03:48
nombre del campo, le da más nombre, 00:03:51
para cuando llegue, 00:03:54
podría darle más propiedades, 00:03:56
nombre, filas, una fila, 00:04:00
una columna, aceptar. 00:04:04
Ya tengo aquí esto. 00:04:07
Como no le he dado extensión ni nada, directamente, 00:04:08
la vista preliminar quedaría aquí. 00:04:12
Lo que os decía, si yo ahora quisiera ver esta vista preliminar, 00:04:14
como este es un formulario no me permite meter datos aquí, 00:04:17
sigo estando en el editor, tendría que pulsar el botoncito este navegar. 00:04:20
Al pulsar navegar, me pregunta lo mismo que me preguntaba Composer, 00:04:24
si quiero guardar los cambios. 00:04:28
Digo, sí, pues ésta, prueba número 1. 00:04:32
Prueba 1. 00:04:35
Aceptar, lo guardo. 00:04:36
¿Dónde lo voy a guardar? 00:04:38
Prueba 1 HTML, lo guardo. 00:04:39
Y ahora, teóricamente, debería lanzarme el navegador para verlo. 00:04:40
Pero no es capaz de conectar con Mozilla. 00:04:44
Con lo cual, si yo quisiera ver la página, 00:04:46
tendría que irme aquí a archivo, 00:04:48
abrir un archivo que es éste, prueba 1. 00:04:50
Como no le he puesto tamaño al campo de texto, 00:04:56
luego ya es ir refinando, 00:05:01
o sea, no vamos a hacer aquí un pulsar HTML, 00:05:03
sino de haber posibilidades, sencillamente, que tiene la posibilidad de incluir. 00:05:05
Como no le he puesto tamaño, me ha puesto un tamaño mínimo 00:05:08
y va corriendo el texto, ¿vale? 00:05:10
Bien. 00:05:12
Exactamente igual que he metido. 00:05:13
Me doy la vista normal. 00:05:16
Creo que lo tenía, sí, lo tenía señalado y por eso al pulsar entro, 00:05:20
a ver, 00:05:23
esto es, se me ha ido. 00:05:25
Me permite meter lista de selección, 00:05:27
añadir opciones. 00:05:31
Una cosa curiosa que yo no había visto, 00:05:33
perdón, 00:05:36
nombre de la lista, pues, lista 1. 00:05:39
Lista de preferencias. 00:05:42
Lista de preferencias. 00:05:45
Añadir una opción. 00:05:46
Texto de la opción. 00:05:50
Texto de la opción. 00:05:51
Pues voy a hacer referencias de, 00:05:52
siendo la hora que es, lo que me apetece zamparme a mí, 00:05:54
un pincho de tortilla. 00:05:57
Para que luego la gente nos entretenga. 00:06:05
Bien. 00:06:09
Y una cosa curiosa que yo no había visto en otros editores, 00:06:10
es la posibilidad de que en estas listas se creen, a su vez, grupos. 00:06:13
No lo había visto visualmente, 00:06:17
yo puedo añadir un grupo, 00:06:19
un grupo para postres. 00:06:22
aquí, 00:06:29
añado una opción que fijaros que va a colgar de aquí. 00:06:30
Pues postres o que sea. 00:06:33
Un café solo. 00:06:35
De marca al seleccionar inicialmente. 00:06:39
Y sin acento ni nada. 00:06:44
Venga, aceptar. 00:06:46
Vamos a ver esto. 00:06:48
Lo voy a guardar. 00:06:50
Fijaros, el tema de los grupos. 00:06:56
Me permite establecer grupos dentro de las listas. 00:06:58
Cosa que yo no había visto en otros editores hasta ahora. 00:07:00
Me parece que puede ser interesante, a lo mejor, para parcializar dentro de una lista. 00:07:02
Una opción, yo no la conozco. 00:07:06
Bueno, así con el tema de formularios. 00:07:09
Vamos al tema de estilos. 00:07:12
En herramientas tenemos un editor CSS. 00:07:15
Editor, voy a crear, 00:07:20
podría vincular una hoja, 00:07:22
o voy a crear un estilo online en esta página. 00:07:23
Si yo no le especifico para que medios voy a aplicar esa página, 00:07:27
o sea, que sea para pantalla, que sea para impresora. 00:07:30
Sabéis que, por ejemplo, gracias a las hojas de estilo, 00:07:34
yo puedo hacer una página muy elegante con texto blanco sobre fondo azul 00:07:35
y ponerle en la hoja de estilo que para el medio print 00:07:40
el texto sea negro sobre fondo blanco. 00:07:42
Porque si no, imprimir los textos blancos en los folios es difícil. 00:07:44
O sea, cuesta bastante leerlo ni echándoles el mecherito de abajo. 00:07:48
Entonces, creo una hoja de estilo, ya está creada, 00:07:51
no le especifico nada, con lo cual, automáticamente, 00:07:54
dice que para todos los medios. 00:07:56
Y a partir de aquí es ir metiendo reglas de estilo. 00:07:58
Voy a meter una regla para... 00:08:01
con un nombre, vamos a ver. 00:08:06
Voy a decir, pues, texto rojo. 00:08:07
Texto rojo. 00:08:10
La creo, no tiene, es ese lector texto rojo, 00:08:13
no tiene hasta ahora ninguna propiedad. 00:08:17
Vamos a aplicarle propiedades. 00:08:19
Bueno, pues, familia de texto. 00:08:20
Le voy a poner Curier. 00:08:23
Curier, tamaño de letra, de paso recomendación. 00:08:25
Bueno, pues vamos a utilizarlo con tamaños relativos siempre. 00:08:29
En vez de utilizar tamaños absolutos en píxeles o en puntos, 00:08:33
vamos a utilizar tamaños relativos de forma que permita 00:08:38
lo que vimos antes, o sea, que la gente pueda modificar el tamaño de la letra. 00:08:41
Porque si yo le digo aquí que el tamaño fuera en píxeles, 00:08:45
12 píxeles, y que fuera de color rojo. 00:08:49
Aceptar. 00:08:55
Cerramos. 00:08:59
Y le digo que este párrafo de aquí, 00:09:00
¿veis que aquí abajo se ve? 00:09:02
Aquí abajo van saliendo las etiquetas, 00:09:04
en la barra de estado, 00:09:06
tenemos la etiqueta, lo marco y con el botón derecho, 00:09:08
le puedo adjudicar la clase. 00:09:10
Como la tengo creada, clase texto rojo. 00:09:12
Así. Cerrar. 00:09:18
Clase texto rojo. 00:09:21
Y ya me ha metido la clase. 00:09:23
Vamos a ver esto como quedaría. 00:09:26
Vamos a ver. Lo guardo. 00:09:29
Vamos a actualizar. 00:09:33
Bien, lo que os comentaba antes. 00:09:35
Anda, que simpático. 00:09:38
Pues me va a permitir. 00:09:40
Y no sé por qué. 00:09:41
No, no debería hacerlo, ¿eh? 00:09:42
Esto está muy mal. 00:09:43
¿De qué corre ese? 00:09:44
No debería porque le he dado el tamaño absoluto 00:09:45
y no debería permitirme el que, 00:09:47
el aumentar el tamaño de la letra. 00:09:49
Esa se debería haber quedado igual. 00:09:51
La otra se ha aumentado en condiciones. 00:09:54
Pero esta otra, no sé por qué. 00:09:57
Pues mira. 00:09:59
A pesar de eso, no me les digo de lo dicho. 00:10:01
Utilicemos siempre tamaños relativos 00:10:03
que también nos facilitarán el trabajo. 00:10:05
Bien, hemos creado ese estilo. 00:10:07
¿Tiene que ser más predefinido? 00:10:10
No. 00:10:12
No tiene que ser más predefinido. 00:10:13
¿Eh? 00:10:15
Yo vengo a contar el View. 00:10:17
Ya te he dicho que del Bluefish, 00:10:19
que va a contar Eduardo un poquito. 00:10:20
Yo no lo controlo. 00:10:21
A ver que le cuente él a ver si tiene alguno. 00:10:22
Entonces, este no lo tiene. 00:10:24
Eh... 00:10:26
El tema de hoja de estilo, ya sabéis que la 00:10:30
ventaja que tiene, 00:10:32
es que luego cualquiera este del texto rojo 00:10:34
no me ha gustado como queda 00:10:36
y quiero que en verde con Curier 00:10:38
aparezca con letra arial 00:10:40
y en verde tamaño, pues aparezca 00:10:42
el tamaño en EMS. 00:10:44
12 EMS es muy grande. 00:10:46
Demasiado grande. 00:10:48
Pues 1.5 EMS. 00:10:50
Para que sea grandecito. 00:10:52
Vale. 00:10:54
Cerrar. 00:10:55
Y ya tenemos el tamaño. 00:10:56
La ventaja de las hojas de estilo, evidentemente, 00:10:58
cuando yo tenga un sitio completo, podré. 00:11:00
Hasta ahora hemos hecho 00:11:02
con el editor de hojas de estilo 00:11:04
una hoja de estilo interna 00:11:06
que está 00:11:08
en la cabecera 00:11:10
del documento. 00:11:14
Con lo cual así, hombre, me apaño para un documento solo. 00:11:16
Dime. 00:11:18
Eh? 00:11:22
Está en la cabecera 00:11:24
de este documento. Si quisiera cambiar, 00:11:26
o sea, si lo hiciera con este método, tendría que ir documento 00:11:28
a documento cambiándolo todo. 00:11:30
Lógicamente, lo normal 00:11:32
sería que yo tuviera una hoja de estilo 00:11:34
que hubiera creado fuera CSS. 00:11:36
Vamos a ver. Voy a copiar 00:11:38
para no andar con... 00:11:40
Voy a copiar esto. 00:11:42
Esto rojo. 00:11:44
Esto C. 00:11:46
Mira, esto es una prueba que voy a hacer aquí en directo 00:11:52
porque no la he hecho nunca. Vamos a ver. 00:11:54
Control V. Archivo. 00:11:56
Guardar como. 00:11:58
Cancelar. 00:12:00
No. Guardar como. 00:12:02
Me pide título. Aceptar. 00:12:04
Todos los archivos. 00:12:08
Hoja.css 00:12:12
Esto no lo he hecho nunca. Si me lo hace, pues mira, 00:12:14
estupendo. Lo puedo usar también ya directamente como editor 00:12:16
de CSS. 00:12:18
Guardar. Y vamos a ver. 00:12:20
A ver, prueba 1. 00:12:22
Herramientas. 00:12:24
Editor de CSS. 00:12:26
Vincular hoja. 00:12:28
Elegir archivo. 00:12:30
Hoja.css 00:12:36
Posiblemente me ha hecho una guarrería, 00:12:38
porque haya metido códigos... 00:12:40
Aunque yo no se lo haya dicho, me haya metido los códigos 00:12:42
de inicio de página a una hoja CSS, lo único que mete son 00:12:44
la definición de los selectores. 00:12:46
Voy a probarlo por... 00:12:48
No tenía otra. 00:12:50
Pues esta. Vale. 00:12:52
Cerrar. 00:12:54
Y vamos a ver. 00:12:56
Si me la ve, 00:12:58
pues no me la importaba aquí. 00:13:00
No se lo deba haber creído. 00:13:02
Pero vamos, podría haber importado una hoja de estilo 00:13:04
de forma que luego, con editar, 00:13:06
con cualquier editor... 00:13:08
Venga, accesorios... 00:13:12
Especialmente ha metido todo 00:13:24
el código para crear una página web. 00:13:26
Esto ya sí que... 00:13:38
Voy a guardar. 00:13:40
Para que se la me dejara 00:13:42
importarla. 00:13:44
Vincular la hoja. 00:13:52
Venga. 00:13:54
Hoja CSS. 00:14:00
Bien. Ahora sí. 00:14:06
Ya tiene aquí un enlace relativo. 00:14:08
Voy a quitarle, de hecho, la hoja externa. 00:14:10
La voy a borrar. 00:14:12
A pesar de haberle borrado 00:14:14
la hoja externa, como ahora sí que tiene 00:14:16
vinculado... A ver dónde está. 00:14:18
link, rel, splice, href... 00:14:20
A la hoja de estilos 00:14:22
sigue manteniéndome 00:14:24
este texto en color rojo, 00:14:26
a pesar de que yo lo he quitado ya de la propia hoja. 00:14:28
Me bastaría, en cualquier momento, 00:14:30
en vez de color rojo, lo voy a poner 00:14:32
color verde. 00:14:34
Con cambiar esta hoja de estilos, 00:14:38
para que automáticamente esto se supone... 00:14:40
Voy a guardarlo. 00:14:42
A ver si me lo actualiza aquí. 00:14:44
No me deja mal. 00:14:46
Está con su color verde. 00:14:48
Y en vez de esta, con las 32 páginas 00:14:50
que hubiera, que serán ligadas a esa hoja de estilos. 00:14:52
Bien. En el tema de hojas de estilos, 00:14:54
os había comentado que 00:14:56
tiene la posibilidad de crear capas. 00:14:58
Pero las capas las crea de una forma 00:15:00
un tanto... 00:15:02
A ver... 00:15:04
Véis que las pega 00:15:10
a la zona izquierda, o sea, las crea como absoluta. 00:15:12
Entonces, a veces, 00:15:14
es un poco lioso, 00:15:16
porque tienes que ir pinchando por las zonas para ver las capas. 00:15:18
Me pongo aquí arriba otra vez. 00:15:20
Le creo una nueva capa. 00:15:22
Me la crea, como no tiene contenido. 00:15:24
A ver, si consigo yo ahora 00:15:26
ampliar esta. 00:15:28
Si veis el código fuente, 00:15:30
las va creando luego. 00:15:32
Did, posición absoluta, 00:15:34
8, 8, arriba prácticamente 00:15:36
pegada a la esquinita, y la otra ya no. 00:15:38
La otra que ya la he movido. 00:15:40
Y si tiene contenido. 00:15:42
Con lo cual, y ahí empieza el tema de los truquillos. 00:15:44
Si quiero crear una capa, 00:15:46
me va a resultar más cómodo escribir un texto 00:15:48
y luego 00:15:50
intentar convertir ese texto en una capa 00:15:52
para que tenga una dimensión 00:15:54
que ya me permita colocarla 00:15:56
y luego distribuir cosas en la página 00:15:58
y aquí le podría decir que esta página 00:16:00
me creó un estilo 00:16:02
que veo que vienes 00:16:04
empujando. 00:16:06
Entonces, el tema de capas, como os digo, 00:16:10
bueno, pues es todavía 00:16:12
un pelín primitivo en cuanto al manejo, 00:16:14
no en cuanto a la creación, la crea y punto, ya no hay más. 00:16:16
Si es interesante 00:16:18
lo que os he comentado de que 00:16:20
pinchando en las etiquetas 00:16:22
con el botón derecho 00:16:24
nos permite 00:16:26
crearle estilos. 00:16:28
Y me lanzaría además incluso online 00:16:34
quien haya trabajado un poquito con hojas de estilo 00:16:40
pues ve que tienes toda la opción 00:16:42
de mostrarlo o no mostrarlo, flotarlo, 00:16:44
dónde posicionar esa capa, etc. 00:16:46
Entonces, bueno, pues 00:16:48
visibilidades, ahí es un editor 00:16:50
bastante completo, lógicamente 00:16:52
tampoco es un curso de hojas de estilo. 00:16:54
Entonces, como resumen por lo demás 00:16:58
el resto de 00:17:00
elementos más o menos básicos 00:17:02
de cualquier otro editor, 00:17:04
la creación de marcas 00:17:06
o de enlaces, 00:17:08
cualquiera de las palabras 00:17:10
a otro punto 00:17:12
y como os he comentado 00:17:14
vamos a ver si vemos el administrador 00:17:16
el editor de sitios este 00:17:22
que tenemos aquí a la derecha 00:17:24
tiene buena pinta 00:17:26
pero ya he dicho que a mi no me gusta nada 00:17:28
editar sitios 00:17:30
para crear un nuevo sitio, le llamas 00:17:32
como quieras 00:17:34
a llamarle pruebas 00:17:36
coja todo el directorio home como directorio 00:17:38
de pruebas, cuando le digo aceptar 00:17:40
me dice que es verde la sega 00:17:42
que ometo 00:17:44
una ubicación para publicar 00:17:46
en FTP, y a lo mejor yo no la tengo 00:17:48
imaginaos que estamos haciendo un trabajo 00:17:50
con chavales en el aula 00:17:52
y nos hemos planteado que van a hacer una página 00:17:54
pero no hemos puesto como primer paso 00:17:56
que den de alta una cuenta, por ejemplo, en Geocities 00:17:58
un espacio en Geocities para publicarse sus páginas 00:18:00
pues si no lo tienen, no pueden crear el sitio 00:18:02
entonces lo que os digo que esto 00:18:04
habrá que irlo mejorando con el tiempo 00:18:06
esto, lo de las capas, los formularios 00:18:12
y la hoja de estilos 00:18:14
y por lo demás 00:18:16
cuando intentas meter imágenes 00:18:18
en este ordenador no tenía imagen 00:18:30
bueno, me avisa que debería 00:18:36
esto es importante 00:18:38
por defecto viene configurado 00:18:40
con las opciones de accesibilidad marcadas 00:18:42
para que 00:18:44
se le indiquen 00:18:46
las etiquetas alternativas 00:18:48
no me gusta nada 00:18:50
personalmente esto 00:18:52
lo que llaman consejo 00:18:54
corresponde a la etiqueta título 00:18:56
sabéis que 00:18:58
nos hemos acostumbrado por mal uso 00:19:06
y los editores profesionales 00:19:18
incluso lo hacen así 00:19:20
a que la etiqueta alt 00:19:22
esta de texto alternativo es la que se utiliza 00:19:24
para que cuando pasas por encima de una imagen 00:19:26
en una página te muestre el rotulito 00:19:28
pues no, esa etiqueta alt 00:19:30
es para que los navegadores no visuales 00:19:32
el formen del contenido de esa imagen 00:19:34
de hecho, si yo 00:19:36
digo esto 00:19:38
he metido aquí la imagen esta 00:19:40
con su título alternativo 00:19:42
aquí le digo guardar 00:19:44
y vamos a 00:19:46
hacer la página 00:19:48
Mozilla 00:19:50
me muestra, esto es el título 00:19:52
no ha puesto 00:19:54
esto es el texto alternativo 00:19:56
porque realmente 00:19:58
la etiqueta que se utiliza en HTML 00:20:00
para indicar 00:20:02
esto es la que se llama 00:20:04
título y si lo vemos 00:20:06
en el 00:20:08
en el código HTML 00:20:14
donde esta la imagen 00:20:16
la etiqueta alt es 00:20:18
este es el texto alternativo 00:20:20
y la etiqueta título es 00:20:22
esto es el título, nos hemos acostumbrado 00:20:24
a que explorer interpreta la tecla alt 00:20:26
con la función de título 00:20:28
y no es que este mal, pero no es correcto 00:20:30
cada cosa es para 00:20:32
si no, es que esa 00:20:34
traducción es la misma traducción que tiene 00:20:36
que tenemos yo, no, si se podría cambiar 00:20:38
lo que pasa es que luego ahí también hay como 00:20:40
estándares, no sé a quien se le ha ocurrido 00:20:42
traducirlo de consejo 00:20:44
no lo sé, es que luego 00:20:46
ahí entras un poco en matices, aquí 00:20:48
hicimos una traducción 00:20:50
si veis por ejemplo en el Composer 00:20:52
vamos a ver 00:20:54
insertar, romper las imágenes inferiores 00:20:56
supongo que esto será 00:20:58
un break image below o algo así 00:21:00
lo que han traducido de forma literal 00:21:02
el break image below lo que hace 00:21:04
es, nosotros lo hemos traducido 00:21:06
con mucho riesgo 00:21:08
insertar un salto bajo imágenes 00:21:10
flotantes, que realmente podríamos haber puesto lo que pone 00:21:12
Bufish, salto y limpieza 00:21:14
porque lo que inserta es un 00:21:16
br clear all 00:21:18
de forma que cuando tú pones una imagen 00:21:20
y empiezas a escribir 00:21:22
o sea, si yo empiezo a escribir 00:21:24
aquí a continuación de esta imagen 00:21:26
si me deja 00:21:30
si yo quisiera 00:21:36
ahora tendría que ponerme 00:21:38
a flotar la imagen, o sea, si yo quisiera 00:21:40
si hay un parrafo, vamos a ver 00:21:42
propiedades de la imagen 00:21:44
vamos a ver 00:21:56
si yo le doy al intro 00:22:04
automáticamente 00:22:06
perdón, si yo tuviera aquí texto 00:22:08
ahora no me saldrá 00:22:12
obviamente me tendría que meter con estilo 00:22:14
perdón 00:22:16
vamos a hacer las cosas bien, página nueva 00:22:18
insertamos la imagen 00:22:20
vamos a sacar ésta 00:22:22
aceptar 00:22:28
sin texto alternativo de momento 00:22:30
aceptar 00:22:32
propia 00:22:34
estilo 00:22:36
sigo 00:22:52
y sigo 00:22:54
pero aquí se me acaba el rollo 00:22:56
ya a ésta imagen 00:22:58
no le corresponde más texto 00:23:00
que hago? 00:23:02
intro, intro, intro, intro, intro 00:23:04
hasta que salta aquí abajo 00:23:06
sólo me queda esa opción 00:23:08
entonces 00:23:10
como esa opción va a tener el problema 00:23:12
ésta imagen es muy pequeñita 00:23:14
pero una imagen que fuera más grande 00:23:16
dependiendo de los tamaños de pantalla 00:23:18
de repente me puedo encontrar 00:23:20
con que éstos poquitos renglones 00:23:22
superan la imagen 00:23:24
y ten un montón de intros colgados debajo 00:23:26
un montón de espacios vacíos 00:23:28
pues el insertar 00:23:30
perdón, voy a borrar todo lo que había debajo 00:23:32
voy a borrar aquí desde el código 00:23:34
todos los BRs éstos que hay aquí 00:23:36
suprimir 00:23:42
vale 00:23:44
entonces de aquí le digo 00:23:46
salto 00:23:48
y automáticamente lo que me ha metido en el código es un salto 00:23:50
BR clear all 00:23:52
de forma que limpia para que no flote nada 00:23:54
a ninguno de los dos lados 00:23:56
y ya sé que me pongo debajo de la imagen 00:23:58
se podría haber puesto salto y limpieza 00:24:00
pero lo aplicas con las imágenes 00:24:02
podría haber sido con cualquier otro elemento 00:24:04
entonces ya puedes tener en vez de una imagen 00:24:06
una capa flotante en un sitio 00:24:08
entonces le metes ésto 00:24:10
y salta 00:24:12
que es más complejo todavía 00:24:18
Lucís, hombre, Dios, no le hagas de menos 00:24:20
os digo que se va a poner el pájaro rojo 00:24:22
digo usted rojo, usted verde, azul 00:24:24
bueno, vamos a ver 00:24:26
a ver cómo 00:24:28
cómo le hago 00:24:32
claro 00:24:34
bueno 00:24:36
muy brevemente 00:24:38
bueno 00:24:48
hablando de 00:24:52
editores en html 00:24:54
siempre 00:24:56
ha habido un grupo 00:24:58
de editores que 00:25:00
se han caracterizado 00:25:02
por funcionar 00:25:04
más bien en 00:25:06
modo texto, podríamos decir 00:25:08
el html 00:25:10
tiene gran parte de su fuerza 00:25:12
en el hecho de que puede 00:25:14
escribirse con cualquier tipo de editor 00:25:16
de textos 00:25:18
sencillo 00:25:20
se ha dicho muchas veces también que 00:25:22
imax y vi 00:25:24
son los grandes editores de texto 00:25:26
para 00:25:28
linux 00:25:30
y bueno pues yo desde luego aprendí 00:25:32
a hacer páginas web con el 00:25:34
terrorífico y nefasto 00:25:36
blog de notas del windows 00:25:38
que daba un montón 00:25:40
de problemas 00:25:42
yo quería enseñaros este 00:25:44
este programa que se llama 00:25:48
bluefish y que 00:25:50
creo recordar que está hecho por unos holandeses 00:25:52
y que está 00:25:54
absolutamente traducido y que a mi me gusta mucho 00:25:56
me parece que 00:25:58
tiene una gran potencia siempre que 00:26:00
tengamos en cuenta que nos movemos siempre 00:26:02
en el modo de texto 00:26:04
aquí tenemos el árbol completo 00:26:06
de eso que yo lo suelo cerrar 00:26:08
porque da un tipo de problemas 00:26:10
simplemente la barra esta que veis aquí 00:26:12
veis que nos da muchísimas posibilidades 00:26:14
para trabajar en distintos 00:26:16
tipos de documentos 00:26:18
para editar los ficheros 00:26:20
apache, para DHTML 00:26:22
para C, para PHP 00:26:24
y todo eso 00:26:26
lo que hará será 00:26:28
comportarse de maneras distintas 00:26:30
fundamentalmente a la hora de colorear 00:26:32
la sintaxis 00:26:34
pero bueno 00:26:36
quiero entrar en lo que es 00:26:38
lo que es bluefish 00:26:40
el inicio en bluefish es siempre 00:26:42
teniendo en cuenta que hablamos de un 00:26:44
editor de texto 00:26:46
que podemos, no es un editor que vamos viendo 00:26:48
las cosas tal y como van quedando 00:26:50
sino que tenemos que recurrir 00:26:52
a programas externos 00:26:54
como pueden ser el Mozilla 00:26:56
el Galeor, el Opera, cualquier tipo de navegador 00:26:58
cuando 00:27:00
cuando 00:27:02
no tengo aun nada 00:27:06
lo primero que solemos hacer 00:27:08
cuando trabajamos con el bluefish 00:27:10
es utilizar la barra 00:27:12
la barra que se llama standard 00:27:14
el menú de inicio rápido 00:27:16
cuando pulsamos sobre el, nos da 00:27:18
todas las posibilidades que se supone 00:27:20
que tenemos que poner en las cabeceras 00:27:22
y ponerlas en modo de texto 00:27:24
y tambien podemos aplicarles 00:27:26
estilos determinados 00:27:28
siempre que conozcamos las 00:27:30
normas de las hojas de estilo 00:27:32
en cascada 00:27:34
podemos seleccionar 00:27:36
los distintos apartados que queremos 00:27:38
que contenga 00:27:40
nuestra cabecera 00:27:42
y una vez 00:27:44
lo tenemos 00:27:46
iniciamos y lo que nos hace 00:27:52
es diseñarnos lo que es 00:27:54
el esquema 00:27:56
de la pagina 00:27:58
a partir de aquí 00:28:00
nosotros podemos 00:28:04
llenar los apartados 00:28:06
por ejemplo 00:28:08
aqui ponemos quienes son los autores 00:28:10
y el titulo 00:28:12
de la pagina 00:28:14
creo que lo podiamos haber hecho 00:28:18
directamente 00:28:20
las características que queramos 00:28:22
el cuerpo 00:28:28
o de lo que se 00:28:32
a partir de aquí 00:28:38
ya podríamos ver la pagina 00:28:40
una vez ya la hemos guardado 00:28:52
como html 00:28:54
lo primero que ha hecho ha sido 00:28:56
colorearnos la sintaxis 00:28:58
y ponernos un tipo de 00:29:00
letras 00:29:02
y de color para las distintas 00:29:04
etiquetas 00:29:06
si nosotros dentro 00:29:08
insertamos un 00:29:10
código determinado 00:29:14
por ejemplo el php 00:29:16
cuando ponemos esto en los comentarios 00:29:24
nos marca 00:29:26
en un gris muy oscuro 00:29:28
bastante clarito 00:29:30
que no se ve nada 00:29:32
para marcarnos 00:29:34
lo que estamos haciendo 00:29:36
uno de los problemas que tiene 00:29:38
para mi gusto 00:29:40
es que tiene la costumbre 00:29:42
de poner las etiquetas en minúscula 00:29:44
que es una práctica que yo no suelo seguir 00:29:46
porque me gusta mas 00:29:48
lo que hay dentro de las etiquetas 00:29:50
vengan mayúsculas 00:29:52
y el texto que va a continuación 00:29:54
ponerlo en minúsculas 00:29:56
entonces si observáis 00:30:06
por ejemplo cuando añadimos 00:30:08
una etiqueta tipo br 00:30:10
así no pasa nada 00:30:12
en cambio si la ponemos 00:30:14
con mayúsculas 00:30:16
la cierra 00:30:18
porque entiende que es otro tipo de etiqueta 00:30:20
es una etiqueta que no reconoce 00:30:22
y por lo tanto precisa cierre 00:30:24
no se si estoy 00:30:26
si la ponemos en minúsculas 00:30:28
entiende que es un salto de linea 00:30:30
y que por lo tanto 00:30:32
es una etiqueta que no precisa cierre 00:30:34
y en cambio si la ponemos con mayúsculas 00:30:36
no sabe que etiqueta es 00:30:38
y por lo tanto 00:30:40
entiende que es una etiqueta de estilo 00:30:42
y la cierra 00:30:44
automáticamente 00:30:46
como tenemos muy poco tiempo 00:30:48
voy a recorrer 00:30:50
muy poco 00:30:52
las distintas partes 00:30:54
en esta parte que se llama 00:30:56
la barra estándar 00:30:58
podemos poner 00:31:00
el body, el cuerpo 00:31:02
si no lo tuvieramos ya puesto 00:31:04
y podemos ponerle las distintas opciones 00:31:06
que queramos 00:31:08
una imagen de fondo, un color 00:31:10
y nos las cojería con todas 00:31:12
para el texto en negrita 00:31:14
el texto en cursiva 00:31:16
una barra con un salto de linea 00:31:18
lo que ha comentado Raúl 00:31:20
un salto de linea 00:31:22
con Clearol 00:31:24
con una limpieza 00:31:26
un espacio sin ruptura 00:31:28
todas estas etiquetas 00:31:30
que no voy a describirlas porque todos sabéis leer 00:31:32
igual que yo 00:31:34
simplemente con el ratón por delante 00:31:36
tiene una ventaja y es que pulsando 00:31:38
por el botón derecho sobre ellas 00:31:40
por ejemplo sobre el ancla que nos inserta 00:31:42
un hiperenlace 00:31:44
podemos añadir a la barra rápida 00:31:46
que es esta que tenemos aquí 00:31:48
esta barra que tenemos aquí 00:31:50
es una barra personalizable 00:31:52
y cada uno de los apartados que nosotros 00:31:54
le queramos poner 00:31:56
lo vamos a 00:31:58
lo vamos a poder 00:32:00
lo vamos a poder poner en esta barra 00:32:02
que se supone que es la que tenemos siempre presente 00:32:04
veis que los botones estandarizados 00:32:08
son unos cuantos 00:32:10
son las opciones 00:32:12
más normales ¿no? 00:32:14
para insertar un correo, para insertar un comentario 00:32:16
justificar a derecha o al centro 00:32:18
para insertar una regla 00:32:20
para meter un encabezado 00:32:22
o enlazar a unha hoja de estilo 00:32:24
aquí tenemos el espacio para las fuentes 00:32:26
curiosamente 00:32:28
mientras que aquí 00:32:30
es una cosa que me hace gracia 00:32:32
mientras que aquí 00:32:34
inserta el bold 00:32:36
en la siguiente 00:32:38
que estamos hablando de las fuentes 00:32:40
aquí tenemos al remarcado 00:32:42
pone la etiqueta strong 00:32:44
cuyo resultado final es el mismo 00:32:46
pero que no 00:32:48
yo huyo de ella 00:32:50
porque es más larga 00:32:52
no por otra cosa 00:32:54
lo mismo sucede con el énfasis 00:32:56
que le pone aquí con em y con i 00:32:58
en el otro lado ¿sabéis que son? 00:33:00
al provenir de lenguajes 00:33:02
que se han ido juntando unos con otros 00:33:04
se ha intentado 00:33:06
se ha intentado siempre 00:33:08
que todos los navegadores 00:33:10
admitían el máximo número 00:33:12
de especificaciones posibles 00:33:14
en aras a lo que es la compatibilidad 00:33:16
y luego 00:33:18
aparte digamos 00:33:20
de lo que son los índices 00:33:22
superíndices y tal 00:33:24
siempre tenemos este botón de aquí 00:33:26
en el cual podemos establecer 00:33:28
opciones especiales de formato 00:33:30
cada cual utiliza las que sea 00:33:32
pero a mi 00:33:34
yo la que más suelo usar 00:33:36
es esta del teclado 00:33:38
del KBD porque es el texto 00:33:40
texto de máquina de escribir 00:33:42
sé que es con mayúsculo, con acento 00:33:46
me ha pasado y no voy a volver a hacerlo 00:33:48
entonces, bueno, pues este de aquí 00:33:50
perdón, cuando lo vemos aquí 00:33:52
una de las cosas que no 00:33:56
tenemos este texto de máquina de escribir 00:33:58
es un texto de máquina de escribir muy particular 00:34:00
el de este genome 00:34:02
pero 00:34:04
a ver si 00:34:06
y luego pues bueno 00:34:08
las distintas alturas de título 00:34:10
si estáis acostumbrados 00:34:14
a trabajar 00:34:16
con editores de texto 00:34:18
pues esto que os estoy comentando os parecerá 00:34:20
muy simple 00:34:22
y si no estáis acostumbrados la verdad es que 00:34:24
debo estar siendo bastante confuso 00:34:26
pero bueno 00:34:28
en principio lo que hay que tener en cuenta 00:34:30
es que estamos funcionando 00:34:32
con un editor 00:34:34
que maneja etiquetas 00:34:36
a ver, perdón 00:34:38
que maneja etiquetas 00:34:42
que maneja etiquetas puras 00:34:46
lo que llamamos los tags 00:34:48
y que afecta al texto 00:34:50
al cual le aplicamos esas etiquetas 00:34:52
entonces 00:34:54
una de las cosas que también pasa 00:34:56
es que no está codificando 00:34:58
en la versión que tenemos el Bluefish 00:35:00
en el ISO 8559 00:35:02
sino en el UTF-8 00:35:04
con lo cual los acentos salen mal 00:35:08
por eso no los deje ir poniendo 00:35:10
porque no sepa que están 00:35:12
entonces aquí volvemos a guardar 00:35:14
volvemos a verlo 00:35:16
entonces aquí lo que hacemos 00:35:18
es trabajar siempre 00:35:20
sobre las funciones de texto 00:35:22
quiere decir que normalmente 00:35:24
necesitamos conocer esas funciones 00:35:26
o ir explorando a través 00:35:28
de lo que es el propio texto 00:35:30
del documento 00:35:32
el botón tablas nos permite hacer tablas 00:35:34
o bien con un asistente 00:35:36
que como veis es muy sencillo 00:35:38
le podemos decir con eso 00:35:40
15 filas y 2 columnas 00:35:42
queremos que haya 00:35:44
que las filas estén en una linea 00:35:46
y que no haya un código desengrado 00:35:48
le damos a aceptar 00:35:50
y entonces nos crea esa tabla 00:35:52
esa tabla que lógicamente no vamos a ver 00:35:54
porque no tiene 00:35:56
porque no tiene nada 00:35:58
ni siquiera le hemos puesto 00:36:00
el borde con lo cual 00:36:02
con lo cual lo veremos 00:36:04
podemos ponerle 00:36:08
un borde 00:36:10
y luego 00:36:12
este bonito 00:36:18
este bonito diseño es una tabla auténtica 00:36:20
que no tiene ningún 00:36:22
si las raspas 00:36:24
las raspas no se son 00:36:26
bueno a ver 00:36:28
aquí con esto 00:36:32
voy a borrar esta birria de tabla 00:36:34
bueno 00:36:44
también podemos directamente 00:36:46
meter el código de tabla aquí 00:36:48
si lo hacemos aquí 00:36:50
con el asistente podemos poner 00:36:52
el tipo de relleno de celda 00:36:54
las cualidades 00:36:56
si lo alineamos 00:36:58
a la izquierda 00:37:00
el ancho que va a tener 00:37:02
el espaciado entre celdas 00:37:04
el color que queremos poner en la paleta 00:37:06
todas estas características 00:37:08
una vez las tenemos aquí en la tabla 00:37:10
sencillamente son características 00:37:12
generales de la tabla 00:37:14
y luego añadimos filas 00:37:16
añadimos filas 00:37:18
una 00:37:24
y añadimos celdas 00:37:26
aquí 00:37:28
y bueno 00:37:34
lo veremos para que 00:37:36
ahí está a la derecha 00:37:38
como es la única que tiene 00:37:40
la única que está escrita en html 00:37:42
cuando no escribimos nada en las celdas 00:37:44
no aparece nada 00:37:46
voy a ir borrando estas páginas 00:37:48
me parece que le he dado 00:37:50
acabo de cargarme el bluefish 00:37:52
estupendo 00:37:54
bueno estaba yo 00:38:00
como veis 00:38:02
se quedaba el 00:38:04
ancla que habíamos puesto en la barra rápida 00:38:06
ahí 00:38:08
aquí en la barra estándar estábamos 00:38:12
bueno 00:38:14
para poner marcos 00:38:16
para poner frames aquí también 00:38:18
para insertar 00:38:20
formularios 00:38:22
y para escribir listas 00:38:24
tanto listas desordenadas 00:38:26
como listas ordenadas 00:38:28
como listas de definiciones 00:38:30
una vez ya 00:38:34
habéis visto 00:38:36
estas posibilidades 00:38:38
lo que es importante de ver es 00:38:40
que 00:38:42
podemos verlas externamente 00:38:44
con los distintos 00:38:46
navegadores 00:38:48
tanto con galeón 00:38:50
que es el predeterminado 00:38:52
y por eso no podemos darle 00:38:54
al piston en el navegador 00:38:56
porque no salta nada 00:38:58
porque no tenemos el galeón puesto 00:39:00
en esta distribución 00:39:02
se ha quitado por defecto 00:39:04
de aquí 00:39:06
pero bueno 00:39:08
yo no sé si 00:39:10
insisto en que 00:39:12
no sé 00:39:14
pero 00:39:32
por ejemplo 00:39:34
quería ver 00:39:36
y eso? 00:39:38
pensamos publicar 00:39:40
no tenemos 00:39:42
vale 00:39:44
pensaba buscar una página 00:39:46
pensaba por ver alguna página 00:39:48
en el código 00:39:50
fuerte de la página 00:39:52
bueno 00:40:08
bueno 00:40:20
un poco para que veamos 00:40:22
una página seria 00:40:24
completamente 00:40:26
me tiran esto 00:40:28
entonces 00:40:30
ahora aquí 00:40:32
bueno esta es la página 00:40:38
la que acabamos de descargar 00:40:40
que estaba en otro lado 00:40:42
si os fijáis 00:40:44
lo que hace 00:40:46
el editor es que 00:40:48
directamente nos coge el código 00:40:50
y podemos perfectamente añadir 00:40:52
lo que nos parezca oportuno 00:40:54
insertar 00:40:56
siempre utilizando 00:40:58
el propio código 00:41:00
si yo aquí inserto 00:41:02
un texto 00:41:04
que es el 00:41:06
y le quiero poner un vínculo 00:41:08
pues entonces 00:41:10
le añado un vínculo 00:41:20
voy aquí a la barra estándar 00:41:22
y le puedo dar perfectamente 00:41:24
la referencia que quiero poner 00:41:26
y entonces como veis 00:41:36
lo que hace es que directamente 00:41:38
me lo pone aquí 00:41:40
y lo podemos ver 00:41:44
aquí está 00:41:48
pues lo tenemos aquí 00:41:50
lo hemos creado sin más 00:41:52
en el modo de texto 00:41:54
aprovecho un pequeño truquillo 00:41:56
para quienes de vez en cuando hagan página web 00:41:58
que tiene Mozilla 00:42:00
yo marco un trozo de texto 00:42:02
botón derecho 00:42:04
ver código fuente del marco 00:42:06
de la selección 00:42:08
el código de ese truquillo me hace falta ver la página completa 00:42:10
a veces me interesa justamente ver el truquillo 00:42:12
normalmente cuando quieres 00:42:16
apropiarte de código ajeno 00:42:18
de todo lo que hace la gente 00:42:24
no sé si 00:42:28
el interrogante PHP 00:42:30
estaba yo pensando 00:42:34
era PHP 00:42:40
no me acuerdo 00:42:54
buscaba una página con PHP 00:42:56
por eso decía 00:42:58
quería mostrar simplemente 00:43:02
que cuando ponemos los scripts en PHP 00:43:04
si ponemos simplemente 00:43:08
el indicativo de script 00:43:10
aunque pongamos arriba que el lenguaje de script es el PHP 00:43:12
no nos colorea con la bonita sintaxis 00:43:14
del PHP 00:43:16
que tiene aquí que es en rojo 00:43:18
una página con PHP 00:43:22
voy a ver 00:43:28
dónde hay una página con PHP 00:43:38
estupendo 00:43:58
salimos 00:44:22
salimos 00:44:28
bueno pues 00:44:54
ahí está 00:44:58
qué pasa porque no puedo ir 00:45:10
está mal 00:45:16
aquí lo tengo 00:45:28
no, pero yo aquí no tengo PHP 00:45:32
perdón 00:45:34
no sé que tengo PHP 00:45:36
a ver 00:45:38
en la del Celice 00:45:42
tengo PHP 00:45:44
aquí tengo PHP 00:45:54
ahí está 00:45:58
ahí está 00:46:04
bueno, a ver dónde está 00:46:28
tengo yo 00:46:42
que tengo un PHP 00:46:44
de Chess 00:46:46
sí señor, aquí está 00:46:50
un momento 00:46:52
claro, esto es un PHP 00:46:54
pero yo soy un lista 00:46:58
tendría que ir 00:47:00
tendría que ir a mi código 00:47:02
que no lo tengo aquí, maldita sea 00:47:04
maldita sea 00:47:06
estoy atentado 00:47:08
esto no me vale 00:47:10
esto no me vale 00:47:12
para nada 00:47:14
bueno 00:47:16
un script en PHP 00:47:32
bueno 00:47:34
siento el fracaso 00:47:36
no sé dónde encontrarlo ahora 00:47:38
el script 00:47:40
cerramos 00:47:44
bueno 00:47:46
bueno 00:47:48
vamos a conectar esto 00:47:50
pero no queda más 00:47:52
bueno 00:47:56
las abogadas 00:47:58
vamos a ver 00:48:00
dónde está el script 00:48:02
aquí tenía que ir 00:48:04
aquí tenía que ir 00:48:06
sí 00:48:08
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Autor/es:
Consejería de Educación de la Comunidad de Madrid
Subido por:
EducaMadrid
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
2688
Fecha:
24 de enero de 2007 - 10:49
Visibilidad:
Público
Enlace Relacionado:
Consejería de Educación de la Comunidad de Madrid
Duración:
48′ 10″
Relación de aspecto:
4:3 Hasta 2009 fue el estándar utilizado en la televisión PAL; muchas pantallas de ordenador y televisores usan este estándar, erróneamente llamado cuadrado, cuando en la realidad es rectangular o wide.
Resolución:
240x180 píxeles
Tamaño:
141.97 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid