Com fer presentacions HTML amb webslides

Luigys Toro

4 minuts

En un món on mostrar les nostres idees en la internet s'ha fet cada vegada més necessari i on la diversitat d'eines ens ha portat a crear presentacions sorprenents, que en molts casos, acaben sent incompatibles amb alguns mitjans, sens dubte, les presentacions HTML seguiran sent l'alternativa universal en aquesta àrea.

Però per a ningú és un secret, de crear presentacions HTML que siguin boniques pot ser molt llarg i requerir coneixements alguna cosa avançats pel que fa a HTML, CSS i en alguns casos JavaScript. D'aquestes problemàtiques, sorgeix una eina excel·lent anomenada webslides.

Què és webslides?

És per dir-ho d'alguna manera un «framework» de codi obert, realitzat per José Luis Antúnez, Que ens permet crear presentacions HTML de manera ràpida i fàcil. L'eina compta amb l'essencial perquè vostè realitzi les seves pròpies presentanciones, de la mateixa manera, pot prendre una de les presentacions demo i personalitzar-la al seu gust en qüestió de minuts.

Les presentacions HTML que vaig realitzar amb aquesta eina tindrà una estètica impressionant. Val la pena destacar, que aquesta eina requereix de coneixements molt bàsics d'HTML i CSS, de manera que és ideal per a tot tipus d'usuaris, dels quals només han d'enfocar en el contingut i molt poc en com s'elabora la presentació

Com descarregar webslides?

Per descarregar webslides n'hi ha prou amb realitzar la següent comanda des del teu directori favorit:

wget https://github.com/jlantunez/webslides/archive/master.zip

També pots clonar el repositori oficial amb

git clone https://github.com/jlantunez/webslides.git

Dins de la carpeta de el projecte aconseguiràs els js, css i donem necessaris per començar a crear el teu pròpies presentacions HTML fàcilment.

Com utilitzar webslides?

La major avantatge d'webslides és la seva fàcil ús, aquesta eina realment facilita crear presentacions amb diversos objectius i la seva sèrie de demo accelera el procés de creació de presentacions en un% molt alt.

Què obtenim a l'descarregar webslides?

A l'descarregar webslides accedim a diverses carpetes, on s'inclou demostracions i imatges (dispositius i logotips).

  • La carpeta css guardarà els estils de les nostres presentacions
  • A la carpeta js s'emmagatzemaran els javascripts necessaris, incloent el fonamental webslide.js que és on es realitza la mayoía de la magía.
  • Les imatges i els arxius html dels donem es guardaran en les carpetes images i donem respectivament.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Creant presentacions HTML amb webslides

Existeixen 2 avantatges fonamentals a l'hora d'utilitzar webslides, que esmentem a continuació:

  • El codi és net i escalable. A més inclou intuïtives markup amb és ús de les nomenclatures més populars. No hi ha necessitat d'utilitzar classes, o fer ús excessiu de nidificació.
  • Cada <section> en #webslides representa a una diapositives. Pel que la paginació és summament senzilla.
Slide 1  Slide 1

De la mateixa manera podem fer diapositives verticals, afegint un estil vertical





Classes que conformen el CSS de websides


    

  • Tipografia: .text-landing, .text-data, .text-intro ...
    • 

  • Colors de Fons: .bg-primary, .bg-apple, .bg-blue ...
    • 

  • Imatges de Fons: .background, .background-center-bottom ...
    • 

  • Cards: .card-50, .card-40 ...
    • 

  • Blocs flexibles: .flexblock.clients, .flexblock.metrics ...
    • 



Estenent a webslides


webslides permet que afegim nous estils i funcionalitats, per a això per exemple podem afegir alguns dels següents recursos:



Donem de presentacions HTML fetes amb webslides


Pots veure una sèrie de donem de presentacions HTML fetes amb webslides aquí. De la mateixa manera, a l'descarregar el framework pots accedir a la codificació de cada un d'aquests donem.




Donem presentanciones HTML











 

Donem Portfolios 2




 






 






 






 






 






 






Aquesta és una eina que ens permetrà crear presentacions HTML de manera ràpida i amb acabat grandiosos, però que també ens ajudarà a centrar-nos en el contingut i assolir resultats que abans no imaginàvem.


		

			







	

		
			

					

					

		
Deixa el teu comentari 
La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *
 
*



        

            *
        

		
    
			
  1. Responsable de les dades: Miguel Ángel Gatón
    2. 
			
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
    3. 
                        
  3. Legitimació: El teu consentiment
    4. 
                        
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
    5. 
			
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
    6. 
			
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.
    7. 
		



        







 


	

				

						
    
						
  1. 
							
    
					
		
    
			 			Allan Fonts va dir
			
    
				fa 7 anys
			
    
		
    

						
    
			
    Molt bo, em sembla bastant interessant l'eina encara que al meu gust reveal.js és bastant més fàcil d'utilitzar a l'ésser una eina basada en tecnologies web com HTML, CSS i JS amb tenir coneixements bàsics d'aquesta Tecnologies ja pots fer que la teva presentació sigui molt més interessant.
    

    Salutacions.
    
		
    
		
    
			Respondre Allan Fonts			
    
		
    

							
    
					
    2. 
		
  2. 
							
    
					
		
    
			 			anonymus va dir
			
    
				fa 7 anys
			
    
		
    

						
    
			
    És grat celebrar tant contingut original
    
https://www.genbeta.com/web/crea-bonitas-presentaciones-en-html-de-forma-rapida-y-sencilla-con-webslides
    
		
    
		
    
			Respondre a anonymus			
    
		
    

							
    
					
      
		
    1. 
							
      
					
		
      
			  			llangardaix va dir
			
      
				fa 7 anys
			
      
		
      

						
      
			
      Amagant-se en un perfil anònim és molt fàcil critiques i dir el que vulguis, però lamentablement és comprensible que el teu coeficient no de per mirar més enllà d'on els teus ulls arriben a veure, aquest article ha estat redactat enterament per la meva basat en la documentació oficial i en la revisió que he realitzat sobre l'eina. La quina perquè et vagis donant una idea, la vaig conèixer gràcies al fet que és l'aplicació més votada dels últims dies a github https://github.com/jlantunez/webslides... No obstant això, és molt important per a nosaltres que t'hagis pres el temps de buscar algun altre lloc on també escriguin del mateix que nosaltres, així pots aplicar a la vacant de revisor, que crec que només es quedaria en aplicante perquè dubto tinguis el criteri per decidir alguna cosa adequat.
      
		
      
		
      
			Respondre llangardaix			
      
		
      

							
      
					
      2. 

    

    3.