Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Edicion de paginas web - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Venga, pues entonces, os decía, vamos a empezar a ver este tema de diseño y edición de páginas web, que como os decía, pues vamos a recordar solo algunas cositas, solo por recordarlo y solo por centrarnos en el tema con el que estamos trabajando.
00:00:01
Primero, ¿qué es eso de una página web? Normalmente nosotros decimos, voy a crear una página web, cuando yo estoy creando una página web, no creo una página web, realmente lo que estoy creando es un sitio web.
00:00:17
¿Vale? Creamos un sitio. Un sitio que tiene muchas páginas, muchas páginas que están enlazadas entre sí. ¿Qué cosas va a tener una página? Bueno, pues una página va a tener muchísimos recursos.
00:00:30
Aquí me habla de alguno de ellos, puedo tener archivos, puedo tener carpetas que van a tener fotos, fotografías, botones, iconos, animaciones, hipervínculos, etc. Cada una de esas páginas nosotros vamos a ir diseñando, vamos a ir viendo qué criterios de diseño vamos a ir adoptando a la hora de crear una página web, en qué cosas tengo que fijarme, qué recursos y qué tecnología tengo y en esa página web nosotros vamos a ir insertando una serie de elementos.
00:00:52
Vale, pero que insisto, una cosa que realmente nos quede clara, aunque nosotros hablemos de que voy a crear una página web, no es una página, sino que es un sitio web, vale, un sitio que tiene muchas páginas o tiene muchos recursos.
00:01:20
Sí que es verdad que cuando yo presento un sitio web, yo presento una página, ¿vale? Presento una página inicial, que es lo que se llama la página principal o home, salto por aquí, ¿vale? Página principal o home y a partir de ella es donde vamos a ir creando los diferentes intervínculos.
00:01:34
Que una página web tiene que visualizarse en un navegador. Nosotros cuando vamos a visitar una página web, ya lo vimos el año pasado, en el tema pasado, un poco cuál es el proceso de funcionamiento de internet.
00:01:54
Yo hago una petición a un servidor de una información, que en este caso sería de una página web, y ese servidor me responde o me manda esa información.
00:02:13
¿Y cómo la visualizo? Esa información, pues en este caso, la estoy visualizando a través de un navegador, ¿vale?
00:02:25
Vamos a utilizar un navegador, el que sea, ¿vale? Aquí me habla que Simoci, LineTener, Explorer, Google Chrome, Opera, el que sea.
00:02:31
Utilizamos un navegador que es el que me muestra esa información.
00:02:39
Aquí con los navegadores, a la hora de editar páginas web, vamos a tener una pequeña pega, entre comillas, y es que, bueno, lo vamos a ir viendo un poquito más adelante.
00:02:43
Para que no se me escape, esa pega que puede haber es que cada navegador funciona con un código HTML5 que es propio, que puede ser propio, ¿vale?
00:02:56
Entonces, yo no sé si os ha ocurrido alguna vez, me imagino que sí, que yo quiero visitar una página web y lo intento hacer con el Explorer y con el Explorer no me funciona.
00:03:07
¿Tengo que recurrir al Mozilla o tengo que recurrir al Google Chrome?
00:03:17
¿Os ha pasado alguna vez?
00:03:21
¿Sí? ¿No?
00:03:23
¿Sí?
00:03:25
Bueno, que lo sepáis de todas formas, que hay veces que en mi navegador yo no puedo visualizar correctamente esa información.
00:03:25
Y es por esto, porque cada navegador es compatible con unas etiquetas, que ahora veremos qué es eso de las etiquetas, con unas etiquetas determinadas, que utilizamos con el código HTML5.
00:03:33
Me habla algo de que una página web es hipertextual. Hipertextual, sencillamente quiere decir que están todas las páginas hipervinculadas, que tienen muchos vínculos.
00:03:44
Ya ha salido, según estaba contándoos algo, que el lenguaje que voy a utilizar para poder crear estos sitios web o estas páginas o este documento es el HTML y que hay diferentes versiones de este HTML desde que apareció hasta el que utilizamos en la actualidad, el más utilizado, que es el HTML5.
00:03:56
Bueno, veremos algunas características de este HTML, cómo trabaja, para qué me sirve, etcétera, etcétera
00:04:20
¿Cómo creamos una página web o un sitio web?
00:04:27
Realmente me voy a mentalizar de algo, yo digo voy a crear un sitio web
00:04:32
A la hora de crear un sitio web tengo que crear tantas páginas como yo necesite
00:04:37
Entonces voy a cambiar ya, si queréis el término sitio web, por páginas
00:04:42
Porque todo me funciona exactamente igual
00:04:47
A la hora de crear una página, vamos a utilizar editores que se llaman Wysync. ¿Qué es esto de un editor Wysync? Bueno, viene del inglés, what you see is what you get. Es decir, lo que tú ves es lo que haces, o lo que te va a resultar en una página.
00:04:49
Son programas o son editores muy intuitivos, muy visuales, muy gráficos, de manera que es casi una especie de maquetación. Yo tengo una página inicial que quiero colocar un botón en un punto determinado, me saco la herramienta de botón y lo coloco, ¿vale? Esto es lo que me están haciendo este tipo de editores.
00:05:05
Hay muchos, me habla de Adobe Dreamweaver, Blue Griffon, Expression Web, Composer, NVU, yo no sé cuál tenemos aquí instalado, alguno estará instalado y alguno utilizaremos. O bien, vamos a trabajar con editores que trabajan directamente con ese código HTML.
00:05:26
Me habla de algunos. Sencillamente lo único que yo necesito es un editor de texto plano, es decir, que no de formato. Word me da formatos, LibreOffice me da formatos. ¿Qué editor de texto no me da formato? En Windows, por ejemplo, el blog de notas.
00:05:44
¿Vale? El blog de notas es un editor de texto que no me da ningún tipo de formato
00:06:02
Lo tengo que guardar con una extensión determinada
00:06:06
Pero ahí, con el blog de notas en Windows, aquí no sé cuál está instalado
00:06:09
Y ahora lo vemos en un momentito
00:06:13
Me parece que es un pluma, se llama, o algo así
00:06:15
Pues os decía, lo que voy a hacer con este editor de texto es
00:06:17
Trabajar con etiquetas, con ese código HTML
00:06:23
Y vamos a ir creando nuestra página web
00:06:26
diferencias entre ese código html o el editor y si hay muchas desde luego es más fácil más
00:06:28
cómodo trabajar con editores pero voy a controlar mucho más el código en html el inconveniente es
00:06:40
que tengo que conocer muy bien ese código tengo que tenerlo muy bien estructurado otra ventaja
00:06:46
que me aparece aquí pues que el código queda mucho más limpio claro queda mucho más limpio
00:06:51
porque lo voy trabajando yo. Con un editor me genera este propio editor algunas etiquetas que hay veces, no es que no sean necesarias,
00:06:54
pero que puedo simplificar mucho más el trabajo si lo estoy haciendo yo. Muy rápidamente, clasificación de páginas web, vamos a hablar de dos,
00:07:05
páginas web estáticas o páginas web dinámicas. ¿Qué es una página estática? Aquella en la que el servidor me muestra esta página y yo no interactúo
00:07:16
Me muestra una información. Una página web dinámica es aquella en la que sin cambiar el código de la página, el usuario que está visualizando esta página puede cambiar la forma de ver o de trabajar con esa página.
00:07:24
Se trabaja mucho, por ejemplo, también con formularios, etcétera, etcétera. Me habla aquí de que se realizan estas páginas combinando ese código HTML con otros lenguajes dinámicos como pueden ser ASP.NET, Java, Javascript, bueno, hay muchos, lo diré, muchos más lenguajes de tipo dinámico.
00:07:40
Me aparecen igual, diferencias entre páginas estáticas, páginas dinámicas, que me lo salto. ¿Funcionamiento para la creación de una página web? Bueno, muy sencillito. Realmente hay una persona o un equipo que son lo que se llaman los webmasters, aquí me lo pone como que son los encargados de mantenerlo.
00:08:06
Bueno, pues sí, mantienen esa página web. Realmente una página web lo que tengo que hacer primero es diseñarla y programarla. Puede ser el mismo, puede ser distinta persona. Realmente hay un equipo que diseña esa página. Diseño una página, la programo y la mantengo.
00:08:27
¿Esto dónde lo estoy haciendo? Lo estoy haciendo en un equipo, ¿vale? Lo que se llama en un sitio local
00:08:43
En mi ordenador yo estoy creando, voy a trabajar con una carpetita que luego va a tener una estructura de carpetas y una estructura de archivos
00:08:50
Pero trabajo en local, ¿vale? En mi ordenador yo tengo toda esa página web
00:09:00
Y luego ¿qué es lo que tengo que hacer? Tengo que guardar la página en un sitio remoto
00:09:06
en un servidor, hay veces que yo puedo convertir mi ordenador en un servidor, pero entonces voy a tener dos estructuras de páginas web, no dos, a ver si me entendéis, realmente voy a tener dos páginas web, voy a tener la página web que tengo en local y la página web que tengo alojada, ¿vale?
00:09:13
Porque yo a lo mejor estoy haciendo cambios en local, es decir, en mi ordenador de esa página web y hasta que yo no la pase a ese sitio remoto no va a estar visible como tal en Internet.
00:09:36
Y os digo que puedo trabajar con el mismo equipo, ¿vale? Mi ordenador también puede hacer de servidor, pero eso no quita que vaya a tener esta misma estructura de trabajar en local o trabajar en remoto.
00:09:48
Cuando yo subo ese sitio web, lo que realmente estoy haciendo o lo que se llama es alojar. Es un proceso de alojamiento de una página web. ¿Cómo alojamos una página web? Normalmente a través de programas de transferencia de archivos mediante un protocolo FTP.
00:10:01
Aquí viene muy gráficamente como lo estoy haciendo. En local nosotros diseñamos esta página web mediante un protocolo de transferencia de archivos. Alojamos en remoto nuestra página web y son los usuarios los que van a solicitar la información y a visualizar y a acceder de alguna manera a este sitio remoto, a este servidor.
00:10:19
¿Queda eso claro, chicos?
00:10:47
¿Sí? Vale
00:10:50
Bueno
00:10:51
Ya vamos a hablar aquí
00:10:53
Casi, casi, lo voy a pasar muy por encima
00:10:55
¿Vale? Lo que pasa es que sí que os lo comento
00:10:58
Criterios de diseño
00:11:00
Y de planificación
00:11:01
De cómo hago una página web
00:11:03
Esto es un poco parecido a lo de
00:11:04
Lo del método de proyectos que vosotros veíais en tecnología
00:11:07
Viene una serie de fases
00:11:12
Bueno, pues a la hora de diseñar
00:11:14
Una página web
00:11:16
realmente también voy a ir siguiendo una serie de fases. Tenemos una fase de prediseño y planificación. En una fase de prediseño y planificación, cosas que tengo que tener en cuenta.
00:11:17
Es decir, ¿qué quiero conseguir con esa página web? ¿A quién va dirigido? ¿Qué contenidos voy a meter? ¿Qué directrices o qué especificaciones voy a utilizar?
00:11:30
qué tipo de tecnología voy a utilizar, si yo voy a diseñarla con un HTML, si voy a utilizarla con un editor de YSIM, qué tiempo tengo para poderlo hacer, qué presupuesto tengo, ¿vale?
00:11:40
Son cosas que tengo que tener antes en cuenta a la hora de diseñar mi página web. Y os estoy hablando de una página web más profesional o más real.
00:11:53
Nosotros vamos a aprender a hacerlo. Entonces muchas de estas cosas nos las vamos a saltar porque son tareas que os voy a ir mandando. Pero realmente cuando yo quiero diseñar una página web tengo que tener claro qué quiero hacer, para qué lo quiero hacer, con qué medios tengo, de tipo económico, de tipo temporal, de tipo de recursos tecnológicos, lo que sea.
00:12:03
Todo eso tendré que estudiarlo. Estructura de una página web. Hay muchas estructuras de una página web. Siempre conviene no salirse mucho de una estructura clásica. ¿Por qué?
00:12:26
Porque normalmente yo diseño una página web para que sean los usuarios los que vayan a utilizar mi página web. Entonces, si yo estoy creando una estructura de una página web muy compleja, el usuario, o muy personalizada, el usuario muchas veces puede perderse.
00:12:43
Entonces, por eso, casi siempre las páginas web tienen la misma estructura. Yo no sé si me aparece por aquí de forma... Mira, sí que me aparece. De forma muy gráfica, sí me aparecen un poco todos los elementos que suelen aparecer en una página web.
00:13:01
Pero ¿los puedo personalizar un poquito? ¿Los puedo cambiar? ¿Puedo poner a lo mejor el menú de navegación, en vez de ponerlo aquí, lo pongo en una barra en la parte superior? Pues claro que sí, ¿vale? Todas estas cosas las podemos ir personalizando, pero hay una serie de elementos que sí es interesante que me aparezcan en una página web, ¿vale?
00:13:16
Me aparece el encabezamiento, me aparece normalmente un logotipo o una marca de la página que yo estoy creando, me aparece un titular de esa página, ¿eh? Porque recordamos que... o un título, ¿vale? Me vine como titular, pero realmente podría ser un título.
00:13:34
Cuando yo creo un sitio, un sitio tiene muchas páginas
00:13:52
Yo que sé, a lo mejor el título, si estoy haciendo una página personal
00:13:56
Título, pues mis deportes favoritos, por deciros algo
00:14:01
Otro título, mis, yo que sé, mis colegas de juerga
00:14:04
Cada uno puede tener su título diferente
00:14:13
Vamos a tener mi menú de navegación que me va a permitir irme desplazando por las diferentes páginas
00:14:16
el contenido que quiero mostrar y notas a pie de página. ¿Qué me pueden mostrar notas a pie de página? Muchas cosas.
00:14:22
Ya iremos viendo poquito a poco los diferentes elementos que me van a ir apareciendo por aquí.
00:14:31
Me habla de ejemplos de elementos de diseño, me habla sobre todo de algo que visualmente tengo que simplificar en mi página web
00:14:39
y me viene aquí un ejemplo de cómo ha cambiado la página de Google desde el año 2009 hasta el año 2016. La página de Google actualmente es muy simple, muy intuitiva, muy limpia, muy sencilla,
00:14:49
que es un poco lo que se pretende cuando nosotros visitamos una página web, que sea agradable. Bueno, hablamos de otra cosa que ahora lo vamos a ir viendo según vayamos desarrollando
00:15:03
nuestra página web, al principio no le vamos a dar tanta importancia, luego sí que va
00:15:17
a tener importancia, que son las hojas de estilo o las hojas CSS en cascada. ¿Qué
00:15:22
es esto? Realmente cuando yo estoy creando un sitio web, si la estructura de mi página
00:15:28
va a ser más o menos esta, a mí lo que me interesa tener es, no voy a diseñar, imaginaos
00:15:35
que mi sitio web tiene cuatro páginas si esta es la estructura que yo quiero mantener en mi sitio
00:15:45
no voy a crear cuatro veces la misma estructura porque bueno por simplificarlo no lo vamos a crear
00:15:51
cuatro veces realmente lo que se hace es crear una hoja de estilos y en esa hoja de estilo yo
00:16:00
voy a ir aprovechando esa hoja de estilo lo que voy a ir haciendo es ir añadiendo contenidos en
00:16:07
mis diferentes páginas. Si por lo que sea quiero cambiar el estilo de mi sitio web, con cambiar la hoja de estilo he cambiado todo mi sitio web.
00:16:14
No tengo que cambiar cuatro veces las páginas. ¿Me entendéis un poco para qué sirve? ¿Sí? Fenomenal. Lo iremos desarrollando poquito a poco.
00:16:23
Por eso aquí no quiero hablaros de mucho más. Sí que me habla, por ejemplo, de en cuanto a la tipografía o el tipo de fuente, me recomienda que no utilice tipografía con serifa.
00:16:33
Lo de las serifas son adornitos que suelen aparecerme en las tipografías de forma que me disminuye el grosor, me crean formas un poco más adornadas, que cuando yo estoy trabajando con un editor de texto puede ser mucho más agradable a la vista, pero cuando estoy trabajando con una página web no, porque es el navegador el que tiene que mostrar esa información.
00:16:50
Yo sé que se ve un poco mal. Si yo lo hago aquí, el Times New Roman es una fuente que sí tiene serifa. Entonces, cuando yo estoy visualizando en una página web esta fuente o esta otra fuente, es mucho más limpio, es mucho más agradable visualmente una fuente que no tiene esa serifa.
00:17:13
Es una recomendación, ¿vale? Luego cada uno utilizará la fuente que quiera, porque se pueden utilizar todo tipo de fuentes. Bueno, y no sé si me aparece aquí algo más, nada, un caso práctico de análisis de un sitio web, nada.
00:17:37
bueno, esto
00:17:54
yo creo que esto ya os lo voy a contar a partir del próximo día
00:17:59
son dos cosas, lo de las hojas de encascada
00:18:01
y los estándares de accesibilidad de información
00:18:04
casi lo voy a desarrollar mucho más el próximo día de trabajo
00:18:07
realmente un estándar de accesibilidad
00:18:11
es una serie de normas
00:18:15
que tiene que cumplir o que sería bueno
00:18:17
que cumpliera mi página web
00:18:20
para poder acceder a ella de forma más cómoda, ¿vale? Son criterios de accesibilidad, que no tiene por qué tener un página, es una recomendación, ¿vale? Igual que lo de la serifa con la tipografía, los estándares de accesibilidad también son una recomendación.
00:18:23
y yo creo que poco más
00:18:42
¿vale?
00:18:46
sí que vamos a empezar entonces a trabajar un poquito
00:18:47
con
00:18:49
la edición de una página web
00:18:51
lo que me viene en este libro
00:18:53
un poco son, ¿cómo voy a crear
00:18:55
esa página web? o bien a través
00:18:57
de esos gestores de contenidos
00:19:00
un gestor de contenidos
00:19:01
no es más que un editor YSIN
00:19:03
de los que os hablaba antes
00:19:05
¿cómo lo voy a ir creando? con un WordPress
00:19:07
con Humola, con Drupal
00:19:09
Hay muchos. Utilizando un lenguaje HTML, y yo no sé si me viene algo más por aquí, el HTML5, el Javascript, no vamos a trabajar con Javascript, pero funciona de manera muy parecida con otras etiquetas,
00:19:11
pero de manera muy parecida al HTML5, y no sé si me viene así, y con otro tipo de editores de páginas web, editores Wysync, como puede ser, por ejemplo, el NVU, etc.
00:19:30
Vamos a trabajar un poquito con todo esto. Entonces, en vez de explicaros teóricamente cómo funcionan cada uno de estos, yo creo que lo más bueno es directamente ir viéndolo.
00:19:42
¿Vale? Ir viendo una página web. Bueno, es verdad, insisto, me aparece lo que es la transferencia de archivos, ¿cómo voy a alojar mi página web en el servidor? Que para eso tengo que utilizar un programa adecuado de transferencia de archivos, ¿vale? Como puede ser Filezilla o FireFTP, ¿vale? Hay muchos.
00:19:54
Si tenemos oportunidad, alojaremos nuestra página web editada, con lo cual tendremos que utilizar estas aplicaciones de transferencia y directamente vamos a empezar a trabajar, si os parece.
00:20:16
Vamos a empezar, os decía, la casa por los cimientos. Si una página web se caracteriza por su código HTML5, lo más oportuno es que empecemos a conocer el código HTML. ¿Y por qué?
00:20:30
porque independientemente aunque nosotros estemos usando un editor guay si muchas veces hay algo
00:20:49
que a mí me interesa modificar porque con ese editor no me sale exactamente lo que yo quiero
00:20:56
publicar donde lo que tengo que hacer es modificar el código html vale para poder modificar el código
00:21:02
html tengo que conocer cómo funciona hasta aquí muy bien chicos si voy a parar un momentito
00:21:07
- Autor/es:
- David Perez Ovejero
- Subido por:
- David Jose P.
- Licencia:
- Reconocimiento - Compartir igual
- Visualizaciones:
- 109
- Fecha:
- 20 de enero de 2021 - 11:05
- Visibilidad:
- Público
- Centro:
- IES MIGUEL DE CERVANTES
- Duración:
- 21′ 18″
- 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:
- 1024x768 píxeles
- Tamaño:
- 53.14 MBytes
