Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Articulo monica y christian "español"

227 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Articulo monica y christian "español"

  1. 1. Crear sitios web con HTML 5 y CSS 1 APRENDE A CREAR SITIOS WEB CON HTML 5 Y CSS García Ramírez Christian Agustín Sánchez Crisóstomo Mónica Febrero, 2014
  2. 2. Palabras Claves HTML CSS SITIOS WEB - WEB SITES
  3. 3. Resumen El objetivo de este artículo es conducirte por una disciplina realmente interesante y te daremos todas las herramientas que necesitas para comenzar. Después de introducirte en los tópicos básicos serás capaz de crear tu propia página web con los sencillos pasos aquí planteados, y con un poco de práctica perfeccionaras tú técnica. Ayudaremos a los estudiantes a introducirse en el ambiente del diseño web, las principales cosas que conocerán son los conceptos básicos de HTML y CSS además, aprenderán a utilizar HTML el cual es un pilar básico de la web y el cual aporta estructura a esta, al igual que contenido y conexión entre las páginas y CSS el cual es el lenguaje encargado para describir cómo es que debe de presentarse la estructura del HTML, en otras palabras, para dar forma y estilo a tu página web. También te explicaremos algunas estructuras de columnas, añadir imágenes de fondo así como el formateo de las mismas, a adaptar enlaces de otros sitios web al diseño de tu página y por supuesto a definir los estilos de texto. También sabrás como crear las estructuras web más habituales, emplear las etiquetas y propiedades más populares para poder personalizar tu sitio web.
  4. 4. Introducción La creación de la primera página web, añadiendo una interfaz gráfica, se remonta a 1991. En sus primeros momentos, el diseño web estaba muy condicionado tecnológicamente, su apariencia se reducía a unas simples líneas negras sobre un fondo blanco. Afortunadamente, hoy en día la tecnología y las técnicas de construcción de por tales han alcanzado grandes niveles de desarrollo en creatividad e imaginación; dejando atrás estructuras desfasadas tales como cuadros y GIFs animados, las nuevas metodologías son mucho más sofisticadas, y continúan en constante crecimiento y desarrollo. El progreso de las páginas web ha ido siempre de la mano de la tecnología. En la actualidad, en el mundo de la red existen infinidad de páginas web, las cuales fueron o son creadas por personas con conocimientos en el diseño de las mismas, pero: ¿Qué ocurre con el resto de las personas que no tienen estas habilidades?; ellos pueden privarse de construir su propio sitio web. Es por esa razón que nos dimos en la tarea de crear este artículo donde les explicaremos como realizar y darle un buen estilo a una página web. Uno de los principales objetivos por el cual se lleva a cabo el presente trabajo, es ampliar el conocimiento del público en general en el desarrollo de páginas web.
  5. 5. Método y Materiales Lo primero que se debe de saber antes de crear una página web: El alojamiento web (en inglés web hosting) es el servicio que se provee a los usuarios de Internet para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. Los Web Host son compañías que proporcionan espacio de un servidor a sus clientes. (Hostinger, 2014) Estos Servidores, son computadoras como las que hay en casa, solo que más grandes, más poderosas y con la capacidad de brindar al usuario una dirección propia en Internet. En estos servidores se encuentra guardada toda la información de sus cuentas de correo electrónico, redes sociales, blogs, aplicaciones y todo lo que se encuentra en la red de redes. 1 Con este servicio los negocios pueden obtener:  Espacio en internet para promocionar su sitio web  Dirección propia con el nombre de la empresa  Correos totalmente personalizados con su nombre y nombre de la empresa.  Transferencia de archivos para intranets u oficinas virtuales  Instalación de aplicaciones personales como blogs, galerías, carritos de compra etc. 1. Para mayor información sobre el tema te sugerimos visitar el siguiente link (http://www.hostinger.es/) donde encontraras todos los servicios que ofrecen e instrucciones de cómo instalar el hosting.
  6. 6. Construir una estructura básica HTML 5 HTML5 provee básicamente tres características principales: Estructura, estilo, funcionalidad. Es considerado el producto de la combinación de HTML, CSS y Javascript, estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5.(GAUCHAT, 2012) HTML podría parecer confuso, pero la cantidad de código que necesitas memorizar es relativamente pequeña. HTML 5 ha añadido muchos elementos nuevos que ayudan al navegador a interpretar la estructura de la página fácilmente. El HTML básico En primer lugar, el doctype le indica al navegador el tipo de contenido.2 Crear el head Lo siguiente seria el <head>. En este debes de colocar todos los archivos que quieras incluir, como las hojas de estilo css. Añadir el body 2. El atributo lang es la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es es por español.
  7. 7. Añadir el body En el <body> incluye el contenido de la página. Este es el lugar en donde debes de añadir el encabezado, el contenido principal, la barra lateral y un pie de página. Añadir <Meta> La etiqueta <meta> especifica como el texto será presentado en pantalla, también podemos agregar otras etiquetas <metas> como description o keywords. 3 Añadir titulo La etiqueta <title> es utilizado para poner el titulo del documento que estamos creando, normalmente este texto es mostrado en la barra superior de la ventana del navegador. 3 . Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento.
  8. 8. Añadir el header El <header>es uno de los nuevos elementos incorporado al HTML5, se suele usar para alojar la imagen principal, un titulo y la navegación. Puedes tener varios en una página. Añadir <nav> Esta etiqueta esta diseñada para colocar botoneras de navegación principal.Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. Añadir <section> Se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado. Además, todo el contenido que engloba ha de guardar cierta relación entre sí.(VEGA & VAN DER, 2011)
  9. 9. Todo sobre los DIV. Una pagina en HTML se crea con una serie de etiquetas que le indican al navegador que mostrar y donde. El elemento de estructura principal de una pagina es la etiqueta div, abreviatura de ‘divisor’. Si miramos un periódico, veremos que el texto se agrupa en columnas, y que las imágenes con los pies también se encuentran juntas con un margen alrededor. El div basico Un div comienza con solo un poco de código: <div>. A partir de este sencillo elemento, puedes insertar todo el contenido que quieras dentro de u div. Añade un ID Un div puede tener un identificador único para reconocerla por css o por cualquier JavaScript que hagas. Para aplicar un ID usa: <div id=”IdDelDiv”></div><div id=”IdDelDiv”></div>. Incluye una clase Las clases so similares a los IDs, pero puedes usar la misma para diferentes elementos, asi es mas fácil dar estilo a varios a la vez. Para aplicar una clase a un div, se usa: <div class=”ClaseDelDiv”></div>.
  10. 10. Añadir Aside Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos. Añadir footer El <footer> normalmente contiene enlaces a areas comunes del sitio como contacto, información de copyright o dirección.4 4 footer representa el final del cuerpo de nuestro documento y normalmente es utilizada para compartir información general sobre el autor o la organización detrás del proyecto.
  11. 11. CSS Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.(NAVAJAS, 2010) Estilos en línea Una de las técnicas mas simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style.5 5 Modificando el atributo style con el valor Font-size: 20px, Este estilo cambia el tamaño por defecto del texto a un nuevo tamaño de 20 pixeles.
  12. 12. Estilos embebidos Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para efectuar los elementos HTML correspondientes: Fija los márgenes Ya has especificado el ancho, pero no la posición. Con el comando margin-left puedes fijar el número de pixeles desde la izquierda hasta el contenido. Una alternativa es fijar ambos lados en auto para Añade bordes El diseño de tu página puede tener un mejor aspecto con bordes, y esto determina uno con dos pixeles de ancho. El color del border es verde oscuro (006600) y el estilo es sólido. Otras opciones de borde son: puntos, guiones simples o dobles y crestas.
  13. 13. Añade una imagen de fondo. Cuantas menos imágenes tenga tú página más rápido cargara, pero un color plano de fondo y mucho texto puede desanimar a tus usuarios. Usar imágenes clave puede mejorar tu sitio, con la ventaja de que la misma imagen se usara en todas las páginas de tu sitio. El navegador solo se la bajara una vez y la guardara en cache para usarla en las siguientes páginas. El resultado una página increíble sin perder tiempo en grandes descargas. Elige un color El fondo más sencillo es un color plano. Se consigue agregando un color a la propiedad background-color en la etiqueta body. Usa palabras como red, yellow, blue, green o un valor #RRGGBB.
  14. 14. Usa una foto Es sencillo usar una foto como imagen de fondo, solamente tienes que añadir una línea CSS que la enlace: background-image: url(‘fondo01.jpg’), cambia el nombre por el que tenga tu archivo. Insertar <link> la etiqueta <link> y cómo utilizarla para insertar archivos con estilos CSS en nuestros documentos. Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”> le decimos al navegador que cargue el archivo misestilos.css porque contiene todos los estilos necesitados para presentar el documento en pantalla. Esta práctica fue ampliamente adoptada por diseñadores que ya están trabajando con HTML5. La etiqueta <link> referenciando el archivo CSS será insertada en cada uno de los documentos que requieren de esos estilos.
  15. 15. Nuevos selectores Hay algunos selectores más que fueron agregados o que ahora son considerados parte de CSS3 y pueden ser útiles para nuestros diseños. Estos selectores usan los símbolos >, + y – para especificar la relación entre elementos. Incorporando Box-sizing Existe una propiedad adicional incorporada en CSS relacionada con la estructura y el modelo de caja tradicional. La propiedad Box-sizing nos permite cambiar como el espacio total ocupado por un elemento en pantalla será calculado forzando a los navegadores a incluir en el ancho original los valores de las propiedadespadding y border. Cada vez que el área total ocupada por un elemento es calculada, el navegador obtiene el valor final por medio de la siguiente formula: tamaño + márgenes + márgenes internos + bordes.
  16. 16. Incorporar Border-radius Por muchos años diseñadores han sufrido intentando logar el efecto de esquinas redondeadas en las cajas de sus páginas web. El proceso era casi siempre frustrante y difícil. Por esta razón se incorporó esta propiedad al CSS
  17. 17. Resultado ¿Qué es lo que resulta de utilizar CSS? El resultado de utilizar o insertar CSS en una página con HTML, es una página con mucho estilo ya que como se sabe CSS se utiliza para darle estructura o una visión más diferente y atractiva a utilizar puro HTML. Con CSS el usuario o el administrador del sitio web, puede crear estilos de vistas de la página dependiendo el giro de la misma, insertar mejoras y efectos visuales, que llamen la atención de los visitantes sin abusar ya que estos efectos podrían volver nuestra web más lenta. Discusión ¿Por qué utilizar HTML5 y CSS? Como se sabe existen muchos lenguajes de marcado de hipertexto, pero no todos poseen una sencillez que hace al HTML único. Utilizar HTML5 es ir evolucionando con los requisitos que cada día nos pide la web y los usuarios, como ya se mencionó antes la nueva versión del HTML incorpora nuevos elementos que hacen más sencilla la forma de plasmar la información en el sitio web. Ahora porque utilizar un lenguaje de marcado y uno de representación al mismo tiempo, sencillo la implementación de estos hace que se puedan crear paginas impactantes dependiendo de la combinación del conocimiento sobre ellos y la imaginación que tenga el desarrollador.
  18. 18. Referencias GAUCHAT, J. D. (2012). El gran libro de HTML5,CSS3 Y Javascript. Barcelona: Marcombo S.A. Hostinger, G. (2014). http://www.hostinger.es/. LUBBERS,, P., & ALBERS, B. (2008). Pro HTML5 Programming. Apress. NAVAJAS, O. A. (2010). Guia completa de CSS. Mexico: CC-BY-NC. VEGA, J. F., & VAN DER, H. C. (2011). El presente de la web, HTML5, Css3 y JavaScript. España: CL Cristalas S.A.

×