Cristalab |
- Pasar HTML a plantilla base en PHP usando Include
- Ruta estática por defecto en Redes
- Usar geolocalización con Google Maps
- #20: Cómo se hace Mejorando.la Web
| Pasar HTML a plantilla base en PHP usando Include Posted: 24 Apr 2012 01:20 AM PDT Muchos de nosotros hemos utilizado los Templates de Dreamweaver con la esperanza de facilitarnos, a futuro, la tarea de hacer cambios en partes de nuestras webs. Así, por ejemplo, si necesitamos agregar un botón al menú de un sitio de 40 páginas, hacemos dicha modificación en el template, para no tener que cambiarlo en todas las páginas, lo que nos demandaría un rato muy largo. Sin embargo, las templates de Dreamweaver pueden no ser siempre la mejor solución ni la más fácil de administrar. Es por eso que resulta mejor maquetar nuestras plantillas en un solo archivo y luego dividirlo en partes: encabezado, menu, sidebar, footer, etc., como hace Wordpress. Esto nos permite un mayor control sobre los elementos que componen nuestras páginas. Vamos a ello: Supongamos que creamos un archivo index.html, que contiene lo siguiente: Código : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Titulo de la pagina</title> </head> <body> <!--Menú--> <ul> <li>Inicio</li> <li>Quiénes somos</li> <li>Contacto</li> </ul> <!--Div con el encabezado--> <div id="encabezado"> <!--Aquí va una imagen o un logo o un swf o todo a la vez--> </div> <!--Div con el contenido--> <div id="wrapper"> <h1>Aquí va el título de la página</h1> <p>Aquí va algún texto y más abajo irían imágenes</p> </div> <!--Sidebar--> <div id="sidebar"> <p>Aquí van algunos links o publicidad</p> </div> <!--Footer--> <div id="footer"> <p>Aquí pueden ir los datos de contacto</p> </div> </body> </html> Bien, esto es lo básico, si quisiéramos crear una segunda página, digamos quienes_somos.html, simplemente grabaríamos como y, conservando la misma estructura, cambiaríamos los contenidos, principalmente el del div principal (wrapper). Pero, si el día de mañana tuviéramos que cambiar los datos del sidebar, el pie, el menú, etc., deberíamos cambiarlos en cada página. Para facilitar las cosas -y de paso no usar plantillas Dreamweaver- vamos a dividir las partes de la página en varios archivos y luego llamarlos con la sentencia include() de PHP. Lo primero será renombrar nuestro index.html a index.php. Luego, podríamos copiar, por ejemplo, el menú del sitio a un archivo llamado menu.php, que contendría sólo lo siguiente: Código : <!--Menú--> <ul> <li>Inicio</li> <li>Quiénes somos</li> <li>Contacto</li> </ul> Luego, volviendo a nuestro index.php, borraríamos el código que acabamos de copiar y, en su lugar, pondríamos: Código : <?php include("menu.php"); ?>Con esto tan simple, aparece el menú como si lo tuviéramos en la misma página. Luego, haríamos lo mismo con todas las otras partes, creando los archivos respectivos a cada sección del diseño que se repite en cada página:
Y reemplazaríamos el código en index.php, quienes_somos.php, contacto.php, etc., por su respectiva llamada Código : <?php include("encabezado.php"); ?> <?php include("menu.php"); ?> <?php include("footer.php"); ?>Así, cuando necesitáramos agregar un botón en el menú, una publicidad en el sidebar o cambiar los datos de contacto en el footer, simplemente acudiríamos a los archivos específicos, con lo cual estos cambios se mostrarían en todas las páginas. Si alguien no desea utilizar la extensión php en los archivos de sus sitio web, puede simplemente renombrarlos mediante un archivo .htaccess.
|
| Ruta estática por defecto en Redes Posted: 24 Apr 2012 12:51 AM PDT En este videotutorial, repasaremos el formato y la teoría que conforman la aplicacion de la conocida ruta estática por defecto ( Quad Zero ) y cómo nos servirá de apoyo en multitud de configuraciones de nuestras topologías de Red, haciendo la función de puerta de salida, para todos los paquetes sobre los que el dispositivo desconozca su red de destino y en la reducción de configuraciones y tamaño de las tablas de rutas, debido a la simplificación de su ID, máscara de red y el ámbito sobre el que se aplica. Saludos.
|
| Usar geolocalización con Google Maps Posted: 02 Apr 2012 02:23 AM PDT Este tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5. Nivel: Medio ¿Qué es la geolocalización?Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.  Conociendo nuestra posiciónEsta API destaca por lo fácil que es usarla. Por ejemplo: Código : <script> function localizame() { navigator.geolocation.getCurrentPosition(coordenadas); } function coordenadas(){ var latitud = position.coords.latitude; var longitud = position.coords.longitude; } </script>Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición Controlando erroresEs posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos: Código : <script> function localizame() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(coordenadas); }else{ alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!'); } } </script> Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition: Código : <script> function localizame() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(coordenadas, errores); }else{ alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!'); } } function errores(err) { if (err.code == 0) { alert("Oops! Algo ha salido mal"); } if (err.code == 1) { alert("Oops! No has aceptado compartir tu posición"); } if (err.code == 2) { alert("Oops! No se puede obtener la posición actual"); } if (err.code == 3) { alert("Oops! Hemos superado el tiempo de espera"); } } </script> Combinando la API de geolocalización con la API de Google MapsVeamos los pasos directamente sobre los comentarios del código: Código : <!DOCTYPE html> <html> <head> <title>Localizador</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/ <style> body{ font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif; } </style> </head> <body> <header> <h1>Localizador mediante HTML5</h1> </header> <section> <article> <div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/ </article> </section> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/ <script type="text/javascript"> var map; var latitud; var longitud; $(document).ready(function() { localizame(); /*Cuando cargue la página, cargamos nuestra posición*/ }); function localizame() { if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */ navigator.geolocation.getCurrentPosition(coordenadas, errores); }else{ alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!'); } } function coordenadas(position) { latitud = position.coords.latitude; /*Guardamos nuestra latitud*/ longitud = position.coords.longitude; /*Guardamos nuestra longitud*/ cargarMapa(); } function errores(err) { /*Controlamos los posibles errores */ if (err.code == 0) { alert("Oops! Algo ha salido mal"); } if (err.code == 1) { alert("Oops! No has aceptado compartir tu posición"); } if (err.code == 2) { alert("Oops! No se puede obtener la posición actual"); } if (err.code == 3) { alert("Oops! Hemos superado el tiempo de espera"); } } function cargarMapa() { var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */ var myOptions = { zoom: 17, center: latlon, /* Definimos la posicion del mapa con el punto */ mapTypeId: google.maps.MapTypeId.ROADMAP };/*Configuramos una serie de opciones como el zoom del mapa y el tipo. map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */ var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */ var marcador = new google.maps.Marker({ /*Creamos un marcador*/ position: coorMarcador, /*Lo situamos en nuestro punto */ map: map, /* Lo vinculamos a nuestro mapa */ title: "Dónde estoy?" }); } </script> </body> </html> Pincha aquí para ver el ejemplo completo.
|
| #20: Cómo se hace Mejorando.la Web Posted: 01 Apr 2012 08:41 PM PDT  ¿Viste Mejorando.la Conferencia o estuviste en el escenario? ¿Has visto alguno de los programas de Mejorando.la en vivo? Entonces sabes que somos un streaming online que habla de tecnología y la web donde todo puede fallar. En este comic te contamos qué software usamos, qué hardware compramos y cómo transmitimos Mejorando.la Web. El comic #20 Y EL RE-ESTRENO de la serie Cristalab vs. The Web: "Cómo se hace Mejorando.la Web". Si esta es tu primera vez viendo el comic, mira el comic #19: "El orgullo de mis padres" y otros anteriores. F: Bienvenidos a la segunda temporada del comic. ¿Vieron nuestra nueva sección para el comic? Es genial. Si están viendo esto en el foro, mejor vayan a la sección. El comic se ve más grande allá.
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Thanks for sharing! please dont remove comment!
ResponderEliminarCác sản phẩm có tại shop áo gia đình là ao gia dinh sản phẩm ao thun in sản phẩm ao phong tron sản phẩm ao doi với giá cạnh tranh nhất thị trường