1. Introducción
En este documento se pretende tratar la problemática ante la iniciación en HTML + CSS.
Este asunto se pued...
problemas en la docencia.
• No es multiplataforma.
• Idioma por defecto en inglés.
• No ofrece diseño gráfico.
• Ayuda en ...
4. Aplicación didáctica de la herramienta.
El objetivo que aquí se trata es iniciar a los alumnos en HTML + CSS mediante l...
• Cierre de etiquetas automáticamente.
• Depurador de errores.
Ejercicios propuestos en clase:
Se supone que el alumno ya ...
E3: Estudiar un código fuente. (aprox. 30min.)
El profesor proporcionará un documento HTML con ciertos elementos distintos...
E4: Estudiar hoja de estilo. (aprox. 30min.)
El profesor ofrece una hoja de estilo al alumno para que compruebe cómo y de ...
E6: Modificar la hoja de estilo anterior para obtener el formato habitual. (aprox. 1hora.)
El alumno alterará la hoja de e...
Metodología:
Para abordar este tema se propone la siguiente metodología.
Ejercicio 1: Método expositivo. El profesor expli...
5. Conclusiones.
Como conclusión decir que HTML-Kit es una herramienta apta para la docencia del módulo
de Lenguajes de ma...
Próxima SlideShare
Cargando en…5
×

Html+css con html kit

931 visualizaciones

Publicado el

Publicado en: Educación, Tecnología, Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
931
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
6
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Html+css con html kit

  1. 1. 1. Introducción En este documento se pretende tratar la problemática ante la iniciación en HTML + CSS. Este asunto se puede abordar desde varios puntos caminos, así como por medio de diversas herramientas. La intención de este documento es servir de guía para el aprendizaje de HTML + CSS con la aplicación HTML-Kit. Con esto conseguiremos que el alumno aprenda el lenguaje basados en etiquetas al mismo tiempo que se familiariza con una de las muchas aplicaciones que permite el la creación y el diseño en páginas HTML. Se puede descargar la herramienta desde www.html-kit.com 2. Contextualización. Esta herramienta se puede utilizar como instrumento de iniciación y desarrollo dentro del módulo Lenguajes de marcas y Sistemas de Gestión de Información del ciclo formativo de grado superior ASIR. La herramienta encaja en los siguientes contenidos: • Etiquetas. • Herramientas de edición. • Elaboración de documentos XML bien formados. • Identificación de etiquetas y atributos de HTML. • XHTM: diferencias sintácticas y estructurales con HTML. • Versiones de HTML y de XHTML. • Herramientas de diseño Web. • Hojas de estilo. Satisface los Resultados de Aprendizaje: • Utiliza lenguajes de marcas para la transmisión de información a través de la Web analizando la estructura de los documentos e identificando sus elementos. • Reconoce las características de lenguajes de marcas analizando e interpretando fragmentos de código. • Establece mecanismos de validación para documentos XML utilizando métodos para definir su sintaxis y estructura. 3. Explicación de la herramienta: La herramienta que pretendemos utilizar es HTML-Kit. Se ha seleccionado esta herramienta por las siguientes ventajas que presenta: • Es software libre. • Es multilingüe. • Ayuda a completar el código fuente. • Ofrece ayuda para estructuras básicas de HTML y PHP/ASP. • No ofrece diseño gráfico. • Permite la publicación en FTP. • Se actualiza limpia y fácilmente. • Es estable. Por otra parte, se han encontrado una serie de desventajas que pueden suponer algunos
  2. 2. problemas en la docencia. • No es multiplataforma. • Idioma por defecto en inglés. • No ofrece diseño gráfico. • Ayuda en inglés. Esta plataforma es de características similares a: • Kompozer. • FirstPage. HTML-Kit es una buena herramienta para la inciación a HTML + CSS debido a que permite completar y ayudar a recordar las etiquetas, es muy estable y es gratuita. El único problema importante que encontramos en contra es que sólo se ejecuta en plataformas Windows. Esto que en el periodo de iniciación puede que no suponga ningún problema, sí puede ser un contratiempo para trabajar de forma profesional. Espacio de trabajo. Parte superior: acceso rápido a herramientas. Parte central: código fuente. Parte derecha: explorador de proyectos. Parte inferior: Depurador.
  3. 3. 4. Aplicación didáctica de la herramienta. El objetivo que aquí se trata es iniciar a los alumnos en HTML + CSS mediante la utilización de la herramienta de diseño HTML-Kit. Para ello utilizaremos las comodidades que nos ofrece la herramienta como son: • Coloreado de etiquetas. • Autocompletado de etiquetas. • Inserción de los atributos más importantes en algunas etiquetas. • Lista de etiquetas. • Facilidades para insertar elementos compuestos.
  4. 4. • Cierre de etiquetas automáticamente. • Depurador de errores. Ejercicios propuestos en clase: Se supone que el alumno ya conoce la estructura de un documento HTML y algunas etiquetas más importantes. E1: Conocer y practicar con el entorno de Trabajo HTML-Kit. (aprox. 1h) Mediante este ejercicio se pretende que el alumno sepa descargar e instalar la herramienta. Además se le explicará cómo utilizar las opciones más básicas, así como dónde se encuentran aquellas utilidades que le pueden resultar más útiles. E2: Enlazar dos páginas web que creará el alumno. (aprox. 30min.) Siguiendo con la toma de contacto y aprendizaje de la herramienta el alumno desarrollará dos páginas HTML simples cuyo fin será enlazarlas y navegar entre ellas.
  5. 5. E3: Estudiar un código fuente. (aprox. 30min.) El profesor proporcionará un documento HTML con ciertos elementos distintos para que los alumnos lo investiguen, busquen los diferentes bloques y realicen cambios en la estructura y en el aspecto gráfico utilizando etiquetas. <html><!--documento HTML--> <head> <!--cabecera--> <title>Ejercicio de Clase</title> <!-- titulo de la pagina--> </head><!--fin cabecera--> <body><!--cuerpo de la pagina--> <table border="0" width="100%"> <!-- tabla de cabecera--> <tr> <td>Esto es un simulaci&oacute;n de la p&aacute;gina de Google</td><!--celda1--> <td align="right">Ejercicio de Clase 3</td> <!--celda2--> </tr> </table> <!-- fin tabla cabecera--> <hr/> <!--linea--> <br/> <br/> <center> <img src="./google.gif" alt="Google"/> <!--imagen logo--> <form action="#none" method="post"> <!-- formulario--> <input type="text" name="caja_buscar" style="width:400"/> <!--caja texto--> <br/> <input type="button" class="boton" value="Buscar con Google"/><!--boton1--> <input type="button" class="boton" value="Voy a tener suerte"/><!--boton2--> </form> <!--fin formulario--> </center> </body><!--fin cuerpo--> </html><!--fin documento-->
  6. 6. E4: Estudiar hoja de estilo. (aprox. 30min.) El profesor ofrece una hoja de estilo al alumno para que compruebe cómo y de qué está compuesta. body{ font-family:arial; font-size:13pt; background-color:pink; } table{ width:100%; font-family:courier; font-size:10pt; color:yellow; background-color:green; } hr{ width:100%; background-color:red; height:4px; } img{ border:3px; border-style:solid; border-color:purple; width:567; height:84; } input.boton{ font-family:courier; font-size:16pt; } E5: Enlazar la hoja de estilo con la página HTML. (aprox. 30min.) En este caso el alumno aprenderá la línea de código que permite enlazar una hoja de estilo con un documento HTML. Para ello enlazará una hoja de estilo facilitada por el profesor con la página HTML anterior. <head> <!--cabecera--> <title>Ejercicio de Clase</title> <!-- titulo de la pagina--> <link rel="stylesheet" href="./estilo.css" type="text/css" media="screen"><!-- enlace hoja de estilo--> </head><!--fin cabecera-->
  7. 7. E6: Modificar la hoja de estilo anterior para obtener el formato habitual. (aprox. 1hora.) El alumno alterará la hoja de estilo en varias ocasiones y comprobará cómo cambia el aspecto gráfico de la página HTML. Vista HTML con la hoja de estilo proporcionada por el profesor: Vista HTML con la hoja de estilo modificada por el alumno: E7: Crear un sitio web. (aprox. 6h.) El alumno deberá crear un sitio web que estará compuesto por mínimo 5 páginas html y 2 hojas de estilo distintas. Se trata de simular la web de una empresa de venta de bicicletas, viajes, librería, tienda de deporte, etc.. Aunque la temática y el formato son abiertos todos los sitios deben tener una página de portada y otra página con la información de contacto y con un formulario que podrá utilizarse en prácticas posteriores como recurso para enviar datos a BD.
  8. 8. Metodología: Para abordar este tema se propone la siguiente metodología. Ejercicio 1: Método expositivo. El profesor explicará cómo descagar e instalar la aplciación HTML-Kit, así como las funciones más importantes de la herramienta utilizando el proyector. Los alumnos beberán practicar y familiarizarse con la interfaz. Ejercicios 2 – 6: Método por descubrimiento. El alumno trabajará a su ritmo y cuando termine cada ejercicio presentará la solución al profesor. Ejercicio 7: Aprendizaje por proyecto. El alumno comentará con el profesor qué tipo de negocio quiere desarrollar, cuántas páginas y qué ideas tiene. Si es preciso el profesor reconducirá la práctica. Puesto que este ejercicio durará varias sesiones el alumno debe mostrar al profesor el estado del ejercicio al fin de cada sesión. Para esto, el profesor facilitará una carpeta a cada alumno con el material y explicaciones necesarios para que ellos mismos vayan trabajando a su ritmo. Los alumnos que finalicen antes el ejercicio 6 podrán hacer el ejercicio final más completo o ayudar a los compañeros más atrasados. Por otra parte, para aquellos alumnos que tengan más dificultades se les podrá facilitar cierto material para el ejercicio 7 (temática del sitio, imágenes, página de inicio). Tiempo aproximado total: 10 horas 4 horas ejercicios 1 – 6 6 horas ejercicio 7. Este tiempo presupone que el alumno ya conoce nociones teóricas y las etiquetas básicas para el diseño de HTML.
  9. 9. 5. Conclusiones. Como conclusión decir que HTML-Kit es una herramienta apta para la docencia del módulo de Lenguajes de marcas y Sistemas de Gestión de Información, puesto que permite desarrollar sin problemas la mayoría de sus contenidos y que además satisface en gran parte los Recursos de Aprendizaje de del módulo. Otros puntos a favor son su potencia, estabilidad y que es una herramienta gratuita. No obstante, el hecho de no ser multiplataforma es un gran inconveniente dentro del ámbito docente, pues hoy por hoy solo funciona bajo sistemas Windows. Aún así, podemos afirmar que la herramienta HTML-Kit puede resultar muy útil a efector docentes para la iniciación y desarrollo de documentos XML, HTML, CSS y PHP, entre otros. Jaume Gosàlbez Lloret. Aprendizaje y enseñanza de la informática.

×